HTML 笔记 1. 基础

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

HTML、CSS、 JavaScript 的区别

HTML 元素负责文档内容的结构和含义。
CSS (Cascading Style Sheets) 层叠样式表，控制内容呈现的样式。
JavaScript 用来操纵 HTML 文档的内容以及响应用户的操作。

父元素、子元素、后代元素和兄弟元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <code>apples</code>
</body>
</html>

包含另一个元素的元素是被包含元素的父元素。body 元素是 code 元素的父元素。相反，code 元素是 body 元素的子元素。
子元素是关系最近的后代元素。html 元素包含着 body 元素，而后者包含着 code 元素。body 元素和 code 元素都是 html 元素的后代元素，但是二者中只有 body 元素是 html 元素的子元素。
具有同一个父元素的几个元素互为兄弟元素。head 元素和 body 元素是兄弟元素。

元数据元素、流元素和短语元素。

元数据元素（metadata element）：用来构建 HTML 文档的基本结构，以及就如何处理文档向浏览器提供信息和指示。
短语元素 (phrasing element) 是 HTML 的基本成分。
流元素是短语元素的超集。
所有短语元素都是流元素，但并非所有流元素都是短语元素。

HTML 文档结构

只有区域 (白色部分) 才会在浏览器中显示。

实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文档的标题</title>
    </head>
    <body>
        <h1>我是一个标题</h1>
        <p>我是一个段落</p>
    </body>
</html>

实例解析：

<!DOCTYPE html> 告诉浏览器两件事：1. 它处理的是 HTML 文档；2. 标记文档内容的 HTML 所属的版本。
<html> 元素是 HTML 页面的根元素，它表示文档中 HTML 部分的开始。
<head> 元素包含文档的元数据（meta）和文档信息。
<meta charset="utf-8"> 对于中文网页需要使用声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为。

【只有在 MySQL 中可以使用”utf-8” 的别名”utf8”，但是在其他地方一律使用大写”UTF-8”。】
<title> 元素描述了文档的标题。
<body> 元素包含了可见的页面内容。
<h1> 元素定义一个一级标题。
 元素定义一个段落。

文档和元数据元素

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 设置文档编码类型 -->
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>

<span class="token comment">&lt;!--使用 &lt;title> 标签定义HTML文档的标题或名称--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>

<span class="token comment">&lt;!--    
    * base 标签用于设置一个基准URL，让HTML文档中的相对链接在此基础上进行解析。
    * href（Hypertext Reference），超链接目标URL。
    * target 属性告诉浏览器链接的打开方式，target="_black" 表示在新窗口打开。
    * 如果HTML文档中不设置base元素，或不用其href属性设置一个基准URL，
        那么浏览器会将当前文档的URL认定为所有相对URL的解析基准。
   –>
    <base href=“http://reeoo.qiniudn.com/“ target=“_black“>
</head>
<body>
    <!–绝对链接地址–>
    <a href=“http://apress.com“>Visit Apress.com</a>
<span class="token comment">&lt;!--相对链接地址--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page2.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Page 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>

<span class="token comment">&lt;!--图片相对地址--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Coowl-icon.png!icon512<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Icon Image<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</body>
</html>

:hexoPostRenderEscape–>

元素

meta 标签描述了一些基本的元数据。

标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。 META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。一般放置于区域

MetaExtensions 元数据扩展

<!--为网页定义字符集-->
<meta charset=“UTF-8“>
<!–定义网页作者–>
<meta name=“author“ content=“作者“>
<!–为网页定义描述内容–>
<meta name=“description“ content=“描述信息“>
<!–为搜索引擎定义关键词–>
<meta name=“keywords“ content=“关键字，逗号分开，用来描述页面内容“>
<!–每30秒刷新当前页面–>
<meta http-equiv=“refresh“ content=“30“>
<!–模拟HTTP标头字段–>
<!–1.1 让浏览器每隔5秒刷新一次–>
<meta http-equiv=“refresh“ content=“5“>
<!–1.2 让浏览器5秒之后载入另一个URL页面–>
<meta http-equiv=“refresh“ content=“5; http://www.apress.com“>
<!–2 指定页面优先使用的样式表–>
<meta http-equiv=“default-style“ content=“xxx.css“>
<!–3 另一种声明HTML页面所用字符编码的方法–>
<meta http-equiv=“content-type“ content=“text/html charset=UTF-8“>
<!–
noindex是谷歌发明的一个HTML标签，其作用是向搜索引擎声明该网页禁止被索引收录。
noindex标签的作用有两方面，简单的说，一是不给链接投票，增加此链接的权重，二是使添加noindex的部分内容不参与网站排名，便于集中网站权重。
nofollow标签是由谷歌领头创新的一个“反垃圾链接”的标签，并被百度、yahoo等各大搜索引擎广泛支持，引用nofollow标签的目的是：用于指示搜索引擎不要追踪（即抓取）网页上的带有nofollow属性的任何出站链接，以减少垃圾链接的分散网站权重！
noarchive 防止缓存版本
–>
<meta name=“robots“ content=“noindex“>

:hexoPostRenderEscape–>

元素

元素包含了所有的头部标签元素。在元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。

可以添加在头部区域的元素标签为: , <style>, <meta>, <link>, <script>, <noscript>, and <base>. <h4 id="元素 - 2"><a href="# 元素 - 2" class="headerlink" title="元素"></a><title > 元素 </h4><title> 标签定义了不同文档的标题。 <title> 在 HTML/XHTML 文档中是必须的。 <title> 元素: <ul> <li > 定义了浏览器工具栏的标题 </li> <li > 当网页添加到收藏夹时，显示在收藏夹中的标题 </li> <li > 显示在搜索引擎结果页面的标题 </li> </ul> <h4 id="元素 - 3"><a href="# 元素 - 3" class="headerlink" title="元素"></a><base > 元素 </h4><base> 标签描述了基本的链接地址 / 链接目标，该标签作为 HTML 文档中所有的链接标签的默认链接: <h4 id="元素 - 4"><a href="# 元素 - 4" class="headerlink" title="元素"></a><link > 元素 </h4><link> 标签定义了文档与外部资源之间的关系。 <ol> <li><link> 标签通常用于链接到 **CSS 层叠样式表 **: </li> </ol> <pre class="line-numbers language-html" data-language="html"><code class="language-html"><link rel="stylesheet" type="text/css" href="mystyle.css"></code></pre> <ol start="2"> <li > 为页面定义网站标志：<pre class="line-numbers language-html" data-language="html"><code class="language-html"> <link rel=“shortcut icon“ type=“image/x-icon“ href=“favicon.ico“></code></pre>:hexoPostRenderEscape–></li> <li > 要求浏览器预先获取预计很快将会使用到的资源：<pre class="line-numbers language-html" data-language="html"><code class="language-html"> <link rel=“prefetch“ href=“/page2.html“></code></pre>:hexoPostRenderEscape–></li> </ol> <img data-src="https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075105.png"> <code>rel</code > 属性最全面的介绍参考：http://iana.org/assignments/link-relations/link-relations.xml <img data-src="https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075105-1.png"> <h4 id="元素 - 5"><a href="# 元素 - 5" class="headerlink" title="元素"></a><style > 元素 </h4><style> 标签定义了 HTML 文档的样式文件引用地址。在 < style> 元素中你也可以直接添加 CSS 样式来渲染 HTML 文档: <pre class="line-numbers language-html" data-language="html"><code class="language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 我的第一个 HTML 页面 </title>  <style type="text/css"> body {background-color:gray} p {color:red} </style> </head> <body>  <a href="http://apress.com" style="background: grey;color: white;padding: 10px;">Visit the Apress site</a> </body> </html></code></pre> ##### 指定样式适用的媒体 media 属性可以用来表明文档在什么情况下应该使用该元素中定义的样式。 <pre class="line-numbers language-html" data-language="html"><code class="language-html"><style media="screen" type="text/css"> // 浏览器在屏幕上显示文档时使用该 <style> 中的样式。 </style> <style media="screen AND (max-width:500px)" type="text/css"> // 浏览器窗口小于 500 像素时使用 </style> <style media="screen AND (min-width:500px)" type="text/css"> // 浏览器窗口大于 500 像素时使用 </style></code></pre> ![](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075110.png) 以下特性还可以配合 `min-` 或者 `max-` 修饰，构成阈值而不是精确值。 ![](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075111.png) #### <script > 元素和 < noscript> 元素 <script > 标签用于加载脚本文件，如： JavaScript * `script`，用于定义脚本并控制其执行过程。 * `noscript`，用于规定在浏览器不支持或禁用了脚本的情况下的处理办法。 ##### script > script 元素可以放在 HTML 文档的任意位置，不过一般建议都集中放到文档的 head 部分，这有助于查看脚本。 <pre class="line-numbers language-html" data-language="html"><code class="language-html"><!DOCTYPE html> <html> <head>  <script type="text/javascript"> document.writeln("This is from the script"); </script>  <script src="simple1.js"></script>    <script defer src="simple2.js"></script>  <script async src="simple3.js"></script> </head> <body> </body> </html></code></pre> ![](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075113.png) ##### noscript <pre class="line-numbers language-html" data-language="html"><code class="language-html"><!DOCTYPE html> <html> <head>   <noscript> <h1>JavaScript is required!</h1> <p>You cannot use this page without JavaScript</p> </noscript>  <noscript> <meta http-equiv="refresh" content="0; http://www.apress.com"> </noscript> </head> <body> </body> </html></code></pre> ## 文本元素 ### 标记文字 #### h1~h6 标题 ![](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075114.png) <pre class="line-numbers language-html" data-language="html"><code class="language-html">     <h1> 一级标题 </h1> <font size="6"> 这是 6 号字体文本 </font> <h2> 二级标题 </h2> <font size="5"> 这是 5 号字体文本 </font> <h3> 三级标题 </h3> <font size="4"> 这是 4 号字体文本 </font> <h4> 四级标题 </h4> <font size="3"> 这是 3 号字体文本 </font> <h5> 五级标题 </h5> <font size="2"> 这是 2 号字体文本 </font> <h6> 六级标题 </h6> <font size="1"> 这是 1 号字体文本 </font></code></pre> ![](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075115.jpg) #### 元素 <pre class="line-numbers language-html" data-language="html"><code class="language-html"><p> 有时候阳光很好，有时候阳光很暗 </p></code></pre> 当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。 #### HTML 链接 a a = attributes，表示属性标签。默认情况下，链接将以以下形式出现在浏览器中： - 一个未访问过的链接显示为蓝色字体并带有下划线。 - 访问过的链接显示为紫色并带有下划线。 - 点击链接时，链接显示为红色并带有下划线。 > 注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。 ![](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075117.png) <pre class="line-numbers language-html" data-language="html"><code class="language-html"><!DOCTYPE html> <html> <head> <title>Example</title> <base href="http://titan/listings"> </head> <body>  <a href="http://www.jianshu.com/u/84c5fadc7c18"> 我的主页：独木舟的木 </a>  <a href="fruitlist.html">here</a>  <a href="#banana">Banana</a> <p id="banana"> I also like bananas, mangoes, cherries, apricots, plums. </p> </body> </html></code></pre> #### HTML 链接 - target 元素使用 target 属性，你可以定义被链接的文档在何处显示。 ![](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075117-1.png) <pre class="line-numbers language-html" data-language="html"><code class="language-html"> <a href="http://www.baidu.com/" target="_blank"> 打开 Baidu</a>  <a href="http://www.baidu.com/" target="_top"> 打开 Baidu</a>   <p> 这是一个电子邮件 <a href=@"andywhm@qq.com?Subject=Hello%20World" target="_top"> 发送邮件 </a> </p></code></pre> #### id 属性作用：给元素分配一个唯一的标识符。这种标识符通常用来将 CSS 样式应用到元素上或在 JavaScript 程序中用来选择元素。 ** 提示:** 书签是不以任何特殊的方式显示，在 HTML 文档中是不显示的，所以对于读者来说是隐藏的。将 CSS 样式应用到元素上： <pre class="line-numbers language-html" data-language="html"><code class="language-html"><!DOCTYPE html> <html> <head> <title> 使用 id 属性 </title> <style type="text/css"> #w3clink { background: grey; color: white; padding: 5px; border: thin solid black; } </style> </head> <body> <a href="http://apress.com">Apress Web Site</a> <p></p> <a id="w3clink" href="http://w3c.org">w3c web site</a> </body> </html></code></pre> ![](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075118.png) 导航到文档中的特定位置： <pre class="line-numbers language-html" data-language="html"><code class="language-html"> <a id="tips"> 有用的提示部分 </a>   <a href="#tips"> 访问有用的提示部分 </a>  <a href="example.html#tips"> 访问有用的提示部分 </a></code></pre> ** 注释：** 请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.runoob.com/html/"。 #### 自定义属性规定：自定义属性的前缀为 `data-`。 <pre class="line-numbers language-html" data-language="html"><code class="language-html">Enter your name: <input type="text" name="name" disabled="true" data-purpose="collection"></code></pre> #### HTML 链接 - 图片链接将图片作为链接使用。 <pre class="line-numbers language-html" data-language="html"><code class="language-html"> <p> 创建图片链接 <a href="http://icon.reeoo.com/coowl/"> <img border="10" src="http://reeoo.qiniudn.com/Coowl-icon.png!icon180" alt="coowl" width="32" height="32"> </a> </p> <p> 无边框的图片链接 <a href="http://icon.reeoo.com/coowl/"> <img border="0" src="http://reeoo.qiniudn.com/Coowl-icon.png!icon180" alt="coowl" width="32" height="32"> </a> </p></code></pre> ![](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075120.jpg) #### JPEG & GIF 图片的区别 | 照片和复杂图像使用 JPEG 格式 | 纯色图像、logo 和几何图形使用 GIF 格式 | | ------------------------------------------------------------ | ------------------------------------------------------------ | | 可在连续调次（复制品中有中间层次，如照片）图像中获得最好效果 | 对于几种纯色组成的图像、线条组成的图像（如 logo、剪贴画）和含有小段文字的图像，使用 GIF 比较合适 | | 可以用 1600 万种不同的颜色显示图像 | 用 256 种颜色显示图像 | | 是一种 “有损” 格式，因为文件缩小时会丢失部分图像信息 | GIF 同样会压缩文件来减小尺寸，但是不会丢失任何东西，是一种 “无损” 格式 | | 不支持透明 | 允许 8⃣️背景颜色设置为透明的，图像背景就可以穿透显示 | ### title 属性作用：提供元素的额外信息。浏览器通常用这些东西显示工具提示。示例： <pre class="line-numbers language-html" data-language="html"><code class="language-html"><a title="Apress Publishing" href="http://apress.com">Visti the Apress site</a></code></pre> 鼠标停留后会显示浮窗： ![title 属性](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075121.png) ### HTML 图像 img <pre class="line-numbers language-html" data-language="html"><code class="language-html"><img src="https://i.pinimg.com/564x/6c/77/9b/6c779b9f24ba0ec56dc62c7bbfaf004b.jpg" width="542" height="548"></code></pre> #### 使用实例 <pre class="line-numbers language-html" data-language="html"><code class="language-html">     <img border="0" src="https://ws2.sinaimg.cn/large/006tNc79ly1fm9bzhpv4aj30f20f8jrr.jpg" alt="linyuner" width="200" height="200"> <img src="https://ws2.sinaimg.cn/large/006tNc79ly1fm9bzhpv4aj30f20f8jrr.jpg" alt=" 让图片浮动到文本的最左边 " style="float: left;"> <img src="https://ws2.sinaimg.cn/large/006tNc79ly1fm9bzhpv4aj30f20f8jrr.jpg" alt=" 让图像浮动到文本的最右边 " style="float: right;"></code></pre> #### 图像映射 <pre class="line-numbers language-html" data-language="html"><code class="language-html"> <p> 点击同一张图片的不同区域，打开的是不同的链接地址 </p> <img src="planets.gif" alt="planets" width="145" height="145" usemap="#planetmap">  <map name="planetmap">  <area shape="rect" coords="0.0.82,126" href="sun.html" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.html" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.html" alt="Venus">  <area shape="rect" coords="x1,y1,x2,y2" href="url">  <area shape="circle" coords="x1,y1,r" href="url">  <area shape="poly" coords="x1,y1,x2,y2..." href="url"> </map></code></pre> ### 使用插图 figure <figcaption > 元素必须是 < figure > 元素的第一个或最后一个子元素。 <pre class="line-numbers language-html" data-language="html"><code class="language-html"><figure> <figcaption> 插图标题 </figcaption> <code>var fruits = ["apples", "oranges", "managoes", "cherries"];<br/> </code> </figure></code></pre> ![](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075122.png) ### HTML 换行两种换行方式： * br：强制换行。 * wbr：建议换行。 <pre class="line-numbers language-html" data-language="html"><code class="language-html"> <p> 我是我命运的主宰 <br /> 我是我灵魂的统帅 <br /> </p></code></pre> ### `<hr />` 主题分离 hr: 表示主题的改变，呈现效果是在 HTML 文档中显示一条 ** 水平线 **。 <hr /> , 这种只能使用一个标签表示，在其中放置任何内容都不符合 HTML 规范的元素称之为 ** 虚元素 **。 <pre class="line-numbers language-html" data-language="html"><code class="language-html"><hr /></code></pre> ### 空元素、自闭合元素、虚元素 ** 元素 = 开始标签 + 内容 + 结束标签 **：`<code>apples</code>` <pre class="line-numbers language-html" data-language="html"><code class="language-html"> <p></p>  <p/>  <hr /></code></pre> ### HTML 注释 <pre class="line-numbers language-html" data-language="html"><code class="language-html"></code></pre> 在 .css 文件中的注释格式：`/* 注释内容 */` ### HTML 格式化文本 #### 文本格式化 <pre class="line-numbers language-html" data-language="html"><code class="language-html"><!DOCTYPE html> <html> <head> <title>Example</title> </head> <body> 正常文本字体。<br/>  <b>b 元素：用来表示文章提要中的关键词和产品评论中的产品名称 </b><br/>  <em>em 元素：表示对一段文字的强调 </em><br/>  <i>i 元素：表示一段文字与周围内容有本质区别，使用场景：外文词语、科技术语、某人的想法 </i><br/>  <s>s 元素：表示一段文字不再正确或准确 </s><br/>  <strong>string 元素：表示一段重要文字 </strong><br/>  <u>u 元素：让一段文字从周围内容中凸现出来，但并不表示强调或重要性有所增加 </u><br/>  <small>small 元素：表示小号字体内容，常用于免责声明和澄清声明 </small><br/> <big> 放大字体 </big><br/>  上标：2<sup>100</sup>、x<sup>2</sup>、10<sup>th</sup>point<br/> 下标：A<sub>1</sub>、A<sub>2</sub><br/>  br 元素会引起一次换行。其习惯样式是将后续内容转移到新行上。<br/> br 元素只宜用在换行也是内容的一部分的情况，切勿用它创建段落或别的内容组。<br/>  💡wbr 元素是 HTML5 新增的，用来表示长度超过当前浏览器窗口的内容适合在此换行。<wbr> 究竟换不换行由浏览器决定。<wbr> wbr 元素只不过是对恰当的换行位置的建议而已。 wbr 元素可以让浏览器将一个长单词分为几小截， </body> </html></code></pre> ![](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075123.png) #### 计算机的输入和输出 <pre class="line-numbers language-html" data-language="html"><code class="language-html">code：表示计算机代码片段:<br/> <code>for (var i = Things.length - 1; i >= 0; i--) { Things [i] }</code><br/> var：在编程语境中表示变量。也可表示一个供读者在想象中插入一个指定值的占位符。<br/> <p>The variable in this examples is :<var>fruits</var></p> samp：表示程序或计算机系统的输出 <br/> <p>The out put from the code is:<samp>I like banana.</samp></p> kbd：表示用户键盘输入 <br/> <p>When prompted for my favourite fruit,I type: <kbd>vherries</kbd></p> <tt>tt：打字机文本 </tt>    <pre> 此例演示如何使用 pre 标签对空行和空格进行控制 </pre></code></pre> ![](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075125.png) #### 使用标题引用、引文、定义和缩写 <pre class="line-numbers language-html" data-language="html"><code class="language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> </head> <body> 使用标题引用、引文、定义和缩写 <br/>  The <abbr title="Florida Department of citrus">FDDC</abbr> regulates the Florida citrus industry.  <p> The <dfn title="apple">apple</dfn> is the. pomaceous fruit of the apple tree... </p>  <q cite="http://en.wikoipedia.org"> All problems in computer science can be solved by another level of indirection.——Butler Lampson <br/> 计算机科学领域的任何问题都可以通过增加一个间接的中间层来解决 </q> <br> 《春》是现代散文家朱自清的作品。《春》是朱自清的散文名篇，最初发表于 1933 年 7 月，此后长期被中国中学语文教材选用。[1] 在该篇 “贮满诗意” 的 “春的赞歌” 中，事实上饱含了作家特定时期的思想情绪、对人生及至人格的追求，表现了作家骨子里的传统文化积淀和他对自由境界的向往。 <blockquote> 盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。 </blockquote> 小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。  <p> My favourite movie on fruit is <cite> 这个杀手不太冷 </cite>. </p> </body> </html></code></pre> #### 块引用 <pre class="line-numbers language-html" data-language="html"><code class="language-html">  <p>WWF's goal is to: <q>Build a future where people live in a harmony with natrue.</q> We hope they succeed. </p>  <p> 不可屈服 <blockquote> 透过覆盖着我的层层夜幕，黑暗层层无底，感谢万能的上苍，赐给我不可征服的灵魂，就算被地狱牢牢抓住，我不会畏缩也不会哭叫，任凭命运百般捉弄，我头破血流但不低头，在这充满愤怒和眼泪的土地之上，恐怖阴影阴森的逼近，不过，即使岁月不停恐吓，亦将发现我毫不畏缩，无论大门何等狭窄，无论承受多么深重的责罚，我是我命运的主宰，我是我灵魂的统帅。</blockquote> ——By William henley </p></code></pre> ![块引用](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075126.jpg) #### 使用语言元素 ##### ruby、rt 和 rp <pre class="line-numbers language-html" data-language="html"><code class="language-html"><!DOCTYPE html> <html> <head> <title>Example</title> </head> <body> 使用语言元素 <br/>   <ruby> 魑 <rp>(</rp><rt>chī</rt><rp>)</rp></ruby> <ruby> 魅 <rp>(</rp><rt>mèi</rt><rp>)</rp></ruby> <ruby> 魍 <rp>(</rp><rt>wǎng</rt><rp>)</rp></ruby> <ruby> 魉 <rp>(</rp><rt>liǎng</rt><rp>)</rp></ruby> </body> </html></code></pre> ![](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075128.png) ##### bdo 元素 bdo 元素可以用来撇开默认的文字方向设置，明确地指定其内容中文字的方向。 `dir` 属性值设置： * ltr：文字方向从左到右； * rtl：文字方向从右到左； <pre class="line-numbers language-html" data-language="html"><code class="language-html"> <p> 该段落文字从左到右显示 </p> <p><bdo dir="rtl"> 该段落文字从左到右显示 </bdo></p></code></pre> ![文字方向](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075129.jpg) ##### bdi 元素 bdi 元素表示一段出于文字方向考虑而与其他内容隔离开来的文字。这个元素适用于欲显示内容的文字方向未知的情况（参考 HTML5 权威指南 8.6.3）。 #### 表示一般性的内容 <pre class="line-numbers language-html" data-language="html"><code class="language-html"><!DOCTYPE html> <html> <head> <title>Example</title> <style type="text/css"> .fruit { border: thin solid black; padding: 1px; } </style> </head> <body>   I like <span class="fruit">oranges</span> and <span class="fruit">apples</span>.<br/>   今天你 <mark> 吃鸡 </mark> 了吗？<br/>   <p> <del>I can <mark>sea</mark> the <mark>see</mark></del> <ins>I can <mark>see</mark> the <mark>sea</mark></ins> </p>  我在 <time datetime="15:00">3 o'clock</time> 购买了面包和牛奶日期是 <time datetime="2018-02-02">2 月 2 号 </time> </body> </html></code></pre> ![](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075129.png) #### 缩写和首字母缩写 <pre class="line-numbers language-html" data-language="html"><code class="language-html"> <abbr title="etcetera">etc.</abbr> <br /> <acronym title=@"World Wide Web">WWW</acronym> <br /> <p> 在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本 </p> <p> 仅对于 IE 5 中的 acronym 元素有效 </p> <p> 对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效 </p></code></pre> #### 文本显示为单行，超过部分隐藏并使用省略号 <pre class="line-numbers language-css" data-language="css"><code class="language-css">div { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:120px; }</code></pre> ### HTML 区块 <div>、 * <div> —— ** 块（block）元素 **，定义了文档的区域，会自动换行。 * —— ** 内联（inline）元素 **，用来组合文档中的行内元素，不会换行。 #### HTML 布局 **Tip:** 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。 **Tip:** 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。 #### 使用 <div> 元素的网页布局 <pre class="line-numbers language-html" data-language="html"><code class="language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 文档标题 </title> </head> <body> <div id="container" style="width: 500px"> <div id="header" style="background-color: #27AEE8"> <h1 style="margin-bottom: 0;"> 主要的网页标题 </h1> </div> <div id="menu" style="background-color: #313842h; height: 200px; width: 100px; float: left;"> <b> 导航栏 </b><br /> HTML<br /> CSS<br /> JavaScript<br /> </div> <div id="content" style="background-color: #C72F2E; height: 200px; width: 400px; float: left;"> 内容在这里 </div> <div id="footer" style="background-color: #bcbcbc; clear: both; text-align: center;"> 版权所有 ©️️ abc.com </div> </div> </body> </html></code></pre> ![](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075130.jpg) #### 使用 <table> 元素的网页布局，不推荐的方式！ > 💡虽然我们可以使用 HTML table 标签来设计出漂亮的布局，但是 table 标签是不建议作为布局工具使用的 - 表格不是布局工具。 <pre class="line-numbers language-html" data-language="html"><code class="language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 文档标题 </title> </head> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color: #27AEE8"> <h1> 主要的网页标题 </h1> </td> </tr> <tr> <td style="background-color: #313842h; width: 100px; vertical-align: top;"> <b> 导航栏 </b><br> HTML<br> CSS<br> JavaScript<br> </td> <td style="background-color: #C72F2E; height: 200px; width: 400px; vertical-align: top;"> 内容在这里 </td> </tr> <tr> <td colspan="2" style="background-color: #bcbcbc; text-align: center;"> 版权所有 ©️️ abc.com </td> </tr> </table> </body> </html></code></pre> ![](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075132.jpg) ### HTML 框架 HTML 框架语法：`<iframe scr="URL"></iframe>` <pre class="line-numbers language-html" data-language="html"><code class="language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 文档标题 </title> </head> <body> <iframe src="URL" width="200" height="200"></iframe> <p> 该 URL 指向不同的网页 </p> <p> 一些旧的浏览器不支持 iframe。</p> <p> 如果浏览器不支持 iframe 则不会显示 </p> </body> </html></code></pre> #### 移除边框 <pre class="line-numbers language-html" data-language="html"><code class="language-html"><iframe src="URL" frameborder="0"></iframe></code></pre> #### 使用 iframe 来显示目标链接页面 <pre class="line-numbers language-html" data-language="html"><code class="language-html"><iframe src="URL" name="iframe_a"></iframe> <p><a href="http://www.example.com/" target="iframe_a">www.example.com</a></p></code></pre> ### HTML 颜色 HTML 颜色由红色、绿色、蓝色混合而成。 #### 颜色值 HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。 <pre class="line-numbers language-html" data-language="html"><code class="language-html"><p style="background-color: #0e5f71"> 通过十六进制设置背景颜色 </p> <p style="background-color: rgb(255,255,0);"> 通过 rbg 值设置背景颜色 </p> <p style="background-color: green"> 通过颜色名设置背景颜色 </p></code></pre> ![HTML 颜色](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075132-1.jpg) 三种颜色红，绿，蓝的组合从 0 到 255，一共有 1600 万种不同颜色 (256 x 256 x 256)。 ### HTML 颜色名 141 个颜色名称是在 HTML 和 CSS 颜色规范定义的（17 标准颜色，再加 124）。 > ![Remark](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075133.gif)** 提示:** 17 标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。点击其中一个颜色名称（或一个十六进制值）就可以查看与不同文字颜色搭配的背景颜色。 ### HTML 脚本 JavaScript 使 HTML 页面具有更强的动态和交互性。 #### HTML <script> 标签 <script> 标签用于定义客户端脚本，比如 JavaScript。 <script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。 JavaScript 最常用于图片操作、表单验证以及内容动态更新。下面的脚本会向浏览器输出 "Hello World!"： <pre class="line-numbers language-html" data-language="html"><code class="language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 文档标题 </title> </head> <body> <p>JavaScript 能够直接写入 HTML 输出流中 </p> <script type="text/javascript"> document.write("<h1 > 这是一个标题 </h1>"); document.write(" 这是一个段落。"); </script> <p> 你只能在 HTML 输出流中使用 <strong>document.write</strong><br /> 如果你在文档已加载后使用它（比如在函数中），会覆盖整个文档。 </p> <p id="demo"> JavaScript 可以触发事件，就像按钮点击。 </p> <script type="text/javascript"> function myFunction() { // 事件响应 document.getElementById("demo").innerHTML="Hello JavaScript"; // 处理 HTML 样式 x=document.getElementById("demo") // 找到元素 x.style.color = "#ff0000"; // 改变样式 } </script> <button type="button" onclick="myFunction ()"> 点我 </button> </body> </html></code></pre> ![HTML 脚本](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075134.jpg) ### HTML 字符实体如需显示小于号，我们必须这样写： `<；` 或 `<；` 或 `<` ** 提示：** 使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。 ![](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075137.png) #### 不间断空格 HTML 中的常用字符实体是不间断空格 ` `。 HTML 实体参考手册：http://www.runoob.com/tags/ref-entities.html ### HTTP 统一资源定位符 URL <pre class="line-numbers language-none"><code class="language-none">scheme://host.domain:port/path/filename</code></pre> - scheme - 定义因特网服务的类型。最常见的类型是 http - host - 定义域主机（http 的默认主机是 www） - domain - 定义因特网域名，比如 runoob.com - :port - 定义主机上的端口号（http 的默认端口号是 80） - path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。 - filename - 定义文档 / 资源的名称 ### class 属性作用：将元素归类； * 找出文档中的某一类元素； * 为某一类元素应用 CSS 样式，可以减少重复设置；应用 CSS 样式示例代码： <pre class="line-numbers language-html" data-language="html"><code class="language-html"><!DOCTYPE html> <html> <head> <title> 使用 class 属性将元素归类 </title> <style type="text/css"> .class2 { background-color: grey; color: white; padding: 5px; margin: 2px; } .class1 { font-size: x-large; } </style> </head> <body> <a class="class1 class2" href="http://appress.com">Appress web site</a> <p/> <a class="class2 otherclass" href="http://w3c.org">W3C web site</a> </body> </html></code></pre> ![应用 CSS 样式](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075138.png) 在 JS 脚本中使用 class 属性示例代码： <pre class="line-numbers language-html" data-language="html"><code class="language-html"><!DOCTYPE html> <html> <head> <title> 使用 class 属性将元素归类 </title> </head> <body> <a class="class1 class2" href="http://appress.com">Appress web site</a> <p/> <a class="class2 otherclass" href="http://w3c.org">W3C web site</a> <script type="text/javascript"> var elems = document.getElementsByClassName("otherclass"); for (i = 0; i <= elems.length; i++) { var x = elems[i]; x.style.border = "thin solid black"; x.style.backgroundColor = "white"; x.style.color = "black"; } </script> </body> </html></code></pre> JS 脚本的作用：找出所有属于 otherclass 类的元素并对其设置一些样式。 ![在脚本中使用 class 属性](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075138-1.png) ### contenteditable 属性作用：让用户能够修改页面上的内容 <pre class="line-numbers language-html" data-language="html"><code class="language-html"><!DOCTYPE html> <html> <head> <title> 使用 contenteditable 属性 </title> </head> <body> <p contenteditable="true">It is raining right now</p> </body> </html></code></pre> 单击改段文字后即可开始编辑： ![contenteditable 属性](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075140.png) ### contentmenu 属性作用：为元素设定快捷菜单。 ### draggable 属性作用：HTML5 支持拖放操作的方式之一，用来表示元素是否可被拖放。 ### dropzone 属性作用：HTML5 支持拖放操作的方式之一 ### hidden 属性作用：表示相关元素当前毋需关注，浏览器会隐藏相关元素。示例代码： <pre class="line-numbers language-html" data-language="html"><code class="language-html"><!DOCTYPE html> <html> <head>  <title> 使用 hidden 属性 </title>  <script type="text/javascript"> var toggleHidden = function() { var elem = document.getElementById("toggle") if (elem.hasAttribute("hidden")) { elem.removeAttribute("hidden"); }else { elem.setAttribute("hidden","hidden"); } } </script> </head> <body> <button onclick="toggleHidden ()">Toggle</button> <table> <tr><th>Name</th><th>city</th></tr> <tr><td>Adam Freeman</td><td>London</td></tr> <tr id="toggle" hidden><td>Joe Simth</td><td>New Work</td></tr> <tr><td>Anne Jones</td><td>Paris</td></tr> </table> </body> </html></code></pre> ![hidden](https://blog-andy0570-1256077835.cos.ap-shanghai.myqcloud.com/site_Images/075141.gif) ### lang 属性作用：用于说明元素内容使用的语言。使用 lang 属性的目的是让浏览器调整其表达元素内容的方式。比如说，改变使用的引号，在使用了文字朗读器的情况下正确发音。语言声明规范说明参考：https://tools.ietf.org/html/bcp47 示例： <pre class="line-numbers language-html" data-language="html"><code class="language-html"><!DOCTYPE html> <html> <head> <title>Example</title> </head> <body> <p lang="en">Hello - how are yor?</p> <p lang="fr">Bonjour - comment ça va-vous</p> <p lang="es">Hola - cómo estás</p> </body> </html></code></pre> 参考资料： - [HTML 教程](http://www.runoob.com/html/html-tutorial.html) - [HTML 速查列表](http://www.runoob.com/html/html-quicklist.html) - [HTML 手册](http://www.runoob.com/tags/html-reference.html) - [万维网联盟 w3c](http://www.chinaw3c.org) - 《HTML5 权威指南》