一、简单标签
标签 | 作用 |
div | 自带换行,块级显示 |
span | 语义化标签,无任何修饰效果 |
br | 换行,单标签 |
hr | 水平分割线,单标签 |
h1 ~ h6 | 标题标签,有加粗效果,h1最明显,往后依次减弱,独占一行,与上下内容有间隙 |
p | 段落标签,独占一行,与上下内容有间隙 |
strong | 文字加粗 |
em | 文字倾斜 |
ins | 下划线 |
del | 删除线 |
二、常用属性的标签
标签 | 作用 | 属性 |
a | 超链接标签 | ① href:指定链接地址 ② target:指定值为_blank跳转时可以进入新窗口,不指定默认用当前窗口跳转 |
img | 用于显示图片 | ① src:用来指定图片的路径 ② alt:图片无法显示时替换的文字 ③ title:鼠标悬浮在图片时的提示文字 |
audio | 音频标签,音乐和视频都可以指定,但是只有声音 | ① src: 指定音频的路径 ② controls显示音频的控制面板,标签的名与值一样,可以不用写值,直接写controls标识一下就可以 ③ autoplay:进入页面就自动播放 ④ loop:循环播放 ⑤ muted:静音播放 |
video | 视频标签 | ① src: 指定视频的路径 ② controls显示视频的控制面板,标签的名与值一样,可以不用写值,直接写controls标识一下就可以 ③ autoplay:进入页面就自动播放 ④ loop:循环播放 ⑤ muted:静音播放 |
三、嵌套标签
列表
分为无序列表、有序列表、定义列表
标签 | 作用 | 子标签 |
---|---|---|
ul | 无序列表标签 | li,列表中的元素项 |
ol | 有序列表标签 | li,列表中的元素项 |
dl | 定义列表标签 | dt:标题标签 dd:标题下面的元素标签 |
表格
table:
描述:表格标签
子标签:
tr:表格的行
tr 的子标签:
th:表格行中的标题列
td:表格行中的标题元素
四、表单
input:
描述:输入框
类型:
① 文本输入框 type="text" 一起使用的属性:placeholder 提示文本
② 密码输入框 type="password" 一起使用的属性:placeholder 提示文本
③ 单选框 type="radio" 一起使用的属性:name 指定分组 checked 默认选中
④ 复选框 type="checkbox" 一起使用的属性:name 指定分组 checked 默认选中
⑤ 上传文件框 type="file" 一起使用的属性:multiple 指定可以多个文件一起上传,不指定multiple 只能上传一个
select:
描述:下拉框
元素标签:option
元素标签属性:
selected指定默认选中项
value指定选中项的值
textarea:多行输入文本标签
label:标签,可以绑定文字与控件的关系,增大空间的点击范围
button:
描述:按钮标签
类型:
① 提交按钮,type="submit"
② 重置按钮,type="reset"
③ 普通按钮,type="button",可以不指定,默认就是普通按钮,结合js使用