HTML笔记——常用标签总结

太阳影的社区

发布于 2021-10-15 16:50:27

1.8K0

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页面中创建水平线，可以用来分隔内容。

注释

标签的属性

这里补充一些关于标签的属性的信息。

属性总是以名称/值的形式出现，例如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>&nbsp;</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>

CoffeeBlack hot drinkMilkWhite cold drink

自定义列表不只是一列项目，是项目和注释的组合，但是这个我也不太懂怎么用，平时也没怎么碰到，所以这里只是记录下存在这么个列表。

参考

W3School的HTML教程：绝大部分内容来自此网站，如果是初学者建议直接看这个网站的内容，我这里只是作为自己的笔记方便平时查东西用的

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-12-01 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html