HTML学习 - 标签总结

HTML学习 - 标签总结

    • 1. 基本骨架
    • 2. 排版标签
      • 2.1 标题标签
      • 2.2 段落标签
      • 2.3 换行标签
      • 2.4 水平分割线标签
    • 3. 文本格式化标签
    • 4. 媒体标签
      • 4.1 图片标签
        • 4.1.1 图片属性
          • 4.1.1.1 src
          • 4.1.1.2 alt
          • 4.1.1.3 title
          • 4.1.1.4 width 和 height
      • 4.2 音频标签
      • 4.3 视频标签
    • 5. 链接标签
      • 5.1 标签属性
        • 5.1.1 target属性
    • 6. 列表标签
      • 6.1 无序列表
      • 6.2 有序列表
      • 6.3 自定义列表
      • 6.4 去掉列表的符号
    • 7. 表格标签
      • 7.1 表格基本标签
        • 7.1.1 table标签属性
        • 7.1.2 tr、td属性
      • 7.2. 表格标题和表头单元格标签
      • 7.3. 表格的结构标签
    • 8. 表单标签
      • 8.1 input系列标签
        • 8.1.1 input text类型属性
        • 8.1.2 input radio类型属性
        • 8.1.3 input file类型属性
        • 8.1.4 form 父标签(使input中的提交、复位按钮生效)
      • 8.2 按钮标签
      • 8.3 select 下拉菜单标签
      • 8.4 textarea 文本域标签
      • 8.5 label标签
    • 9. 语义化标签
      • 9.1 没有语义的标签
      • 9.2 有语义的布局标签(手机网页常用)
    • 10. 字符实体

1. 基本骨架

<head>
    <title>Documenttitle>
head>
<body>
	
  	内容
body>
html>

显示如下:
HTML学习 - 标签总结_第1张图片

2. 排版标签

2.1 标题标签

HTML学习 - 标签总结_第2张图片

2.2 段落标签

HTML学习 - 标签总结_第3张图片

2.3 换行标签

HTML学习 - 标签总结_第4张图片

2.4 水平分割线标签

HTML学习 - 标签总结_第5张图片

3. 文本格式化标签

HTML学习 - 标签总结_第6张图片

4. 媒体标签

4.1 图片标签

HTML学习 - 标签总结_第7张图片
HTML学习 - 标签总结_第8张图片

4.1.1 图片属性
4.1.1.1 src

HTML学习 - 标签总结_第9张图片
HTML学习 - 标签总结_第10张图片
HTML学习 - 标签总结_第11张图片
HTML学习 - 标签总结_第12张图片

4.1.1.2 alt

HTML学习 - 标签总结_第13张图片

4.1.1.3 title

HTML学习 - 标签总结_第14张图片

4.1.1.4 width 和 height

HTML学习 - 标签总结_第15张图片

4.2 音频标签

HTML学习 - 标签总结_第16张图片

4.3 视频标签

HTML学习 - 标签总结_第17张图片

5. 链接标签

HTML学习 - 标签总结_第18张图片
注意: href=“#” 表示空链接

5.1 标签属性

5.1.1 target属性

HTML学习 - 标签总结_第19张图片

6. 列表标签

在这里插入图片描述

6.1 无序列表

HTML学习 - 标签总结_第20张图片

6.2 有序列表

HTML学习 - 标签总结_第21张图片

6.3 自定义列表

HTML学习 - 标签总结_第22张图片

6.4 去掉列表的符号

如:
去掉前:
HTML学习 - 标签总结_第23张图片
HTML学习 - 标签总结_第24张图片
去掉后:
HTML学习 - 标签总结_第25张图片

7. 表格标签

7.1 表格基本标签

HTML学习 - 标签总结_第26张图片

7.1.1 table标签属性

HTML学习 - 标签总结_第27张图片

7.1.2 tr、td属性

HTML学习 - 标签总结_第28张图片

7.2. 表格标题和表头单元格标签

HTML学习 - 标签总结_第29张图片

7.3. 表格的结构标签

HTML学习 - 标签总结_第30张图片

8. 表单标签

8.1 input系列标签

HTML学习 - 标签总结_第31张图片

8.1.1 input text类型属性

HTML学习 - 标签总结_第32张图片

8.1.2 input radio类型属性

HTML学习 - 标签总结_第33张图片

8.1.3 input file类型属性

HTML学习 - 标签总结_第34张图片

8.1.4 form 父标签(使input中的提交、复位按钮生效)

HTML学习 - 标签总结_第35张图片
提示: 修改按钮显示文字使用value属性;
HTML学习 - 标签总结_第36张图片

8.2 按钮标签

HTML学习 - 标签总结_第37张图片

8.3 select 下拉菜单标签

HTML学习 - 标签总结_第38张图片
提示: 不加selected默认选中第一个;
HTML学习 - 标签总结_第39张图片

8.4 textarea 文本域标签

HTML学习 - 标签总结_第40张图片

8.5 label标签

HTML学习 - 标签总结_第41张图片HTML学习 - 标签总结_第42张图片

9. 语义化标签

9.1 没有语义的标签

在这里插入图片描述

9.2 有语义的布局标签(手机网页常用)

HTML学习 - 标签总结_第43张图片

10. 字符实体

HTML学习 - 标签总结_第44张图片

你可能感兴趣的:(html,html,学习,前端)