HTML常用标签的使用

       近期打算条理性地学习一下HTML，感受一下从入门到放弃的过程。所以，写一些文章来做一些总结，以此加深对相关知识点的理解和使用。
       HTML是一种超文本标记语言，所以入门HTML当然是从它的一些常用的标签当做切入点。接下来我会通过一些案例来详细讲解这些常用标签的使用。相关的代码都会放在我的GitHub中！强烈建议先去鄙人的GitHub中下载相关的html文件一边对照一边看接下来的内容，因为下面讲述的知识点都是以其中的案例为结构进行讲解。本文将通过两个简单地案例来展开讲述本文的知识点。下载相关文件:HTML_Tags.html,HTML_Tags2.html。

HTML_Tags.html知识点罗列：（知识点的罗列直接对应文件效果）

1.标题标签（h1~h6）

在HTML中，标题标签使用h1~h6。它们的不同之处只在于字体的大小不同，字体一次减小。

<h1 id="top">我是一个标题你爱信不信</h1>

2.分隔线标签（hr）

<hr>

3.段落标签（p）

我们需要展示一段一段文字时，我们便可以使用段落标签p，段落标签与标题标签一样会自动换行。

<p>balabalabalabalabalabalabalabalaxxxbalabalabalabalabalabalabalabala</p>

4.加粗标签（strong/b）

在界面中，我们对一小段文字进行了加粗，我们可以使用strong标签或者b标签，它们都可以达到相同的效果，但一般我们我们使用strong标签去实现加粗的功能，因为strong具有语义化，便于阅读以及seo的优化。在后面即将提及的斜体、下划线、删除等标签均鉴于此原因使用具有语义化的标签实现相关效果。

<strong>重要的事情要强调一下</strong>

5.下划线标签（ins）

下划线标签会在文字的底部添加一条下划线。

<ins>做个笔记画条下划线</ins>

6.删除标签（del）

删除标签会在文字中间添加一条直线以表示删除。

<del>我这里写错了</del>

7.图片标签（img）

图片标签是用于展示图片的标签。图片标签最常用的两个属性是src，以及alt。需要正确展示图片则需要正确的图片路径或图片地址，src的值便是图片的路径与地址，alt指代的意思是，当图片不存在时，显示的提示文案。

<img src="4.jpeg" alt="不给钱，显示广告，不存在的">

8.超链接标签（a）

超链接标签是用于跳转至其他网页的标签，标签的href属性便是需要跳转的最终链接。另一个比较重要的属性是target属性，设置target属性会告诉浏览器是开一个新界面查看目标链接的内容还是在当前界面展示目标链接的内容，需要打开新的窗口只需要赋值target属性_blank即可。

<a href="http://www.baidu.com">这么难看的广告图？我要去百度搜美女图片！！</a>
<a href="http://www.baidu.com" target="_blank">我也要去百度搜一下好看的图片，但是这张我也想看</a>

9.斜体标签（em)

斜体标签展示斜体字。

<em>我们不一样</em>

10.无序列表标签 (ul li)

无序列表标签是为了展示一组与顺序无关的列表。组合使用ul、li去展示相关的内容。

<h3>下面表扬几位同学，排名不分先后</h3>
<ul>
    <li>同学1</li>
    <li>同学2</li>
    <li>同学3</li>
</ul>

11.有序列表标签（ol li）

有序列表标签当然是展示有相关排序的内容。它是组合ol、li去展示相关内容。

<h3>最后我们看一下成绩排名</h3>
<ol>
    <li>同学4</li>
    <li>同学6</li>
    <li>同学2</li>
</ol>

本案例所涉及的常用标签就是这些，最后讲解一下锚点，设置锚点可以回到锚点的位置。设置锚点也十分简单，只要在需要设置锚点的标签设置标签的id属性的值，在需要回到锚点的地方调用该值即可。

<h1 id="top">我是一个标题你爱信不信</h1>
<a href="#top">这篇文章的标题是什么，我要跳到顶部去看看</a>

HTML_Tags2.html知识点罗列：

a.表格 （table）

该案例主要介绍table标签和form标签的相关内容。table标签的相关介绍我们以一张课程表为例逐渐展开。
首先对课程表进行分析，可以得出相关需求，这是一个含有标题、6行8列，边框颜色为橘黄色、位置居于网页中间、有一些表格需要进行合并。
在使用table标签时，我们需要结合tr、td标签进行使用。tr表示的是表的行，td表示的是表的列。最简单的表格是一行一列的表格。

<tr>
  <td>xxx</td>
</tr>

对于行列数较少的表格我们可以逐字输入，但是对于本案例来说，这样的输入过于繁琐，所以我们有简单的方式来实现几行几列的表格。

table>tr*行数>td*列数 + tab键

此时我们去浏览器查看效果是看不见任何内容的，因为我们并没有输入任何内容，并且表格并不处于我们预期的中间位置，为了能在没有任何内容的情况下看得较为直观。我们设置table标签的边框、边框的颜色、表格的宽高来得到一个没有任何内容的表格。

border="1" // 边框设置
bordercolor="orange" // 边框颜色设置
width="500" height="300" // 设置表格的宽高
align="center" // 设置表格的位置 left、center、right

通过以上设置，可以看见此时的表格效果与我们的预期还是存在表达大的差距，可以看到表格与边框、表格与表格之间均存在一定的间隔，为了消除这样的间隔我们可以设置table的cellspacing属性的值为0。

cellspacing="0"

这里，我们再为表格添加标题，我们在表格的内部使用caption标签。

<caption>课程表</caption>

最后，我们只剩下对表格的合并的需求。合并分为纵向合并（rowspan）和横向合并（colspan）。在此课程表中我们需要将2行1列和3行1列，4行1列、5行1列和6行1列进行纵向合并。则只需要在2行1列中设置rowspan属性的值为2，因为我们需要合并的是2个单元格，并把3行1列的代码注释掉即可。对于横向合并，设置colspan属性即可，其他的以此类推。

    <tr>
    <td rowspan="2">上午</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>周六</td>
    <td>周日</td>
</tr>
<tr>
    <!--<td></td>-->
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>周六</td>
    <td>周日</td>
</tr>

到这里，一个简单的课程表就完成了。

b.表单（form）

表单的案例总结起来其实就是input、fieldset、legend、form、optgroup这五个标签，因为大多标签都是input标签的一种类型。
表单的作用是用于收集用户的输入，所以input标签就变得尤为重要，但也相对简单，只需要改变input标签的type属性，就可以得到不一样的输入控件。设置checked属性的值，可以设置指定单选框的框的值为默认，具体的均可以查看源码，在input的标签前或标签后，都有相关的说明。
fieldset结合legend均用于组合表单中的相关元素，多选框select标签需要结合option标签使用。具体的可以查看源码，这里便不再赘述。

    <form action="xxx" method="get">
    <fieldset>
        <legend>哈哈哈</legend>
        username: <input type="text" maxlength="8" name="username">
        <br>
        password: <input type="password" name="pwd">
        <br><br>
        单选框： <input type="radio" name="gender" checked ="checked">男
        <input type="radio" name="gender">女
        <br><br>
        下拉列表：<select>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        <option>选项4</option>
    </select>

        多选下拉列表： <select multiple="multiple">
        <option>选我1</option>
        <option>选我2</option>
        <option>选我3</option>
        <option>选我4</option>
    </select>

        分组下拉列表：<select>
        <optgroup label="分组1"></optgroup>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        <optgroup label="分组2"></optgroup>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
    </select>
        <br><br>
        <input type="checkbox">多选框1
        <input type="checkbox">多选框2

        <br><br>
        <input type="submit">
        <br><br>
        <input type="reset">
    </fieldset>
</form>

至此，我通过三个简单的案例介绍了HTML的一些常用标签，当然HTML的标签比这多的多，当工作中需要时可以查看w3school中的相关内容。