第二章运用HTML5新标签优化网页

好运2024

已于 2023-10-29 13:51:05 修改

阅读量187

点赞数 5

分类专栏： html+css+javascript三剑客文章标签： html5 前端 html

于 2023-09-05 12:09:46 首次发布

本文链接：https://blog.csdn.net/2201_75876277/article/details/132686712

版权

html+css+javascript三剑客专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一.结构性标签

HTML5引入了一些新的结构性标签，主要包括以下几个：

1. `<header>`：用于网页的页眉部分。

<header>
       <h1>网站标题</h1>
</header>

2. `<nav>`：用于包含导航链接的部分。

<nav>
     <ul>
         <li><a href="#">首页</a></li>
         <li><a href="#">标题</a></li>
     </ul>
</nav>

3. `<section>`：用于划分页面的主体内容。

<section>
         <h1>什么是section?</h1>
         <h2>第一章</h2>
         <article>
                  <h2>关于</h2>
                  <p>用法</p>
          </article>
</section>

4. `<article>`：用于表示独立的文章内容。

<article>
  <h2>文章标题</h2>
  <p>文章内容</p>
  <a href="#">查看更多</a>
</article>

在<article>标签中可以放置各种HTML元素，包括标题、段落、列表、图片、引用、超链接等。通常情况下，一个<article>标签应该包含一个标题，可以使用<h1>~<h6>标签来表示，以及一个或多个段落和其他元素。需要注意的是，<article>元素本身并不会影响页面的样式，需要通过CSS样式来进行设置。

总之，<article>标签是一个非常有用的语义化标签，在编写文章、新闻等网页内容时，应该尽可能地使用它来提高页面的可读性和可访问性。

5. `<aside>`：用于包含与主要内容相关但不属于主体的内容，比如侧边栏。

<article>
  <h2>文章标题</h2>
  <p>文章内容</p>
  <aside>
    <h3>相关文章</h3>
    <ul>
      <li><a href="#">文章1</a></li>
      <li><a href="#">文章2</a></li>
      <li><a href="#">文章3</a></li>
    </ul>
  </aside>
</article>

6. `<footer>`：用于网页的页脚部分。

<footer>
  <p>© 2021 example.com</p>
  <nav>
    <ul>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">联系方式</a></li>
      <li><a href="#">加入我们</a></li>
    </ul>
  </nav>
</footer>

<footer>标签主要用于以下几个方面：表示文档的结尾或者页面的底部区域。包含版权信息、作者、联系方式等底部信息。包含相关链接、友情链接等。

7. `<main>`：用于包含页面主要内容的部分。

<body>
  <header>
    <!-- 头部区域 -->
  </header>
  
  <main>
    <!-- 主要内容区域 -->
  </main>
  
  <footer>
    <!-- 底部区域 -->
  </footer>
</body>

<main>标签主要用于以下几个方面：

表示文档或页面的主要内容区域，即主要文章、产品介绍、服务说明等内容。
通过role="main"属性，为屏幕阅读器提供更好的语义表达。
在一些特定的情况下，<main>标签可以使得页面更容易让机器学习算法解析。

二.分组标签

`<figure>`：用于定义图像、照片、图表等带有说明性文字的内容块。

<figure>
  <img src="example.jpg" alt="这里是图像的描述信息">
  <figcaption>这里是关于图像的描述信息</figcaption>
</figure>

通常，一个<figure>标签通常会带有一个描述该媒体资源的<figcaption>子标签。

`<figcaption>`：用于为`<figure>`元素定义标题或说明文字。

三.页面交互标签

HTML5中的页面交互标签主要包括：

1. `<canvas>`：用于绘制图形、动画、游戏等交互效果。

<canvas id="myCanvas" width="600" height="400"></canvas>

2. `<input>`：用于创建各种输入控件，如文本框、单选框、复选框、按钮等。

<!-- 文本输入框 -->
<input type="text" id="input-text">

<!-- 获取文本输入框的值 -->
<script>
  var inputText = document.getElementById("input-text").value;
</script>

3. `<select>`：用于创建下拉列表框。

<!-- 下拉菜单 -->
<select id="select-menu" onchange="alert('您选择了' + this.value)">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

4. `<details>标签和<summary>标签：

<details>
  <summary>点击我展开/关闭详细内容</summary>
  <p>这里是详细内容</p>
</details>

<details>标签和<summary>标签用于创建可折叠/展开的内容区域，用户可以通过单击摘要区域来切换详情的显示/隐藏状态。

<details>标签定义可以折叠/展开的内容区域，<summary>标签定义用于打开/关闭内容区域的摘要。

5.<menu>标签和<command>标签：

<command>: 定义一个菜单项。
<group>: 定义一个菜单项分组。
<menu>: 定义一个嵌套的菜单。

四.行内语义性标签

HTML5新增了一些行内语义性标签，包括：

1. `<mark>`：用于标记一段文本，通常会呈现为黄色底色。

<p>这是一段普通的文本，<mark>这里是需要高亮的部分</mark>，其他部分不需要。</p>

2. `<time>`：用于表示时间或日期。

<time>标签用于标记时间或日期。它有两个属性：datetime和pubdate。

datetime属性：用于指定时间或日期，格式为YYYY-MM-DDThh:mm:ss（ISO 8601格式），其中T表示时间，后面可以省略，例如：<time datetime="2021-11-11">11月11日</time>，指定的时间是2021年11月11日。
pubdate属性：用于指定该时间是否为文章的发布时间，当该属性存在时，表示该时间为文章的发布时间。

<time>标签内的文本内容是可选的，在某些情况下可能不需要显示时间或日期，只需要用<time>标签来标记即可。例如：

<p>这篇文章发布于<time datetime="2021-11-11" pubdate>11月11日</time></p>

使用CSS样式可以修改<time>标签的外观，例如：

<p>今天是<time datetime="2021-11-11" style="color: blue; font-weight: bold;">11月11日</time></p>

在浏览器中，<time>标签的默认外观为斜体蓝色字体，可以使用CSS样式来修改其样式。另外，<time>标签可以与其他元素一起使用，例如：

<h2>会议时间表</h2>
<ul>
  <li><time datetime="2021-11-12T14:00">14:00</time> - 开幕式</li>
  <li><time datetime="2021-11-12T15:00">15:00</time> - 演讲1</li>
  <li><time datetime="2021-11-12T16:00">16:00</time> - 演讲2</li>
</ul>

在这个例子中，<time>标签用来标记每个会议的时间。

3. `<meter>`：用于表示度量衡或百分比值。

<meter>标签用于表示一个已知范围内的数值或进度。它有以下属性：

value：用于指定当前数值，是必需的属性。
min：用于指定最小值，默认为0。
max：用于指定最大值，默认为1。
low：用于指定低值，用于给出一个低数值的范围。
high：用于指定高值，用于给出一个高数值的范围。
optimum：用于指定最佳值，表示最好的数值。

<meter>标签的文本内容是可选的，通常用来显示当前数值。例如：

<meter value="60" min="0" max="100">60%</meter>

这个例子中，<meter>标签表示一个范围在0到100之间的数值，当前值为60，文本内容为60%。浏览器会自动根据当前值和范围来显示进度条。

除了使用默认样式外，也可以使用CSS样式来自定义<meter>标签的样式。例如：

<meter value="60" min="0" max="100" style="width: 200px; height: 20px; border: 1px solid #ccc;"></meter>

这个例子中，<meter>标签的宽度为200像素，高度为20像素，边框为1像素实心线，看起来像是一个进度条。

<meter>标签也支持一些JavaScript的事件，如onmouseover、onmouseout、onclick等，用法与其他元素相同。

4. `<progress>`：用于表示任务的进度

<progress value="0.6" max="1"></progress>

这些标签不仅可以帮助开发者更好地描述文本的含义，还可以提高文本的可访问性和可用性。同时，由于这些标签都是行内元素，因此可以方便地嵌入到其他块级元素中。

五.HTML5的全局属性

HTML5中新增了一些全局属性，这些属性可以用于所有的HTML标签，包括：

1. `class`：为元素定义一个或多个类名。

class是HTML中的一个属性，用于给元素设置样式类名。通过设置class属性，我们可以对同类元素进行样式的统一设置，从而方便管理和维护。

例如，我们可以将所有段落元素的样式设置为相同的，然后在CSS中为该类定义样式：

<p class="my-paragraph">这是一个段落。</p>
<p class="my-paragraph">这是另一个段落。</p>

.my-paragraph {
  font-size: 16px;
  margin: 10px;
  color: #333;
}

在上面的例子中，我们给两个段落元素设置了相同的类名my-paragraph，然后在CSS中定义了该类的样式，包括字体大小、外边距和文本颜色等。这样，所有使用my-paragraph类名的段落元素都会使用这些样式。一个元素可以有多个类名，这些类名之间用空格分隔。例如：

<p class="my-paragraph highlight">这是一个高亮的段落。</p>

在上面这个例子中，这个段落元素有两个类名，分别是my-paragraph和highlight。在CSS中，我们可以根据这些类名设置该元素的样式。

使用class属性可以大大提高样式的复用性和可维护性，使得CSS的管理更加简单和清晰。

2. `contenteditable`：设置元素内容是否可编辑。

<p contenteditable="true">这是一段可编辑的文本。</p>

contenteditable属性是一个HTML5属性，它允许将任何 HTML 元素（如段落、列表、表格等）设置为可编辑内容。设置 contenteditable="true" 属性后，用户便可以在浏览器中直接编辑标记的内容，就像编辑文本文件一样。

3. `hidden`：隐藏元素。

hidden是HTML中的一个属性，用于隐藏元素。当hidden属性被设置为true或者不指定属性值时，元素就会被隐藏，不会在渲染时显示出来。

例如：

<div>
  <p>This paragraph is visible.</p>
  <p hidden>This paragraph is hidden.</p>
  <p hidden="hidden">This paragraph is also hidden.</p>
</div>

在上面的例子中，第二个和第三个段落元素都设置了hidden属性，这两个元素都会被隐藏，不会在页面上显示出来。第一个段落元素没有设置hidden属性，所以它会正常显示。

在CSS中，我们也可以通过设置display属性为none来隐藏元素，和hidden属性的效果是一样的。但是使用hidden属性有一些优势，例如可以在JavaScript中通过设置hidden属性来控制元素的显示和隐藏。

需要注意的是，即使元素被隐藏了，它仍然存在于DOM中，并且可以通过JavaScript访问和操作。

4. `id`：为元素定义唯一的标识符。

id是HTML中用于给元素设置唯一标识符的属性。它通常被用来在CSS和JavaScript中引用特定的元素。一个HTML文档中，id属性的值应该是唯一的，不应该有两个或多个元素使用相同的id值。

例如：

<div id="header">
  <h1>Welcome to my website</h1>
</div>

在上面的例子中，div元素被设置了id属性，属性值为"header"。这样我们就可以在CSS中通过#header选择器来选择这个元素，并设置它的样式。在JavaScript中，我们也可以通过getElementById方法来获取这个元素的引用，实现对元素的操作。

需要注意的是，id属性只能用于一个元素。如果有多个元素需要设置相同的样式或实现相同的操作，应该使用class属性。

5. `style`：为元素定义内联样式。

<style>标签是用于定义HTML文档中元素的样式的标签，通常放置在<head>标签中。在<style>标签中，可以使用CSS语法来定义各种样式，如颜色、字体、边框等。

例如，以下代码使用<style>标签来定义一个样式，将所有的<h1>元素的文本颜色设置为红色：

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to my website</h1>
  </body>
</html>

在上面的例子中，<style>标签包含了CSS代码，其中h1选择器指定了应用这个样式的元素为所有的<h1>元素，color属性则设置了这些元素的文本颜色。

值得注意的是，<style>标签只能用于定义HTML文档中的样式，不能用于定义JavaScript或其他类型的代码。另外，在实际开发中，为了避免样式冲突和提高代码可维护性，通常会将样式单独抽取为一个外部CSS文件，再通过<link>标签引入到HTML文档中。

6. `tabindex`：为元素定义tab键顺序。

tabindex是一个HTML属性，可以使用它来定义HTML页面中元素的顺序。它用于控制当用户使用Tab键遍历页面上可操作元素的顺序。tabindex属性可以应用于绝大多数HTML元素，如按钮、链接、文本框和表单等。它的取值可以为以下几种：

-1：元素永远不会被聚焦，不论是通过键盘还是通过脚本。
0：元素可以被通过JavaScript聚焦，并且可以通过Tab键聚焦。
1：元素可以被通过JavaScript聚焦，并且可以通过Tab键聚焦。同样，如果多个元素都设置了tabindex则会按照它们的tabindex顺序聚焦。

例如，下面的代码将定义两个带有tabindex属性的按钮：

<button tabindex="1">Button 1</button>
<button tabindex="2">Button 2</button>

在上述代码中，Button 1和Button 2被指定了不同的tabindex值，因此它们在页面上的聚焦顺序将取决于它们的tabindex值。具有更高tabindex值的元素首先获得焦点。在本例中，首先聚焦Button 1，然后按Tab键将聚焦到Button 2。

8. `accesskey`：定义访问元素的快捷键。

accesskey是一个HTML属性，它用于为页面中的元素定义访问键。访问键是一种用于在不使用鼠标的情况下，通过键盘快速访问网页内容的技术。

当用户按下定义的访问键时，浏览器将焦点移到相应的元素上。这可以帮助用户更快地使用并访问页面上的功能。

accesskey属性可以用于绝大多数HTML元素，如按钮、链接、表单元素和一些其他元素。它的取值是一个单个字符，表示为键盘上的一个字符或符号。例如：

<button accesskey="s">保存</button>
<a href="#" accesskey="h">首页</a>

在上述代码中，accesskey属性被用于为按钮和链接定义了不同的访问键。在此示例中，用户可以通过按下Alt + S键来快速访问保存按钮，通过按下Alt + H键来快速访问首页链接（在Windows系统中）。

请注意，accesskey属性的具体实现取决于不同的浏览器和操作系统。不同的浏览器可能使用不同的键组合来激活访问键。在某些情况下，用户可能需要同时按下多个键才能使用访问键。

9. `draggable`：定义元素是否可拖拽。

draggable是一个HTML5属性，可以应用于某些元素，将其设置为可拖动的。该属性可以表示元素是可以被用户拖动的，也意味着该元素可以成为拖动操作的源对象。

将draggable属性设置为true，可以使元素可拖动。例如，下面的代码会使一个图像具有拖动功能：

<img src="image.png" draggable="true" />

一个可拖动的元素有以下默认行为：

当用户按住鼠标左键并拖动元素时，元素会被拖拽。
当元素被拖拽到另一个可放置的位置时，浏览器将显示一个可接受放置元素的指示器。
当用户释放鼠标按钮时，元素将被放置在拖放操作的目标位置上，也就是悬停的元素下方。

draggable属性还可以设置为false，表示元素不可拖拽。如果没有设置该属性，则默认情况下该元素是不可拖动的。在实现拖放操作的场景中，还需要使用ondragstart、ondragover、ondrop等相关事件来实现交互逻辑。

10. `dropzone`：定义拖拽时可放置元素的区域。

dropzone是一个HTML5属性，可以应用于某些元素，表示该元素可以接受拖放操作。该属性可以表示一个可接受拖放数据的区域，通常用户可以将拖动的数据或文件放置到该区域中。

将dropzone属性设置为true，可以使元素成为拖放目标，例如：

<div dropzone="true"></div>

一般地，拖放操作涉及到三个事件：dragstart，dragover和drop。在dragover事件中，通常需要阻止默认行为以便能够接受拖放，例如：

function allowDrop(event){
  event.preventDefault();
}

而在drop事件中，可以通过获取拖放数据并进行处理，例如：

function drop(event){
  event.preventDefault();
  var data = event.dataTransfer.getData("text");
  // 对数据进行处理
}

需要注意的是，如果需要支持文件的拖放操作，需要将dropzone属性设置为"copy"或"move"之一，例如：

<div dropzone="copy"></div>

copy表示拖放的文件复制到该区域，而move表示拖放的文件移动到该区域。

11. `lang`：定义元素内容的语言。

lang标签是HTML语言标签之一，用于指定一个HTML元素的语言。lang标签通常应用于在多语言环境下的网站中，以便搜索引擎和屏幕阅读器等工具能够正确处理页面中的文本内容。

lang属性的使用方法非常简单，只需将其设置为要显示的语言代码即可。例如：

<p lang="en">Hello world!</p>

在上述示例中，lang属性被设置为"en"，表示该段落中包含的文本是英语。其他常见的语言代码包括"zh"（中文）、"ja"（日语）、"fr"（法语）等。若要使用特定区域的语言代码，也可以在语言代码后面加上"-xx"，其中"xx"表示区域代码。

除了可以应用于文本元素，lang属性还可以应用于其他的HTML元素，如表单元素、标题等。对于包含多种不同语言的页面，应尽可能多地使用lang属性，以确保页面内容以正确的语言呈现给用户。

12. `spellcheck`：定义元素是否需要拼写检查。

spellcheck标签是HTML语言标签之一，用于指定一个元素是否应该启用拼写检查。这个属性主要应用于文本输入框和可编辑的元素，如<input>、<textarea>和<div>等。

默认情况下，大多数浏览器会自动启用拼写检查，但是使用spellcheck属性可以对其进行控制。如果将spellcheck属性设置为true，则表示启用拼写检查，如果设置为false，则表示禁用拼写检查。例如：

<textarea spellcheck="true"></textarea>

在上述示例中，spellcheck属性被设置为true，表示启用拼写检查。如果设置为false，则不会进行拼写检查。需要注意的是，spellcheck属性只能被支持该属性的浏览器所识别。如果在不支持该属性的浏览器中使用了该属性，该属性将被视为未知属性，并可能导致意外的行为。因此，应该谨慎使用该属性。

13. `autofocus`：定义元素加载时是否自动聚焦。

autofocus是一个HTML属性，用于控制页面加载时自动将焦点设置到指定的元素上，使其获得光标并准备接受输入。这个属性可以用于各种类型的表单元素，如input、textarea等。

例如，在下面的示例中，input元素被设置为自动聚焦：