1.列表?
作用:布局内容排列整齐的区域。
列表分类:无序列表、有序列表、定义列表。无序列表:
作用:布局排列整齐的不需要规定顺序的区域。
标签:ul 嵌套 li, ul 是无序列表, li 是列表条目。 注意事项: • ul 标签里面只能包裹 li 标签 • li 标签里面可以包裹任何内容有序列表:
作用:布局排列整齐的需要规定顺序的区域。
标签:ol 嵌套 li, ol 是有序列表, li 是列表条目。 注意事项: • ol 标签里面只能包裹 li 标签 • li 标签里面可以包裹任何内容定义列表:
标签:dl 嵌套 dt 和 dd,dl 是定义列表,dt 是定义列表的标题,dd 是定义列表的描述 / 详情。
注意事项:
• dl 里面只能包含dt 和 dd • dt 和 dd 里面可以包含任何内容2.表格?
表格 – 基本用法:
网页中的表格与 Excel 表格类似,用来展示数据。
标签:table 嵌套 tr,tr 嵌套 td / th。
提示:在网页中,表格默认没有边框线,使用 border 属性可以为表格添加边框线。
表格结构标签 – 了解:
作用:用表格结构标签把内容划分区域,让表格结构更清晰,语义更清晰。
提示:
• 表格结构标签可以省略合并单元格:
作用:将多个单元格合并成一个单元格,以合并同类信息。 合并单元格的步骤:
1. 明确合并的目标
2. 保留 最左最上 的单元格,添加属性(取值是 数字 ,表示 需要合并的单元格数量 ) – 跨行合并,保留 最上 单元格,添加属性 rowspan – 跨列合并,保留 最左 单元格,添加属性 colspan 3. 删除其他单元格 注意:不能跨表格结构标签合并单元格(thead、tbody、tfoot)3.表单?
作用:收集用户信息。
使用场景: • 登录页面 • 注册页面 • 搜索区域 这就是表单input 标签基本使用:
input 标签 type 属性值不同,则功能不同。
<input type="......">
input 标签占位文本:
单选框 radio:
提示:name 属性值自定义。
上传文件 - file :
默认情况下,文件上传表单控件只能上传一个文件,添加 multiple 属性可以实现文件多选功能。
多选框 - checkbox:
多选框也叫复选框。
默认选中: checked 。下拉菜单:
标签:select 嵌套 option,select 是下拉菜单整体,option是下拉菜单的每一项。
默认显示第一项,selected 属性实现默认选中功能
文本域:
作用:多行输入文本的表单控件。
标签:textarea,双标签。
注意点:
• 实际开发中,使用 CSS 设置 文本域的尺寸 • 实际开发中,一般禁用右下角的拖拽功能label 标签:
作用:网页中,某个标签的说明文本。
经验:用 label 标签绑定文字和表单控件的关系,增大表单控件的点击范围。
写法一 label 标签 只 包裹 内容 , 不包裹表单控件 设置 label 标签的 for 属性值 和表单控件的 id 属性值 相同(包裹id) 写法二 使用 label 标签 包裹文字和表单控件 ,不需要属性(包裹标签) 提示:支持 label 标签增大点击范围的表单控件: 文本框、密码框、上传文件、单选框、多选 框、下拉菜单、文本域 等等。按钮 - button:
提示:
• 注意:按钮需配合 form 标签 (表单区域)才能实现对应的功能。4.语义化?
无语义的布局标签:
作用: 布局网页 (划分网页区域,摆放内容) div :独占一行 span :不换行
有语义的布局标签:
5.字符实体?
作用:在网页中显示预留字符。
提示: • lt 是 less than 的缩写 • gt 是 greater than 的缩写
结束!!!
小伙伴们,
下期见!!!!!!