建团购网站,重庆集团网站建设,福田做网站需要多少钱,网络营销方案策划01-列表
作用#xff1a;布局内容排列整齐的区域。
列表分类#xff1a;无序列表、有序列表、定义列表。
无序列表
作用#xff1a;布局排列整齐的不需要规定顺序的区域。
标签#xff1a;ul 嵌套 li#xff0c;ul 是无序列表#xff0c;li 是列表条目。
ul布局内容排列整齐的区域。
列表分类无序列表、有序列表、定义列表。
无序列表
作用布局排列整齐的不需要规定顺序的区域。
标签ul 嵌套 liul 是无序列表li 是列表条目。
ulli第一项/lili第二项/lili第三项/li……
/ul注意事项 ul 标签里面只能包裹 li 标签li 标签里面可以包裹任何内容 有序列表
作用布局排列整齐的需要规定顺序的区域。
标签ol 嵌套 liol 是有序列表li 是列表条目。
olli第一项/lili第二项/lili第三项/li……
/ol注意事项 ol 标签里面只能包裹 li 标签li 标签里面可以包裹任何内容 定义列表
标签dl 嵌套 dt 和 dddl 是定义列表dt 是定义列表的标题dd 是定义列表的描述 / 详情。
dldt列表标题/dtdd列表描述 / 详情/dd……
/dl注意事项 dl 里面只能包含dt 和 dddt 和 dd 里面可以包含任何内容 02-表格
网页中的表格与 Excel 表格类似用来展示数据。
基本使用
标签table 嵌套 trtr 嵌套 td / th。
标签名说明table表格tr行th表头单元格td内容单元格 提示在网页中表格默认没有边框线使用 border 属性可以为表格添加边框线。 table border1 styleborder-collapse: collapse;trth姓名/thth语文/thth数学/thth总分/th/trtrtd张三/tdtd99/tdtd100/tdtd199/td/trtrtd李四/tdtd98/tdtd100/tdtd198/td/trtrtd总结/tdtd全市第一/tdtd全市第一/tdtd全市第一/td/tr
/table表格结构标签-了解
作用用表格结构标签把内容划分区域让表格结构更清晰语义更清晰。
标签名含义特殊说明thead表格头部表格头部内容tbody表格主体主要内容区域tfoot表头底部汇总信息区域 提示表格结构标签可以省略。 合并单元格
作用将多个单元格合并成一个单元格以合并同类信息。
合并单元格的步骤
明确合并的目标保留最左最上的单元格添加属性取值是数字表示需要合并的单元格数量 跨行合并保留最上单元格添加属性 rowspan跨列合并保留最左单元格添加属性 colspan 删除其他单元格
table border1theadtrth姓名/thth语文/thth数学/thth总分/th/tr/theadtbodytrtd张三/tdtd99/tdtd rowspan2100/td !-- 从该行起往下合并一行总共两行 --td199/td/trtrtd李四/tdtd98/td!-- td100/td --td198/td/tr/tbodytfoottrtd总结/tdtd colspan3全市第一/td!-- td全市第一/tdtd全市第一/td --/tr/tfoot
/table注意不能跨表格结构标签合并单元格thead、tbody、tfoot。 03-表单
作用收集用户信息。
使用场景
登录页面注册页面搜索区域
input 标签
input 标签 type 属性值不同则功能不同。
input type... type属性值说明text文本框用于输入单行文本password密码框radio单选框checkbox多选框file上传文件
input 标签占位文本
占位文本提示信息文本框和密码框都可以使用。
input type... placeholder提示信息单选框
常用属性
属性名作用特殊说明name控件名称控件分组同组只能选中一个单选功能checked默认选中属性名和属性值相同简写为一个单词
input typeradio namegender checked 男
input typeradio namegender 女提示name 属性值自定义。 上传文件
默认情况下文件上传表单控件只能上传一个文件添加 multiple 属性可以实现文件多选功能。
input typefile multiple多选框
多选框也叫复选框默认选中checked。
input typecheckbox checked 敲前端代码/input!-- 相同name值为同一个多选框的选项值value为选中框的值 --
input typecheckbox namehobby value篮球篮球/input
input typecheckbox namehobby value足球足球/input下拉菜单 标签select 嵌套 optionselect 是下拉菜单整体option是下拉菜单的每一项。
selectoption北京/optionoption上海/optionoption广州/optionoption深圳/optionoption selected武汉/option
/select默认显示第一项selected 属性实现默认选中功能。 文本域
作用多行输入文本的表单控件。
textarea placeholder默认提示文字/textarea注意点 实际开发中使用 CSS 设置 文本域的尺寸实际开发中一般禁用右下角的拖拽功能改变文本框大小 label 标签
作用网页中某个标签的说明文本。
经验用 label 标签绑定文字和表单控件的关系增大表单控件的点击范围。
写法一 label 标签只包裹内容不包裹表单控件设置 label 标签的 for 属性值 和表单控件的 id 属性值相同
input typeradio idman
label forman男/label
!-- 两者区别是上面那个点击文字‘男’可以选中这个不行只能通过点击圆点实现 --
input typeradio namesex value男男写法二使用 label 标签包裹文字和表单控件不需要属性
labelinput typeradio 女/label提示支持 label 标签增大点击范围的表单控件文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。 按钮
button type按钮/buttontype属性值说明submit提交按钮点击后可以提交数据到后台默认功能reset重置按钮点击后将表单控件恢复到默认值button普通按钮默认没有功能一般配合JavaScript使用
!-- form 表单区域 --
!-- action 发送数据的地址 --
form action用户名input typetextbrbr密码input typepasswordbrbr!-- 如果省略 type 属性功能是 提交 --button typesubmit提交/buttonbutton typereset重置/buttonbutton typebutton普通按钮/button
/form提示按钮需配合 form 标签表单区域才能实现对应的功能。 04-语义化
无语义的布局标签
作用布局网页划分网页区域摆放内容
div独占一行span不换行
divdiv 标签独占一行/div
spanspan 标签不换行/span有语义的布局标签
标签名语义header网页头部nav网页导航footer网页底部aside网页侧边栏section网页区块article网页文章
05-字符实体
显示结果描述实体名称空格nbsp;小于号lt;大于号gt;
06-综合案例一-体育新闻列表 ulliimg src./images/1.jpg alth3主帅安东尼奥回西班牙休假 国青抵达海口进行隔离/h3/liliimg src./images/2.jpg alth3梅州主帅申花有强有力的教练组 球员体能水平高/h3/liliimg src./images/3.jpg alth3马德兴:00后球员将首登亚洲舞台 调整心态才务实/h3/li
/ul07-综合案例二-注册信息 h1注册信息/h1
form action!-- 表单控件 --!-- 个人信息 --h2个人信息/h2label姓名/labelinput typetext placeholder请输入真实姓名brbrlabel密码/labelinput typepassword placeholder请输入密码brbrlabel确认密码/labelinput typepassword placeholder请输入确认密码brbrlabel性别/labellabelinput typeradio namegender 男/labellabelinput typeradio namegender checked 女/labelbrbrlabel居住城市/labelselectoption北京/optionoption上海/optionoption广州/optionoption深圳/optionoption武汉/option/select!-- 教育经历 --h2教育经历/h2label最高学历/labelselectoption博士/optionoption硕士/optionoption本科/optionoption大专/option/selectbrbrlabel学校名称/labelinput typetextbrbrlabel所学专业/labelinput typetextbrbrlabel在校时间/labelselectoption2015/optionoption2016/optionoption2017/optionoption2018/option/select--selectoption2019/optionoption2020/optionoption2021/optionoption2022/option/select!-- 工作经历 --h2工作经历/h2label公司名称/labelinput typetextbrbrlabel工作描述/labelbrtextarea/textareabrbr!-- 协议 和 按钮 --input typecheckboxlabel已阅读并同意以下协议/labelullia href#《用户服务协议》/a/lilia href#《隐私政策》/a/li/ulbrbrbutton免费注册/buttonbutton typereset重新填写/button
/form
