整理一些HTML的标签

标题标签

<h2>
  副标题
</h2>

h1、h2这一类表示的正标题副标题的标签

段落标签

<p>
  段落标签
</p>

插入图片

<img src="xxx" alt="xxx">

所有的img元素必须有alt属性，alt 的属性值有两个作用，第一个作用是让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；另一个作用是当图片无法加载时，页面需要显示的替代文本

网页跳转

<a href=""> 网页跳转</a>

网页的跳转分为外部链接和内部链接，当是外部链接时，可以是对应的URL，当是内部链接时，href="#xxx"，要在xxx前加上一个#，而xxx对应的是元素的id

无序列表和有序列表

<ul>
  <li> 无序列表</li>  <!--无序列表-->
</ul>

<ol>
  <li> 有序列表</li> <!-- 有序列表-->
</ol>

文本输入框

<input type="text" placeholder="" required> <!-- 占位符文本placeholder->

input输入框是没有结束标签的

表单标签

可以只通过 HTML 来实现发送数据给服务器的表单， 只需要给 form 元素添加 action 属性即可

<form action="">
  <input type="text" required>  <!--必选字段-->
  <button type="submit">
    提交按钮
  </button>
</form>

单选和复选

每一个单选和复选都要嵌套在label标签里，设置上for属性，让其值与关联的input的id属性值相同；所有关联的单选和复选都应该有相同的name属性

<label for="danxuan"><input id="danxuan" type="radio" name="">单选</label>
<label for="fuxuan"><input id="fuxuan" type="checkbox" name="">复选</label>

提交表单时，所选项的值会发送给服务端。 radio 和 checkbox 的 value 属性值决定了发送到服务端的实际内容

<label for="danxuan"><input id="danxuan" value="danxuan" type="radio" name="">单选</label>
<label for="fuxuan"><input id="fuxuan" value="fuxuan" type="checkbox" name="">复选</label>

在input中添加checked属性表示单选和复选框有默认选择

内容划分元素

div 元素也叫内容划分元素，是一个包裹其他元素的通用容器。

<div>
  
</div>

HTML5标签

article标签

article 是一个分段标签，用于呈现独立及完整的内容。 这个标签适用于博客、论坛帖子或者新闻文章

section 元素也是 HTML5 引入的新元素，其语义与 article 略有不同。 article 用于独立且完整的内容，而 section 用于对与主题相关的内容进行分组。 它们可以根据需要来嵌套使用

header标签

header 也是一个具有语义化的、可以提升页面可访问性的 HTML5 标签。 它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容

与 main 类似，header 的语义化特性也可以让辅助工具快速定位到它的内容

nav 也是一个具有语义化特性的 HTML5 标签，它可以使屏幕阅读器快速识别出页面中的导航信息。 它用于呈现页面中的主导航链接

footer 元素也具有语义化的特性，可以让辅助工具快速定位到它。 它位于页面底部，用于呈现版权信息或者相关文档链接

audio标签

HTML5 的 audio 标签用于呈现音频内容或音频流，它也具有语义化特性

<audio id="meowClip" controls>
  <source src="audio/meow.mp3" type="audio/mpeg">
  <source src="audio/meow.ogg" type="audio/ogg">
</audio>

audio 标签支持 controls 属性， 用于显示浏览器默认播放、停止和其他控制，以及支持键盘功能。 这是一个布尔值属性，意味着它不需要一个值，它在标签上存在即开启设置

figure标签

HTML5 引入了 figure 标签以及与之相关的 figcaption 标签。 它们一起用于展示可视化信息（如：图片、图表）及其标题，通过语义化对内容进行分组并配以用于解释 figure 的文字，可以极大地提升内容的可访问性

<figure>
  <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
  <br>
  <figcaption>
    Master Camper Cat demonstrates proper form of a roundhouse kick.
  </figcaption>
</figure>

注意 figcaption 包含在 figure 标签中，并且可以与其他标签组合使用

label标签

label 标签的文本内容通常会是表单组件的名称或标签。 这些文本表明了组件的意义，也提升了表单的可访问性。 label 标签的 for 属性将标签与表单组件绑定；同时，屏幕阅读器也会读取 for 属性的属性值

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</form>

for 的属性值必须与表单组件的 id 属性值相同

fieldset标签

fieldset 标签包裹整组单选按钮，实现这个功能。 它经常使用 legend 标签来提供分组的描述，以便屏幕阅读器用户会阅读 fieldset 元素中的每个选项

<form>
  <fieldset>
    <legend> Choose one of these three items: </legend>
    <input id="one" type="radio" name="items" value="one">
    <label for="one">Choice One</label><br>
    <input id="two" type="radio" name="items" value="two">
    <label for="two">Choice Two</label><br>
    <input id="three" type="radio" name="items" value="three">
    <label for="three">Choice Three</label>
  </fieldset>
</form>

当选项的含义很明确时，如“性别选择”，fieldset 与 legend 标签可以省略。 这时，使用包含 for 属性的 label 标签就足够了

日期选择器

表单中经常出现 input 标签，它可以用来创建多种表单控件。 它的 type 属性指定了所要创建的 input 标签类型。HTML5 规范添加了 date 类型来创建日期选择器

<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">

标准化时间

HTML5 还引入了 time 标签与 datetime 属性来标准化时间。 time 元素是一个行内元素，用于在一个页面上显示日期或时间

<time datetime="2022-01-22"></time>