一、HTML文档基本结构
<!DOCTYPE html> DOCTYPE 声明了文档类型，指定了文档的引用规范，有助于浏览器中正确显示网页，DOCTYPE声明不区分大小写； <html> 定义了整个HTML文档，描述了文档类型； <head> 定义了文档的头部，是所有头部元素的容器； <meta charset="utf-8"> 中文网页需要使用<meta charset="utf-8">声明，否则会出现乱码
<title>This is my first html</title>
</head>
<body> 定义了HTML文档的主体，为可视化网页内容；
<h1>我的第一个标题</h1> 定义了HTML文档中的一个标题；
<p>我的第一个段落！</p> 定义了HTML文档中的一个段落；
</body>
</html>
2、什么是HTML？
HTML（HyperText Markup Language）：是用来描述网页的一种超文本标记语言，严格意义上说，HTML不是一种编程语言，而是一种标记语言。
所谓标记语言，是由一套标记标签构成。
HTML使用标记标签描述网页，HTML文档包含了HTML标签及文本内容。
3、什么是HTML文档？
HTML文档：包含HTML标签和纯文本，用来描述网页。
HTML文档也被称为网页。
4、什么是HTML标签？
HTML标记标签（HTML tag）：是由尖括号包围的、成对出现的关键词。
标签对中的第一个标签称为开始标签（开放标签），第二个标签称为结束标签（闭合标签），如<html></html>。
语法格式：<标签>内容</标签>
二 HTML元素
1、HTML元素概念
HTML文档由HTML元素定义。
HTML元素是以开始标签作为起始，以结束标签作为终止，元素的内容是开始标签与结束标签之间的内容。
具有空内容的元素称为空元素，即没有内容的元素，可在开始标签中进行关闭，例如<br />。
大多数HTML元素可以拥有属性。
2、嵌套的HTML元素
HTML文档由嵌套的HTML元素构成。
以上述实例为例，“<p>这是一个段落！</p>”为一个元素，该元素拥有一个开始标签<p>，元素内容“这是一个段落！”，以及一个结束标签</p>。而该元素嵌套在元素<body></body>元素中。
PS：
在XHTML、XML以及未来版本的HTML中，所有的元素必须被关闭，空元素在开始标签中添加斜杠是关闭元素的正确方法。
HTML标签对大小写不敏感，但是尽量使用小写，因为万维网联盟（W3C）在HTML4中推荐使用小写。
注意，关于标签嵌套：
一般，块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。需要注意的是，p标签不能包含块级标签。
三 HTML属性
属性是HTML元素提供的附加信息，一般添加在开始标签中。
属性值应该始终被包括在单引号或者双引号中，如果属性值本身就含有双引号，那么属性值需要使用单引号包围，例如name=‘Love “story” fish’。
属性总是以“名称/值对”的形式出现，如name="value"。
属性实例：
<img src="google.JPG" width="30" height="30">
其中，图片文件位置在src属性中指定，图片的大小由width和height属性设置。
属性和属性值对大小写不敏感，推荐使用小写的属性/属性值。
常用的属性：
| 属性 | 描述 |
| class | 为HTML元素定义一个或多个类名，类名从样式文件引入 |
| id | 定义元素的唯一id |
| style | 规定元素的行内样式 |
| title | 描述元素的额外信息（作为工具条使用） |
一 常用的头部元素标签
<head>元素包含了所有的头部标签元素。
1、<title>标签定义了HTML文档的标题，在HTML/XHTML文档中是必须的。
主要功能：
定义了浏览器工具栏的标题；
当网页添加到收藏夹时，显示在收藏夹中的标题；
显示在搜索引擎结果页面的标题；
2、<base>标签描述了基本的链接地址或链接目标。
该标签作为HTML文档中所有的链接标签的默认链接，即如果HTML文档中的超链接标签没有添加链接地址，则默认访问<base>标签中的链接。 语法格式：<base href="url" target="...">
3、<link>标签定义了文档与外部资源之间的关系，常用于链接到外部样式表。
语法格式：<link rel="stylesheet" type="text/css" href="xxx.css">
4、<style>标签定义了内部的CSS样式。
语法格式：<style type="text/css">css样式规则</style>
5、<meta>标签描述了一些基本的HTML页面元数据，元数据不显示在页面上，但会被浏览器解析。
<meta>元素通常用于制定网页的描述、关键词、文件的最后修改时间、作者，以及其他元数据。
主要有http-equiv、name和content三个属性。前两个指定了元数据信息的名称，content用于指定对应的值。
例如：<meta http-equiv="Content-Type" content="text/html;charset="utf-8" /> <meta name="author" content="LoveStory_Fish" />
6、<script>标签用于加载脚本文件。
7、头部标签元素使用实例
<!DOCTYPE html>
<html>
<!-- 头部标签元素 -->
<head>
<!-- 定义文档标题 -->
<title>This is my first html</title>
<!-- 定义网页默认链接 -->
<base href="http://www.baidu.com" target="_blank"></base>
<!-- 定义引用的外部资源文件 -->
<link rel="stylesheet" type="text/css" href="test.css">
<!-- 定义文档样式 -->
<style type="text/css">
p {color: blue}
</style>
<!-- 定义网页语言 -->
<meta charset="utf-8" />
<!-- 定义网页作者 -->
<meta name="author" content="LoveStory_Fish" />
<!-- 每30秒刷新当前页面 -->
<meta http-equiv="refresh" content="60" />
<!-- 执行javascript脚本代码 -->
<script type="text/javascript">
alert("Hello World!")
</script>
</head>
<body>
<p>这是一个段落！</p>
</body>
</html>
二 常用的块级元素标签
浏览器中的块级元素，前后显示折行。
块级元素的特点：
1.块级元素，前后显示折行，从新的一行开始，后面的元素需要另起一行；
2.元素的高度、宽度、行高、上下边距等都可设置；
3.可以通过display:block属性键值对将行级元素转化成块级元素；
1、标题标签
HTML通过<h1> - <h6>六个标签来定义标题。 字体大小按<h1> - <h6>逐渐减小，且重要性递减，<h1>定义最大标题或作主标题（最重要的），<h6>定义最小标题。 标题的重要性：搜索引擎使用标题为网页的结构和内容编制索引，用户也可以通过标题来快速浏览网页。
2、<p>用于定义HTML文档的段落。
3、<hr />定义HTML文档的水平线，一般用于分割内容。
4、<div>HTML文档的分区标签，一帮当作HTML文档的结构化块状元素使用。
用于对网页进行整体分块布局，当作容器来使用。
5、行级元素标签使用实例
注意：一般情况下，段落与段落之间的行距要大于换行的行距。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>This is my first html</title>
</head>
<body>
<!-- HTML注释，不会在浏览器中显示 -->
<!-- HTML标题 -->
<h1>我的第一个标题</h1>
<h2>我的第一个标题</h2>
<h3>我的第一个标题</h3>
<h4>我的第一个标题</h4>
<h5>我的第一个标题</h5>
<h6>我的第一个标题</h6>
<!-- HTML水平线 -->
<hr/>
<!-- HTML段落 -->
<p>这是一个段落！
<!-- HTML折行 -->
<br />
这是段落的一部分内容...</p>
<div>
<p>这是另一个段落！</p>
</div>
</body>
</html>
三 常用的行级元素标签
行级元素一般按行逐一显示，前后不会自动换行。
行级元素的特点：
1.与其他元素在一行上显示；
2.元素的高度、宽度、行高、上下边距不能被设置，宽度为它所包含的内容的宽度；
3.可以通过display:inline属性键值对将块级元素转化成块级元素；
1、<a>定义了HTML文档的超链接。
超链接可以是文字或者一幅图像，可以点击这些内容来跳转到新的网页或者当前网页中的某个部分。 语法格式：<a href="链接地址" target="目标窗口">链接文本或图片</a>
（1）href属性用来描述链接的地址或目标。
注意：尽量使用正斜杠添加到子文件夹，如果使用反斜杠，则会向服务器产生两次HTTP请求，因为服务器会添加正斜杠到这个地址，然后创建一个新的请求。
（2）target属性可以定义被链接的文档在何处显示。
_blank：在新窗口中打
2、<br />定义HTML文档的折行，在不产生一个新段落且需要进行换行的情况下使用，是一个空的HTML元素。
3、格式化标签
格式化标签可以对输出的文本进行格式化。
（1）常用的文本格式化标签
| 标签 | 描述 |
| <b> | 定义粗体文字 |
| <strong> | 定义粗体文字，突出显示重要的文本内容 |
| <i> | 定义斜体文字 |
| <em> | 定义斜体文字，突出显示重要的文本内容 |
| <small> | 定义小号字 |
| <big> | 定义大号字 |
| <sub> | 定义下标 |
| <sup> | 定义上标 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
（2）常用的计算机输出标签
| 标签 | 描述 |
| <code> | 定义计算机代码 |
| <kdd> | 定义键盘码 |
| <samp> | 定义计算机代码样本 |
| <var> | 定义变量 |
| <pre> | 定义与格式文本，控制空行和空格（会保留） |
（3）常用引文、引用标签
| 标签 | 描述 |
| <abbr> | 定义缩写 |
| <address> | 定义地址 |
| <bdo> | 定义文字方向 |
| <blockquote> | 定义长的引用 |
| <q> | 定义短的引用 |
| <cite> | 定义引用，引证 |
| <dfn> | 定义一个定义项目 |
（4）文本格式化实例
<body>
<b>文本加粗</b><br/>
<strong>文本加粗（强调）</strong><br/>
<i>文本斜体</i><br/>
<em>文本斜体（强调）</em><br/>
<big>文本放大</big><br/>
<small>文本缩小</small><br/>
文本<sup>上标</sup><br/>
文本<sub>下标</sub><br/>
<pre>对连续空格和空行
</pre> 进行控制
<p>该段文字从右往左显示</p>
<p><bdo dir="rtl">该段文字从右往左显示</p>
删除错误字体<del>“宋体”</del>，新增字体<ins>华文新魏</ins><br/>
</body>
4、<span>在HTML文档中定义一个行内区域，一行内可以被 <span> 划分成多个区域。
四 常用的行内块级元素
1、<img>定义HTML文档中的图像。
<img>是空标签，只包含属性，没有闭合标签。 语法格式：<img src="图片地址" alt="提示文字">
（1）src属性用来定义图像的URL地址。
src属性的值是指图像的位置，浏览器会将图像显示在文档中图像标签出现的地方。
（2）alt属性用来为图像定义一串预备的可替换的文本，替换的文本属性值是用户自定义的。
当浏览器无法载入图像时，浏览器将会显示这个替代性的文本。
（3）height和width属性分别用于设置图像的高度和宽度，属性值默认单位为像素px。
指定图像高度与宽度，当页面加载时就会保留指定的尺寸，如果不指定图片大小，加载页面时有可能会破坏HTML页面的整体布局。
注意：加载图片需要时间，尽量慎用图片。并且需要注意页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，会显示一个破碎的图片。
2、链接与图片综合运用的实例展示：
<body> 文本链接：<a href="http://www.google.cn">链接</a> <br /> 图片链接：<a href="http://www.google.cn"> <img src="google.JPG" alt="goole图标" height="30" width="30"> </a> </body>
CSS
1.什么是CSS？
CSS是Cascading Style Sheet的缩写。译作”层叠样式表单“。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。
1.2 基本格式
CSS规则是由两部分组成，选择器以及一条或多条声明，声明使用分号隔开：
selector { declaration1 ; declaration2 ......}
例如 : h1{ color:r
ed ; font-size:14px ; }
1.3 常用属性
CSS引入方式
从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。现在普遍的规范写法是外联式
1. 外联式
把css代码写在一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
示例代码如下：
<link href="base.css" rel="stylesheet" type="text/css" />
注意： 1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内
2. 内联式
门户网站的 CSS 代码通常采用嵌入式，即通常所说的内联方式 (Inline Style)，。把css代码直接写在现有的HTML标签中，并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。
示例代码如下：
<p style="color:red;font-size:12px">这里文字是红色。</p>
内联 CSS 可以有效减少 HTTP 请求，提升页面性能，缓解服务器压力。由于浏览器加载完 CSS 才能渲染页面，因此能防止 CSS 文件无法读取而造成页面裸奔的现象。
3. 嵌入式
嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间，并且一般情况下嵌入式css样式写在<head></head>之间。
示例代码如下：
<style type="text/css">
span{
color:red;
}
</style>
这样做虽然更为直观，但很大程度上加大了页面体积，不符合结构与表现分离的设计思想。
总结一下：
外联优点：css在同一个文件中，当页面需要修改的时候只需要修改一个文件即可，方便维护。
缺点：HTTP请求多，浏览器要加载完CSS才能渲染页面，因此影响页面的性能。
内置优点：内联 CSS 可以有效减少 HTTP 请求，提升页面性能，缓解服务器压力。由于浏览器加载完 CSS 才能渲染页面，因此能防止 CSS 文件无法读取而造成页面裸奔的现象。
缺点：每次修改css的时候需要修改多个页面
优先级： 内联式>嵌入式>外联式 但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>
总结来说，就近原则（离被设置元素越近优先级别越高）
常用样式属性
1 字体属性Font：
（1）font-style：设置字体样式 （2）font-size：设置字体大小 （3）font-family：设置字体类型如:宋体
（4）font-weight : normal | bold | bolder | lighter | number
2 设置字体粗细
normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
bold : 粗体。相当于number为700。也相当于b对象的作用
bolder :特粗体
lighter :细体
3 文本属性Text:
（1）text-align :设置文本对齐方式。
（2）text-decoration : none || underline || blink || overline || line-through
4 设置文本装饰
none : 无装饰 blink : 闪烁 underline : 下划线品 line-through : 贯穿线 overline : 上划线
3 背景属性Background：
（1）background-color：设置背景颜色。 （2）background-image：设置背景图像。background-image: url(图像地址) （3）background-repeat：设置一个指定的背景图像如何被重复显示。
5 定位属性position
（1）position : static | absolute | relative
6 设置对象的定位方式
（1）static :默认值。无特殊定位，对象遵循HTML定位规则 absolute :将对象从文档流中流出，即将其转化为一个“层”，并使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定 位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义 relative :对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置
（2）z-index : auto | number 设置对象的层叠顺序。 auto : 遵从其父对象的定位 number : 无单位的整数值。可为负数
7 方框属性Box:
常用的方框属性有：边界属性Margin、边框属性Border、填充属性Padding。
（1）边界属性Margin： (1-1)margin-top 设置对象的上边距 (1-2)margin-right 设置对象的右边距 (1-3)margin-bottom 设置对象的下边距 (1-4)margin-left 设置对象的左边距 （2）边框属性Border： (2-1)border-style 设置对象的样式
(2-2)border-width 设置对象的宽度 (3-3)border-color 设置对象的颜色 （3）填充属性Padding： (1-1)padding-top 设置对象与上边框之间的距离
(1-2) padding -right 设置对象右边框之间的距离 (1-3) padding -bottom设置对象下边框之间的距离 (1-4) padding -left设置对象左边框之间的距离
8表格属性Table:
（1）border-collapse : separate | collapse
separate : 边框独立（标准HTML）
collapse : 相邻边被合并
设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。
CSS框架属性
CSS布局模型
css布局模型
布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。
CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
1.流动模型
流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
流动布局模型具有2个比较典型的特征：第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如下代码三个块状元素标签(div，h1，p)宽度显示为100%。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
2.浮动模型
想让两个块状元素并排显示，怎么办？设置元素浮动就可以实现这一愿望。
任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。div{float:left;} div{ float:right;}
div{ 200px; height:200px; border:2px red solid; } #div1{float:left;} #div2{float:right;} //一左一右显示
3.层模型
让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。
层模型有三种形式:1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
绝对定位：position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
div{
200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
相对位置：
position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
如下代码实现相对于以前位置向下移动50px，向右移动100px;
#div1{ 200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; }
固定位置：
fixed：表示固定定位，与absolute定位类型类似，但它相对移动的坐标是固定不变的视图（屏幕内的网页窗口）本身，不会随浏览器窗口的滚动条滚动而变化，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。（相当于浏览网页时弹出的小广告）
几个基础知识
- URL 组成
- 状态码
- 200
- 301
- 304
- 307
- 403
- 404
- 500
- HTTP 方法
- GET
- POST
- PUT
- DELETE
- HEAD
- OPTIONS
- TRACE
- HTTP 首部
- cache-control
- connection
- date
- accept
- if-Modified-Since
- if-Match
- ETag
- content-encoding
长度值
相对长度:以属性的前一个属性单位为基础来设置当前属性
em:相对字符的高度.该设置以当前元素使用的文章高度为单位
px:像素点
%:百分比
绝对长度:不会随着显示装置的不同而改变
in:英寸(1 in = 2.54 cm) cm:厘米 mm:米 pt:点(1 pt = 1/72 in) pc:帕(1 pc = 12 pt)
块标签和内联标签
#内联标签
<span>span</span> <!-- 内联标签 --> <a href="#">a链接</a> <!-- 内联标签 --> <strong>strong</strong> <!-- 内联标签 --> <em>em</em> <!-- 内联标签 --> <time>时间</time> <!-- 内联标签 --> <mark>标记</mark> <!-- 内联标签 -->
1. 独占一行显示
2. 支持所有的样式
3. 不设置宽度，宽度撑满父级的空间
1. 可以在一行显示
2. 不支持宽高，上下的margin，上下padding支持的也有问题
3. 代码换行会解析出一个空格(字体和字体大小，可以控制空格大小)
4. 宽度由内容撑开
1. 可以在一行显示
2. 支持宽高
3. 代码换行会解析出一个空格
4. 不设置宽度的时候，宽度由内容撑开
1. a标签中 不能包含a标签
2. 内嵌标签中不能包含块标签
3. 部分块标签中 也不能再包含块标签: p, h1-h6, dt
4. 注意以下几种嵌套是固定的:
ul下只能包含li，li的父级也只能是ol或ul，当然li中可以随意放置
ol下只能包含li，li的父级也只能是ol或ul，当然li中可以随意放置
dl下只能包含dt和dd，dt,dd的父级也只能是 dl，当然dd中可以随意放置
float: 浮动
left
right
none
1. 在浮动元素下边添加<div class="clearFix"></div>
.clearFix {
clear: both;
}
#position: relative;相对定位
1. 元素之间相对定位，不设置位置偏移，元素和之前不会有任何变化.
2. 元素移动之后，原始位置会被保留（不脱离文档流）
3. 根据元素原始的位置，来计算坐标
4. 提升层级
#position: absolute 绝对定位
1. 脱离文档流
2. 提升层级
3. 根据有定位的父级来计算自己的坐标，如果父级没有定位，就一级级向上找，如果所有的父级都没有定位，就根据document来计算自己的坐标.
4. 触发BFC
5. 使内嵌元素支持宽高
6. 不设置宽度的时候，宽度由内容撑开
#position: fixed;固定定位
1. 脱离文档流
2. 提升层级
3. 把元素固定在可视区的某个位置上
4. 触发BFC
5. 使内嵌元素支持宽高
6. 不设置宽度的时候，宽度由内容撑开
z-index 层级
1. 只能加给定位元素
2. 数值越大层级越高
3. 在同级元素之间比较层级
BFC作用：
1. 包含浮动元素
2. 阻止margin向外传递
3. 不被浮动元素覆盖
BFC触发条件：
1) float的值不为none；
2) overflow的值不为visible；
3) display的值为 table-cell、table-caption和inline-block之一；
4) position的值不为 static或 relative中的任何一个；