我们前面已经稍微认识了网页的架构了，就像乐高一块一块堆叠起来，前一篇已经介绍的就不多赘述了。

虽然会最基础的<div>和<span>标签就能够开始切版了，甚至只靠<div>搭配 CSS 就能做出各种 tag 的效果，但为了良好的 SEO 与 阅读性，也为了以後不会把别人自己逼疯 (?，还是会建议用更适合的标签来完成网页。

什麽是 SEO？ 是 Search Engine Optimization 的缩写，中文翻译为搜寻引擎最佳化。
简单解释就是，好的 SEO 等於让搜寻引擎在茫茫网路大海中，让你更容易被搜寻到。

根据 80/20 法则，其实学会 2 成的标签，就已经能好好建构出不错的网页了，一些不常用的标签，倒也不用硬是死记，需要用时再 Google 就好 (也许根本用不到。

常用的标签

用来表示地盘的标签

这种标签最主要是用来划分区域的标签，通常会有子元素。

• <div> 没有语意的标签，也是最常使用的标签

• <header> 代表容器的头部

• <main> 代表容器主要内容

• <footer> 代表容器的底部

• <section> 代表一个段落

• <nav> 代表导航列

如图红色框使用的是 <nav>，黄色使用的是 <header>

注意 这边是用容器，代表<header>不一定要放在整个网页的最上面
也可以用<main>包住，代表主要内容的头部。

给文字（text）使用的标签

• <h1> ~ <h6> 内文的标题，数字 1 代表第一重要标题，依序往下推，最小标题为<h6>，会影响 SEO，一个网页建议只要有一个<h1>标签

• <p> & <pre> 内文区块标签，<pre>会保留格式，<p>则不会

• <span> 同样没有语意，主要是要在区块元素内套用不同 CSS 的标记标签

• <a> 能够超连结外部网站（href="网址"）、进行锚点传送（href="#id_name"）、进行网路电话（href="tel:电话号码"）或电子信箱（href="mailto:电子信箱"）
  注意 <a>标签内不能再嵌套<a>标签。

  <a href="https://www.google.com.tw/">Google 超连结</a>
  <a href="#">进行锚点传送至顶</a>
  <a href="tel:+886-987654321">进行网路电话</a>
  <a href="mailto:[email protected]">寄信给电子信箱</a>
  

Google 超连结
进行锚点传送至顶
进行网路电话
寄信给电子信箱

关於图片（image）的标签

• <img> 图片标签 src="图片网址" alt="图片说明文字"。
  注意 alt 必须填写，当图片档失效，会显示说明文字，此外还会提供给视障人士听到图片说明。

• <figure> 这也算占领地盘的标签，代表放图片的区域，子元素可以多个<img>

• <figcaption> 代表图片区域的文字介绍，可以让浏览器知道这段文字与这个图片区域有关联。

  <figure>
      <img src="https://i.imgur.com/THgsIlG.jpg" alt="hello">
      <figcaption>Hello image</figcaption>
  </figure>
  

Hello image

好用的列表（list）标签

• <ul> 用来设定无序列表

• <ol> 用来设定有序列表

• <li> 需与<ul>或<ol>搭配，用来设定列表项目

常见 的使用时机，像导航条那样，同一个内容排列的时候就很适合使用！

如图绿色框为 <ul>，红色框为 <li>

<ul>
  <li>我是无序列表 代号苹果</li>
  <li>我是无序列表 代号橘子</li>
</ul>

<ol>
  <li>我是有序列表 代号小辣椒</li>
  <li>我是有序列表 代号老姜</li>
</ol>

• 我是无序列表 代号苹果
• 我是无序列表 代号橘子

1. 我是有序列表 代号小辣椒
2. 我是有序列表 代号老姜

制作表格用的表格（table）标签

• <table> 用来设定表格

• <tr> 用来设定一列（row）

• <th> 需与<tr>搭配，表示表格标题（column）

• <td> 需与<tr>搭配，表示表格内容（column）

<table>
  <tr>
    <th>我是表格标题 报数 第一班 班头</th>
    <th>我是表格标题 报数 第二班 班头</th>
    <th>我是表格标题 报数 第三班 班头</th>
  </tr>
  <tr>
    <td>我是表格内容 报数 第一班 2 号</td>
    <td>我是表格内容 报数 第二班 2 号</td>
    <td>我是表格内容 报数 第三班 2 号</td>
  </tr>
</table>

必学的表单（form）标签

• <form> 想要把资料传给後端，就需要依靠<form>标签

• <label> 表单说明标签，这个是配合<input>标签，利用属性for="id_name"锁定<input id="id_name">

• <input> 单行输入标签，这个标签本身自闭合，本身type有很多属性值。

  • type = "text"，输入文字
  • type = "password"，输入的文字会屏蔽
  • type = "email"，输入信箱，会自动验证格式是否正确
  • type = "number"，只能输入数字
  • type = "radio"，只能单选，要添加name属性，来判断范围
  • type = "checkbox"，可以复选，要添加name属性，来判断范围
  • type = "button"，就普通的按钮
  • type = "submit"，能发送表单的按钮

<form>
  <label for="name">名字</label>
  <input id="name" type="text">
  
  <div>
    <h4>请选择性别</h4>
    <input id="male" name="gender" type="radio">
    <label for="male">男</label>
    <input id="female" name="gender" type="radio">
    <label for="female">女</label>
  </div>
  
  <div>
    <h4>请选择你拥有的技能</h4>
    <input id="html" name="skill" type="checkbox">
    <label for="html">HTML</label>
    <input id="css" name="skill" type="checkbox">
    <label for="css">css</label>
    <input id="js" name="skill" type="checkbox">
    <label for="js">Javascript</label>
  </div>
</form>

• <textarea>，多行输入标签，需要闭合标签，需要使用row和col属性，来决定大小

• <select>，下拉式选单

• <option>，下拉式选单的选项

• <optgroup>，下拉式选单的预设显示

<form>
  <label>请选择疫苗</label>
  <select>
    <option>AZ 疫苗</option>
    <option>莫德纳疫苗</option>
    <option>高端疫苗</option>
  </select>
</form>

进阶的嵌入用标签

• <ifram> 用来内嵌网页，如：Google 地图、Code pen
• <video> 用来内嵌影片档
• <audio> 用来内嵌音乐档
• <canvas> 用来实现绘图、游戏具互动性的标签

总结

虽然 HTML 很简单，但标签真的又臭又多，这只是冰山一角，还有很多属性没介绍，但前期这样也很够用了，下一篇将进入我们的 CSS 篇章！