前端技术学习：语义化

一、语义化

1. 为什么要使用语义化

• 有利于构建响应式站点
• 更易查找、测试、调试
• 提高代码的可维护性
• 带来性能的提升：当你一个元素只有一个类名的时候，你的整个 HTML 代码体积都会更小

2. 语义化标签

（1）容器标签

artical

article标记标识一个可以独立于页面中其他内容的内容， 比如一个博客：

<div>
    <article>
        <h2>A blog post</h2>
        <a ...>Read more</a>
    </article>
    <article>
        <h2>Another blog post</h2>
        <a ...>Read more</a>
    </article>
</div>

在一个article标签中应该有标题标签（h1-h6）。

section

表示文档的一节。每个节都应该有一个标题标签（h1-h6）。但不可以用作通用的容器，因为我们有div了。

<section>
    <h2>A section of the page</h2>
    <p>...</p>
    <img ...>
</section>

div

看作一个容器，想必不用多说了。

（2）关于页面的标签

nav

此标记用于创建定义页面导航的标记，经常在里面放入 ol 和 ul。

<nav>
  <ol>
      <li><a href="/">Home</a></li>
      <li><a href="/blog">Blog</a></li>
  </ol>
</nav>

aside

aside标签用于添加与主内容相关的内容。例如侧边栏。

header

header表示作为简介的页面的一部分。例如，它可以包含一个或多个标题标记（h1-h6）、文章的标记行、图像。

main

页面的主要部分

footer

页脚

（3）表单（Forms）

<form action="/new-contact" method="POST">
    ...
</form>

input

<input type="text" name="username" placeholder="username">

email

password

numbers

只接受数字

<input type="number" name="a-number"  min="10" max="50" step="5">

Hidden field

通常用来存放CSRF token用于安全或身份认证、标识表单等

<input type="hidden" name="some-hidden-field" value="some-value">

submit

表单验证

<input type="text" name="username" required>

upload file

支持从将本地文件提交至服务器
multiple 支持多个文件
accept 指定文件类型： accept=".jpg, .jpeg, .png" 或 accept=“image/*”

<input type="file" name="secret-documents" multiple accept="image/*">

button

与submit不同，比如可以实现 重置 等操作

Radio buttons

Checkboxes

Date and time

。。。

（4）Select

（5）Tables

colspan ：合并row；rowspan合并列

<table>
  <thead>
    <tr>
      <th></th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Row 1</th>
      <td>Col 2</td>
      <td>Col 3</td>
    </tr>
    <tr>
      <th>Row 2</th>
      <td>Col 2</td>
      <td>Col 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td>Footer of Col 1</td>
      <td>Footer of Col 2</td>
    </tr>
  </tfoot>
</table>

（6）Multimedia tags

audio

control为内置控件，设置autoplay自动播放，设置loop视频播放完毕自动重头播放。
相关事件：

• play： when the file starts playing
• pause： when the audio playing was paused
• playing： when the audio is resumed from a pause
• ended： when the end of the audio file was reached

<audio src="file.mp3" control autoplay loop>

video

与audio类似。

（7）Iframs

<iframe src="page.html"></iframe>
<iframe src="https://site.com/page.html"></iframe>

（8）Figures

figure标签通常与img标签一同使用

<figure>
    <img src="dog.png"
         alt="A nice dog">
    <figcaption>A nice dog</figcaption>
</figure>

srcset属性设置根据像素密度或窗口宽度设置浏览器来使用响应图像。通过这种方式，它只能下载呈现页面所需的资源，例如，如果它在移动设备上，则无需下载更大的图像。其中w用来标定浏览器的宽度。
sizes可以根据浏览器视口大小响应图片大小，如果窗口大小小于500px，它将以窗口大小的100%渲染图像。如果窗口大于500px且小于900px，则以窗口大小的50%渲染图像。如果更大，图片大小为800px。

<img src="dog.png"
    alt="A picture of a dog"
    sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
    srcset="dog-500.png 500w,
               dog-800.png 800w,
             dog-1000.png 1000w,
             dog-1400.png 1400w">

（9）Picture

<picture>
  <source media="(min-width: 500w)" srcset="dog-500.png" sizes="100vw">
  <source media="(min-width: 800w)" srcset="dog-800.png" sizes="100vw">
  <source media="(min-width: 1000w)" srcset="dog-1000.png"    sizes="800px">
  <source media="(min-width: 1400w)" srcset="dog-1400.png"    sizes="800px">
  <img src="dog.png" alt="A dog image">
</picture>

（10）其他

• tabindex属性允许您更改按Tab键选择“可选”元素的顺序。默认情况下，通过使用Tab键进行导航，只有链接和表单元素是“可选择的”（您不需要在它们上设置tabindex）。
  使用tabindex=“-1”将从基于选项卡的导航中删除一个元素。
• span 是一个内联的（inline）无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时。