h5标签、css3

html和css都能有装饰网页的功能，

HTML 的属性主要是起一些功能性的作用的，对于一些和样式有关的属性最好留给 CSS 来做。

HTML 是用来构建网页的框架的，而 CSS 则是用来装饰网页的。

***文本格式化标签：

加粗：strong、b

倾斜：em、i

删除线：del、s

下划线：ins、u

 

***盒子

div和span都是盒子，是没有语意的，用来装内容的。

div表示分割、分区；独占一行。大盒子。

span表示跨距、跨度。小盒子。

 

***图像

img src="路径"   、alt替换文本（图像显示不出来的时候显示文字）、

title提示文本（鼠标放上去会显示文字）、width宽（width=“500”）、height高、border边框

 

***相对路径：要被引用的资源（如图片，html网页）相对于当前html页面的位置

同级路径：直接写

下一级路径：XX/oo

上一级路径：../

 

***绝对路径：文件相对于电脑盘符的位置、或者网络上的图片。

 

***超链接：

a  href目标url（href=“#”  空链接，如果地址是文件或者压缩包，则点击链接就下载）、target（_self在当前窗口打开，默认的，_blank在新窗口打开）

锚点链接：a href=“#one“  在目标位置添加一个id属性=one

***注释

<!--  -->  ctr+/

***特殊字符

空格&nbsp;大于、小于

 

***表格

table   一般用来显示数据，整齐。align 对齐方式、border边框（数字或者“”表示内有边框）、

cellpadding单元格边与内容之间的间隙，默认1像素、cellspacing单元格之间的空白，默认两个像素。

width表格的宽度。

tr 行

td  （table data表格数据）行中的单元格

th  （替换td） 第一行加粗且居中

thead表头，一般把table之下第一部分tr包含在内，其他的放在tbody中。

thead   tr td td  tr  thead

tbody   tr td td  tr  tbody

合并单元格：

跨行合并：rowspan=“合并单元格的数量”，写在最上面的目标单元格

跨列合并：colspan=“合并单元格的数量”，写在左侧目标单元格上

合并后要删除多余的单元格

 

***列表标签

无序列表：ul  li
有序列表：ol  li

自定义列表：dl    dt    dd   一个dt对应多个dd

 

***表单

一般有表单域、表单控件元素、提示信息

表单主要的作用是收集信息，提交给服务器。

form  action=“提交的地址”、method提交方式（GET或者POST）、name=“”

input   type属性的值：password密码框、text文本框、radio单按钮（也可以实现多选）、checkbox复选框、

                                      button普通按钮不会提交数据（一般结合js搭配使用）、file文件（上传文件）、hidden、image、submit提交表单数据给后台（可通过value更改文字）、 reset重置清空表单数据

input    name区分不同的表单 元素（radio时必须要有相同的名字才能实现单选，checkbox中name也必须相同）

input  value默认值

input   checked 选中 主要针对单选 和复选框

input  maxlength输入的最大字符长度

name和value是每一个元素都有的属性，主要时候给后台人员使用。

label标签：为input元素定义标注，label标签可以绑定一个元素，点击label时，浏览器自动将焦点转到对应的表单元素中。

label   for=“one”    input  id=“one“  for和id中的 one一定要统一。

***select下拉表单

select   option

option  selected="selected"选中状态

***文本域

textarea可以多行输入   rows行数   cols没一行的字符数     

 

**********      CSS     *****************

style写在head标签中

css结构 包括选择器和声明

选择器  {

}

***基础选择器

标签选择器

类选择器  .   class  可以一个标签指定多个类名，多个类名之间用空格隔开，可以被多个标签使用

id选择器  #    id   只允许一个标签使用，一般用于页面的唯一性

通配符选择器  * 选取页面中所有的标签

***复合选择器

后代选择器：ol  li

子选择器：.one>a    只能选择最近一级的子元素,用>隔开

并级选择器：选中多组标签，元素1，元素2{ }，中间要加逗号

伪类选择器：用冒号表示，：hover，:first-child, .one:hover(类选择器是one的添加伪类)

链接伪类选择器：a:link 未访问的链接、a：visited已被访问的链接、a：hover鼠标经过、a：active按下不松开。这几个顺序不要乱。给链接要指定样式，要单独修改，不会继承上一级的样式。

focus类选择器：获取焦点的元素， input:focus   把包含焦点的文本框选出来。

 

***元素的显示模式

元素以什么方式进行显示。分为块元素和行内元素。一行放一个就用块元素，一行多个就用行内元素。

块级元素独占一行，高度、宽度、外边距、内边距都可以控制，宽度默认是容器（父级元素）的100%，是一个容器或者盒子，里面可以放行内元素或者块级元素。常见的块元素：h、p、div、ul、ol、li

注意：文字类的块级元素不能再放块级元素，p、h中都不能放块级元素。

行内元素：常见的行内元素a、strong、b、em、i、span、u.....

相邻的行内元素在同一行显示，直接设置框高无效果，默认宽度就是自身文字的宽度，行内元素只能容纳文本和其他行内元素。

注意：链接里面不能再放链接，a链接里面可以放块级元素。

行内块元素：常见的有img、input、td，他们同时有块元素和行内元素的特点，一行可以显示多个行内块元素，但是之间有空隙，高度、行高、外边距、内边距都可以设置。

显示模式的转换：转换为块元素display：block、转换为行内元素display：inline、转换为行内块元素display：block-inner。

snipaste截图软件

 

****字体属性

font-size:'';字体大小，后面要加px，谷歌默认是16px。

font-family:' ';字体  ，多个字体用空格，如果由多个单词组成的字体要加引号，如果第一个字体没有，

就显示后面的字体，如果都找不到就用浏览器默认的。

font-weight：字体粗细，可以是bold、normal或者写数字100-900，后面部家单位，400=normal，900=bold

font-style：文字样式 ，normal正常     italic斜体

复合属性：font：font-style font-weight font-size font-family   顺序不能变，必须要font-size font-family，否则不起作用

 

 

***文本属性

color 颜色，可以是预定义颜色（如green）、rgb颜色、16进制#ff0000

text-align 对齐 left、right、center

text-decoration 装饰 ，none（可以取消链接的下划线）、下划线underline（a链接默认有下划线）、删除线line=through、上画线overline

text-indent 文本缩进首行缩进，

em是一个相对单位，是当前一个文字的大小。如果当前元素没有设置大小，会按照父元素一个文字的大小。

line-height 行间距（文字与文字之间的距离。），由文字本身高度和上间距和下间距，改变行间距就是改变上下间距，

 

*** css的引入方式

行内：在元素中，style =“”

内部样式：把css抽取出来，一般在head中写style

外部样式：在外部创建一个.css文件，在当前html页面的head中 link  rel=“stylesheet”  href="css路径"

***emmet语法

标签+tab键盘

div*3  tab   创建三个div

父子级 ul>li  tab  ul包含li

兄弟关系  div+p  tab  

带类名 p.one   给p标签加了一个类one

.one  默认是给div添加类名

.demo$*5  生成5个带类名的div（$表示自增）

div{我是}   div中带文字

***格式化代码

SHIFT  +ALT  +F

****单行文字垂直居中

行高line-height=盒子的高度。行高由三部分组成：上部下部和文字高度。

行高小于盒子高度，文字会中间偏上。

***css背景

背景颜色：background-colcor:transparent(透明)或者颜色（比如green）

背景图片：background-image：none或者url（xx.png）

背景平铺：background-repeat:repeat、no-repeat、repeat-x、repeat-y。

背景图像固定：background-attachment：scroll、fixed，是否固定或者随着拖动而滚动。

背景图片位置：background-position:x y或者top、center、bottom、left、right。如果使用了两个方位，指定了其中一个，省略的那个就是居中。如果是精确值，第一个值一定是x轴，如果只指定了一个，那么就是x轴。

精确值和方位可以混合。

背景图片和背景颜色可以同时添加，但是背景颜色在最底层。

也可以有复合写法：background:按照上面的顺序（习惯）。

背景色半透明：background：rgba(0,0,0,0.5);a表示透明，1表示不透明，0表示透明。

 

***css三大特性：

层叠性：相同的选择器相同的属性，样式冲突就覆盖，样式不冲突的化覆盖相冲突的部分。

继承性：子标签会继承父标签中的样式，text-  、font-，line-开头的以及color可以继承。

行高的继承比较特殊，font：12px/24px Microsoft Yahei，其中12px是文字大小，24px🈯️的是行高。font：12px/1.5 Microsoft Yahei，其中1.5是行高，表示当前文字大小的1.5倍。

优先级：选择器相同，则层叠；选择器不同：继承或* <元素选择器 <类选择器或者伪类选择器 <  id选择器   <  行内样式 < ！important.

div {color:green !important}

权重：继承0.0.0.0    元素选择器0.0.0.1  类选择器 0.0.1.0   0.1.0.0  1.0.0.0

不管父元素权重多高，继承过来的权重都是0.

a链接浏览器默认制定了一个样式：蓝色的有下划线，不会继承父亲的样式。

复合选择器：需要权重叠加计算，但是没有进位。

 

***盒子模型

布局的三大核心：盒子模型，浮动，定位

外边距margin、边框border、padding内边距、content内容、

border-width:

border-style:none  hidden   dotted点线   dashed 虚线  solid实线  

border-color:

border-top:

border-bottom:

boder-left:

border-right:

border-collapse:collapse表示相邻的边框合并在一起。

复合border:1px  solid  red；没有顺序要求。

注意：添加边框后盒子会变大。

padding：边框与内容之间的距离。

padding-top:

padding-bottom:

padding-left:

padding-right:

复合padding：一个值表示上下左右一样；两个值表示上下和左右；三个值表示上、左右、下；四个值表示上、右、下、左。

注意：padding会影响盒子的实际大小，如果盒子没有指定width和height，则不会撑开盒子。

实际应用中的小技巧：导航栏中文字不一样时，部给宽度，只给padding值。

外边距margin：盒子与盒子之间的距离。

margin-top：

margin-bottom：

margin-left:

margin-right:

复合margin:

块级盒子水平居中：盒子必须指定宽度、左右外边距设置成auto。margin:0 auto;或者margin:auto;

行内元素或者行内块元素水平居中：给父元素添加text-align：center；

嵌套关系的块元素，垂直外边距会有塌陷（合并）问题。

父子块元素塌陷问题：可以为父元素添加上边框或者上内边距或者overflow：hidden。

清除内外边距：网页元素很多都带有默认的内外边距，不同浏览器也不 一样，一般使用这样清除内外边距，然后在添加样式，*{margin:0;padding:0}

行内元素尽量只设置左右内外边，不设置上下，如果转换块或者行块就可以设置上下了。

***

list-style:noe 去掉li前的圆点。

圆角边框（圆与矩形交叉形成的圆角）：复合border-radius

可以分开写border-top-left-radius:

盒子阴影：box-shadow:h-shadow水平阴影、v-shadow垂直阴影、blur模糊距离、spread阴影尺寸、color阴影颜色、inset内部阴影，外部阴影outset。阴影不占用空间。

文字阴影：text-shadow:box-shadow:h-shadow水平阴影、v-shadow垂直阴影、blur模糊距离、color阴影颜色.

***浮动

布局的三种方式：普通流（标准流），浮动，定位。

准则：多个块元素竖着排列着标准流，横向排列着浮动。

标准流：块级元素独占一行，从上倒下排列。行内元素从左到右，碰到父元素边缘自动换行。

浮动布局：可以改变元素默认的排列方式。创建浮动框，将其移动到一边，回到触及包含块或者另一个浮动框的边缘。

float：left左浮动，right，none（默认不浮动）

浮动的特性：浮动的元素会脱离标准流浮起来，浮动的盒子不在保存原来的位置，后面标准流的盒子会顶替上来，如果后面的盒子也加了浮动，会贴着之前浮动盒子的边缘，会一行内显示并且元素顶部对齐。如果在一行装不下，就会换行。任何元素都可以添加浮动，浮动的元素具有行内块元素相似的特性。

浮动元素经常和标准流父亲搭配使用：先用标准流父元素上下排列，之后内部子元素采用浮动。

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。总是贴着前一个盒子的下沿。

为什么要清除浮动：如果父元素不设置height，子元素设置float后，父元素的高度就会变成0。

选择器{ clear:left/right/none/both}

清除浮动的方法：1.额外标签法：在最后一个浮动盒子后添加一个空盒子（这个空标签必须是块级元素），并且设置清除浮动，clear：both。

2.给父级添加overflow：overflow：hidden/auto/scroll。但是无法显示溢出的部分。

3.：after伪元素：在父级元素上添加，选择器::after{content:"";display:block;height:0;clear:both;visibility:hidden;}

4：双伪元素清除浮动：选择器::before 选择器::after{content:"";display:table}

css属性书写顺序：

 

***定位：

为什么需要定位：在一个盒子内，某个元素自由移动并且可以覆盖其他盒子。某些模块固定在页面的固定位置。这些是浮动无法显示的，所以需要定位。

定位组成：定位模式position+边偏移(top\left\right\bottom)。

定位模式position：static静态定位、relative相对定位、absolute绝对定位、fixed固定定位。

position:static,按照标准流特性摆放，没有边偏移，不脱离文档流。

relative：相对于它自身原来的位置，原来的位置还继续保留，不脱离文档流。

absolute：没有父级或者父级元素没有定位时，以浏览器的文档为参照。如果有父级但是没定位，以浏览器文档为参照。有父级且父级有定位，以最近一级有定位的父亲为参照。绝对定位脱离标准流，不占有原来的位置。

子绝父相：子盒子用绝对定位，父元素用相对定位。

fixed:滚动但是元素不变动，以浏览器可视窗口（，关系随着滚动条的滚动而滚动，如果有滚动条，不可见的部分忽略）为参照，跟父元素没有关系。固定定位脱离标准流，不占有原来的位置。

盒子固定在版心右侧位置：固定定位的盒子position：fixed;lfet:50%;magin-left:版心盒子的宽度的一般=半；

sticky粘性定位：相对定位和固定定位的混合版，以浏览器的可视窗口为参照，占有原来的位置，必须添加上下左右中的一个才生效。

定位叠放次序：z-index控制盒子的前后次序（z轴），数值越大越往上。只有定位的盒子才有这个属性，标准流和浮动没有这个属性。默认是auto，如果数值相同，后面的会压住后面的。

注意：加了绝对定位的盒子不能通过margin：auto水平居中。水平居中可以使用left：50%;margin-left:-让盒子向左移动自身宽度的一半。垂直居中类似；

行内元素添加绝对或者固定定位，可以添加宽高。块元素添加了绝对或者固定定位，如果不给宽高，默认和内容一样大小。

浮动、固定、绝对定位都不会触发外边距合并问题。

浮动元素会压住它下面标准流的盒子，不会压住下面的标准流的文字或图片，绝对定位会压住下面的标准流文字。

浮动最初目的是做文字环绕效果的。

如果一个盒子既有left属性也有right属性，先执行left，先执行top。

注意：定位的盒子，不能通过margin ：0 auto；实现居中。

***元素的显示与藏

display：显示与隐藏，none隐藏对象（不在占有原来的位置），block：除了转换成块，也有表示显示的意思。

visibility：inherit继承、visible可见、hidden隐藏；继续占有原来的位置。

overflow：溢出部分显示与隐藏。visible（默认可见）、hidden、auto（超出才显示滚动条）、scroll（添加滚动条）；

 

***css高级技巧

*精灵图：减少服务器请求的次数，精灵技术主要是针对背景图片使用，把多个小背景图整合到一张大图中。原理就是设置back-ground-position；图片放大会失真，更换图片很麻烦。

*字体图标iconfont：本质属于字体，展示图标。只能用一些简单的图标。iconMoon.com    iconfont.cn,使用四部曲。

*css三角：盒子宽高都改成0，border的宽度设置成三角型的高度，三个边框设置transparent透明，另外一个边框设置需要的颜色。

*css用户界面样式：鼠标的样式cursor：default小白、pointer小手、move移动、text文本、not-allowed禁止。

表单的轮廓线outline：0或者none；表示去掉轮廓线。

文本域textarea添加属性resize：none；取消文本域拖拽。

*vertical-align属性：只针对行内元素和行内块元素，baseline元素放置在父元素的基线上、top与行中最高元素的顶端对齐、middle放在父元素的中部、bottom顶端与行中最低元素的顶端对齐。应用：文字和图片垂直居中。

*溢出文字省略号显示：单行文本溢出显示省略号三个条件：white-space：nowrap（不允许换行）；overflow：hideen（溢出部分隐藏）；text-overflow：ellipsis（超出部分用省略号代替）；

多行文本溢出显示省略号：兼容性有问题，webkit比较实用（移动端大部分是wenkit内核），overflow：hidden；text-overflow：ellipsis；display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;

*常见布局技巧：文字环绕图片：给左边的图片添加浮动，右侧文字不需要添加浮动。

只要行给父元素添加text-align：center，盒子中的元素都会水平居中。

css初始化：不同浏览器对有些标签的默认值不同，所有需要css初始化。

 

***HTML  CSS3提高，新增标签和属性

新特性都有兼容性的问题，ie9以上才可以大量使用。这些标签主要针对搜索引擎，是有语义的。在ie9中需要把这些标签转换成块元素才能使用。移动端更喜欢这些标签。

<header>头部

<nav>导航

<article>内容

<section>定义文档某个区域

<aside>侧边栏

<footer>尾部

<audio>音频 autoplay   loop  muted   src

<video>视频：mp4所有浏览器都支持，webM、Ogg部分不支持。video scr=“” controls=“controls”显示播放控件 autoplay=“autoplay” muted="muted"静音播放 loop=“loop”循环播放  poster=“图片路径”加载时显示的图片

<input> 新增表单type：email只允许输入邮箱、url、date、time、month、week、number、tel、search搜索框、color生成颜色选择器。

新增表单属性：required="required"不能为空   placeholder="占位提示文本"  autofocus=“autofocus”自动获得焦点  mutiple="mutiple"可以多选提交   autocomplete="on" 点击显示之前输入过的。

新增的属性选择器：有兼容性问题，ie9以上。属性选择器可以根据属性直接选择，就不需要定义类选择器了，

<input value="">，  选择器 input[value]，属性必须用中括号包含着。input[属性=“值”]；input[属性^="值"]属性以某值开头;input[属性$=“值”]属性以某值结尾。input[属性*="值"]属性值中含有某值。

类选择器、属性选择器、伪类选择器权重是10；

新增的结构伪类选择器：

E :first-child：第一个子元素

last-child：最后一个子元素

nth-child(n):第n个子元素，n是从1开始。n可以是数字、关键字（even偶数、odd奇数）、公式

nth-child（n）:里面直接写n，不能是其他的字母，从0开始计算， 每次加1。0和超出的部分全部忽略掉。

nth-child(n):会把所有孩子都排列进去，执行的时候在回去看是第几个孩子，

2n：偶数

2n+1：奇数

5n：5的倍数

-n+5:前5个，包含第5个；

n+5:从第5个开始选。

E:first-of-type:先把指定元素排列，然后选择第一个孩子。

E:last-of-type:先把指定元素排列，然后选择最后一个孩子。

E:nth-of-type(n):

伪元素选择器：在文档树中找不到，权重为1。宽高不起作用。要转换成块，或者行内块，才能设置宽高。

元素::before在元素内部的前面插入内容，div::before{

content:"这是新增的"}，必须要添加content。

元素::after在元素内部的后面插入内容

css3盒子模型：box-sizing:content-box（盒子大小为width+padding+border）;box-sizing:border-box;(盒子大小为width，前提是padding和border不会超过width)

css3图片模糊：滤镜filter：函数名();  filter:blur(5px);

css3盒子宽度计算：width:calc(100%-30px),括号中可以进行加减乘除计算。

css3过渡效果：transition:要过渡的css属性、花费时间、运动曲线、何时开始

transition谁要变化给谁加。

***css3中2D转换

transform可以实现位移translate、旋转rotate、缩放scale。

移动盒子移动位置有三种方法：定位、外边距、translate。

transform：translate（x,y）;transform：translateX(x);transform：translateY(y);

translate不会影响其他元素的位置。如果x,y是50%，表示相对自身的大小。translate对行内元素是没效果的。

transform：rotate(度数deg);默认旋转的轴是元素的中心点，顺时针旋转。设置旋转的中心点transform-origin:x y;可以设置百分比，方位词，px。

transform：scale(x,y);scale(2)宽高一起变化。不会影响其他盒子，可以设置缩放的中心点，transform-origin:x y;可以设置百分比，方位词，px。

多个转换可以同时写，顺序会影响效果。同时有位移和其他属性时，要将位移放到最前面。

***css3中动画

先定义动画：

@keyframes 动画名{

0%{ 开始

transform:translateX(0px);

}

100%{ 结束

}

}

再使用动画：

animation-name:动画名

animation-duration:持续名称

0%是动画序列，最开始，或者用from

100%是最后，后者用to

css3常见属性：

动画的顺序：动画名称 持续时间  运动曲线  何时开始  播放次数  是否反向  动画起始或者结束状态。前两个不能省略。

 

***css3中3D转换

3D位移：translateform:transate3d(x,y,z)

透视perspective：必须设置透视transateZ()轴才能有效果。perspective要写在被观察盒子的父亲上，perspective：100px；透视越小，盒子显示越大。近大远小。

3D旋转：translateform:rotate3d(x,y,z,旋转度数)；

translateform:rotateX(钻转度数)、translateform:rotateY(钻转度数)、translateform:rotateZ(钻转度数)

3D呈现transform-style:控制子元素是否开启3D空间。flat不开启，preserve-3d开启3D空间。要在父元素中写。

*** 浏览器私有前缀：为了兼容老版本的写法，新版版本的浏览器无需添加。

-moz-：firefox

-ms-:ie

-webkit-:safari和chrome

-o-：Opera

 

***渐变色

background:linear-gradient(起始位置，初始颜色，结束颜色)；