一、HTML基本介绍
1.1 HTML基本介绍
HTML是负责描述文档语义的语言
HTML是英语HyperText Markup Language的缩写，超文本标记语言。
现在的业界的标准，网页技术严格的三层分离：
html就是负责描述页面的语义；css负责描述页面的样式；js负责描述页面的动态效果的。
1.2 开发工具
任何的纯文本编辑器都能够编辑html，比如记事本、editplus、notepad++。
比较有名的专门制作网页的工具有：
DreamWeaver (Adobe公司的产品，前端学院不讲，这个东西过时了，不是一个好的代码编辑器)
Sublime （高效率的程序书写工具）
WebStorm （更高级的项目级别编程工具）
二、html骨架
标准的骨架
网页的最外层的标签对儿是<html></html>标签对儿，里面有两部分，分别是head和body。
head标签中，描述网页的配置；body中的内容，才是用户可以看见的内容。
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 <title>Document</title>
6 </head>
7 <body>
8
9 </body>
10 </html>
2.1 文档声明头
任何一个标准的HTML页面，第一行一定是一个以
1 <!DOCTYPE …… 开头的语句。
这一行，就是文档声明头，DocType Declaration。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
到底有哪些规范呢？
首先我们先确定一件事儿，我们现在学习的是HTML4.01这个版本，这个版本是IE6开始兼容的。HTML5是IE9开开始兼容的。但是
IE6、7、8这些浏览器还不能过早的淘汰，所以这几年网页还是应该用HTML4.01来制作。后面将知道手机、移动端的网页，就可
以使用HTML5了。
2.2 字符集
|
中文能够使用的字符集两种：
第一种：UTF-8
|
第二种：gb2312
|
也可以写成gbk
有两个字库UTF-8和gb2312。 UTF-8是国际通用字库，里面涵盖了所有地球上所有人类的语言文字，比如阿拉伯文、汉语、鸟语…… gb2312 是国标，是中国的字库，里面仅涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号。 字库规模： UTF-8（字全） > gb2312（只有汉字） 我们用meta标签可以声明当前这个html文档的字库，但是一定要和保存的类型一样，否则乱码！（重点） 注意，由于UTF-8里面保存了世界上所有人类语言，所以描述一个汉字需要的码更多。 UTF-8里面存储一个汉字3个字节。而gb2312中存储一个汉字2个字节。 保存大小： UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快） |
2.3 关键字和页面描述
meta除了可以设置字符集，还可以设置关键字和页面描述。
- <meta name="Keywords" content="牛逼，很牛逼，特别牛逼" />
<meta name="Description" content="网易是中国领先的互联网技术公司”
只要设置的Description，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO，search engine optimization，搜索引擎优化。
2.4 title标签
|
title也是有助于SEO搜索引擎优化的
三、HTML的基本语法特性
3.1 HTML对换行不敏感，对tab不敏感
3.2 空白折叠现象
HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。
代码：里面有空格、缩进、换行
|
显示的时候，折叠了：
3.3 标签要严格封闭
标签不封闭是灾难的：
|
四、h和p标签
4.1 h系列
<h1> 到 <h6> 都是标签：
<h1></h1> 一级标题
<h2></h2> 二级标题
……
<h6></h6> 六级标题
h标签没有嵌套关系的。h是容器级的标签。理论上里面可以放置p、ul，只是法律上的允许，在语义上，不要这么写。
4.2 p标签
段落，是英语paragraph“段落”缩写。
HTML标签是分等级的，HTML将所有的标签分为两种：容器级、文本级。
顾名思义，容器级的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片、表单元素。
p标签是一个文本级标签。从学习p的第一天开始，就要死死记住：p里面只能放文字、图片、表单元素。其他的一律不能放。
五、图片
5.1 能用的图片类型
页面上可以插入图片，能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别，css课上讲。
不能往网页中插入的图片格式是：psd、ai
5.2 语法
HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。
插入方法：
|
这个标签和我们之前学的，都不一样，因为这个标签不是“对儿”。自封闭标签，也称为单标签。
我们上午学习的meta也是自封闭标签：
|
5.3 alt属性
alt属性：
|
alt是英语alternate“替代”的意思，就表示不管因为什么原因，当这个图片无法被显示的时候，出现的替代文字（有的浏览器不支持）。
5.4 相对路径
HTML中插入图片，所以现在有两个文件，一个html文件，一个是jpg文件。
我们关心的就是这两个文件的相对位置。即使这个网站项目，被用u盘拷给了别人，只要相对路径不变。图片一定能够正常显示。
当图片在文件夹里面的时候：
|
如果在很深的文件夹中，也不怕，可以一直罗列下去：
|
如果情况变得复杂，我们的图片在浅一层的文件夹中：
|
如果是上两级：
|
还可以更为复杂：
|
上两级的文件夹中的images文件夹中的jiehunzhao的文件夹中的baby.jpg
相对路径不会出现这种情况：
|
../要么不写，要么就写在开头。
六、超级链接
6.1 基本语法
完整的超级链接：
|
6.2 页面内的锚点
页面当中可以有锚点，所谓的锚点，就是一个小标记，这个小标记是用户不可察觉的，用户不知道这里有一个标记。
锚点用name属性来设置，一个a标签如果name属性（或者id属性），那么就是页面的一个锚点。
|
那么网址：
|
就能够让这个锚点在页面最顶端显示，此时页面有卷动。
如果有一个超级链接，指向页面中的锚点，那么就是：
|
6.3 a是一个文本级的标签
比如一个段落中的所有文字都能够被点击，那么应该：
p包裹a：
|
而不是a包裹p：
|
a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。
来源：oschina
链接：https://my.oschina.net/u/2725355/blog/1925169