HTML常用标签的使用

文章目录

• HTML常用标签的使用
• • 1.排版标签
  • • 1.1 标题标签（h）
    • 1.2 段落标签（p）
    • 1.3 换行标签（br）
    • 1.4 水平线标签（hr）
  • 2.文本格式化标签（strong、ins、em、del）
  • 3.媒体标签
  • • 3.1 图片标签(img、src、alt、width、height)
    • 3.2 路径标签
    • 3.3 音频标签(audio、controls、autoplay、loop)
    • 3.4 视频标签(video)
  • 4.链接标签(a、href、_ blank、_ self)
  • 5.列表标签
  • • 5.1 无序列表(ul)
    • 5.2 有序列表(ol)
    • 5.3 自定义列表(dl)
  • 6.表格标签
  • • 6.1 表格的基本使用(table、tr、td、border、caption、th)
    • 6.2 表格标题和表头单元格标签(caption、th)
    • 6.3 表格的结构标签(thead、tbody、tfoot)
    • 6.4 合并单元格(rowspan、colspan)
  • 7.表单标签
  • • 7.1 input基本标签(text、password、radio、checkbox、file)
    • 7.2 input文本框占位符(placeholder)
    • 7.3 input单选功能和默认选择(radio、name、checked)
    • 7.4 input上传多个文件(file、multiple)
    • 7.5 input按钮(submit、reset、button)
    • 7.6 button按钮
    • 7.7 select下拉菜单标签
    • 7.8 表单文本域
    • 7.9 lable标签
  • 8.语义化标签(div、span)
  • 9.字符实体标签
  • 10.综合案例
  • • 10.1 优秀学生信息表格
    • 10.2 恋爱信息表单

1.排版标签

1.1 标题标签（h）

代码形式：h系列标签

一级标题
二级标题
三级标题
四级标题
五级标题
六级标题

语义：1~6级标签，重要程度依次递减

特点：

• 文字都加粗
• 文字由h1~h6文字逐渐变小
• 独占一行

1.2 段落标签（p）

代码形式：

我是一段文字

语义：段落

特点：

• 段落之间存在间隙
• 独占一行

补充：当我们段落写的文字太多了，可以在VSCode的查看选项中选择自动换行，这样就可以让文字显示在一个界面里，而不至于拖动滑轮去查看文字内容

1.3 换行标签（br）

代码形式：

...一段文字
...一段文字

语义：换行

特点：

• 单标签
• 让文字强制换行

 



一级标题
二级标题
我是第一段
文字
 
我是第二段文字
 

1.4 水平线标签（hr）

代码形式：

语义：主题的分割转换

特点：

• 单标签
• 在页面中显示一条水平线

 



一级标题
二级标题
我是第一段
文字
 
我是第二段文字
 

2.文本格式化标签（strong、ins、em、del）

标签分类：

以前的标签：

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线

现在的标签：推荐使用新标记，表示的强调语义更强烈！

标签	说明
strong	加粗
ins	下划线
em	倾斜
del	删除线

语义：突出重要性的强调语境

b标签加粗
strong标签加粗
u标签下划线
ins标签下划线
i标签倾斜
em标签倾斜
s标签删除线
del标签删除线

3.媒体标签

3.1 图片标签(img、src、alt、width、height)

代码形式：

特点：

• 单标签
• img标签需要显示对应的效果，需要借助标签的属性进行设置
• 这里的属性是指标签属性，比如img中的：src、alt叫属性名，" "中的叫属性值

属性的特点：

1. 标签的属性写在开始标签内部
2. 标签上可以同时存在多个属性
3. 属性之间以空格分开
4. 标签名与属性之间必须以空格隔开
5. 属性之间没有顺序之分

3.2 路径标签

路径可以分为：绝对路径、相对路径

1. 绝对路径：指目录下的绝对位置，通常从盘符开始的路径。如：C:\data\images\1.png
2. 相对路径：从当前文件开始出发找目标文件的过程。如：\images\1.png

相对路径写法：或者，./表示当前的意思，…/表示上一级的意思

3.3 音频标签(audio、controls、autoplay、loop)

代码：

音频标签目前支持三种格式：MP3、Wav、0gg

3.4 视频标签(video)

视频标签目前支持三种格式：MP4、WebM、Ogg

4.链接标签(a、href、_ blank、_ self)

注：a标签叫超链接标签，href是跳转属性，给地址的

 



跳转到百度跳转本地1.png图片

5.列表标签

5.1 无序列表(ul)

1. ul标签定义一个无序列表
2. li标签就是列表中每一行里的内容

 



榴莲
香蕉
苹果
哈密瓜
火龙果

5.2 有序列表(ol)

 



小姐姐：100分
小帅哥：80分
小可爱：60分

5.3 自定义列表(dl)

 



帮助中心
账户管理
购物指南

6.表格标签

6.1 表格的基本使用(table、tr、td、border、caption、th)

 



 
姓名
成绩
评语
小哥哥
100分
孩砸，真棒啊
郭德纲
150分
没有郭德纲相声早黄了没有了郭德纲，相声更黄了

6.2 表格标题和表头单元格标签(caption、th)

 



 
学生成绩单
姓名
成绩
评语
张三
100分
真棒，第一名
李四
90分
真棒，第二名
总结
郎才女貌
真棒，相亲成功
  

6.3 表格的结构标签(thead、tbody、tfoot)

 



 
学生成绩单
姓名
成绩
评语
张三
100分
真棒，第一名
李四
90分
真棒，第二名
总结
郎才女貌
真棒，相亲成功
  

我们来看这三个标签与上面三个标签效果没什么区别，但是浏览器看到这三个标签则处理效率高

6.4 合并单元格(rowspan、colspan)

 



 
学生成绩单
姓名
成绩
评语
张三
100分
真棒，第一名
李四
真棒，第二名
总结
郎才女貌
  

7.表单标签

7.1 input基本标签(text、password、radio、checkbox、file)

文本框：

密码框：

单选框：

多选框：

上传文件：

7.2 input文本框占位符(placeholder)

文本框：

7.3 input单选功能和默认选择(radio、name、checked)

性别：男女

7.4 input上传多个文件(file、multiple)

上传多个文件：

7.5 input按钮(submit、reset、button)

用户名：
密码：

7.6 button按钮

我是按钮提交按钮重置按钮普通按钮，没有任何功能

7.7 select下拉菜单标签

上海北京广州成都

7.8 表单文本域

这里是textare文本框标签

7.9 lable标签

性别： 男女

8.语义化标签(div、span)

普通文字
这是div标签
这是div标签
这是sapn标签这是sapn标签

拓展：HTML5的标签，用来做手机端的页面

9.字符实体标签

就记空格就行，忘记了直接

10.综合案例

10.1 优秀学生信息表格

年纪
姓名
学号
班级
高三
张三
110
三年二班
赵四
120
三年三班
评语
你们很优秀
 

10.2 恋爱信息表单

青春不常在，抓紧谈恋爱
昵称：
性别：男女
所在城市：北京上海深圳广州
婚姻状况：未婚 已婚 保密 
喜欢的类型：可爱性感御姐萝莉小鲜肉大叔
个人介绍：
我承诺
年满18岁，单身
抱着严肃的态度
真诚寻址另一半
我同意所有条款
重置