HTML常用标签的使用及属性（包括HTML5新增标签）

本文链接：https://blog.csdn.net/laisy334514/article/details/118971510

1.基础标签

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

1.<html></html>

告知浏览器其自身是一个html文档----所有之后书写的页面相关代码都应放在其中

2.<head></head>

头部标签----包含一些文档的属性信息，不会展示给用户

3.<body></body>

文档的主体----展示给用户的页面内容都写在此处

4.<meta></meta>

提供有关页面的元信息

5.<title></title>

文档的标题----写在该标签中的内容会展示在如图（百度_百度搜索）中位置

2.常用标签

1.<a></a>超链接

语法：<a href="跳转目标(例如：https://www.baidu.com)" target="弹出方式"> 文本/图像 </a>

target:用于指定链接的打开方式

_self为默认打开方式

_blank为在新窗口中打开

href="#" 表示空链接

href="文件.zip" 表示下载链接

2.表格标签

<!-- 表格 -->
  <table border="1" cellspacing="0" width="500" height="240">
    <!-- 表头 -->
    <thead>
      <!-- 行 -->
      <tr height="80">
        <!-- 表头单元格：加粗，居中 -->
        <th>表头</th>
        <!-- 跨列合并 -->
        <th colspan="2">表头</th>
      </tr>
    </thead>
    <!-- 主体部分 -->
    <tbody>
      <tr>
        <!-- 普通单元格 -->
        <!-- 跨行合并 -->
        <td rowspan="2"></td>
        <td>普通</td>
        <td></td>
      </tr>
      <tr>
        <!-- 普通单元格 -->
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>

1.<table></table>----用于定义表格的标签

2.<thead></thead>----头部

3.<tbody></tbody>----主体区

4.<tr></tr>----用于定义表格的行

5.<td></td>----单元格

6.<th></th>----表头单元格，里面的文字会加粗居中

7.表格属性

align----表格相对周围元素的对齐方式

border----有没有边框1或者" "(没有)

cellpadding----单元边沿与其内容之间的空白（默认是1px）

cellspacing----单元格之间的空白（默认2px）

合并单元格：跨行----rowspan="个数" （写在要合并的最上侧单元格）

跨列----colspan="个数"（写在要合并的最左侧单元格）

3.列表标签

1.无序列表

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

<ul></ul>-----声明为无序列表

<li></li>-----列表项

2.有序列表

<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ol>

<ol></ol>-----声明为无序列表

<li></li>-----列表项

3.自定义列表

 <dl>
    <dt>名词1</dt>
    <dd>名词解释1</dd>
    <dd>名词解释2</dd>
    <dd>名词解释3</dd>
    <dt>名词2</dt>
    <dd>名词解释1</dd>
    <dd>名词解释2</dd>
    <dd>名词解释3</dd>
 </dl>

4.表单标签

<form action="https:www.baidu.com">
    文本框：<input type="text"><br>
    密码框：<input type="password"><br>
    单选按钮：<input type="radio"><br>
    复选框: <input type="checkbox"><br>
    提交按钮：<input type="submit"><br>
    重置按钮：<input type="reset"><br>
    按钮: <input type="button"><br>
    上传文件: <input type="file">
</form>

1.<form></form>表单域

会把它范围内的表单元素信息提交给服务器

属性：action="url地址"

method="提交方式(get/post)"

name="表单域名称"

2.<input></input>

用于收集用户信息

name属性：可以区别不同的控件（例如radio当名字相同时可以实现多选一）

value属性：定义input的值

checked属性：checked规定此input元素首次加载被选中

maxlength属性：输入最大长度

3.<label></label>

绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（或光标）转到对应的表单元素上，用来增加用户体验。

核心：（绑定）label标签的for属性应当与相关元素的id相同

<label for="choose">
    请输入内容：
    <input type="text" id="choose">
</label>

这样在点击“请输入内容时”就会将光标定到后面的输入框了

4.<select></select>

请选择：<select>
    <option>选项1</option>
    <option selected="selected">选项2</option>
    <option>选项3</option>
</select>

在<option>中定义selected="selected"表示该项默认被选中，例如上面的选项2默认被选中

5.<textarea></textarea>

定义多行文本输入

属性：cols="每行中的字符数"

rows="显示的行数"

5.<div></div>和<span></span>标签

没有语义，就是一个盒子

div默认一行只有一个

span默认一行可以有多个

3.文本标签

1.<h1></h1>~<h6></h6>

2.<p></p>----段落标签

3.<em></em>和<i></i>

都是斜体：但是em有强调语义

4.<strong></strong>和<b></b>

都是加粗：但是strong有强调语义

5.<br/>----强制换行

4.HTML5新增语义化标签

1.<header></header>----头部

2.<nav></nav>----导航

3.<article></article>----内容

4.<section></section>----定义文档某个区域

5.<aside></aside>----侧边栏标签

6.<footer></footer>----尾部标签

5.HTML5新增的多媒体标签

1.音频

<audio></audio> =>支持wav,mp3,ogg格式

语法：<audio src="文件地址" controls="controls"></audio>

常见属性：autoplay : autoplay -----视频就绪自动播放

controls : controls -----向用户显示播放控件

loop : loop -----循环播放

src : url -----文件地址

2.视频

<vedio></vedio> =>支持mp4,webm,ogg格式

语法：<vedio src="文件地址" controls="controls"></vedio>

常见属性：autoplay : autoplay -----视频就绪自动播放

controls : controls -----向用户显示播放控件

loop : loop -----循环播放

src : url -----文件地址

preload : auto(预先加载）| none ------如果有autoplay就忽略该属性

poster : imgurl -----加载等待的画面图片

muted : muted -----静音播放

width | height -----宽高

6.HTML5新增input类型

验证时必须添加form表单域 submit提交后验证

7.HTML5新增表单属性

required : required ----规定该项是否必填

placeholder : 提示文本

autofocus : autofocus ----页面加载完成自动聚焦到指定表单

autocomplate : off | on ----记录以前提交过的字段（必须有name属性）

multiple : multiple ----可以多选文件提交

感受：是小花第一次写，真不容易哈哈，如有不足之处希望大家多多指点。所有内容的学习都来源于黑马的pink老师，这里只是总结的一个笔记。