HTML学习01
学习参考来自 https://www.w3school.com.cn/
什么是 HTML
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
-
HTML 标签是由尖括号包围的关键词，比如
<html> -
HTML 标签通常是成对出现的，比如
<b>和</b> -
标签对中的第一个标签是开始标签，第二个标签是结束标签
-
开始和结束标签也被称为开放标签和闭合标签
-
HTML 标签对大小写不敏感：
<P>等同于<p>。W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。
HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
<html> 与 </html> 之间的文本描述网页。<html> 元素定义了整个 HTML 文档。
<body> 与 </body> 之间的文本是可见的页面内容。<body> 元素定义了 HTML 文档的主体。
- 当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别，完全根据您的喜好。
HTML 标签 - 实例
-
<h1>This is a heading</h1>~<h6>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
-
HTML 段落是通过
<p>...</p>定义的。注释：默认情况下，浏览器会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
-
HTML 链接是通过
<a>标签进行定义的。<a href="http://www.w3school.com.cn"> This is a link</a> -
图像是通过
标签进行定义的。
<img src="/i/eg_w3school.gif" width="300" height="120" /> -
<hr />标签在 HTML 页面中创建水平线。 -
注释
<!-- This is a comment -->
元素
元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
| 开始标签 / 开放标签（start tag / opening tag） | 元素内容 | 结束标签 /闭合标签（end tag / closing tag） |
|---|---|---|
<p> |
This is a paragraph | </p> |
<a href="default.htm" > 大多数 HTML 元素可拥有属性 |
This is a link | </a> |
<br /> 即使 <br> 在所有浏览器中都是有效的，但使用<br /> 其实是更长远的保障。 |
某些 HTML 元素具有空内容（empty content） | 空元素在开始标签中进行关闭（以开始标签的结束而结束） |
注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。
属性
-
属性总是以名称/值对的形式出现，比如：name="value"。
-
属性总是在 HTML 元素的开始标签中规定。
-
属性和属性值对大小写不敏感。万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而新版本的 (X)HTML 要求使用小写属性。
-
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
name='Bill "HelloWorld" Gates'
<body bgcolor="yellow">
<h1 align="center">This is heading 1</h1>
<table border="1">
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
</body>
下面列出了适用于大多数 HTML 元素的属性：
| 属性 | 值 | 描述 |
|---|---|---|
| class | classname | 规定元素的类名（classname） |
| id | id | 规定元素的唯一 id |
| style | style_definition | 规定元素的行内样式（inline style） |
| title | text | 规定元素的额外信息（可在工具提示中显示） |
HTML 标签、属性参考手册
输出
-
无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。
-
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
-
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
样式
style 属性用于改变 HTML 元素的样式。
<body style="background-color:PowderBlue;">
<h1>Look! Styles and colors</h1>
<h1 style="text-align:center">This is a heading</h1>
<p style="font-family:verdana;color:red">
This text is in Verdana and red</p>
<p style="font-family:times;color:green">
This text is in Times and green</p>
<p style="font-size:30px">This text is 30 pixels high</p>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
style 属性的作用
提供了一种改变所有 HTML 元素的样式的通用方法。
样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。
不赞成（deprecated ）使用的标签和属性
在 HTML 4 中，有若干的标签和属性是被废弃的。被废弃（Deprecated）的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。
deprecated 英[ˈdeprəkeɪtɪd]
v. 对…表示极不赞成; 强烈反对;
| 标签 | 描述 |
|---|---|
| 定义居中的内容。 | |
| 和 | 定义 HTML 字体。 |
| 定义删除线文本 | |
| 定义下划线文本 | |
| 属性 | 描述 |
| align | 定义文本的对齐方式 |
| bgcolor | 定义背景颜色 |
| color | 定义文本颜色 |
对于以上这些标签和属性：请使用样式代替！
文本格式化
文本格式化标签
| 标签 | 描述 |
|---|---|
<b> |
定义粗体文本。 |
<big> |
定义大号字。 |
<em> |
定义着重文字。 |
<i> |
定义斜体字。 |
<small> |
定义小号字。 |
<strong> |
定义加重语气。 |
<sub> |
定义下标字。 |
<sup> |
定义上标字。 |
<ins> |
定义插入字。 |
<del> |
定义删除字。 |
<s> |
不赞成使用。使用 |
<strike> |
不赞成使用。使用 |
<u> |
不赞成使用。使用样式（style）代替。 |
<b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is emphasized</em>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>
<br />
This text contains
<sub>subscript</sub>
<br />
This text contains
<sup>superscript</sup>
subscript 英['sʌbskrɪpt]
adj. 写在下面的; n. 下标;superscript 英[ˈsuːpəskrɪpt]
adj. 写(或印)在正常字符上方的; 标在上面(或上角)的;
n. 上角文字，上标;
预格式文本
使用 pre 标签对空行和空格进行控制。
<pre>
这是
预格式文本。
它保留了 空格
和换行。
</pre>
<p>pre 标签很适合显示计算机代码：</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
不同的“计算机输出”标签的显示效果
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />
<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>
“计算机输出”标签
| 标签 | 描述 |
|---|---|
<code> |
定义计算机代码。 |
<kbd> |
定义键盘码。 |
<samp> |
定义计算机代码样本。 |
<tt> |
定义打字机代码。 |
<var> |
定义变量。 |
<pre> |
定义预格式文本。 |
<listing> |
不赞成使用。使用 代替。 |
<plaintext> |
不赞成使用。使用 代替。 |
<xmp> |
不赞成使用。使用 代替。 |
引用（Quotation）、引用和术语定义
| 标签 | 描述 |
|---|---|
<abbr> |
定义缩写或首字母缩略语。 |
<acronym> |
定义首字母缩写。 |
<address> |
定义地址。定义文档作者或拥有者的联系信息。 |
<bdo> |
定义文字方向。 |
<blockquote> |
定义从其他来源引用的节。定义长的引用、被引用的节。浏览器通常会对 <blockquote>元素进行缩进处理。 |
<q> |
定义短的行内引用。定义短的引用语。浏览器通常会为 <q> 元素包围引号。 |
<cite> |
定义引用、引证。定义著作的标题。 |
<dfn> |
定义一个定义项目。定义项目或缩略词的定义。 |
地址
<address> 元素用于联系信息、定义文档或文章的联系信息（作者/拥有者）。
此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
用于著作标题的 <cite>
元素定义著作的标题。浏览器通常会以斜体显示 元素。
<p>HTML cite 元素定义著作的标题。</p>
<p>浏览器通常会以斜体显示 cite 元素。</p>
<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream">
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
缩写或首字母缩写
<abbr title="etcetera">etc.</abbr>
<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>
<p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>
<br />
<acronym title="World Wide Web">WWW</acronym>
<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>
<p>仅对于 IE 5 中的 acronym 元素有效。</p>
<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
abbreviation 英[əˌbriːviˈeɪʃn]
n. 略语; 缩写词; 缩写形式; 缩略; 缩写;acronym 英[ˈækrənɪm]
n. 首字母缩略词(如Aids系由acquired immune deficiency syndrome的首字母组成);
文字方向，用于双向重写的 <bdo>
<bdo> 元素定义双流向覆盖（bi-directional override）。
<bdo>元素用于覆盖当前文本方向：
<p>
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
</p>
<bdo dir="rtl">
Here is some Hebrew text<br />
This line will be written from right to left
</bdo>
“bdo” 是“Bi-Directional Override”的缩写,有“覆盖”的意思。
（长、短）引用语
<body>
这是长的引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
这是短的引用：
<q>
这是短的引用。
</q>
<p>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
</p>
<p>浏览器通常会对 blockquote 元素进行缩进处理。</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
WWF 工作于 100 个国家，并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>
</body>
删除文本、插入文本
<body>
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<p>大多数浏览器会改写为删除文本和下划线文本。</p>
<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>
</body>
<dfn> 元素定义项目或缩写的定义。
-
如果设置了 元素的 title 属性，则定义项目：
<p>The <dfn title="World Health Organization">WHO</dfn> was founded in 1948.</p> <p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p> -
如果 元素包含具有标题的 元素，则 title 定义项目：
<p>The <dfn><abbr title="World Health Organization">WHO</abbr></dfn> was founded in 1948. </p> <p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p> -
否则， 文本内容即是项目，并且父元素包含定义。
<p>The <dfn>WHO</dfn> World Health Organization was founded in 1948. </p> <p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>注释：如果您希望简而化之，请使用第一条，或使用 代替。
不理解~
改变文本的外观和含义
很多标签都可以用来改变文本的外观，并为文本关联其隐藏的含义。总地来说，这些标签可以分成两类：基于内容的样式（content-based style）和物理样式（physical style）。
同时，W3C 为级联样式表（CSS）指定的标准现在已被绝大多数浏览器所支持，它提供了一种允许作者控制文档文本外观和布局的更为全面的方法。
条件注释
您也许会在 HTML 中偶尔发现条件注释：
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->
条件注释定义只有 Internet Explorer 执行的 HTML 标签。
颜色值
颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
| Color HEX | Color RGB |
|---|---|
| #000000 | rgb(0,0,0) |
| #FF0000 | rgb(255,0,0) |
| #00FF00 | rgb(0,255,0) |
| #0000FF | rgb(0,0,255) |
| #FFFF00 | rgb(255,255,0) |
| #00FFFF | rgb(0,255,255) |
| #FF00FF | rgb(255,0,255) |
| #C0C0C0 | rgb(192,192,192) |
| #FFFFFF | rgb(255,255,255) |
颜色名
大多数的浏览器都支持颜色名集合。
提示：仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
如果需要使用其它的颜色，需要使用十六进制的颜色值。
| Color HEX | Color Name |
|---|---|
| #F0F8FF | AliceBlue 并非HTML4.0支持的16种颜色，Chrome也支持。 |
| #FAEBD7 | AntiqueWhite |
| #7FFFD4 | Aquamarine |
| #000000 | Black |
| #0000FF | Blue |
| #8A2BE2 | BlueViolet 并非HTML4.0支持的16种颜色，Chrome也支持。 |
| #A52A2A | Brown |
Web安全色
216 跨平台色
颜色名
超链接
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
<p>
您也可以使用图像来作链接：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
我们通过使用 <a> 标签在 HTML 中创建链接。
有两种使用 <a> 标签的方式：
- 通过使用 href 属性 - 创建指向另一个文档的链接
- 通过使用 name 属性 - 创建文档内的书签
链接语法
链接的 HTML 代码很简单。它类似这样：
<a href="url">Link text</a>
href 属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示。
实例
<a href="http://www.w3school.com.cn/">Visit W3School</a>
上面这行代码显示为：Visit W3School
点击这个超链接会把用户带到 W3School 的首页。
提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
target 属性
使用 Target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新页签（窗口）打开文档：
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
链接 - name 属性（或id 属性）
name 属性规定锚（anchor）的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
命名锚的语法
<a name="label">锚（显示在页面上的文本）</a>
提示：锚的名称可以是任何你喜欢的名字。
提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。
实例
首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：
<a name="tips">基本的注意事项 - 有用的提示</a>
然后，我们在同一个文档中创建指向该锚的链接：
<a href="#tips">有用的提示</a>
您也可以在其他页面中创建指向该锚的链接：
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。
具体效果：有用的提示
提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
跳出框架
假如你的页面被固定在框架之内
<body>
<p>被锁在框架中了吗？</p>
<a href="/index.html"
target="_top">请点击这里！</a>
</body>
创建电子邮件链接
如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）
<body>
<p>
这是邮件链接：
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>
<p>
这是另一个 mailto 链接：
<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>
</p>
<p>
<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>
</body>
