01 【零基础入门】html学习笔记（1）
之前学习了前端的一些基础知识，现在想深入地、精通地学习前端，往前端和全栈工程师方向发展。
之前学习前端主要是通过看视频，结合动手练习。现在认为看书+视频+实践，应该是最高效的学习方法。对于html、css，我主要参考《head first html 与css 第二版》，head first系列书讲解知识点循序渐近，容易理解。
以下是我看这本书，结合之前学习做的笔记，第一部分梳理如下：
超文本标记语言：hypertext markup language
1.1 概念理解
1，作用：负责描述页面的结构；
2， 理解html的含义：
1）ml：标记语言，用来描述网页的结构；
浏览器是怎么知道如何显示一个页面的：通过html语言中的标记。比如<p> <head> 等，标记会告诉浏览器文本的结构和含义。即哪些文本是标题，哪些是段落，图片放在什么位置等。
需要用成对的标记包围页面的内容（有的标记例外：如<img>）
例：<h1>the first page</h1> 整体称为元素：元素=开始标记+内容+结束标记
2）ht：超文本；能从一个页面中链接到其它页面。
1.2 基本语法
1，html结构
一个比较完整的骨架是这样：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 描述网页的配置 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <meta name="Keywords" content="牛逼，很牛逼，特别牛逼" /> 6 <meta name="Description" content="网易是中国领先的互联网技术公司" /> 7 <title>Document</title> 8 </head> 9 <body> 10 其中的内容是用户可以看见的内容 11 </body> 12 </html>
第1行：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 为浏览器指定页面的文档类型 ，这不是一个html元素！
- public表示该标准是公共可用的；
"-//W3C//DTD XHTML 1.0 Transitional//EN"表示使用的是xhtml1.0版本<!DOCTYPE html>html5中的doctype
第4行 ： 字符集设置
- 字符集：可以在计算机上表示某种语言中的所有字母、数字和其他符号。比如ASCII等。如今标准已经统一为Unicode字符编码，它是很多常用软件和操作系统支持的一个字符集。我们需要告诉浏览器我们在使用unicode编码，用
<meta>标记。 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">这是html4.01和更早版本中<meta>标记的格式。 html5中，直接写为<meta charset=”utf-8”>- Utf-8是unicode系列中的一个编码（这个系列中还有其他编码）
中文能够使用的编码有两种：
第一种：UTF-8 国际通用字库，里面涵盖了所有语言文字，比如阿拉伯文、汉语
第二种：gb2312 也可写成gbk是中国的字库，仅涵盖了汉字和一些常用外文、符号字库规模： UTF-8（字全） > gb2312（只有汉字）
保存大小： UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）
由于UTF-8字库规模大，所以描述一个汉字需要的码更多。
UTF-8里面存储一个汉字3个字节。而gb2312中存储一个汉字2个字节。总结：
UTF-8 字多，有各种国家的语言，但是保存容量大，文件臃肿；
gb2312字少，只用中文和少数外语和符号，但是容量小，文件小巧
.列出2个使用情形：
- 公司是做日本动漫的，经常出现一些日语动漫的名字，网页要使用UTF-8。如果用gb2312将无法显示日语。
- 公司就是中文网页，极度的追求网页的显示速度，要使用gb2312。如果使用UTF-8将每个汉字多一个byte，所以5000个汉字，多5kb。
我们亲测：
● qq网、网易、搜狐都是使用gb2312。这些公司，都追求显示速度。
● 新华网藏语频道，使用的是UTF-8，保证字符集的数量。
注：
当我们不设置的时候，sublime默认类型就是UTF-8。而一旦更改为gb2312的时候，就一定要记得设置一下sublime的保存类型：
文件→ set File Encoding to → Chinese Simplified(GBK)
第5行： 关键词
第6行： 描述
2，折叠显示
html中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示
网站的线上版本为了加快网页加载速度，提高用户体验，有时会进行代码压缩，减少代码的体积。如下图所示，HTML标签都没有换行、都没有缩进（tab），HTML和换不换行无关，标签的层次依然清晰，只不过程序员不可读了：
3 常用标记
1，h系列标记
<h1></h1> 一级标题
<h2></h2> 二级标题
……
<h6></h6> 六级标题
2，p标记：段落，是英语paragraph“段落”缩写
3，void 元素：没有实际内容的元素，只需要写一个开始标记。
- <br>唯一的作用就是插入一个换行；通常只有用块元素，浏览器才会插入换行，如果想在文本中插入一个换行，可用<br>，或<br/>都可。
<img scr=””><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
4，<q> 短引用，作用段落的一部分；一般浏览器会在引用两边加上双引号
5，<blockquote> 长引用，需要单独显示引用时运用。
6，列表：
<ul> ：表示列表类型：有序列表<ol>【ordered list】；无序列表<ul> 【unordered list】
<li></li> ：每个列表项：【list item】
<li></li>
</ul>注：
1， 列表开始之前有换行，每个列表项之后也有换行，因此<ul> <li>都是块元素
2， <ul> <li>是一起使用的，分开使用就没有任何意义了。
3， <ul>元素中只能包含<li>，不能直接包含文本或其它元素；
4， <li>中可以嵌套写<ul>，即嵌套列表。li是容器级，里面可以放任何东西
5， 还有另一类列表，定义列表。
<dl>
<dt></dt> 列表中每一项都有 定义术语 和 定义描述
<dd></dd>
<dt></dt>
<dd></dd>
</dl>7，<img>标记
- 1， 浏览器如何加载图像？
HTML页面不是直接插入图片，而是插入图片的引用地址。浏览器获取到index.html文件，读取该文件，显示文件时，发现有图像需要获取，再从web服务逐个得到这些图像。
- 2，web常用的3种图像格式：jpeg、 png、 gif
3，
<img src=”images/drinks.gif” alt=”drink”>
src：相同网站上的图像，最好用相对路径；不同网站上的图像，使用url；
alt：如果图像未能显示，就会用alt中的文本来替代它，html5中alt属性必须写。
width height：单位是像素，告诉浏览器图像在页面中显示的宽度、高度。
图像链接：把<img>元素放到<a>中。<a href=”html/downtown.html”> <img src=”images/downtown.jpg” alt=”downtown”> </a>
8，<a target=”_blank” href=”index.html#chai” title=”tea”>see the tea</a> 元素
href：是英语hypertext reference的缩写；默认显示时会有下划线。
href属性可以使用 相对路径 或 url 来链接到其他页面 ；
相对路径：用于链接到同一网站内的页面； url：用来链接其他网站。
target: 在新窗口中打开。现在浏览器的默认设置会在一个标签页打开新容器，而不是全新的浏览器窗口
title：悬停文本，提供链接的一个描述。
直接链接到另一个页面的某一段：
1）找到希望创建锚点的元素，创建id=”chai”，
2）<a href=”index.html#chai”>see the tea</a>
9，<div>
用于将相关的块元素归组在一起，放在逻辑区中。
使用嵌套<div>元素为文件增加更多结构，这有利于保证结构清晰或方便增加样式。除非确实需要，否则不要过多地增加嵌套。
10，<span>
与<div>类似，用于将相关的内联元素和文本归组在一起。
11，字符实体：对于特殊字符，用相应的缩写来输入
例：想在html中显示文本 the <html> element rocks； 通过字符实体，这样输入
the <html> elment rocks
& ：&
< ：<
：>
4 块元素、内联元素
1） 块元素：显示时前后各有一个换行；<div>、<h1> h系列、 <p> 、<blockquote>、<ol>、<ul> <li>
2） 内联元素：在页面文本流中总在“行内”出现；<span>、<em>、 <strong> 、<q>、 <img>
3） 两者都是：<a> 它可以包围块元素，而不是只文本；根据上下文来判断 。
4） 用途区别：块元素通常用在web页面中的主要构建模块，而内联元素则用来标记小段内容。设计一个页面时，一般先从较大的块开始，然后在完善页面时加入内联元素。