W3C HTML学习笔记（一）

2017-09-22 本文已影响21人做有趣的恶魔

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 中，所有元素都必须被关闭。
关闭空元素的正确方法是在开始标签中添加斜杠，比如 ，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段落

段落标签可以把 HTML 文档分割为若干段落。

浏览器会自动地在段落的前后添加空行。（ 是块级元素）
如果希望在不产生一个新段落的情况下进行换行（新行），请使用   标签。
在 HTML 代码中，无法通过添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被显示为一个空格。

HTML样式

style属性用于改变 HTML 元素的样式。

请避免使用这些被废弃的标签和属性

标签	描述
`<center>`	定义居中的内容。
`<font>` 和 `<basefont>`	定义 HTML 字体。
`<s>` 和 `<strike>`	定义删除线文本。
`<u>`	定义下划线文本。

属性	描述
align	定义文本的对齐方式。
bgcolor	定义背景颜色。
color	定义文本颜色。

对于以上这些标签和属性：请使用样式代替！

HTML格式化

HTML 可定义很多供格式化输出的元素，比如使用标签 ("bold") 与 ("italic") 对输出的文本进行格式, 如：粗体 or 斜体。
1. 文本格式化标签：

 定义粗体文本。 定义加重语气。
<big> 定义大号字。  定义小号字。
 定义斜体字。  定义着重文字。
 定义上标字。  定义下标字。
<ins> 定义插入字。 <del> 定义删除字。

为文本添加下划线。

通常标签 替换加粗标签 来使用, 替换 标签使用。
通常标签<del>替换定义加删除线的文本定义标签 <s> 和 <strike>。

2. “计算机输出”标签：

<code>定义计算机代码。<samp>定义计算机代码样本。
<kbd>定义键盘码。 <tt>定义打字机代码。
<var>定义变量。<pre>定义预格式文本。

被包围在 <pre> 标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<listing>，<plaintext>，<xmp>不赞成使用，使用 <pre>代替。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。

注意：

pre元素是块级元素，但是只能包含文本或行内元素。也就是说，任何常见的可以导致段落断开的块级元素标签都不能位于pre元素中。
eg: 标题  <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;
}