HTML学习笔记之标签基础

1、基本标签
2、链接
3、图像
4、表格
5、列表
6、块与布局

1、基本标签

（1）标题与段落

标签 <h1> ~ <h6> 分别用于定义一至六级标题，标签 <p> 用于定义段落，它们都是块级元素，因此浏览器会自动地在标题和段落的前后添加空行

<!DOCTYPE html>
<html>
    <body>
        <h1>一级标题</h1>
        <p>在一级标题下显示的段落</p>
        <h2>二级标题</h2>
        <p>在二级标题下显示的段落</p>
        <h3>三级标题</h3>
        <p>在三级标题下显示的段落</p>
        <h4>四级标题</h4>
        <p>在四级标题下显示的段落</p>
        <h5>五级标题</h5>
        <p>在五级标题下显示的段落</p>
        <h6>六级标题</h6>
        <p>在六级标题下显示的段落</p>
    </body>
</html>

（2）注释

注释的内容虽然不会显示在页面上，但是对代码的理解却有十分重要的作用

① 普通注释

<!--注释内容-->

② 条件注释

<!--[if 这里写限定条件]>
    这里写注释内容
<![endif]-->

（3）格式化

① 一般文本格式

<!DOCTYPE html>
<html>
    <body>
        <b>粗体</b>
        <br />
        <i>斜体</i>
        <br />
        <ins>下划线</ins>
        <br />
        <del>删除线</del>
        <br />
        <big>增大字号</big>
        <br />
        <small>减小字号</small>
        <br />
        这是<sup>上标</sup>
        <br />
        这是<sub>下标</sub>
        <br />
    </body>
</html>

② 计算机代码格式

预格式 <pre> 支持固定的字母尺寸和间距，保留空格和换行，适合显示计算机代码

具有类似功能的还有键盘输入示例 <kbd>，计算机输出示例 <samp>，编程代码示例 <code>

<!DOCTYPE html>
<html>
    <body>
        <pre>
        int sum = 0;
        for (int i = 0; i < 10; i++)
            sum += i;
        cout << sum << endl;
        </pre>
    </body>
</html>

（4）引用

<q> 标签用于短引用，浏览器会自动给短引用加上双引号

<blockquote> 标签用于长引用，浏览器会自动对长引用做缩进处理

<!DOCTYPE html>
<html>
    <body>
        <p> 这是一段短引用：
            <q> Talk is cheap. Show me the code. </q>
        </p>
        <p> 这是一段长引用：
            <blockquote> Talk is cheap. Show me the code. </blockquote>
        </p>
    </body>
</html>

（5）缩略词

<abbr> 用于对缩略词进行标记，能够为浏览器、翻译系统以及搜索引擎提供有用的信息

<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

2、链接

（1）基本介绍

<a> 标签定义超链接，链接的内容可以是文本，也可以是图像，对于文本而言，其默认的样式是：

未被访问的链接为蓝色，带有下划线
已被访问的链接为紫色，带有下划线

（2）常用属性

① href

定义链接地址，它的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JS 代码段

<a href="https://www.baidu.com/">链接（显示在页面上的内容）</a>

注意：必须保证将斜杠添加到子文件夹，否则会产生意想不到的结果

② name

定义锚的名称，用于创建文档内书签，跳转到文档内指定位置，在 HTML5 中已经不再支持 name 属性，但可以使用 id 属性替代

<a name="anchorName">锚（显示在页面上的内容）</a>

下面以一个例子说明创建锚的步骤：

a、在 HTML 文档中对锚进行命名

<a name="anchor">锚的内容</a>

b、在同一个文档中创建指向该锚的链接

<a href="#anchor">指向锚的内容</a>

注意：必须在 <a> 标签内必须提供 href 属性或 name 属性

③ target

规定在何处打开目标文档，在使用 href 属性后才可以使用，其可选值如下：

_self：默认值，在相同窗口或相同框架中载入目标文档
_parent：在父窗口或父框架集中载入目标文档
_blank：在新窗口中载入目标文档
_top：在包含该超链接的整个窗口中载入目标文档
frameName：在指定的框架中载入目标文档

④ download

HTML5 中规定的 <a> 标签的新属性，定义被下载的链接目标，它的值为下载文件的名称，浏览器将自动检测正确的文件拓展名，在使用 href 属性后才可以使用

3、图像

（1）基本介绍

<img> 标签定义图像，但是 <img> 标签并不会在网页中插入图像，而是在网页上链接图像，实际上其定义的是被引用图像的占位空间

（2）常用属性

① src

必要，指定图像文件的存放位置，它的值可以是任何有效的相对或绝对 URL

<img src="/images/pic_01.jpg" />

② alt

必要，当图片无法显示时，将显示 <alt> 中定义的替代文本。

使用 alt 属性是一个良好的习惯，因为用户常常会由于各种原因而无法正常查看图片

<img src="/images/pic_01.jpg" alt="图片描述_01" />

③ height

设置图像的高度

④ width

设置图像的宽度

⑤ border

定义图像边框的宽度，单位为像素（pixels）

⑥ align

定义图像相对于周围元素的水平和垂直对齐方式，可选值如下：

left：把图像对齐到左边
right：把图像对齐到右边
middle：把图像与中央对齐
top：把图像与顶部对齐
bottom：默认值，把图像与底部对齐

注意：在 HTML5 中已经不再支持 align 属性和 border 属性，但是可以使用样式表实现类似的功能

4、表格

（1）基本介绍

<table> 标签定义表格，<th> 标签定义表头（table header），<tr> 标签定义行（table row），<td> 定义表格单元（table data），表格单元里可以包含文本、图像、列表等元素

还可以用 <caption> 标签定义表格标题，用 <thead> 标签定义表格页眉，用 <tbody> 标签定义表格主体，用 <tfoot> 标签定义表格页脚

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

（2）常用属性

① border

定义表格边框宽度，单位为 pixels，如果没有显式定义该属性，则默认不显示边框

② cellpadding

规定单元格边沿与其内容之间的空白，单位为 pixels

③ cellspacing

规定单元格之间的空白，单位为 pixels

④ frame

定义外侧边框的哪个部分可见，除了 IE，其他浏览器都支持该属性，其可选值如下：

void：不显示外侧边框
above：显示上部的外侧边框
below：显示下部的外侧边框
lhs：显示左部的外侧边框
rhs：显示右部的外侧边框
hsides：显示上部和下部的外侧边框
vsides：显示左部和右部的外侧边框
box：在所有四个边上显示外侧边框
rules：定义内侧边框的哪个部分可见，在 Firefox 中可以正确显示，其可选值如下：
- none：没有线条
- rows：位于行之间的线条
- cols：位于列之间的线条
- groups：位于行组和列组之间的线条
- all：位于行和列之间的线条

（3）常见问题

① 处理没有内容的空单元格

在某些浏览器中，对于空单元格可能没法正确显示出表格的边框，看起来十分不舒服，所以我们可以在空单元格中添加一个空格占位符  

② 处理跨行或跨列的单元格

可以在 <th>、<tr> 或 <td> 标签中使用 colspan 属性定义跨越的列数，使用 rowspan 属性定义跨越的行数

5、列表

（1）无序列表

无序列表是列表的一种，使用 <ul> 标签标记，每一个列表项为典型的粗体圆点，用 <li> 标签标记

在 <ul> 标签中有一个 type 属性，用于指定项目符符号，其可选值如下：

disc：默认值，黑色实心圆
circle：空心圆
square：黑色实心方块

（2）有序列表

同样的，有序列表也是里列表的一种，使用 <ol> 标签标记，每一个列表项为数字，用 <li> 标签标记

在 <ol> 标签中有一个 type 属性，用于指定项目符符号，其可选值如下：

1：默认值，按数字排序（1、2、3、4）
a：按小写字母排序（a、b、c、d）
A：按大写字母排序（A、B、C、D）
i：按小写罗马数字排序（i、ii、iii、iv）
I：按大写罗马数字排序（I、II、III、IV）

在 <ol> 标签中还有一个 start 属性，用于规定有序列表中的起始值

（3）自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合，自定义列表以 <dl> 标签开始，每个自定义列表项以 <dt> 开始，每个自定义列表项的定义以 <dd> 开始

6、块与布局

大多数 HTML 元素可以区分为块级元素或内联元素

<span> 是内联元素，可用作文本的容器，当与 CSS 一同使用时，可以为部分文本设置样式属性

<div> 是块级元素，当与 CSS 一同使用时，可以为内容块设置样式属性，另外还可以用于对文档进行布局，但是随着 HTML5 的出现，我们可以更多地使用基于 HTML5 的布局方法

HTML5 提供使用新的语义元素，用于定义网页的各个部分：

语义元素	描述
header	定义文档或节的页眉
nav	定义导航链接
section	定义文档中的节
article	定义独立的自包含文章
aside	定义内容之外的内容
footer	定义文档或节的页脚
details	定义额外的细节
summary	定义 details 元素的标题