网站设计建设网站,wordpress 发信,与客户沟通网站建设的技巧,品牌推广的具体方法列表、表格、表单 文章目录 列表、表格、表单01-列表无序列表有序列表定义列表 02-表格表格结构标签-了解合并单元格 03-表单input 标签input 标签占位文本单选框上传文件多选框下拉菜单文本域label 标签按钮 04-语义化无语义的布局标签有语义的布局标签 05-字符实体 01-列表
…列表、表格、表单 文章目录 列表、表格、表单01-列表无序列表有序列表定义列表 02-表格表格结构标签-了解合并单元格 03-表单input 标签input 标签占位文本单选框上传文件多选框下拉菜单文本域label 标签按钮 04-语义化无语义的布局标签有语义的布局标签 05-字符实体 01-列表
作用布局内容排列整齐的区域。
列表分类无序列表、有序列表、定义列表。
无序列表
作用布局排列整齐的不需要规定顺序的区域。
标签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 里面可以包含任何内容 实例 dldt北京市/dtdd东城区/dddd西城区/dddd海淀区/dddd朝阳区/dddd丰台区/dd/dl效果
02-表格
标签table 嵌套 trtr 嵌套 td / th。 提示在网页中表格默认没有边框线使用 border 属性可以为表格添加边框线。 table border1trth姓名/thth语文/thth数学/thth总分/th/trtrtd张三/tdtd99/tdtd100/tdtd199/td/trtrtd李四/tdtd98/tdtd100/tdtd198/td/trtrtd总结/tdtd全市第一/tdtd全市第一/tdtd全市第一/td/tr
/table效果展示
表格结构标签-了解
作用用表格结构标签把内容划分区域让表格结构更清晰语义更清晰。 提示表格结构标签可以省略。 合并单元格
作用将多个单元格合并成一个单元格以合并同类信息。 合并单元格的步骤
明确合并的目标保留最左最上的单元格添加属性取值是数字表示需要合并的单元格数量 跨行合并保留最上单元格添加属性 rowspan跨列合并保留最左单元格添加属性 colspan 删除其他单元格
table border1theadtrth姓名/thth语文/thth数学/thth总分/th/tr/theadtbodytrtd张三/tdtd99/tdtd rowspan2100/tdtd199/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... input 标签占位文本
占位文本提示信息文本框和密码框都可以使用。
input type... placeholder提示信息单选框
常用属性
input typeradio namegender checked 男
input typeradio namegender 女提示name 属性值自定义。 上传文件
默认情况下文件上传表单控件只能上传一个文件添加 multiple 属性可以实现文件多选功能。
input typefile multiple多选框
多选框也叫复选框默认选中checked。
input typecheckbox checked 敲前端代码下拉菜单
标签select 嵌套 optionselect 是下拉菜单整体option是下拉菜单的每一项。
selectoption北京/optionoption上海/optionoption广州/optionoption深圳/optionoption selected武汉/option
/select默认显示第一项selected 属性实现默认选中功能。 文本域
作用多行输入文本的表单控件。
textarea默认提示文字/textarea注意点 实际开发中使用 CSS 设置 文本域的尺寸实际开发中一般禁用右下角的拖拽功能 label 标签
作用网页中某个标签的说明文本。
经验用 label 标签绑定文字和表单控件的关系增大表单控件的点击范围。
写法一 label 标签只包裹内容不包裹表单控件设置 label 标签的 for 属性值 和表单控件的 id 属性值相同
input typeradio idman
label forman男/label写法二使用 label 标签包裹文字和表单控件不需要属性
labelinput typeradio 女/label提示支持 label 标签增大点击范围的表单控件文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。 按钮
button type按钮/button!-- 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有语义的布局标签 05-字符实体
