html初学篇

admin管理员组

文章数量:1547451

html5

常用标签

<h1></h1>
<p>段落标签</p>
<h1>标题标签,一个html只能有一个h1标签</h1>
table 表格标记
表格的组成 table tr行 td列（单元格）
表格的html属性:
border 边框 
bordercolor 边框颜色
cellspacing  指的是单元格与单元格之间的距离
cellpadding  指的是内容到单元格之间的距离
bgcolor  背景颜色
width 宽度
height高度 
align 水平对齐方式 注意点: 给table设置，表示整个表格的对齐方式， 设置子tr或者td上面表示文本对齐方式
valign  top  bottom middle  文本垂直对齐方式,设置给tr,td
table没有valign属性
colspan  合并列   合并的是左右
rowpsan  合并行   合并的是上下

<!--注意点：单选按钮必须设置name属性，同一组name属性的属性值必须一样，不同组的反之亦然-->
<!--selected属性默认选中-->
<select>
    <option value="-请选择-">-请选择-</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
form表单标记  作用：收集用户信息
    1、form标记是自上而下排列的
    2、name属性的作用就是用来区分表单 登陆 和 注册  --- 名称
    3、method属性 作用提交方式 属性值 get 不安全  post 比较安全的  默认提交方式是get
    4、action属性 作用 放地址（后台地址） login.php  login.asp
    5、target属性 作用 新窗口打开

    input标记 表单框 
    1、input标记由于type属性的属性值不同，决定了表单框的功能不同  type属性就是类型
    2、name属性 名称 表单框的名称  给后台使用的
    3、value属性 值 提示信息
    4、placeholder属性 提示信息 当你输入内容，提示信息会自动消失  H5新增属性

一、什么是前端？什么是H5？

主要工作，做页面。PC端的网站、移动APP、小游戏、小程序
H5是HTML语言的简称，是HTML语言的第五个版本

二、后台（后端）
后台的主要工作是和服务器和数据库打交道
服务器：是一台超级电脑，它的配置和性能比普通电脑高不知道多少倍，一天24小时不能断电
服务器的作用：存储数据和处理数据

web标准

web标准：结构标准 表现标准 行为标准

1. W3C：万维网联盟,制定了结构和表现的标准
2. WHATWG:网页超文本应用技术工作小组，以推动HTML5标准为目的而成立的组织,在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。
3. ECMA:欧洲电脑厂商联合会 制定了行为标准

html

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
XHTML指可扩展超文本标记语言（标识语言）（EXtensible HyperText Markup Language）。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
HTML5指的是HTML的第五次重大修改（第5个版本）

站点

站点 是一个大的文件夹

1. html文件夹 放网页里面的子页面的

2. css文件夹 放css样式文件的

3. js文件夹 放js行为文件的

4. images文件夹 放图片

5. index.html是主页

站点的作用：用来归纳一个网站上所有的网页、素材以及他们之间的联系
文件的命名规则
文件命名规则：用英文，不用中文
名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；必须以英文字母开头。
首页必须命名为index.html

建站流程:

1、注册域名 网址 http://www.baidu http://www.taobao… 通过域名可以访问网站
购买域名：新网、西部数码、万网（阿里云）、百度云、腾讯云、新浪云。。。
2、租用（空间）服务器 第一种形式：真实的服务器 第二种形式：虚拟云主机 淘宝
3、网站建设 — 制作页面
4、网站推广 百度竞价、微信公众号(阅读量)、抖音、今日头条、新浪微博
5、网站维护

超文本

超文本指的是：除了文字以外的，网页上面的其它的东西，如视频，音频，图片，超链接…

css

css就是层叠样式表，是web标准的表现标准语言，对网页信息的显示的控制
层叠，对于样式表来说就是优先级的问题，选择器是权重大小

css样式表

内部样式表

<style>
	选择器{属性:属性值;}
</style>

外部样式表

<link rel="stylesheet" type="text/css" href=""/>
<style>
	@import url();
</style>
<!--
两种外部样式表的区别，link和import之间的区别
1. link是html的标签,import是css提供的一种方式
2. link，页面与样式同时加载，而@import必须先加载页面再加载样式。
3. @import可能会有兼容性问题，而link标签没有这个问题
4. 使用dom控制样式时：link能被dom控制，而@import不能被dom控制
-->

内联样式表

在标签内部的style里面写

样式表的优先级

内联样式表的优先级最高，内部样式表和外部样式表的优先级和书写的顺序有关。
后写的会把前面的相同属性覆盖掉，其他属性依旧会继承

css选择器

标签选择器，如p{}
class选择器

html:<div class="div1"></div>  		css:   .div1{属性:属性值;属性:属性值}
class选择器一般给css使用，id选择器留给js使用.
标签的一个class可以取多个名
<div class="div1 big">这是老大</div>

id选择器

<div id="top"></div>			css:	#top{属性:属性值;属性:属性值}

*通配符
一般用来清除内外边距，重置样式。

/*重置样式*/
*{margin:0;padding:0;}
a{text-decoration:none;}
li{list-style:none;}

包含选择器
选择器之间用空格隔开。修改选择器1下的所有选择器2
选择符1 选择符2{属性:属性值;}
伪类选择器:

a:link{属性:属性值;}超链接初始状态
a:visited{属性:属性值;}超链接访问后的状态
a:hover{属性:属性值;}鼠标滑动到上面时的状态
a:active{属性:属性值;}超链接被激活时的状态，即鼠标点下左键时的状态
注意:伪类选择器有浏览器缓存问题，点击超链接a访问过后，会缓存，需要清除历史记录，才能再看到超链接的初始状态
伪类选择器使用时需要按照上面的顺序书写，以免发生错误。
不要给其他标签使用除了hover以外的伪类选择器

群组选择器

div,p,span{color:red;}
多个选择器有相同样式的时候，用群组选择器，合并为一组

css用4位数表示权重
标签选择器的权重为0001
class选择器的权重为0010
id选择器的权重为0100
伪类选择器的权重为0010
包含选择器的权重为包含选择器的权重之和
内联样式的权重为1000

元素类型

1. 块级元素
   特点：自上而下排列的，可以设置宽和高，独占一行h1-h6、p、ul、li、ol、dl、dt、dd、form、table。。。
2. 行内（内联）元素
   特点：横向排列的，不能设置宽和高，大小是由内容撑开的 span、font、b、strong、em、i、a。。。
3. 行内（内联）块元素
   特点：横向排列的，可以设置宽和高 img、所有的input、select、textarea。。。

浮动

浮动相关概念

1. 什么是标准流（文档流）？就是网页的正常排版顺序 — 元素排序方式根据元素类型来的
2. 什么是浮动流？一个元素设置了float属性，就会变成浮动流，不遵循标准流的规则
3. 一个元素如果设置了浮动，不再遵循标准流中的规则，它看起来就像从标准流中删除了一样，原先在标准流的中位置会发生改变
4. 文本环绕现象，浮动的元素对标准流元素本来不占位了，但文字却不能到浮动的元素的位置，因此会出现文本环绕现象

浮动的注意事项

1. 两个元素，第一个浮动了，第二个没有浮动，这个时候，浮动的元素会把没有浮动的元素给覆盖

2. 两个元素，第一个没有浮动，第二个浮动了，这个时候位置保持不变

3. 两个元素，都设置了浮动，如果宽度不够的情况下，第二个依旧会被挤到第二行去

4. 文本环绕显示，一个元素如果浮动了，另一个元素没有浮动，这个时候它里面的文本会环绕浮动元素显示

浮动色块:注意分块，浮动，只会根据左右的距离进行填充，如果在下面一行，会在上面一行最高的元素的下面放置，而不会填充上面的空白部分。

浮动的问题和清除浮动

高度塌陷和元素重叠
高度塌陷就是如果没有给父元素设置高度而希望父元素高度自适应的时候，如果给子元素设置了浮动，会发生高度塌陷
在标准流中子元素可以撑开容器的高度，但是浮动后，脱离了标准流，子元素撑不开容器的高度了，把这种现象叫高度塌陷
高度塌陷会引起元素重叠
清除浮动:清除浮动的负面影响
注意点：并不是只要设置了浮动就要必须清除，只有在发生高度塌陷和元素重叠时才需要清除
清除浮动的方法：

1.给父元素设置overflow:hidden
overflow:hidden原本意思是文本溢出隐藏,有清除浮动的功能
2.使用空元素（空盒子）的方法 在浮动的子元素的同级下增加一个空（div）的元素 
注意点：这个空的元素不能有任何其他样式,再给空元素设置clear:both/left/right/none;
3.万能清除法：定义一个类名,使用伪元素:after,并把类名赋给浮动元素的父级元素
clear:after{display:block;clear:both;content:".";visibility:hidden;height:0;}.clear{zoom:1;}
clear只能够影响使用清除的元素本身，不能影响其他元素
给一个元素设置了浮动，就不再遵循标准流的规则，原本无法设置宽度和高度的行内元素，也可以设置宽度和高度

css属性

宽和高

width:100px;
height:100px;

文本属性

color				文本颜色
颜色值的表示
color: rgba(176,180,185);
background:rgb(255,0,0,.5); 
color:#333333;
font-size			文本大小
单位px,谷歌浏览器支持的文本最小的大小为12px
font-family			字体
font-family:"微软雅黑","宋体","黑体";
单个单词不用加双引号
多个单词表示的一种字体要加双引号
font-weight			文字加粗
font-weight:normal;取消加粗
font-style			文字倾斜
font-style:normal;取消倾斜
text-align			水平对齐方式
text-align:left/right/center
line-height			文本行高
当单行文本的行高等于容器的高时，可实现单行文本在容器中垂直方向居中对齐
量取行高的方法，上一行文字的顶部到下一行文字的顶部的距离.
(如果有参考线标出了行高，可根据参考线量出行高)
text-decoration		文本修饰
text-decoration:none;可以取消下划线
text-indent			首行缩进
text-indent:2em;	1em=16px;
letter-spacing		字间距

文本属性

font-size	单位px,也可以是pt,pt是打印单位.1px=0.75pt
font-family	
谷歌浏览器默认字体是微软雅黑
1、如果是中文必须加双引号
2、如果是英文，单个单词不需要加双引号。如果是一组词，必须加双引号
3、如果是多个字体，字体和字体之间使用逗号隔开
字体的查找规则：先找第一个，如果浏览器支持就显示，如果不支持继续下一个。。。
如果都不支持，浏览器默认字体显示
font-weight
bold(加粗)/bolder(更粗的)/normal(常规)/100-900
100-400一般(100最轻)
500常规字体
600-900加粗字体
font-style
italic/oblique/normal
italic和oblique都是向右倾斜的文字,
但区别在于Italic是指斜体字，而oblique是倾斜的文字
如果没有斜体的字体，应该使用oblique属性值来实现倾斜的文字效果
text-align 文本水平对齐方式
line-height 
当单行文本的行高等于容器的高时，可实现单行文本在容器中垂直方向居中对齐
小于，单行文本应该在容器的中间上面的位置
大于，单行文本应该在容器的中间上面的位置
量取行高的方法，上一行文字的顶部到下一行文字的顶部的距离.
(如果有参考线标出了行高，可根据参考线量出行高)
text-decoration		文本修饰
none:没有修饰
underline:添加下划线
overline:上划线
line-through:添加删除线
text-indent			首行缩进
text-indent可以取负值,
一般首行缩进2个字
text-indent:2em;
使用em就不受文字大小的影响。
letter-spacing		字间距
控制汉字或英文字母的间距
/*字体大小 行高 字体简写*/
font的缩写
font:12px/50px "黑体";

内外边距

margin				外边距
margin:0;					一个数值表示:上下左右
margin:10px 20px; 			两个数值表示:上下 左右
margin:10px 20px 10px; 		三个数值表示:上	左右 下
margin:10px 10px 10px 10px;	四个数值表示:上 右 下 左

margin-top 这个属性的bug问题
父元素和子元素都在在标准流下的时候，给子元素设置margin-top,父元素也会跟着往下掉。
如果父元素设置了背景，子元素设置边框或者背景，都会出现。
如果父元素设置的边框，不会出现这样的情况。
使用overflow：hidden;可以解决这个问题
原因: 当我们给子元素设置了margin-top时，浏览器在解析时会误认为给父元素设置的，所以会出现整体往下掉的情况
条件：
1、如果子元素或者父元素是脱落文档流的，设置了浮动，就不会出现这样的问题。
2、如果父元素是边框，或者两个都是边框时不会出现往下掉的情况
3、如果父元素和子元素都是背景的情况下，会往下掉。父元素是背景，子元素是边框时也会往下掉
解决方法：
使用overflow：hidden；属性  给父元素设置
padding				内边距

列表属性

list-style	列表属性
list-style:none;	去除列表符号
list-style-type:disc实心圆(默认)/circle空心圆/square实心方块/none去除列表符号
list-style-image:url(图片路径)(注意，css下写的路径以css为准);
list-style-position:outside外面/inside里面
可以用背景图片做列表符号，灵活方便

背景属性

background
background:缩写
background-color:颜色值;
background-image:url();
背景图片默认会平铺，大小不够则不能显示完整的背景图片
background-repeat:repeat/no-repeat/repeat-x/repeat-y
平铺/不平铺   /横向平铺/纵向平铺
background-attachment:背景图固定
fixed	固定，不随内容一起滚动
scroll	随内容一起滚动
background-position:背景图片的位置
background-position:值1 值2;
第一个值表示水平位置，第二个值表示垂直位置
left/right/center		top/bottom/center
两个都可以用数值表示,单位px
background:url() no-repeat left center;
图片格式
jpg有损压缩格式
gif有损压缩格式
png无损压缩格式

边框属性

border边框样式
border:1px solid red;
border-width:边框宽度
border-color:边框颜色
border-style:边框样式
border-style:solid实线/dashed虚线/dotted点划线/double双线
border-bottom:(3个值)边框宽度 边框样式 边框颜色
border-left:(3个值)边框宽度 边框样式 边框颜色
border-right:(3个值)边框宽度 边框样式 边框颜色
border-top:(3个值)边框宽度 边框样式 边框颜色
颜色可以不写，默认黑色

文本溢出属性

overflow:visible/hidden/scroll/auto/inherit
visible:默认值,内容不会修剪，会出现在元素框之外
hidden:文本溢出隐藏
scroll:浏览器会显示滚动条,以便查看其他内容,滚动条一直存在
auto:当内容太多不够显示时,浏览器会显示滚动条,如果宽度超出就会显示横向滚动条
inherit:从父元素继承overflow属性

空余空间

white-space:normal	nowrap			pre		pre-wrap		pre-line	inherit
normal:	默认值，空白会被浏览器忽略
nowrap:文本不会换行,即使超出了元素的范围，文本也还是在一行上，直到遇到<br/>标签
pre:空白会被浏览器保留,html语言里面的空白（换行和空格）不被忽略,不能正常换行
pre-wrap:保留空白系列，但是正常换行，不会在一行内超出元素范围,一行不够显示时自动换行
pre-line:合并空格符，保留换行符，正常换行
inherit:从父元素继承white-space属性(ie不支持这个属性)
/*注意:汉字和单词可以自动换行，但是数字和英文字母不能自动换行*/

标签补充

强制不换行标签<nobr></nobr>
<style>
	code{
		width:200px;
		height:200px;
		border:1px solid;
		/*把code代码标签转成类似于pre标签 --- 具有预格式化的功能*/
		white-space:pre;
		/*把内联标签转成了块级标签*/
		display:block;
		}
		/*这样就可以把code转换成类似pre标签 --- 具有预格式化的功能*/
</style>
<code>
	var a = 10;
	var b = 20;
</code>
<pre>   嗷嗷叫 
今天雨很大   

适合敲代码</pre>
x<sup>2</sup>   上标标签 
y<sub>2</sub>	下标标签
&copy   圈c
<del>删除线</del>
<s>删除线</s>
<u>下划线</u>

盒模型

盒模型是css布局的基石，决定了网页元素如何显示以及元素相互之间的关系
盒模型是一种形象的称呼，在css里面规定了所有的标签都有一个盒模型

盒模型组成：margin（边界、外边距）、padding（内边距、填充、补白）、border（边框）、content（内容---width和height）

盒模型提供了这些属性让我们布局使用，盒模型可以让我们查看信息
盒模型只是一个概念，提供了一些属性供我们使用
盒模型：

1、w3c标准盒模型  盒模型的宽度 = 左右margin + 左右padding + 左右border + width（内容）
2、IE怪异盒模型   盒模型的宽度 = 左右margin + width（内容）- 包含了padding和border
区别：标准盒模型和怪异盒模型的区别在于计算方式的不同
怪异盒模型的宽度在计算时包含了padding和border
设置怪异盒模型的方法:
在css3里面提供了一个属性，可以把标准盒模型转成怪异盒模型使用
box-sizing:border-box(把标准盒模型转成怪异盒模型)/content-box;(标准盒模型--默认值)
如果希望全部转成怪异盒模型，在*里面设置box-sizing:border-box;

盒模型提供了这些属性让我们布局使用，盒模型可以让我们查看信息
盒模型只是一个概念，提供了一些属性供我们使用
盒模型：
1、w3c标准盒模型 盒模型的宽度 = 左右margin + 左右padding + 左右border + width（内容）
2、IE怪异盒模型 盒模型的宽度 = 左右margin + width（内容）- 包含了padding和border
区别：标准盒模型和怪异盒模型的区别在于计算方式的不同

单行省略号显示

省略号显示:text-overflow:clip/ellipsis 不显示省略号/显示省略号标记
单行省略号显示的条件:

1. 定义一个宽度width
2. 强制不换行nowrap
3. 文本溢出隐藏
4. 省略号显示text-overflow:ellipsis;

border-radius:2px;	边框圆角	
cursor:pointer;/*鼠标指针属性*/
设置了这个,鼠标移动到上面就会变
/*text-align属性对图片起作用*/
/*一个页面中只能有一个h1标题，一般使用在网站的logo上面。因为h1的搜索权重比其他高*/

元素类型转换

一、元素类型划分方式：
1、刚开始时，元素被划分为两类： 块级元素、内联元素
2、出现了一个行内（内联）块元素，所以元素类型被划分为三类： 块级、内联、内联块元素（这种划分比较常见的）
3、把元素类型划分两类：块级元素、内联元素（包含了内联块）
4、把元素划分为置换元素和非置换元素

二、元素类型的注意点：

1、块级元素一般作为其他元素的容器，可以互相进行嵌套。注意点：p标签不能嵌套其他块级标签
2、内联元素不能使用margin上下值，因为元素特性决定了。不要使用padding-top，因为它影响其他元素
3、内联元素如果脱离了文档流，就可以设置宽和高

可变元素 --- 就是可以改变的元素 内联元素可以变成块级元素
元素要改变它自身的类型要通过display属性

display属性有18个属性值（可能）

block          把其他类型转成块级元素

inline         把其他类型转成内联元素

inline-block   把其他类型转成内联块元素

none           表示把一个元素隐藏      block    把一个隐藏的元素让其显示
在没有div + css布局方式之前，使用最多的是table布局方式
table标签上面有很多的html属性，也有很多css相关的属性

注意点：由于内联块元素默认有内在的尺寸和样式，所以转不成内联元素

a) 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。img|input|select|textarea|button等

非置换元素：html 的大多数元素是非置换元素，即其内容直接表现给用户端。

定位

一、position定位介绍：

1、语法：position：static（默认值-静态定位） /absolute（绝对定位）/relative（相对定位）/fixed（固定定位）;
2、浮动 --- 浮动的出现是为了解决块级元素横向排列的布局问题
3、定位 --- 也是为了解决布局问题
4、所谓的定位其实就是让元素的位置进行移动
5、什么是定位流？就是给元素设置了position属性后，元素就变成了定位流
6、定位属性，必须配合其他值来使用，left、right、top、bottom
7、定位元素有参照物

二、相对定位

特点：
1、相对定位是相对于自己以前在标准流中的位置进行定位的（注意点：相对定位是半脱落状态）

2、不脱落文档流（标准流）的，占位置（空间）

3、区分元素类型的（区分是块级元素、内联元素、行内块元素）,元素以前是什么类型，设置了相对定位后还是什么类型

4、对元素进行微调，主要的作用是配合绝对定位来使用

三、绝对定位

特点：

1、脱离文档流的，不占位置的

2、不区分元素类型

3、绝对定位是相对于父元素进行定位的，如果父元素不是定位流，元素会往上查找有定位流的元素，找到最上级还是没有定位流，会相对于body进行定位（相对于祖先元素进行定位的）

自绝父相 — 子元素设置绝对定位，父元素设置相对定位

四、固定定位

特点：

1、脱落文档流的，不占空间

2、不区分元素类型的

3、相对于body进行定位的

4、不会随着滚动条的滚动而滚动

5、可以相互之间重叠

五、粘性定位

1、position: sticky; 粘性定位

2、粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

元素垂直居中的方法：

1.定位，父相子绝；
子元素left,right,top,bottom=0
子元素margin:auto;
定位方法：常用父相子绝.
需要设置定位前首先确定好参照物。
绝对定位是相对于(定位流的)父元素进行定位的，
如果父元素不是定位流，元素会往上查找有定位流的元素，找到最上级还是没有定位流，
会相对于body进行定位（相对于祖先元素进行定位的）
一般来说后定位的可能会把前面定位的覆盖
定位元素的层级:z-index
z-index默认值为0，数值越大的层级高，覆盖在上面。z-index可以为负值
z-index只对定位流的元素才起作用。
z-index:auto 或者是数值
auto默认值，表示遵从父元素
number 无单位整数，可以为负。
定位的元素一般显示在浮动元素的上面

2.弹性盒?

锚点：

锚点，又叫命名锚记。
1、<a href="#名称"></a>
2、<标签 id="名称"></标签>
这两个好像没有先后顺序。。
锚点，起到页面内部跳转的作用
把要显示的内容包起来，占满，然后overflow:hidden;当点击锚点时，隐藏的部分就会跳转出来。。

透明opacity

div{
    width:200px;
    height:200px;
    background:black;
    /*取值范围:0-1 注意点：没有单位的  opacity:0;隐藏元素  0.5 == .5*/
    opacity:.5;
    /*IE浏览器兼容写法 取值范围：1-100*/
    /*兼容写法是非标准的*/
    filter:alpha(opacity=50);
}

透明的问题

精灵图/雪碧图,图片整合技术

一、图片整合介绍：
css sprite 精灵图 雪碧图 — 图片整合技术
图片整合技术 — 就是把很多小图有规则的拼合成一张大图来使用
二、图片整合的优势：
1）通过图片整合来减少对服务器的请求次数，从而提高 页面的加载速度。
2）通过整合图片来减小图片的体积。
三、了解请求
1、发送请求 — 发送报文 在地址栏输入的网址回车时 — 根据输入的网址去找相应的服务器
2、服务器进行判断 — 如果有就返回，没有就报错 404 路径错误 你的网页走丢了
3、返回请求 — 返回报文 — html、css、js文件还有其他素材 图片 视频、音频。。。
当你第一次打开一个网站时，你会发现有点儿慢（网速问题、网站素材多不多的问题），第二次打开时非常快，因为有浏览器缓存问题。
所谓的图片整合技术，其实就是为了优化网页加载速度，提高用户体验

图片和文字带来的间隙问题：

​ 1、文本会默认把容器撑大，设置行高
​ 2、当容器没有设置高度时，图片会默认把底部撑大几像素（大概是3px）
​ 直接给容器设置高度
​ 给图片设置vertical-align:top/middle/bottom;
​ vertical-align
​ 注意点：
​ 1、不要单独去使用，只对内联元素起作用
​ 2、可以解决图片间隙问题

​ html中换行虽然直接使用时没用，但这会产生一个空格的间隙

让文字居中的方法，text-align:center;

当元素由内容撑开的时候，给元素设置padding，

marquee字幕滚动

​ direction方向
​ behavior
​ scrollamount滚动速度
​ marquee是行内块元素

宽高自适应

1、pc端的自适应 页面随着网页的比例的变化，内容会进行变化

​ 注意点：pc端的网页要想全部自适应，必须配合媒体查询来完成。pc端一般情况下业务非常复杂，做完全自适应的页面会特别耗费时间和精力。
​ 网站优化来说，不符合需求。1024px以上是一套样式，1024以下又是一套样式，750px、640px、320px。。。
​ 页面比较简单的，会做完全的自适应。
​ 外层采用百分比布局，内层使用版心布局
​ 高度自适应

百分比/弹性盒？

2、移动（m）端的自适应

​ 基本上完全自适应 — 在移动里面所有的尺寸可以达到自适应
​ 网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应
​ 元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
​ 不写宽度或者设置为百分比，width:auto;

3、高度自适应

有时候在实际开发中，要求子元素的高度不能写死，要随着内容的增加而变化
第一种：不写高度
第二种: height:auto;

最小高度min-height

需求？要求一开始就有一个200px的高度，然后随着内容的增加，高度随着变化
min-height 最小高度 一开始设置一个高度，随着内容的增加的高度会发生变化
max-height 最大高度
min-width 最小宽度
max-width 最大宽度
IE6浏览器兼容问题：

min-height 最小高度  在标准浏览器里面是没有问题
		
min-height 最小高度  在IE6浏览器下，不识别。正常的height就相当于是min-height
过滤器 --- 是一种解决兼容问题的方式，利用的是浏览器的"漏洞"

元素隐藏：

display: none; 直接消失，不占位
visibility: hidden/visibility; 隐藏，不可见，
opacity: 0; 全透明

过滤器

1、下划线过滤器

譬如，在IE6以下浏览器中正常height属性类似于min-height的作用。如若想在IE6中使得height和正常浏览器作用一样，则可通过下划线过滤器 _height解决该问题（下划线过滤器是利用了IE浏览器的"漏洞"，从而解决兼容问题，因此在标准浏览器中不起作用,而在IE6下能够识别）

下划线过滤器语法：选择符{_属性：属性值}

2、关键字过滤器

关键字过滤器附加的声明具有最高优先级

关键字过滤器语法: 选择符{属性：属性值!important}

3、visibility:hidden和display:none的区别

二者均为隐藏显示区域。于前者而言，该属性会使对象不可见，但该对象在网页中所占的空间没有改变；于后者而言，该属性则使对象完全彻底消失。

伪对象选择器::after,::before

伪对象选择符也称为伪元素选择器----可以让我们把一个元素当做两个来使用。

1、::after与content属性一起使用，定义在对象后的内容

div::after{content:url(logo.jpg);}
div::after{content:"文本内容";}

2、::before与content属性一起使用，定义在对象前的内容

div::before{content:"放在前面的内容"}

3、::first-letter定义对象内第一个字符的样式。（该伪元素只能用于块级元素）

4、::first-line定义对象内第一行的样式。该伪元素只能用于块级元素。

ie6以下版本不支持伪对象选择符

自适应窗口

html,body{
	width:100%;
	height:100%;
}

兼容

0、最小高度min-height

min-height:value;
height:auto !important;
height:100px;(value值)/*建议使用*/

css

1、图片间隙

bug：div插入图片时图片会把div撑大几像素。
hack：将<img>转化为块级元素display:block;

2、dt、li中的图片间隙

hack：将img转化为块状元素display:block;

3、表单元素距离顶部位置不一致

hack:给表单元素添加声明：float:left;

4、各浏览器按钮元素大小默认不一致

hack1：给按钮统一大小。
hack2: input外边套一个标签，在这个标签内写按钮样式，再把input边框去掉。
hack3: 如果按钮是图片类型，则直接把图片当做按钮的背景来设置。

5、margin-top

bug：子元素没有设置任何的浮动的情况下，为其设置margin-top属性，浏览器会默认为是给其父元素添加的。
hack:给父元素添加overflow：hidden;

6、当给li中的a转成block,并且有height和float时，如若li没设置浮动，则会出现阶梯显示。此时给li加上float即可。

认识浏览器

五大浏览器内核

Trident(MSHTML)

Gecko

Presto

Webkit

Blink

浏览器内核代表作品

浏览器内核

为什么会出现浏览器兼容问题

常见CSSbug和CSShack

1)图片间隙

图片默认会给容器撑大3px,给图片display:block，这样图片就会自上而下排列，不横向排列。。

图片并排中间有间隙,给图片左浮动。。

图片和文字并排对不齐？ 给浮动吗？(伤脑壳啊)

2)dt,li中的图片间隙

给图片display:block;

3)双倍浮向(双倍边距)(仅IE6)

4)图片在IE浏览器上，在a下面时，有蓝色边框

img{border:none;}

5)低版本IE部分块有默认高度

如何在低版本IE下写出1px的高度?

1.给元素font-size:0;
2.overflow:hidden;

6)表单元素距离顶部间距不一致

给表单元素浮动

7)按钮元素默认大小，样式不一样

1.去掉边框，外面包个div等块级元素来写边框
2.用a来模拟button

8)百分比bug

IE6及以下版本，会出现50%+50%>100%的情况
给右面的元素clear:right;才能解决

9)鼠标指针bug

cursor:hand;只有IE9及以下的浏览器才能识别，其他浏览器不能识别。
应使用cursor:pointer;IE6以上和其他浏览器都能识别

10)margin-top的bug

子元素的margin-top,被浏览器误认为设置给父元素，导致父元素往下掉。
解决方法:给父元素overflow:hidden;或者让子元素浮动。。

11)li下的a转成block,有height,浮动，而li不浮动时，会出现阶梯显示的问题。解决方法，给li浮动

12)input设置高度，ie6的value内容不垂直居中

给input设置行高

cursor扩展

cursor:
auto
crosshair
text
wait
help
progress
inherit
move
ne-resize
pointer手形

表单标签及属性高级

1)表单字段集

表单字段集：相当于一个方框，在字段集中可以包含文本和其他元素。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。disabled定义空间禁止可用

<fieldset disabled="disabled"></fieldset>
<fieldset>
	<legend>个人信息</legend><!--filedset的标题-->
</fieldset>
fieldset下也可以放其他元素，可以用来做表单分组

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MvKuBgpG-1603855275787)(img\表单练习.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hjQZLySz-1603855275788)(img\高级表单案例.jpg)]

2)字段级标题

字段级标题：legend元素可以在fieldset对象绘制的方框中插入标题。legend元素必须是fieldset内的唯一元素。（legend必须在fieldset中使用）

<legend align="left/center/right"></legend>
legend元素可以在fieldset对象绘制的方框中插入标题
如若想给legend中的元素水平居中，只能用padding将其两边撑开。text-align会使legend整体水平移动。

3)提示信息标签

提示信息标签：label元素用来定义标签，为页面上其他元素指定提示信息。

<label for="绑定控件id名"></label>
关联外部文字和表单元素

4)上传文件框

上传文件框：file是type属性新增的类型，它可以对文件进行选择

<input type="file" multiple="multiple"/>
multiple可以实现文件的多选

5)图像域(图像按钮)

<input type="image" src="" width=""height=""alt=""/>
火狐版本不支持此表单

表格标签及属性高级

属性:

1.单元格间距:border-spacing:value;

单元格间距：表示单元格边框之间的距离，该属性必须在table上添加，不可取负值。

border-spacing：value；

2.合并相邻单元格边框

border-collapse：separate(默认值，有边框)/collapse（边框合并）

3.无内容时单元格隐藏

empty-cells：show（显示）/hide（隐藏）

4.单元格大小固定

table-layout：auto/fixed;
fixed：固定宽度，不会随内容多少而改变。当内容为数字或字母时，超出固定宽度的部分如若没有换行符，任然不会换行。
auto：宽度自适应。

5.隔行变色

偶数行  tr：nth-child(2n/even){}
奇数行  tr：nth-child(2n+1/odd){}

标签:

a.表格标题

<caption>标题</caption>
标题位置的设定 caption-side:top/right/bottom/left
left、right只有火狐识别。top、bottom在ie7级以上版本支持。
1、colspan="" 合并列
2、rowspan="" 合并行
3、valign="top/bottom/middle/baseline" 垂直对齐方式
4、rules  添加组分隔线
/*可以使用来设置细线边框*/
rules="rows（只有行线）/cols（只有列线）/all/none" 添加组分隔线
直接在表格标签中设置。
给table设置border="1"这个html属性，是table和每个单元格都有边框的。。
rules就是添加分隔线,可以设置细线边框,设置了table的border对单元格就没有用

b.数据列分组

<colgroup span="value"></colgroup>
<col span="value">
元素均会从左至右以此对数据表格进行分组。
span显示相邻的列数，默认值为1.
分完组之后可以通过给table添加rules=groups添加组的分割线。
分组过后对colgroup设置样式就对这一组的所有单元格都起作用

c.数据行分组

<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
一个表格中只能有一个表头和表尾，但可以有多个表体?

网站状态栏加图标

把这段代码添加到meta标签的下面
<link href="图标路径" rel="shortcut icon">

html5

<!doctype>定义的文档类型分为4种

h5的文档声明(h5)

<!--声明文档类型-- 告诉浏览器这是一个网页类型 后缀名.html-->
<!doctype html>
<!--根元素---说明我们使用的是超文本标记语言-->
<html>
<!--网页头部-->
<head>
<!--字符编码---解决乱码  utf-8是国际通用标准  gb2312国标 GBK 亚太地区使用的（中文繁体字、日文、韩文。。。）-->
<meta charset="utf-8"/>
<!--网页标题-->
<title>欢迎来到王腾真爱网，开启幸福之旅</title>
</head>
<!--网页主体--放置网页内容的地方（区域）-->
<body>
<h1>一级标题</h1>
</body>
</html>

h5的特点

h5新增的语义化的标签

1、header：头部标签

2、nav：导航标签

3、section：章节、页眉、栏目。可以与标题标签结合使用

4、article：文章标签

5、aside：广告、侧边栏

6、footer：页脚标签

7、figure

<figure>
	<figcaption>标题</figcaption>（只能有一个figcaption,类似于自定义列表dl）
	<img src="images/mm4.jpg" >
	<p>飞哥喜欢嘿嘿，喜欢<mark>嗷嗷叫</mark>。万林很是羡慕，也跟着嗷嗷叫</p>
</figure>

8、datalist：提供一个事先定义好的列表，通过id与input关联，当在input内输入时，用户将会看到一个下拉列表供选择

<input list="sd"/>
<datalist id="sd">
    <option value="宝马">宝马</option>
    <option value="奔驰">奔驰</option>		
</datalist>
	

h5新增的语义化的标签

section：章节、页眉、栏目。可以与标题标签结合使用

article：文章标签

aside：广告、侧边栏

header：头部标签

footer：页脚标签

nav：导航标签

figure:插图用的标签,在figure下嵌套img标签

video视频

<video src="video/mov_bbb.mp4" controls="controls"></video>
source可以有多个，如果当前浏览器不支持此格式的视频，有其他的格式做备用 
支持的视频格式：mp4、ogg（ogv）、webm
scr表示路径
controls 播放控件
autoplay自动播放
loop循环播放
poster 视频封面
muted 静音
在实际的开发中，需要自己给设定样式

embed

可以用来播放各种媒体,

audio音频

<audio src="music/金志文 - 夏洛特烦恼.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>
属性跟video差不多...

mark高亮显示

canvas画布

datalist数据集

datalist：提供一个事先定义好的列表，通过id与input关联，当在input内输入时，用户将会看到一个下拉列表供选择
<input list="sd"/>
<datalist id="sd">
    <option value="宝马">宝马</option>
    <option value="奔驰">奔驰</option>		
</datalist>

三、h5新增表单属性

<form action="">
    邮箱:<input type="email" name="" id="" value="" multiple="multiple"/>
    地址：<input type="url" name="" id="" value="" required="required"/> 
    电话:<input type="tel" /> 
    搜索:<input type="search" /> 
    取色器:<input type="color" /> 
    数字范围:<input type="range" name="" id="" value="" min="0" max="100" step="10"/> 
    输入数字:<input type="number" min="10" max="50" step="5"/>
    日历:<input type="date" value="2019-05-07"/>
    <input type="month" name="" id="" value="" />
    <input type="submit" />
    用户名:<input type="text" name="" id="" value="" autofocus="autofocus"/> 
    <input type="text" name="" id="" value="哈哈" />

h5智能表单

表单元素

email 输入email的文本框

专门用来输入email地址的文本框,验证@和前后

url 输入url地址的文本框

专门用来输入地址的文本框，没有https不能提交

number 数字文本框

专门用来输入数字的文本框

range 数字范围限定

输入一段范围的数字

date pickers

输入时间/选取时间的输入框,不能修改样式...

表单验证属性：

placeholder

未输入时显示的提示信息

autofocus

自动获取焦点，仅对一个有效

required

验证输入不能为空

list

结合datalist使用

自动验证

min最小值
max最大值
step数字间隔

novalidate

不对表单进行验证,给form添加

扩展知识点：post和get的区别

1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，在URL中可以看到。post是通过HTTP post机制，用户看不到这个过程 。
3. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。
4. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

CSS3

一、css3介绍
1、css3不是一门新的语言，是css的第三个版本
2、css3是在之前的css的基础新增了很多功能

​ 3、css3不是一个单一的规范，而是一个模块（多个模块）

二、选择器

 1、E[attr]：只使用属性名，但没有确定任何属性值； 
		input[name]{
			width: 200px;
			height: 50px;
		}
		input[id]{
			border: 1px solid red;
		}
		
2、E[attr="value"]：指定属性名，并指定了该属性的属性值； 
		input[type="text"]{
			border: 1px solid red;
		}
		input[type="tel"]{
			border: 1px solid blue;
		}
3、E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的； 
			a[href^="#"]{
				background-color: red;
			}			
 4、E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的 
			 a[title$="叫"]{
				background-color: orange;
			} 		
 5、E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value； 
			a[href*="#"]{
				background-color: red;
			}

三、uI元素状态伪类

1.没有被禁用才能起作用

input:enabled{
				width: 200px;
				height: 50px;}

2.禁用状态下才起作用
		input:disabled{
			border: 1px solid red;
		}
		
3.默认选中状态起作用
		input:checked{
			width: 100px;
			height: 100px;
		}
4.这个选择器其实也是伪对象，只不过它现在还不支持单个冒号的写法
			注意点：样式只能设置背景颜色和文本颜色，不能设置其他的样式
			p::selection{
				background-color: red;
				color: #fff;
			}

四、css3的选择器
序列选择器
1.序列选择器(同级别)
:first-child 同级别第一个
:last-child 同级别最后一个
:nth-child(n) 同级别的第n个
:nth-last-child(n) 同级别倒数第n个
:only-child 父元素中唯一的一个标签

2.同类型,可以被隔开
:first-of-type 选中同级中同类型的第一个
:last-of-type选中同级中同类型的最后一个
:nth-of-type （n）选中同级中同类型的第n个
:nth-last-of-type(n) 选中同级中同类型的倒数第n个
:only-of-type 选中父元素中唯一类型的标签

:not 否定选择器 同种元素 只有自身不起作用，其它的都起作用。
:root 选择文档的根元素 对根元素起作用
层次选择器
（1）后代选择器（E F）最常见的选择器 没有兼容问题

（2）子元素选择器（E>F） 选择某元素的子元素 IE6不支持

（3）相邻兄弟选择器（E+F）紧跟在另一元素后面的元素。不能被隔开

（4）通用兄弟选择器（E~F）指定选择器后面的所有选择器选中的标签。可以被隔开。

五、CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为 W3C标准的一部分。

		-webkit- 谷歌  -moz- 火狐 -ms- IE -o- 欧朋

六、css新增属性

1.text-shadow:5px 5px 5px #666;文字阴影

	h-shadow 必需，水平阴影的位置。可为负值。

	v-shadow 必需，垂直阴影的位置。可为负值

	blur 可写 模糊的距离 必需为正值

	color 可选 颜色

2. box-shadow：5px 5px 5px 5px color inset;

   第一个值，表示阴影离开盒子的横向距离。

   第二个值，阴影离盒子的纵向距离

   第三个值，表示阴影的模糊半径。

   第四个值，表示阴影的延伸半径，可忽略。

   第五个表示阴影的颜色

   第六个值，表示是否使用内阴影，默认外阴影

3.word-break：英文换行

如果是汉字会自动换行，如果是英文单词也会自动换行，只要字母和数字不能自动换行

4.border-radius： 边框圆角

5.表单新增属性autocomplete

输入框的记忆功能 on开启 off 关闭。

颜色值

rgb()

rgba()

弹性盒

一、弹性盒布局介绍

1)弹性盒也叫伸缩布局盒模型

它是**css3引入的一种新的布局模式——flexbox**布局，即伸缩布局盒模型，用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局。相比之前的布局方式，更便利于开发。

2)主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。flex容器会使子项目扩展来填充可用空间，或缩小他们以防止溢出容器。

3)专业术语解释

a、主轴-水平方向或者X轴

b、侧轴-垂直方向或者Y轴

c、伸缩容器（父元素）和伸缩项目（子元素）

二、弹性盒属性

1)伸缩流方向 flex-direction 主要用来创建主轴，定义伸缩项目在伸缩容器中的方向

row：从左向右

row-reverse：与row相反

column：从上到下

column-reverse：与column相反
flex-direction是主轴的方向，

2)主轴对齐 justify-content 主要用来定义伸缩项目沿主轴线的对齐方式

元素在主轴方向的对齐方式

flex-start：伸缩项目向一行的起始位置靠齐

flex-end：伸缩项目向一行的结束位置靠齐

center：伸缩项目向一行的中间位置靠齐

space-between：伸缩项目会平均的分布在行里，与边框没有距离

space-around：伸缩项目会平均的分布在行里，两端保留一半的空间

space-evenly：项目均匀分布，所有项目之间及项目与边框之间距离相等

3)侧轴对齐 align-items 伸缩项目行在侧轴上的对齐方式

元素在侧轴方向上的对齐方式

flex-start：伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边

flex-end：伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边

center：伸缩项目的外边距盒 在该行的侧轴上居中放置

baseline：伸缩项目根据伸缩项目的基线对齐

stretch：伸缩项目拉伸填充整个伸缩容器

4)换行 flex-wrap

nowrap 不换行 默认值，不管超出还是不超出都不会换行

wrap 换行 一旦伸缩项目超出伸缩容器，那么就会换行

wrap-reverse 换行反向  主轴水平时，上下反向，主轴垂直时，左右反向

5)伸缩流方向属性与换行属性缩写形式 flex-flow

flex-flow：换行 伸缩方向; 两个值同时定义或者单独定义都生效，不分先后顺序

6)align-self（加在子元素上）：主要用来设置单独伸缩项目在侧轴的对齐方式。注意点：align-self可以覆盖align-items

flex-start：伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边；（元素位于容器的开头）

flex-end：伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边；（元素位于容器的结尾）

center：伸缩项目的外边距盒 在该行的侧轴上居中放置；（元素位于容器的中间）

stretch：伸缩项目拉伸填充整个伸缩容器。（元素被拉伸以适应容器）

7)堆栈伸缩行 align-content(行与行之间的对齐方式) 定义多个伸缩行的对齐方式； 往往要与换行同时应用，没有换行就不存在多行的情况

行与行之间的对齐方式

如果只是换行，没有行与行之间的对齐方式，则会根据容器设置的高度，默认有行距。。

flex-start：各行向伸缩容器的起点位置堆叠；（没有行距）

flex-end：各行向伸缩容器的结束位置堆叠；（底部对其没有行距）

center：各行向伸缩容器的中间位置堆叠；（居中没有行距）

space-between：各行在伸缩容器中平均分布；（两端对齐，中间自动分配），与边框没有距离

space-around：各行在伸缩容器中平均分布，两端保留一半的空间；（自动分配距离）

8)显示顺序 order （加在子元素上）默认状态是按照标准流的顺序排列，在flexbox模型里，可以通过order改变伸缩项目的顺序

a、不定义order的伸缩项目会排到前面

b、order：1； 排第一   order：2； 排第二

9)flex（设置在子元素上） 作用：可以让元素自动占用容器的可用空间，等比划分

flex:1;

flex:2;

...

10)flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

11)flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。

12)flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）

浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。不常用，还在不断变化中。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto

三、弹性盒案例

1)支付宝

2)导航

3)自适应网页

4)表单

5)网页内容区域

…

知识点补充

一、position属性

1、position: sticky; 粘性定位

2、粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

二、屏幕名称

分辨率，PPi,DPI,DPR,物理像素，逻辑像素

屏幕尺寸：指的是屏幕对角线的长度

分辨率：是指宽度上和高度上最多能显示的物理像素点个数

点距：像素与像素之间的距离，点距和屏幕尺寸决定了分辨率大小

PPI:屏幕像素密度，即每英寸(1英寸=2.54厘米)聚集的像素点个数，这里的一英寸还是对角线长度

DPI:每英寸像素点，印刷行业术语。对于电脑屏幕而言和PPI是一个意思

设备像素(又称为物理像素): 指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，和屏幕尺寸大小有关，单位 pt。

设备独立像素(也叫密度无关像素或逻辑像素)：可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，这个点是没有固定下小的，越小越清晰，然后由相关系统转换为物理像素。

css像素(也叫虚拟像素)：指的是 CSS 样式代码中使用的逻辑像素，在 CSS 规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px 是一个（固定）相对单位，相对的是设备像素(device pixel)

DPR(设备像素比)：设备像素比 = 设备像素 / 设备独立像素。(在Retina屏的iphone上，DPR为2，1个css像素相当于2个物理像素)

三、XHTML和HTML的区别？

1.XHTML 元素必须被正确地嵌套。 XHTML是HTML的严格模式

2.XHTML 元素必须被关闭。

3.标签名必须用小写字母。

4.XHTML 文档必须拥有根元素。

四、属性补充

a、text-transform属性

1.none 默认。定义带有小写字母和大写字母的标准的文本。

2.capitalize 文本中的每个单词以大写字母开头。

3.uppercase 定义仅有大写字母。

4.lowercase 定义无大写字母，仅有小写字母。

5.inherit 规定应该从父元素继承 text-transform 属性的值。

b、font-variant把文本设置为小型大写字母字体

1、normal 默认值。浏览器会显示一个标准的字体。

2、small-caps 浏览器会显示小型大写字母的字体。

五、Doctype作用是什么？

定义文档类型，让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。

六、网页优化

1.网站结构（重构）优化，网页的中结构、表现、行为三者分离

2.H1标签的使用，一个页面设置一个H1标签，有助于搜索引擎明白网站架构，因为H1标签的搜索权重比其他标签高，一般用于logo区域。

3.页面头部优化（meta）

向搜索引擎说明你的网页的关键词 告诉搜索引擎你的站点的主要内容

“描述”部分应该用近乎描述的语言写下一段介绍你网站的文字，在这其中，你应该适当的对你网站的特色内容加以重复以求突出；
“关键字”部分应该列出你认为合适的，能突出网站内容的关键字就可以了，关键字不要设置太多，可设置10—8个，搜索引擎只会浏览靠前的几个关键字。

4、超链接优化
搜索引擎为何可以能够索引全世界的网站，是因为各个搜索引擎程序中都有一个会自动“爬行”于互联网上的智能机器人程序，这个机器人就是顺着网站之间的链接游览世界的，那么我们就应该为它创造一个良好的爬行通道——合理的设置链接。

a.采用纯文本链接，少用，最好是别用Flash动画设置链接，因为搜索引擎无法识别Flash上的文字

b.按规范书写超链接，这个title属性，它既可以起到提示访客的作用，也可以让搜索引擎知道它要去哪里

c.最好别使用图片热点链接，理由和第一点差不多。

5、图片优化(alt属性，title属性)

图片优化并不是修改图片的大小、颜色，而是你应该为每个标签加上alt属性，alt属性的作用是当图片无法显示时以文字作为替代显示出来，而对于SEO来说，它可以令搜索引擎有机会索引你网站上的图片，对于一些确实没什么意义的图片，最好也不要省略alt，而应该留空，即 alt=""。

5、避免大“体积”的页面

6、命名规则化，使用公共代码

重置样式:

以新浪为例：

html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }

fieldset, img { border:none; }

img{vertical-align:top;}

address, caption, code, th{ font-style:normal; font-weight:normal; }
ul, ol { list-style:none; } 

a { color:#666; text-decoration:none; }

七、BFC

概念：BFC全称Block Formatting Context ，中文直译为块级格式上下文。它是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

BFC布局规则
1.在BFC下，内部的Box会在垂直方向，一个接一个地放置。

2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器（父元素）的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此。

4.BFC的区域不会与float box重叠。例子：两个div，一个进行浮动，一个不浮动，这时浮动的元素会覆盖没有浮动的元素。给没有浮动的元素加overflow:hidden。就不会重合。

5.计算BFC的高度时，浮动元素也参与计算

如何触发 BFC

1.浮动元素，float 除 none 以外的值

2.position的值不为static或者relative

3.display为inline-block、table-cell、table-caption

4.overflow 除了 visible 以外的值

BFC的应用

1.解决浮动塌陷问题

2.自适应两栏布局（我们还可以运用BFC可以阻止元素被浮动元素覆盖的特性来实现自适应两栏布局。方法：给没有浮动的元素加overflow:hidden。）

3.解决设置margin值重叠问题。

总结：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。它规定了元素与其他元素的关系和相互作用。

补充

// 元素的padding-top和padding-bottom的百分比是按当前元素的宽度来计算的

padding-top: 378 / 1008 * 100%;

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

本文标签： html