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>&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>
  1. Coffee
  2. 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教程:绝大部分内容来自此网站,如果是初学者建议直接看这个网站的内容,我这里只是作为自己的笔记方便平时查东西用的

原文地址:https://www.cnblogs.com/yejianying/p/html_note.html