HTML 入门知识 (HTML5 标准)

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

该培训文档从零开始讲解，包含了 基础知识、常见问题和作业。HTML 很容易学习！相信您能很快学会它！

什么是HTML?

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程（PS：数据+逻辑+算法）语言，而是一种标记语言，或者说是一套标签 (markup tag)
HTML 使用标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML 文档也叫做 web 页面

什么是HTML 标签?

HTML 标签是由 尖括号 包围的关键词，比如 <html>, 使用小写
标签对中的第一个标签是 开始标签，如 <h1>，第二个标签是 结束标签，如 </h1>
HTML 标签通常是 成对出现 的，比如 <p> 段落 </p> 和 <b> 粗体 </b>
HTML 标签少量是 单个出现 的，比如 <hr/> 水平线、<br/> 换行 和 <img/> 图片

什么是HTML 标签属性?

属性是标签中的 附加信息
属性一般描述于 开始标签, 使用小写
属性总是以名称/值对的形式出现，下方红色是标签，蓝色则是标签属性：
<div class="container wd"> text </div>
<a href="..." class="mylink red-text"> text </a>
<img src="..." class="img-responsive"/>

什么是 Read-Search-Ask 学习方法?

Read：第一步，阅读培训文档。
Search：第二步，用 Google 搜索问题。
Ask：第三步，求助朋友同事。
自我学习&检查：http://www.freecodecamp.cn/home --“Front End Development Certification” 的 “HTML5 and CSS” 课程。

市场信息人员只需要了解结构，不需要编写。

<!DOCTYPE html> 表示 HTML5 文档
<html> 表示HTML页面的根元素
<head> 表示页面的元（meta）数据，Google会抓取，对应信息平台的 SEO描述、SEO关键字
<title> 表示页面的标题，显示在浏览器的标签卡上，对应信息平台的 SEO标题
<body> 表示可见的页面内容，对应信息平台的 信息内容
 表示注释，页面上不可见的内容。在信息平台删除标签或内容时，推荐使用注释，而不是直接删除

可见部分，即整个页面文档


<!DOCTYPE html>
<html>
  <head>
    <title>文档标题</title>
    <meta />
  </head>
  <body>
    可见部分，即整个页面文档
    <!-- 注释内容，不可见 -->
  </body>
</html>

标题（Heading）是通过 <h1> - <h6> 标签进行定义的. <h1> 定义最大的标题。 <h6> 定义最小的标题。

标题很重要

搜索引擎使用标题做为网页结构和内容的索引。
应该将 <h1> 用作主标题（最重要的并且是唯一的），其后是 <h2>（次重要的），再其次是 <h3>，以此类推。

h1. 标题简短描述

h2. 标题简短描述

h3. 标题简短描述

h4. 标题简短描述

h5. 标题简短描述

h6. 标题简短描述


<h1>h1. 标题 <small>简短描述</small></h1>
<h2>h2. 标题 <small>简短描述</small></h2>
<h3>h3. 标题 <small>简短描述</small></h3>
<h4>h4. 标题 <small>简短描述</small></h4>
<h5>h5. 标题 <small>简短描述</small></h5>
<h6>h6. 标题 <small>简短描述</small></h6>

常见问题

标题的使用应该是渐进的？

一个页面有唯一的 <h1>，然后有 <h2>、<h3>，不推荐在没有 <h2> 的情况下，直接使用 <h3>。

作业

Say Hello to HTML Element

Headline with the h2 Element

<p> 表示一个段落，通常与这些标签联用：换行 <br>，水平线 <hr>，加粗 <strong>

段落换行

p. 这是段落1

p. 这是段落2

这个
段落
演示了分行的效果


段落换行
<p> p. 这是<strong>段落1</strong> </p>
<p> p. 这是<strong>段落2</strong> </p> <hr>
<p> 这个<br>段落<br>演示了分行的效果 </p>

常见问题

段落的行间距？

默认下，段落和段落存在有一定间隔，类似于 WORD 的行间距。注意：如果通过 <br> 来换行，那么就没有行间距了。

作业

Inform with the Paragraph Element

Fill in the Blank with Placeholder Text

Delete HTML Elements

<p> 使用预设的 class 属性进行排版，优秀的排版可以让文章更易读

段落高亮

一般说明:浅蓝底色（class="bg-info"）

强调说明:橙色底色（class="bg-warning"）

段落文字对齐（默认为左对齐）

左对齐 (class="text-left")

居中对齐 (class="text-center")

右对齐 (class="text-right")

两边对齐 (class="text-justify")

垂直排列的描述

标题1: 内容...
标题2: 内容...; 内容...
标题3: 内容...

水平排列的描述

标题1: 内容...
标题2: 内容...; 内容...
标题3: 内容...

外部引用

名人名言、wiki引用、规章制度

原作者、来源、wiki


段落高亮
<p class="bg-info">一般说明:浅蓝底色</p>
<p class="bg-warning">一般说明:橙色底色</p>
段落文字对齐
<p class="text-left"> 左对齐 </p>
<p class="text-center"> 居中对齐 </p>
<p class="text-right"> 右对齐 </p>
<p class="text-justify"> 两边对齐 </p>
垂直排列的描述
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>
水平排列的描述
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>
外部引用
<blockquote>
  <p>名人名言、wiki引用、规章制度</p>
  <footer>原作者、来源、wiki</footer>
</blockquote>

常见问题

为什么要按标准格式排版？什么是标签的语义性？

根据内容的结构，选择合适的标签，便于开发者阅读的同时让搜索引擎（Google）更方便的解析页面。

作业

进入信息平台练习上面的example.

链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

常用属性

<a> 标签里面的 href="url" ，表示点击后在当前标签页打开url。
<a> 标签里面的 target="_blank" ，表示使用新标签页打开链接。

文字链接

<a> 可以放在文章中间，例如 a. 链接1 当前标签页打开BBC。

<a> 默认在当前标签页打开，可以配置 <a> 属性 target="_blank"，如 a. 链接2 新标签页打开BBC。

图片链接


文字链接
可以放在文章中间，例如  <a href="http://www.bbc.com/" > a. 链接1 当前标签页打开BBC </a>   
默认在当前标签页打开，可以配置  <a href="http://www.bbc.com/" target="_blank"> a. 链接2 新标签页打开BBC </a>    
图片链接
<a href="http://www.bbc.com/" target="_blank">
  <img src="http://data.chinahighlights.com/image/homepage/the-bund.jpg" class="img-responsive" alt="The Bund">
</a>

常见问题

空链接？

没有文字或图片的链接，例如: <a href="..." > </a> ，请删除空链接。记住： <a href="..." > ... </a> 必须成对出现，且中间必须有文字或者图片

链接的url `href="..."` 的规则？

如果链接到外站页面，需要写全url，例如 href="http://www.baidu.com" ;
如果链接到本站页面，只需要写域名后面的那部分，例如 href="/travelguide/chinese-culture-facts.htm" .

作业

Link to External Pages with Anchor Elements

Turn an Image into a Link

在 HTML 中，图像由 <img> 标签定义。
<img> 是单标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。src属性的值是图像的 URL 地址。

HTML 图像- Alt属性

根据HTML5规范：alt属性用来为图像定义一串预备的可替换的图片描述文本。
注意：google给了 alt 新的含义：它会收录在google图片搜索索引里面，因此重要的信息图片务必加上 alt 属性。
推介信息的主题图片保持和信息标题一致！-前提：图片确实与信息主题相关。

LAST TIPS：

正常的图片应该包含 图片地址 src，响应式类 class="img-responsive"， 图片描述 alt， 图片标题 title。就像这样：
<img src="http://data.chinahighlights.com/image/citytour/guilin-tours/hiking.jpg" class="img-responsive" alt="漓江" />

响应式图片 `class="img-responsive"`

圆角图片 `class="img-responsive img-rounded"`

圆形图片 `class="img-responsive img-circle"`

边框图片 `class="img-responsive img-thumbnail"`


响应式图片
<img src="..." class="img-responsive" alt="漓江" />
圆角图片
<img src="..." class="img-responsive img-rounded" alt="漓江" />
圆形图片
<img src="..." class="img-responsive img-circle" alt="漓江" />
边框图片
<img src="..." class="img-responsive img-thumbnail" alt="漓江" />

常见问题

响应式图片的高和宽？

添加了 class="img-responsive" 的图片，不需要再添加：宽 width="200" 和高 height="200" 属性。

响应式图片的原始高宽与页面显示高宽？

添加了 class="img-responsive" 的图片，会自适应设备的大小来调整高宽。
如果想看图片的原始高宽，可以使用chrome右键图片选择“检查”，鼠标移动到页面下方控制台区域的图片URL地址处，chrome会显示图片快照、显示大小及原始大小。

作业

Add Images to your Website

Add Alt Text to an Image for Accessibility

Make Images Mobile Responsive

图片通常放在 <p>、<div> 与文字放在一起进行排版，即：“图文混排”。

图片对齐：左对齐，居中，右对齐

图片左浮动 `class="pull-left"`

桂林漓江 The classic picture in people's mind is the Li River in mist. This scenery appears most from April to June.

In April it usually drizzles all day long and you may not see the scenery clearly on the river. In May and June the rainfall is more violent, often as stormy downpours! You may need to hold an umbrella on the deck, which is inconvenient to enjoy the scenery. An excellent time to see mist hugging the hills is early on a warm morning after a night of rain. This period is the best time to see the scenery along the river clearly.

图片右浮动 `class="pull-right"`

桂林漓江 The classic picture in people's mind is the Li River in mist. This scenery appears most from April to June.

In April it usually drizzles all day long and you may not see the scenery clearly on the river. In May and June the rainfall is more violent, often as stormy downpours! You may need to hold an umbrella on the deck, which is inconvenient to enjoy the scenery. An excellent time to see mist hugging the hills is early on a warm morning after a night of rain. This period is the best time to see the scenery along the river clearly.

图片居中 `class="center-block"`

The classic picture in people's mind is the Li River in mist. This scenery appears most from April to June.
In April it usually drizzles all day long and you may not see the scenery clearly on the river. In May and June the rainfall is more violent, often as stormy downpours! You may need to hold an umbrella on the deck, which is inconvenient to enjoy the scenery. An excellent time to see mist hugging the hills is early on a warm morning after a night of rain. This period is the best time to see the scenery along the river clearly.


图片左浮动
<p>
  <img src="..." class="img-responsive pull-left" alt="桂林漓江" title="桂林漓江" />
  ...text
</p>
<div class="clearfix"></div>

图片右浮动
<p>
  <img src="..." class="img-responsive pull-right" alt="桂林漓江" title="桂林漓江" />
  ...text
</p>
<div class="clearfix"></div>

图片居中
<p>
  <img src="..." class="img-responsive center-block" alt="桂林漓江" title="桂林漓江" />
  ...text
</p>
<div class="clearfix"></div>

常见问题

什么时候需要手动清除浮动？

在下一个标题前，应该清除上一个标题所属段落的图片浮动。在下一个标题前面加上 <div class="clearfix"></div>

作业

进入信息平台练习上面的example.

<ul> 标签表示 HTML无序列表，使用 class="ul" 修饰。

<ol> 标签表示 HTML有序列表，使用 class="ol" 修饰。

<li> 中间可以是文本，链接，图片。

无序列表

不要了, 谢谢 (búyàolē, xièxiè): No, thanks.
这个多少钱 (zhègè duōshǎo qián): How much is this?
太贵了 (tàiguì lē): It is too expensive.
少点吧 (shǎodiǎn bā), or 便宜点 (piányì diǎn): Can you come down a bit?

有序列表

Reddit
Weibo
Twitter
Facebook
Youtube


无序列表
<ul class="ul">
  <li>不要了, 谢谢 (búyàolē, xièxiè): No, thanks.</li>
  <li>这个多少钱 (zhègè duōshǎo qián): How much is this?</li>
  <li>太贵了 (tàiguì lē): It is too expensive.</li>
  <li>少点吧 (shǎodiǎn bā), or 便宜点 (piányì diǎn): Can you come down a bit?</li>
</ul>
有序列表
<ol class="ol">
  <li>Reddit</li>
  <li>Weibo</li>
  <li>Twitter</li>
  <li>Facebook</li>
  <li>Youtube</li>
</ol>

常见问题

无效列表？

<ul> 或 <ol> 必须包含 <li>；<li> 也必须放在 <ul> 或 <ol> 下面，否则无效。

作业

Create a Bulleted Unordered List

Create an Ordered List

HTML <div>是区块标签，它其实是组合其他HTML标签的盒子，并且已经组装好的盒子也可以放在其他盒子里面，最后组装成一个HTML页面。
例如：我们可以把多个 <h3>、<img>、<p> 标签按照指定的顺序放进一个 <div> 盒子里面，组成一个带文字的照片区块。

标签卡

Traffic and Air pollution

On top of the traffic, air pollution and the smog can also be an assault on the senses. While reports in the Western media may sometimes make it seem like the air in China is constantly bad, there are bad days and good days. Northern China tends to be hit by pollution more, especially during the long winter months, and on bad days you may want to wear a face mask to protect yourself.

照片墙

TGiant Pandas

Enjoy all the classic wonders in Beijing, Xi’an, and Shanghai; relax on board the Yangtze River cruise; treat yourself to the highlight of the tour — the one-day Panda Keeper Program at Dujiangyan Panda Base in Chengdu.

Like it! Buy it!


标签卡
<div class="panel panel-default">
  <div class="panel-heading">Traffic and Air pollution</div>
  <div class="panel-body">
    On top of the traffic, air pollution and the smog can also be an assault on the senses. While reports in the Western media may sometimes make it seem like the air in China is constantly bad, there are bad days and good days. Northern China tends to be hit by pollution more, especially during the long winter months, and on bad days you may want to wear a face mask to protect yourself. 
  </div>
</div>
照片墙
<div class="thumbnail">
  <img src="http://data.chinahighlights.com/image/china-tour/giant-panda.jpg" class="img-responsive" alt="熊猫">
  <div class="caption">
    <h3>TGiant Pandas</h3>
    <p>Enjoy all the classic wonders in Beijing, Xi’an, and Shanghai; relax on board the Yangtze River cruise; treat yourself to the highlight of the tour — the one-day Panda Keeper Program at Dujiangyan Panda Base in Chengdu.</p>
    <p><a href="#" class="btn btn-primary" >Like it!</a> <a href="#" class="btn btn-default" >But it!</a></p>
  </div>
</div>

常见问题

如何找到区块的开始标签`<div>` 和结束标签`</div>`？

使用HTML编辑器（信息平台的编辑器、dreamwaver）的代码模式。此模式下，<div> 左边会有一条垂直的虚线，沿着这条虚线则可以找到对应的闭合标签 </div>。
通常在 <div> 左边会有一个黑色的倒三角，可以折叠 简单的 <div>区块。注意：复杂的 <div> 不能正常折叠。

我组装不出来想要的盒子怎么办？

第一步，和技术（设计）沟通你想要的盒子效果，让他们帮你设计和组装。
第二步，取出技术组装好并放入信息平台的HTML标签代码，复制到你编写的信息中。

作业

进入信息平台练习上面的example.

HTML 知识速查

HTML 入门知识 (HTML5 标准)

什么是HTML?

什么是HTML 标签?

什么是HTML 标签属性?

什么是 Read-Search-Ask 学习方法?

文档：<html>

标题：<h1> ... <h6>

标题很重要

h1. 标题 简短描述

h2. 标题 简短描述

h3. 标题 简短描述

h4. 标题 简短描述

h5. 标题 简短描述

h6. 标题 简短描述

常见问题

标题的使用应该是渐进的？

作业

段落：<p>

段落换行

段落换行

常见问题

段落的行间距？

作业

段落排版：<p>

段落高亮

段落文字对齐（默认为左对齐）

垂直排列的描述

水平排列的描述

外部引用

段落高亮

段落文字对齐

垂直排列的描述

水平排列的描述

外部引用

常见问题

为什么要按标准格式排版？什么是标签的语义性？

作业

链接：<a>

常用属性

文字链接

图片链接

文字链接

图片链接

常见问题

空链接？

链接的url href="..." 的规则？

作业

图片：<img>

HTML 图像- Alt属性

LAST TIPS：

响应式图片 class="img-responsive"

圆角图片 class="img-responsive img-rounded"

圆形图片 class="img-responsive img-circle"

边框图片 class="img-responsive img-thumbnail"

响应式图片

圆角图片

圆形图片

边框图片

常见问题

响应式图片的高和宽？

响应式图片的原始高宽与页面显示高宽？

作业

图片排版：<img>

图片左浮动 class="pull-left"

图片右浮动 class="pull-right"

图片居中 class="center-block"

图片左浮动

图片右浮动

图片居中

常见问题

什么时候需要手动清除浮动？

作业

列表：<ul>、<ol>

无序列表

有序列表

无序列表

有序列表

常见问题

无效列表？

h1. 标题简短描述

h2. 标题简短描述

h3. 标题简短描述

h4. 标题简短描述

h5. 标题简短描述

h6. 标题简短描述

链接的url `href="..."` 的规则？

响应式图片 `class="img-responsive"`

圆角图片 `class="img-responsive img-rounded"`

圆形图片 `class="img-responsive img-circle"`

边框图片 `class="img-responsive img-thumbnail"`

图片左浮动 `class="pull-left"`

图片右浮动 `class="pull-right"`

图片居中 `class="center-block"`

如何找到区块的开始标签`<div>` 和结束标签`</div>`？