一：基础知识：

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言(标记)。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。

浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！

#超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容(如：文字如何处理，画面如何安排，图片如何显示等)。

网页的组成：

一个网页一般由两部分组成即：

HTML(Hypertext Markup Language)

和CSS(Cascade Style Sheets)。

HTML负责描述网页的结构和内容(如标题，导航栏等) CSS则负责网页的表现(外观)(如背景颜色，字体样式等)。

HTML文档：

是说明这个是一个网页。告诉浏览器这个网页的开始和结束。他包含了之后的两个元素。

和|和

二：html的head部分：

#表示是一种规则，支持的浏览器，这是html5的写法

#可以删除，如果不删除的，用谷歌之类打开，它会认为是英文的，会自动给翻译(如果设置了自动翻译的话)

#定义文档语言编码格式

#自定义页面的刷新时间，即多少秒以后自动刷新

#定义一定时间之后自动访问别的网站

第一个 #标题，用浏览器打开后在浏览器上方显示的

#引用一个图标，在打开后浏览器会显示

#关键字，用于爬虫搜索关键字

#网站描述，包含在网站头部内容里面

#兼容IE浏览器，这是兼容IE7

color:#3c763d;

background-color: red;

}#在页面中写样式，然后在body中可以调用样式

#Script

#引进文件

#写js代码

#这是head部分的结束

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

HTML语言需要一个标准，当我们在第一行指定了的时候，当浏览器去访问我们的代码的时候就就按照HTML代码里指定的标准去读取和渲染给我们展现的页面。

为什么要使用这个去告诉浏览器呢？？？？？？？？：

DOCTYPE模式：

我们先了解一下DOCTYPE的模式

BackCompat：标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式)

CSS1Compat：标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])

问题产生：

当Netscape4(译注：网景公司早期的浏览器)和IE4(微软公司早期的浏览器)实现CSS机制时，并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持，而IE4 虽然接近标准，但依旧未能完全正确的支持标准。尽管IE5修复了IE4 许多的问题(bugs)，但是依然延续CSS实现中的其它故障(主要是盒模型(box model)问题)。

为了保证自己的网站在不同的浏览器中都能正确展现，网页开发者不得不依据各个浏览器的自身的规范来使用CSS。因此大部分网站的CSS实现并未符合W3C的标准。

然而随着标准一致性变得越来越重要，浏览器开发商不得不面临一个艰难的抉择：逐渐遵循W3C的标准是前进的方向。但是改变现有CSS的实现，完整去遵循标准，会使许多网站或多或少受到破坏。如果浏览器突然以正确的方式解析现存的CSS，陈旧的网站显示必然受到影响。

因此立即遵循标准会产生问题，然而忽略标准则又会维持浏览器大战时(译注：微软和网景之间的一段竞争)所产生的混乱。

解决方案：

允许网站开发者能够选择他们所熟知的模式。

依然使用旧式规则显示陈旧的网站。

换句话说，所有的浏览器需要提供两种模式：怪异模式(即兼容模式)服务于旧式规则，严格模式服务于标准规则。Mac平台的IE浏览器最先实现这两种模式，Mozilla， Safari、Opera和Windows平台的IE6也相继实现了这两种模式。WIndows平台的IE5和Netscape4则只提供了怪异模式。

选择使用哪种模式需要一个触发器，而 “DOCTYP切换” 则用于此目的。依照标准：任何一个(X)HTML文档必须拥有一个DOCTYPE(译注：DTD(文档类型定义)是一组机器可读的规则，它们指示 (X)HTML文档中允许有什么，不允许有什么，DOCTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明)用以告诉其他人 这个文档的类型风格

产生于标准化浪潮以前的网页并没有DOCTYPE声明。因此'没有DOCTYPE'意味着触发怪异模式：既依据旧式的CSS规则渲染网页。

相反，如果开发者明确知道包含DOCTYPE，他们应该明白他们想要怎么做。因此大部分的DOCTYPE声明将触发严格模式：即依据标准的CSS规则渲染网页。

任何新的或未知的DOCTYPE将触发严格模式。

一些页面依据怪异模式而写，但是却包含DOCTYPE。这种情况下各个浏览器依据自己的DOCTYPE规则列表来触发怪异模式，参照下面的浏览器比较图表 。

head部分内容详细：

1、Meta(metadata information)

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

2、页面编码

#指定编码类型为UTF-8

3、刷新和跳转

#指定每5秒刷新一次

#指定1秒之后跳转页面至另一个网页

4、关键字

关键字的作用：一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中，比如百度：如果他们收录之后，他们搜索你的关键字的时候，就能找到咱们的网站。

5、描述

例如cnblog里的就是一个描述：

6、X-UA-Compatible

X-UA-Compatible  这个是IE8特有的，知道即可，因为做前端的同学都很害怕IE因为他们问题比较多各个版本问题很诡异，当IE8的时候微软想把各个版本的统一，那么这个参数就出现了，他为了向下兼容，如下的代码如果使用IE8的时候他会以IE7的模式运行。

7、title：

网页头部信息，如下图所示：

8、link:

网页头部的图标

效果图如下：

9、Style：

1、在当前文件中写Css样式

2、在其他文件中写Css样式类似python的模块导入的方式把Css样式导入到当前文件中使用

10、Script：

1、在当前文件中写JS

2、在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用

2、内联标签和块级标签：

三:html的body部分

基础知识

1、body里面分为两类标签：块级标签和内联标签，块级标签占用的是整行，内联标签占用的他所使用的实际大小如下图：

内联标签：a、span、select 等

块级标签：div、h1、p 、h1-->h6等

xxx

#块级标签，占用了一整行

xxx #内联标签，有多少内容占用多少位置

如下:

注：块级标签可以通过 style="display: inline" 设置为内联标签，而内联标签则可以通过style="display: block"变为块级标签

如：

块级标签#h2从块级标签变为内联标签sssss#a从内联标签变为块级标签

2、各种特殊符号:

例如注册符号：

®

3、

p表示段落，默认段落之间是有间隔的！

4月4日，广州再次遭遇强雷雨袭击，当日下午15时，广州白云机场启动了今年以来第三次航班大面积延误橙色预警，延误1小时以上出港航班最多达106班。截至18：00，天气有所好转，白云机场全力放行航班，总体保障正常有序。

受强雷雨天气影响，4日13时30分白云机场启动了航班大面积延误蓝色预警，15时升级为橙色。截至18:00，延误一小时以上出港航班74班，取消出港航班41班、取消进港航班32班，备降桂林、厦门等地14班。

4、br：表示要换行了

4月4日，广州再次遭遇强雷雨袭击，当日下午15时，广州白云机场启动了今年以来第三次航班大面积延误橙色预警，
延误1小时以上出港航班最多达106班。截至18：00，天气有所好转，白云机场全力放行航班，总体保障正常有序。

5、a标签：

< a href="http://www.autohome.com.cn">

1、target属性，_black表示在新的页面打开

2、锚：锚的作用是类似于读书时候的书签，当你你点击这个“锚”=“书签”，的时候就跳转到指定的位置

百度

看第一章 #锚

看第二章 #锚

#id的值对应看第二章，#是保留的值，#后面是id的值

hello!

文件链接 #链接到一个内部文件input.html

#显示一个图片

3、H标签：标题字体的大小，h1最大，h6最小

H1

H2

H3

H4

H5

H6

显示效果如下：

H1

H2

H3

H4

H5

H6

4、select 标签：选择的标签，有多选、单选等几种格式，如下:

单选格式的select标签，并设置默认选择的深圳：

北京

上海

广州

深圳

如下：

多显示单选择按钮select标签：

北京

上海

广州

深圳

结果如下：

多显示多选择按钮select标签:

北京

上海

广州

深圳

可以按住ctrl键多选：

可分组select标签：

北京

上海

广州

深圳

泰国

新加坡

马来西亚

结果如下：

四：input系列标签

1、input:checkbox标签-复选框

#设置默认就选择了

结果如下：

2、input:radio标签-单选框，即只能单选，常用语性别选择等场景：

女:

结果如下：

3、input:text & password 输入框：

结果如下：

4、input:button & submit 提交按钮：

#不能在form里将表单提交#和form结合，提交当前的form数据表单到后台

结果如下：

5、file标签-用来提交文件时使用：

6、多行文本框：

结果如下：

7、form表单：

#将form表单以什么方法提交到什么地址，需要使用action指定地址，对象接收到的将是下面的name为区分的列表

8、label标签：

较好的体验，在点击lable的字体的时候，即可选中与其对应的输入框或选择框：

结果如下：

9、列表 ul/ol/dl

ul列表在前面自动加“点”，代码如下：

结果如下：

10、ol列表在前面自动加“数字”，代码如下：

结果如下：

11、dl列表自动分组，代码如下：

结果如下：

12、表格：

结果如下：

13、合并单元格：

结果如下：

14、fieldset标签：

协议请仔细阅读协议内容：签字即认为已经完全阅读本协议

结果如下：

五：CSS基本使用

Title

}#idselect{background-color:olivedrab;color:#3a87ad}#所有id是idselect的将会应用此效果

div{background-color:tan}#所有div都会应用此效果

导入的css样式