HTML——学习笔记
本文作者：IMWeb 我饿了 原文出处：IMWeb社区 未经同意，禁止转载
HTML——学习笔记
我是next 3期学员dengyu，这是我的HTML学习笔记，欢迎大家指正错误。
1、什么是HTML？
HTML不是一种编程语言，它是一种超文本标记语言(Hyper Text Markup Language)，标记语言是一套标记标签(Markup tag)，浏览器通过HTML标记标签来构造描述我们访问的网页。
2、什么是HTML标签？
标记标签(Markup tag)通常被称为HTML标签(HTML tag)，HTML标签是由<左尖括号+关键词+>右尖括号组成，如：
<html>HTML标签通常是成对出现的，第一个标签被称为开始标签(Opening tag)，第二个标签被称为结束标签(Closing tag)，结束标签和开始标签的内容一样，只是在关键词前添加/正斜杠表示结束，如：
<html></html>也有单独出现没有结束标签的标签单标签，如 换行标签：
<br>3、HTML文档的基础结构
HTML文档的文件名一般为“文件名.htm”或者“文件名.html”，HTML文档由文档声明和html元素组成，html元素内，只能包含head元素和body元素，例：
<!DOCTYPE html>
<html>
<head>
<title>基本HTML结构</title>
<meta charset="utf-8">
</head>
<body>
<h1>我是一级标题</h1>
<p>我是一段文本段落</p>
</body>
</html>- <!DOCTYPE html>为HTML 5文档声明，告诉浏览器我们现在使用的是HTML 5版本进行解析，编写html文档时千万不要忘记，避免浏览器错误的解析html版本，造成一些页面显示不正确等奇怪的问题。
- <html></html>:html元素，包裹整个页面的代码，所以被叫做顶级元素或者根元素，html元素内，只能包含head元素和body元素
- <head></head>：head元素，页面通用信息通常放在head元素中，通用信息也称之为元数据，用来描述html文档本身的信息，比如title描述的是这个页面的名称是什么，title还有一个特别的地方，是显示在浏览器的标签页之上。
- <body></body>:body元素存放页面的内容，文本，图片，音频，游戏等等。页面内容通常显示在浏览器的页面区域。
4、深入了解head元素
<head>元素用于定义网页的常规信息和元数据，虽然在网页中不可见，但是也是非常的重要。总得来说其里面的子元素大概分为三类，分别是：描述网页基本信息的，指向渲染网页需要其他文件链接的，各大厂商根据自己需要定制的。
网页基本信息
一个网页，首先得有个标题，就跟人有名字一样。除此之外，还可以根据实际需要补充一些基本信息。
- 文档标题（浏览器标签中显示的文本）：
<title>深入了解 head 元素</title>- 编码格式：
<meta charset="utf-8">（你可能还看到 gb2312格式，不过不建议使用），如果你的页面出现乱码，那一般就是编码格式不对
- 视窗设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0">- 搜索引擎优化相关内容：
<meta name="description" content=“帮助你深层次了解HTML文档结构”>- IE浏览器版本渲染设置：
<meta http-equiv="X-UA-Compatible" content="ie=edge">其他文件链接
一个完整的网页光有 HTML 结构是非常简陋的，就如一个毛坯房。有了结构之后，我们还需要加入样式与行为为网页增添色彩。
- CSS 文件：<link> 元素经常位于文档的头部，它有2个属性， rel="stylesheet"，表明这是文档的样式表，而 href,包含了样式表文件的路径
<link rel="stylesheet" type="text/css" href="style.css">- JavaScript文件：[removed] 部分没必要非要放在文档头部; 实际上，把它放在文档的尾部（在 </body>标签之前）是一个更好的选择 ，这样可以确保在加载脚本之前浏览器已经解析了HTML内容（如果脚本加载某个不存在的元素，浏览器会报错）。
<script src=“script.js"></script>厂商定制
比如开启双核浏览器先河的360浏览器就定制了一个默认使用哪个内核来渲染页面，可以设置为webkit内核、IE标准，IE兼容三种模式。代码分别为：
<meta name="renderer" content="webkit"> <!-- 默认webkit内核 -->
<meta name="renderer" content="ie-stand"> <!-- 默认IE标准模式 -->
<meta name="renderer" content="ie-comp"> <!-- 默认IE兼容模式 -->同样分享页面到QQ的聊天窗口，有些页面直接就是一个链接，但是有些页面有标题，图片，还有文字介绍。为什么区别这么明显呢？其实就是看有没有设置下面这三个内容（具体参阅：腾讯移动WEB开发平台）。
<meta itemprop="name" content="这是分享的标题"/>
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png" />
<meta name="description" itemprop="description" content="这是要分享的内容" />还有IOS也定制了一些移动开发设置如下：
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-startup-image" href="/startup.png">5、常用的<meta>元素
<meta name="参数" content="具体的描述">描述HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。
- description(网站内容的描述)用于告诉搜索引擎，你网站的主要内容。
<meta name="description" content="这是我学习前端的第一篇学习笔记">- keywords(关键字)用于告诉搜索引擎，你网页的关键字。
<meta name="keywords" content="学习,前端,html,笔记">- viewport(移动端的窗口)这个属性常用于设计移动端网页，相关属性如下：
1.width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
2.height：和 width 相对应，指定高度。
3.initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
4.maximum-scale：允许用户缩放到的最大比例。
5.minimum-scale：允许用户缩放到的最小比例。
6.user-scalable：用户是否可以手动缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0">- robots(定义搜索引擎爬虫的索引方式)robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。
content的参数有all,none,index,noindex,follow,nofollow。默认是all。 具体参数如下：
1.none : 搜索引擎将忽略此网页，等价于noindex，nofollow。
2.noindex : 搜索引擎不索引此网页。
3.nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
4.all : 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
5.index : 搜索引擎索引此网页。
6.follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。
<meta name="robots" content="none">- author(作者)用于标注网页作者
<meta name="author" content="email:xxx@xx.com">- copyright(版权)用于标注版权信息
<meta name="copyright" content="xxxxx"> //代表该网站为xxxxx个人版权所有。- revisit-after(搜索引擎爬虫重访时间)如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问。
<meta name="revisit-after" content="7 days" ><meta http-equiv="参数" content="具体的描述">相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content。
- content-Type(设定网页字符集)(推荐使用HTML5的方式)用于设定网页字符集，便于浏览器解析与渲染页面
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML，不推荐
<meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8- X-UA-Compatible(浏览器采取何种版本渲染当前页面)用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式，在各大框架中这个设置也很常见。）
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面- expires(网页到期时间)用于设定网页的到期时间，过期后网页必须到服务器上重新传输。
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />- refresh(自动刷新并指向某页面)网页将在设定的时间内，自动刷新并调向设定的网址。
<meta http-equiv="refresh" content="2；URL=http://www.xxxxx.com/"> //意思是2秒后跳转到指定网站- Set-Cookie(cookie设定)如果网页过期。那么这个网页存在本地的cookies也会被自动删除。
<meta http-equiv="Set-Cookie" content="name, date"> //格式
<meta http-equiv="Set-Cookie" content="User=xxxxx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具体范例6、什么是HTML元素？
HTML元素(HTML Element)是由开始标签(Opening tag)+内容(Content)+结束标签(Closing tag)组成，如以下的h1元素：
<h1>我是一个一级标题</h1>7、什么是HTML注释？
“当我写下这段代码的时候，只有我和上帝能看懂。现在只有上帝能了。”这是不写注释的程序员们经常说的，所以拥有良好的注释习惯，就能避免和减少在我们写下代码之后再回看我们自己写的代码时，不至于一时看不明白，重新费时的去解读之前写过的代码。
HTML注释不会显示在浏览器页面中，是给我们程序员看的，一般用于对代码的说明和注释代码不让代码执行。HTML的注释语法很简单，注释开始符“<!--”+“注释的内容”+注释结束符“-->”，这样的注释语法是HTML独有的，如：
<!--注释的内容-->8、简单的了解一下HTML属性
HTML属性包含元素的额外信息，这些信息不会出现在实际的内容中,HTML属性大致分为3类：全局属性(id、class、style、title)、某一类元素属性、某一个元素属性。HTML属性写在HTML元素开始标签中，与标签名用空格分隔，然后就是我们元素的属性，属性一般为属性名="属性值"，属性值必须用双引号包裹，也有单独出现的属性如input的布尔属性disabled。
下面是一个a元素和它的属性：
<a href="index.html" title="首页">首页</a>
<!--a 元素有一个href属性，这个属性指定了超链接目标是index.html，还有个title属性，在我们浏览器中，鼠标移动到这个a元素上，会显示一段文本“首页”-->9、常用的基本元素
标题(Heading)
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>段落(Paragraph)
<p>这是一段文字</p>图片(image)
<img src="imweb-log.png" alt="IMWeb" width="184" height="43">链接(anchor)
<a href="http://imweb.io" target="_blank">我是一个超链接，指向IMWeb学院</a>有序列表(order list)
<ol>
<li>首先把冰箱门打开</li>
<li>然后把大象关进去</li>
<li>最后把冰箱门关上</li>
</ol>无序列表(unorder list)
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>div(division)元素，一般包裹块级元素，用来分区
<div>
<h2>区块标题</h2>
<p>区块描述文字</p>
</div>span元素，一般包裹行内元素
<div>
<span>作者：xxx</span>
<span>发布时间：xx-xx-xx</span>
<span>浏览量：xxxx</span>
</div>10、块级元素和行内元素
在HTML中有两种你需要知道的重要元素类别，块级元素和行内元素。
块级元素默认占据整行宽度，在页面中以块的形式展现 —— 相对与其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进行内元素中，但可以嵌套在其它块级元素中，如(p、div、hn、ul、ol、li)。
行内元素同行显示，默认宽度由内容决定，通常出现在块级元素中并包裹文档内容的一小部分，而不是一整个段落或者一组内容。行内元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素或者强调元素、 、。
11、HTML嵌套
如以下代码，p元素被body所包裹，body元素嵌套与html元素之中，这样包裹的结构我们称之为嵌套，不管互联网上页面是多么复杂，它们都是由一个一个的元素通过嵌套这样的方式堆叠而成的。
<!DOCTYPE html>
<html>
<head>
<title>基本HTML结构</title>
<meta charset="utf-8">
</head>
<body>
<h1>我是一级标题</h1>
<p>我是一段文本段落</p>
</body>
</html>12、HTML树
如以下代码，
<!DOCTYPE html>
<html>
<head>
<title>基本HTML结构</title>
<meta charset="utf-8">
</head>
<body>
<h1>我是一级标题</h1>
<p>我是一段文本段落</p>
</body>
</html>- html元素是head和body的父元素(Parent)
- head元素是title元素的父元素(Parent)，body是h1元素和p元素的父元素(Parent)
- head元素和body元素同属于一个父元素html所以它们是兄弟元素(Sibling)，同样h1元素和p元素同属于一个父元素body所以它们是兄弟元素(Sibling)
- 反过来html元素的子元素(Child)有head元素和body元素
- head元素的子元素(Child)只有title元素
- body的子元素(Child)有h1元素和p元素
以上的从属关系，构成了HTML树结构
13、HTML字符实体
预留字符
在 HTML 中，某些字符是预留的不能直接使用，如小于号（<）和大于号（>），直接使用会误认为它们是标签。
所以如果我们希望正确地显示预留字符，那必须在 HTML 源代码中使用字符实体（character entities），如可以使用\<表示小于号（<），\&表示大于号（>）。
空格
浏览器总是会截短 HTML 页面中的连续空格。所以如果你在HTML代码中连续输入多个空格，最后也只会显示一个空格。
那么如何才能实现连续多个空格呢？这就需要用到我们的\ 字符实体了。
简单示例如下：
<p>空格 好多啊，但是只显示成一个</p>
<p>空格 好多啊，全部显示</p>常用字符实体
字符实体可以有两种方法表示：一种为实体名称，一种为实体编号。如小于号（<）既可以用实体名称<表示，也可以用实体编号<表示。
常用几个字体字符如下：
显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
空格 | |   | |
< | 小于号 | < | < |
> | 大于号 | > | > |
& | 和号 | & | & |
© | 版权（copyright） | © | © |
× | 乘号 | × | × |