2016.3.7__HTML 基础_第一天

如果您觉得这篇文章还不错，可以去H5专题介绍中查看更多相关文章。

今日课程预览

0.HTML基础架构

什么是 HTML？

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

例子解释

<html> 与 </html> 之间的文本描述网页

<body> 与 </body> 之间的文本是可见的页面内容

<h1> 与 </h1> 之间的文本被显示为标题

<p> 与 </p> 之间的文本被显示为段落

1.界面架构之 HTML Header

1.1 `<!DOCTYPE html>`

DOCTYPE是document type（文档类型）的简写，用来说明你用的XHTML或者HTML是什么版本。DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。

1.2 `<html lang="en">`

咱们还需要告诉浏览器，咱们的界面使用的语言是什么类型的？ en –> English.

1.3 `<head>`标签

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

1.3.1 `<title>`标签

<title> 标签定义文档的标题。
title 元素在所有 HTML/XHTML 文档中都是必需的。

title 元素能够：

定义浏览器工具栏中的标题

提供页面被添加到收藏夹时显示的标题

显示在搜索引擎结果中的页面标题

总之 title 就是用来方便用户能快速准确得了解到这个网页要介绍的内容所使用的标签。

title的特点：

title标签只能在head标签内出现；
标签内的内容通常在浏览器的标题栏中显示；
浏览器中收藏夹内书签的名称是title的内容；
title的内容可以方便搜索引擎索引页面；
从搜索引擎搜索到的内容的标题往往是网页title的内容；
title通常体现了网页的主题内容，所以记得一定要加上。

1.3.2 HTML `<meta>` 元素

元数据（metadata）是关于数据的信息。

<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

<meta> 标签始终位于 head 元素中。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

针对搜索引擎的关键词

一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

下面的 meta 元素定义页面的描述：

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

下面的 meta 元素定义页面的关键词：

<meta name="keywords" content="HTML, CSS, XML" />

name 和 content 属性的作用是描述页面的内容。

meta属性主要非为两组：

1）name属性与content属性

name属性的值所描述的内容（值）通过content属性表示，便于爬虫查找、分类。其中最重要的是description、keywords和robots。

2）http-equiv属性和content属性

元素名称	元素属性
http-equiv	指定元信息的名称,该属性指定的名称具有特殊意义,他可以向浏览器传回一些有用的信息,帮助浏览器正确的处理页面内容.
name	指定元信息的名称,该名称值可以随意指定.
content	指定元信息的值.

http-equiv 属性所支持的值有如下几个.

expires 指定网页的过期时间.一旦网页过期们必须重新从服务器上下载.

pragma 指定禁止浏览器从本地磁盘缓存中调阅页面内容,浏览器一旦离开该网页就无法脱机访问该页面.

refresh 指定浏览器多长时间后自动刷新指定页面.

set-cookie 设置 cookie. 如果网页过期,那么客户端上的 cookie 也将被删除.

content-type 设置该页面的内容类型和所用的字符集.

1.3.3 HTML `<style>` 元素

<style> 标签用于为 HTML 文档定义样式信息。

您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

因为这里之后会涉及到之后的 CSS ，在这里不做更多的介绍。

1.4 `<body>`元素

几乎大部分 HTML 元素都是写在 body 中的，那我们的 body 中经常会用到哪些标签呢？

1.5 `<a>`HTML 链接

HTML 链接是通过 <a> 标签进行定义的。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用 <a> 标签在 HTML 中创建链接。

需要注意路径的分类：

1.绝对路径：http://www.baidu.com
2.相对路径：...
3.物理路径：file开头

<a href="http://www.w3school.com.cn/xhtml/xhtml_syntax.asp">跳转到百度首页</a>
<a href="html/b.html">跳转到b.html</a>

有两种使用 <a> 标签的方式：

1.5.1.通过使用 href 属性 - 创建指向另一个文档的链接

<a href="http://www.w3school.com.cn">This is a link</a>

1.5.2.通过使用 name 属性 - 创建文档内的书签

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 这个命名锚了。

具体效果：有用的提示

基本的注意事项 - 有用的提示：

注释：请始终将正斜杠添加到子文件夹。

假如这样书写链接：href=”http://www.w3school.com.cn/html”，就会向服务器产生两次 HTTP 请求。

这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=”http://www.w3school.com.cn/html/”。

提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。

提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

给大家介绍一个小技巧，就是苹果键+d：选择相似的内容，这个技巧会在咱们之后寻找标签是否正确的结尾，会有很大的帮助。

1.6 HTML 标题

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

咱们可以先设置 h*6，会直接创建6个<h>标签，这个小技巧以后也会经常用到。

在这里咱们使用 h${我是标题}*6->emmet,这样去快速创建 h1 - h6 ，内容->我是标题。

 <h1>我是标题</h1>
 <h2>我是标题</h2>
 <h3>我是标题</h3>
 <h4>我是标题</h4>
 <h5>我是标题</h5>
 <h6>我是标题</h6>

1.7 HTML 列表（有序列表 & 无序列表）

这里咱们使用 li{我是li$}*5, 去创建 5 个无序列表。

我是li1
我是li2
我是li3
我是li4
我是li5

之后咱们来实验一下有序列表。ul>li{我是li$}*5,其中 > 号是下一级。

我是有序列表1
我是有序列表2
我是有序列表3
我是有序列表4
我是有序列表5

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下：

Coffee
Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol>标签。每个列表项始于 <li> 标签。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

浏览器显示如下：

Coffee
Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

浏览器显示如下：

Coffee: Black hot drink
Milk: White cold drink

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

1.8 单标签和双标签

正常咱们看的标签就是正常的双标签，但是有一些特殊的标签，例如<hr>,它只需要一个标签就可以生效，所以说，咱们的标签不一定全部都是一一对应的。

注释：<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。

1.9 HTML 段落

段落是通过 <p> 标签定义的。

注释：

注释：浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）

提示：使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。

用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。）

不要忘记结束标签.即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来.

<br> 还是 <br />?

您也许发现 <br> 与 <br /> 很相似。

在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。

即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。

1.10 HTML 节或区域

<div> 可定义文档中的分区或节（division/section）。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

说白了，div 其实并没有什么意思，主要是用来做页面布局的，经常和 CSS 连用。

1.11 HTML 表格

表格由 <table> 标签来定义。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。

字母 td 指表格数据（table data），即数据单元格的内容。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

咱们可以设置一个 table 来实验一下。

首先咱们来使用一个连写。

table[border=1]>tr*4>td{我是单元格$}*2

cellspacing="0"是设置单元格之间间距为 0 。

<table cellspacing="0" border="1">
    <!-- 定义一个表格 -->
    <tr>
        <!-- 定义一行 -->
        <th>html</th>
        <th>xhtml</th>
    </tr>
    <tr>
        <td>我是单元格1</td>
        <td>我是单元格2</td>
    </tr>
    <tr>
        <td>我是单元格1</td>
        <td>我是单元格2</td>
    </tr>
    <tr>
        <td>我是单元格1</td>
        <td>我是单元格2</td>
    </tr>
</table>

1.11.1表格和边框属性

如果不定义边框属性，表格将不显示边框。

有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

Row 1, cell 1

Row 1, cell 2

表格的表头
表格的表头使用标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器显示如下：

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

1.11.2表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。

如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

row 1, cell 1	row 1, cell 2
	row 2, cell 2

浏览器可能会这样显示：
表格中的空单元格

注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>

row 1, cell 1	row 1, cell 2
	row 2, cell 2

1.12 HTML 图像标签

在 HTML 中，图像由 <img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。

src 指 “source”。源属性的值是图像的 URL 地址。

<img src="url" />

URL 指存储图像的位置。

如果名为 “boat.gif” 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。

浏览器将图像显示在文档中图像标签出现的地方。

如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

例如：

<img src="https://www.baidu.com/img/bd_logo1.png" alt="">
<img src="images/logo.png" alt="">

1.13 HTML `<span>`

<span> 标签被用来组合文档中的行内元素.

提示：请使用 <span> 来组合行内元素，以便通过样式来格式化它们。

注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。

尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。

可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。

可以对同一个 <span> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。

这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

提示：事实上，您也许已经注意到了，W3School 站点上有一些文本的样式与其他文本是不同的。

比如“提示”使用了粗体的橘红色。尽管实现这种效果的方法非常多，但是我们的做法是：使用“提示”使用 span 元素，然后对这个 span 元素的父元素，即 p 元素应用 class，这样就可以对这个类的子元素 span 应用相应的样式了。

HTML:

<p class="tip"><span>提示：</span>... ... ...</p>

CSS:

p.tip span {
    font-weight:bold;
    color:#ff9955;
    }

今日课程预览

0.HTML基础架构

什么是 HTML？

HTML 标签

HTML 文档 = 网页

例子解释

1.界面架构 之 HTML Header

1.1 <!DOCTYPE html>

1.2 <html lang="en">

1.3 <head>标签

1.3.1 <title>标签

1.3.2 HTML <meta> 元素

1.3.3 HTML <style> 元素

1.4 <body>元素

1.5 <a>HTML 链接

1.5.1.通过使用 href 属性 - 创建指向另一个文档的链接

1.5.2.通过使用 name 属性 - 创建文档内的书签

1.6 HTML 标题

1.7 HTML 列表 （有序列表 & 无序列表）

无序列表

有序列表

定义列表

1.8 单标签和双标签

1.9 HTML 段落

1.10 HTML 节或区域

1.11 HTML 表格

1.11.1表格和边框属性

1.11.2表格中的空单元格

1.12 HTML 图像标签

1.13 HTML <span>

更多相关文章

随机推荐

1.界面架构之 HTML Header

1.1 `<!DOCTYPE html>`

1.2 `<html lang="en">`

1.3 `<head>`标签

1.3.1 `<title>`标签

1.3.2 HTML `<meta>` 元素

1.3.3 HTML `<style>` 元素

1.4 `<body>`元素

1.5 `<a>`HTML 链接

1.7 HTML 列表（有序列表 & 无序列表）

1.13 HTML `<span>`