html参考手册 —— 温故而知新
HTML简介
- HTML 不是一种编程语言,而是一种用来描述网页的超文本标记语言 （ HyperText Markup Language）。
- HTML 使用标记标签来描述网页，HTML文档即网页（web 页面）。
日常使用的Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）通过读取HTML文件，并根据HTML标签来决定如何显示HTML页面的内容给用户。
HTML元素
HTML 文档由 HTML 元素定义。
- 元素的内容是起始标签（opening tag）与闭合标签（closing tag）之间的内容。
- 某些 HTML 元素具有空内容（empty content），空元素在开始标签中进行关闭（以开始标签的结束而结束）。
- 大多数 HTML 元素可拥有属性。
注意：
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
关闭空元素的正确方法是在开始标签中添加斜杠，比如<br />，HTML、XHTML 和 XML 都接受这种方式。
HTML属性
属性是 HTML 元素提供的附加信息。
- HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
- 属性一般在开始标签内描述。
- 属性总是以名称/值对的形式出现，比如：
name="value"。 - 属性和属性值对大小写不敏感，但推荐使用小写。
注意：
属性值应该始终被包括在引号内（单/双引号都可以）。
但如果属性值本身就含有双引号，那么就必须使用单引号。
例如：name='Game "of" Throne'
HTML标题
- 因为用户可以通过标题来快速浏览您的网页，所以在 HTML 文档结构中，标题是很重要的。
- 请确保将 HTML 标题
<h1>-<h6>标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。 - 搜索引擎使用标题为网页的结构和内容编制索引。
- 1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题。
HTML段落
段落标签<p></p>可以把 HTML 文档分割为若干段落。
- 浏览器会自动地在段落的前后添加空行。（
</p>是块级元素） - 如果希望在不产生一个新段落的情况下进行换行（新行），请使用
<br />标签。 - 在 HTML 代码中，无法通过添加额外的空格或换行来改变输出的效果。
- 当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被显示为一个空格。
HTML样式
style属性用于改变 HTML 元素的样式。
- 请避免使用这些被废弃的标签和属性
| 标签 | 描述 |
|---|---|
<center> |
定义居中的内容。 |
<font> 和 <basefont>
|
定义 HTML 字体。 |
<s> 和 <strike>
|
定义删除线文本。 |
<u> |
定义下划线文本。 |
| 属性 | 描述 |
|---|---|
| align | 定义文本的对齐方式。 |
| bgcolor | 定义背景颜色。 |
| color | 定义文本颜色。 |
- 对于以上这些标签和属性：请使用样式代替！
HTML格式化
HTML 可定义很多供格式化输出的元素，比如使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体。
1. 文本格式化标签：
<b>定义粗体文本。<strong>定义加重语气。
<big>定义大号字。<small>定义小号字。
<i>定义斜体字。<em>定义着重文字。
<sup>定义上标字。<sub>定义下标字。
<ins>定义插入字。<del>定义删除字。
<u>为文本添加下划线。
- 通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
- 通常标签<del>替换定义加删除线的文本定义标签 <s> 和 <strike>。
2. “计算机输出”标签：
<code>定义计算机代码。<samp>定义计算机代码样本。
<kbd>定义键盘码。<tt>定义打字机代码。
<var>定义变量。<pre>定义预格式文本。
- 被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<listing>，<plaintext>，<xmp>不赞成使用，使用<pre>代替。- <pre> 标签的一个常见应用就是用来表示计算机的源代码。
注意：
- pre元素是块级元素，但是只能包含文本或行内元素。也就是说，任何常见的可以导致段落断开的块级元素标签都不能位于pre元素中。
eg:标题<p><address>（<address> 元素中的文本通常呈现为斜体,而且大多数浏览器会在 <address >元素前后添加折行）- pre元素中允许的文本可以包含物理样式和基于内容的样式变化（W3C的HTML 教程延伸阅读：改变文本的外观和含义），还有
<a>链接、<img>图像和<hr />水平分隔线。当把其他标签，比如<a>标签放到<pre>块中时，就像放在HTML/XHTML文档的其他部分中一样即可。- 制表符tab在<pre>标签定义的块当中可以起到应有的作用，每个制表符占据8个字符的位置，但并不推荐使用tab，因为在不同的浏览器中，tab的表现形式各不相同。在用<pre>标签格式化的文档段中使用空格，可以确保文本正确的水平位置。
- 如果您希望使用 <pre> 标签来定义计算机源代码，比如 HTML 源代码，请使用符号实体来表示特殊字符，比如 "& lt;" 代表 "<"，"& gt;" 代表 ">"，"& amp;" 代表 "&"。 一般将<pre>标签与<code>标签结合起来使用，以获得更加精确的语义，用于标记页面中需要呈现的源代码。
文本显示格式笔记：
页面显示结果：文本显示为单行，超过部分···
html结构：
<div>
文本显示为单行,超过部分隐藏并使用省略号
修改 width 属性查看效果。
</div>
css样式：
div {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
width:200px;
}
页面显示结果：
文本显示为两
行,超过部分···
html结构：
<div>
文本显示为两行,超过部分隐藏并使用省略号修改 width 属性查看效果。使用 display:-webkit-box; 让文本显示为多行(只有-webkit内核才有作用)。
</div>
css样式：
div {
display:-webkit-box;
text-overflow:ellipsis;
overflow:hidden;
width:100px;
-webkit-line-clamp: 2;
-webkit-box-orient:vertical;
}
网友评论