列表标签:
1.无序列表: 标签名 说明
Ui 表示无序列表的整体,用于包属1标签
Li 表示无序列表的每一项。用于包含每一行的内容
注意点:ui标签中只允许包含li标签;li标签可以包含任何标签
2.有序列表:标签名 说明
ol 表示有序列表的整体,用于包奥1标签
Li 表示有序列表的每一项。用于包含每一行的内警
注意点:ol标签中允许包li标签;li标签可以包含任何标签
3.自定义列表:标签名 说明
dl 表示自定义列表的整体,用于包裹dt/dd标签
dt 表示自定义列表的整体,用于包裹dt/dd标签表示自定义列表的主题
Dd 表示自定义列表的针对主题的每一项内容
注意点:dl标签中只允许dt/dd标签;dt/dd标签可以包含任何标签
表格标签:1.表格的基本标签:标签名 说明
Table 表格整体,可用于包裹多个tr
tr 表格每行,可用于包裹td
td 表格单元格,可用于包裹内容
注意点:标签的嵌套关系:table>tr>td
2.表格相关属性:属性名 属性值 效果
Border 数字 边框宽度
Width 数字 表格宽度
Height 数字 表格高度
注意点:实际开发时针对于样式效果推荐使用css效果
3.表格标题和表头单元格标签
标签名 名称 说明
Caption 表格大标题 表示表格整体大标题,默认在表格整体顶部居中位置显示
Th 表头单元格 表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示
注意点:caption标签书写在table标签内部
th标签书写在tr标签内部(用于替换td标签)
4.表格的结构标签(了解)
注意点:表格结构标签内部用于包惠tr标签
表格的结构标签可以省略
5.表格-合并单元格
注意点:
只有同一个结构标签中的单元格才能合并,不能跨结构标签合并 (不能跨: thead、tbody、tfoot)
表单标签:
input系列标签:
标签名 type属性值 说明
input text 文本框,用于输入单行文本
input password 密码框,用于输入密码
input radio 单选框,用于多选一
input checkbox 多选框,用于多选多
input file 文件选择,用于之后上传文件
input submit 提交按钮,用于提交
input reset 重置按纽,用于蛋置
input button 普通按钮,默认无功能,之后配合js添加功能
input标签可以根据type属性值得不同,展示不同的效果
占位符placeholder属性:(方框内显示)
单选框radio属性:
文件file属性:
按钮inpu属性:
注意点:如果需要实现以上功能,需要配合form标签使用
form使用方法:用form标签把表单标签一起包裹起来
Value属性:给普通按钮添加文字
button按钮标签:
注意点:谷歌里浏览器button默认是提交按钮
button标签是双标签,更便于包裹其他内容:文字,图片等
下拉菜单标签select:
标签的组成:select标签:下拉菜单的整体; option标签:下拉菜单的每一项
常见属性:selected:下拉菜单的默认选中
文本域标签textarea:
常规属性:cols:规定了文本域内可见的宽度
rows:规定了文本域内可见的行数
注意点:右下角可以拖拽改变大小;实际开发时针对于样式推荐使用css设置
label标签:(单选框时点文字照样选中)
使用方法一:
使用label标签把内容(如:文本)包裹起来在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值
使用方法二:
直接使用label标签把内容(如: 文本)和表单标签一起包裹起
需要把label标签的for属性删除即可
无语义化标签:
div标签:一行只显示一个(独占一行) spar标签:一行可以显示多个
有语义的布局标签(了解)
在html5新版本中,才推出的布局标签
标签名 语义
Header 网页头部
Nav 网页导航
Footer 网页底部
Ide 网页侧边栏
Sectior 网页区块
Article 网页文章
以上手机端的网页制作实现
注意点:以上标签显示特点和div一致,但是比div多了不同的语义
字符实体:
常见的字符实体: