HTML笔记——常用标签总结
HTML
先看下最简单的HTML文件。
<!DOCTYPE HTML>
<html>
<body>
<h1>最大号的标题</h1>
<p>一个段落。</p>
</body>
</html>
上面基本上就可以看到HTML的结构是怎么样的了。<body>标签主要用来放需要显示的内容，有点类似C文件中的程序部分，与之对应的<head>，主要用来引入写好的JavaScript脚本或者CSS文件等。<h1>、<p>分别是用于标记标题与段落的标签，分别是header与paragraph的简写，下面会着重介绍各类标签对应的含义与作用。
HTML元素
HTML元素指的是从开始标签到结束标签的代码，开始标签（start tag）也被称为开放标签（opening tag），结束标签（end tag）也被称为闭合标签（closing tag）。元素的内容就是开始和结束标签之间的内容，某些HTML元素的内容可以是空内容（empty content）。空元素在开始标签中进行关闭，如<br />，自己就是开始标签，也是结束标签。简单的元素例子：
<p>HTML标签的例子，前面的是开始标签，后面这个是结束标签。</p>
此外，大多数HTML元素可以拥有属性，例如<img src="w3school.jpg" width="104" height="142" />，这里的属性就是src。
大多数HTML元素可以嵌套，即包含其他HTML元素，如:
<body>
<p>first paragraph.</p>
</body>
另外，注意最好使用小写的标签，这是W3C万维网联盟建议的。
下面详细介绍下一些常用的标签。
标题
<h1> 一级标题 </h1>
<h2> 二级标题 </h2>
<h3> 三级标题 </h3>
h+数字，用来标记标题，数字范围是1～6。浏览器会自动在标题前后添加空行，通常块级元素都会这样额外添加空行。
另外，搜索引擎会根据标题来为网页编织索引，所以选好标题能够让你的网站更加容易出现在用户面前。
段落
<p> 段落 </p>
用来标记段落。
链接
<a href="https://www.cnblogs.com/yejianying/">简单的链接</a>
这个标签用来修饰链接，在href中填入想要跳转的地址。
图像
<img src="w3school.jpg" width="104" height="142" />
这个标签用来显示图像。
水平线
<hr />标签用来在HTML页面中创建水平线，可以用来分隔内容。
注释
<!-- 这里写入HTML的注释 -->
标签的属性
这里补充一些关于标签的属性的信息。
属性总是以名称/值的形式出现，例如name='value'，注意属性值必须加引号，可以是单引号也可以是双引号，如果属性值中就包含了双引号，那么必须使用单引号，如：name='Bill "HelloWorld" Gates'。
常用的属性：
截图来自W3School
注意不是所有的属性都可以用的，下面的属性就应当避免使用：
截图来自W3School
上面这类属性应当使用样式代替。
样式 style
简单的style例子：
<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>
这里定义了不同的标签对应的背景颜色。
背景色
例子：
<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>
使用方式如上，这个样式替代了原本的bgcolor属性。
字体颜色和尺寸
例子：
<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
以上样式替换了原本的<font>标签。
文本对齐
<html>
<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>
</html>
这个样式替换了原本的align属性。
格式化
文本格式化标签
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本。 |
| <big> | 定义大号字。 |
| <em> | 定义着重文字。 |
| <i> | 定义斜体字。 |
| <small> | 定义小号字。 |
| <strong> | 定义加重语气。 |
| <sub> | 定义下标字。 |
| <sup> | 定义上标字。 |
| <ins> | 定义插入字。 |
| <del> | 定义删除字。 |
| <s> | 不赞成使用。使用 <del> 代替。 |
| <strike> | 不赞成使用。使用 <del> 代替。 |
| <u> | 不赞成使用。使用样式（style）代替。 |
表格来自W3School
“计算机输出”标签
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码。 |
| <kbd> | 定义键盘码。 |
| <samp> | 定义计算机代码样本。 |
| <tt> | 定义打字机代码。 |
| <var> | 定义变量。 |
| <pre> | 定义预格式文本。 |
| <listing> | 不赞成使用。使用 <pre> 代替。 |
| <plaintext> | 不赞成使用。使用 <pre> 代替。 |
| <xmp> | 不赞成使用。使用 <pre> 代替。 |
表格来自W3School
引用、引用和术语定义
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写。 |
| <acronym> | 定义首字母缩写。 |
| <address> | 定义地址。 |
| <bdo> | 定义文字方向。 |
| <blockquote> | 定义长的引用。 |
| <q> | 定义短的引用语。 |
| <cite> | 定义引用、引证。 |
| <dfn> | 定义一个定义项目。 |
表格来自W3School
短引用
用<q>定义短的引用，浏览器通常会为短引用加上引号。使用的例子：
<p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p>
长引用
<blockquot>，通常是长的引用，例如说段落，通常浏览器会缩进处理。
注释
<!-- 在此处写注释 -->
就这样用，可以注释多行，相当于C/C++里面的/* */。
此外还有条件注释：
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->
这个就是只有在IE8浏览器条件下才会执行的代码，如果不是IE8浏览器，那么注释就会起作用，代码不执行。
表格
不建议直接手写表格，网络上有很多表格生成器，建议直接生成需要的表格。
<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>
上面代码的效果：
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
<table>标签用来定义表格，每个表格的行对应<tr>，每行被分割为若干个单元格<td>，td指表格数据table data，即数据单元格的内容，内容只要是前面提到的HTML元素基本都可以放进去。border是边框属性，用来决定要不要显示，显示多粗的边框。
此外，可以在表格上方添加表头：
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<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>
| Heading | Another Heading |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
注意，如果需要显示空单元格的话不能够不填写内容，应该填写一个空占位符，否则在某些浏览器里面可能无法正常显示：
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 2 |
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td> </td>
<td>row 2, cell 2</td>
</tr>
</table>
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 2 |
列表
无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
- Coffee
- Milk
有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
- Coffee
- Milk
定义列表（只是记录）
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
- Coffee
- Black hot drink
- Milk
- White cold drink
自定义列表不只是一列项目，是项目和注释的组合，但是这个我也不太懂怎么用，平时也没怎么碰到，所以这里只是记录下存在这么个列表。
参考
W3School的HTML教程：绝大部分内容来自此网站，如果是初学者建议直接看这个网站的内容，我这里只是作为自己的笔记方便平时查东西用的
