html

认识WEB

1. Web

Web就是网页，网页其实是基于B/S模式的应用程序
B/S : Browser / Server（浏览器/服务器）
C/S : Client / Server（客户端/服务器）

2. Web 的组成

浏览器：代替用户向服务器发送请求
服务器：接收用户请求并响应
通信协议：规范数据传输及打包方式

3. 服务器

1.作用：

接收用户请求并响应
存储数据
具有安全性功能

产品：

Tomcat
Apache
Nginx
IIS - Internet Information Service ...

技术：

Python-Web （Django , Flask...）
PHP
JAVA
ASP.net
JSP... JAVA Serverlet Page

浏览器：作用：

代替用户向服务器发送请求
作为响应数据的解释引擎，呈现图形化界面主流的浏览器产品：

Chrome - Google公司
IE - Microsoft
Safari - Apple
Firefox - Mozilla
Opera - Opera

3. 浏览器引擎（内核）

渲染引擎 - 解析HTML、CSS，控制页面渲染效果
JS引擎 - 解析JS脚本

4. 前端技术

HTML 书写页面结构和内容
CSS 设置网页中元素的样式
JS 实现网页的交互

HTML标签

HTML 标签参考手册 - 功能排序 (w3school.com.cn)

语义化标签

一：无功能，语义化标签

1.1 <header></header>也就是我们的头部标签，一般用于网站头部内容

1.2 <footer></footer>一般用于网站底部

1.3 <nav></nav>导航标签，这个也比较好理解，平时我们用UL标签写导航的时候，UL里面一定是要包含li标签标签的，这样会有一定的局限性，<nav></nav>标签就不局限里面标签，可以是一群的a标签，也可以是一个a，一个p

<nav>
　　<a href="">导航1</a>
　　<a href="">导航2</a>
　　<a href="">导航3</a>
　　<a href="">导航4</a>
</nav>

1.4 <hgroup></hgroup>标题组合，一般为页面的主要标题加描述

<hgroup>
　　<h2>我是标题</h2>
　　<h3>我是标题描述</h3>
</hgroup>

1.5 <section></section>一个板块或者一个区域内容，用于划分页面不同区域

1.6 <article></article>用来在页面中表示一套结构完整且独立的内容部分

1.6.1 <aside></aside>主题的附属信息(用途很广，主要就是一个附属内容)，如果article里面为一篇文章的话，那么文章的作者以及信息内容就是这篇文章的附属内容了

1.7 <figure></figure>媒体元素，比如一些视频，图片啊等等

<figure>
　　<img  /> //图片
　　<figcaption>我是图片的说明描述</figcaption> //图片说明
</figure>

1.8 <time></time>专门为时间而出的标签，以往我们时间标签很多，比如span,i,b等等 time标签有个属性datetime="" //没实际功能，便于查找

二：有功能，语义化标签

2.1 <datalist></datalist>选项列表，与input元素配合使用，来定义input可能的值

<input type="text" list="valList"> 
 //要在input标签中添加一个新的list属性，属性值为datalist的ID~
　　<datalist id="valList">
　　<option value="javascript">javascript</option>
　　<option value="html">html</option>
　　<option value="css">css</option>
</datalist>

当我在输入框中输入一个j的时候，里面相关的javascript就会显示出来~~

2.2 <details></details>用于描述文档或者文档某个部分的细节~ 默认属性为open~配合summary一起使用

<details>
　　<summary>芝麻开门</summary>
　　<p>BOOM!!!!!!!!!!!!</p>
</details>
　  //没有点击时候的页面显示
     //点击之后的内容显示

2.3 <progress></progress>用于制作进度条，里面有2个属性，1：max 总的进度 2：value 现在的进度

<progress max="200" value="100">  // max:总共为200，当前为100，就是说进度条只到的50%
　　<span>20</span>%  //用于兼容不支持此属性的浏览器
</progress>

<progress max="200" value="100">  // max:总共为200，当前为100，就是说进度条只到的50%
　　<span>20</span>%  //用于兼容不支持此属性的浏览器
</progress>

三：关于兼容

低版本的IE是不认识这些语义化标签的，一般有2种办法可以解决这个问题

自己写javascript代码，因为IE不认识这些标签，所以我们只需要在js中创建这些标签

<script type="text/javascript">
    document.createElement('header');  //创建一个header元素
</script>

这样我们就创建出来了一个header头部元素，现在我们就可以HTML和样式中写入这个标签
因为创建出来的标签是没有任何默认属性的，所以我们要给创建出来的标签创建一个CSS属性display：block ;
直接在外部引入一个js文件，引入方法跟我们平时引入插件的方式一样（这里就不再阐述）。。。。

css

CSS选择器

CSS 选择器参考手册 (w3school.com.cn)

CSS三大特性

层叠性

给一个标签设置的样式发生冲突的时候即样式的覆盖
浏览器的渲染机制是从上到下的，当有冲突的时候就采用最后的那个样式

继承性

发生的前提是：标签之间属于一种嵌套关系
文字颜色可以之间继承
字体大小可以继承
字体可以继承
行高也可以实现继承(与文字有关的属性都可以，实现继承) 特殊点：

a标签超链接不能实现字体颜色的继承，字体大小可以继承
h1不可以继承文字的大小，继承过来还会做一个计算

优先级

默认样式<标签选择器 <类选择器 <id选择器 <行内样式 <！important

css 布局的4种方式

1. table 布局（现在用得少）

table 的特性决定了它非常适合用来做布局，并且表格中的内容可以自动居中，这是之前用的特别多的一种布局方式而且也加入了: display：table;``dispaly:table-cell 来支持 teble 布局。
1. 它也有自身的局限性，比如 table 比其它 html 标记占更多的字节（造成下载时间延迟,占用服务器更多流量资源），table 会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间)，但是某些情况下，当采用其他方式不能很好的达到自己的效果时，采用 table 布局能适应当前场景。

2. flex 布局

2.1 盒模型

盒模型的概念

首先最中间的是 content 区域，即我们常说的内容区。我们通常设置的 height 和 width 就是设置的这部分的长度。内容区外部是 padding 区域，这部分指的是内容区到边框的区域，即我们常说的内边距。然后就是 border 区，border 区本身也是占据空间的。边框外面是 margin 区，这部分指的是当前元素与其他元素的距离，即常说的外边距。

首先要明白我们平常说的宽度和高度指的是内容区的宽度和高度。

计算一个盒子占用的空间是 :content + padding + border + margin

2.2 display / poistion

display 有如下几个值:

block（元素表现为块级元素，有固定宽高，独占一行）
inline（元素表现为行内元素，不能设置宽高）
inline-block （对外表现为行内元素，对内表现为块级元素）

position 有如下几个值:

static（默认情况，存在文档流当中）
relative（根据元素本身原来所应该处的位置偏移，不会改变布局的计算）
absolute（绝对定位，脱离文档流，不会对别的元素造成影响，相对的是父级最近的 relative 或者 absolute 定位元素）
fixed（绝对定位，脱离文档流，相对于的是屏幕，就是那些浮动的广告那样，怎么拉都固定在同一个位置，而 absolute 元素离开屏幕就看不见了）
position 的层叠是按顺序层叠的，不过可以通过设置 z-index 来改变层叠顺序，只有 relative，absolute，fixed 可以设置 z-index。

2.3 flexbox 布局

flexbox 布局即弹性盒子布局，它的特点是盒子本来就是并列的，只需要指定宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
.container{
    height:200px;
    width: 200px;
    display: flex
}
.left{
    background-color: red; 
    flex: 1;
}
.middle{
    background-color: yellow; 
    flex: 1;    
}
.right{
    background-color: green;
    flex: 1;
}
</style>
<body>
    <div class=container>
        <div class=left></div>
        <div class=middle></div>
        <div class=right></div>
    </div>
</body>
</html>

有时我们可能需要两边定宽，中间自适应，那么可以这样写

.left{
    background-color: red; 
    width: 20px;
}
.middle{
    background-color: yellow; 
    flex: 1;    
}
.right{
    background-color: green;
    width: 20px;
}

3. float 布局

float 布局应该是目前各大网站用的最多的一种布局方式了，但是也特别复杂，这里详细讲一下

首先，什么是浮动？

浮动元素是脱离文档流的，但不脱离文本流，这是什么意思呢，用过 word 的应该知道有一种图片环绕的方式是文字环绕吧，就是这种效果。

那么它有什么特点呢

对自身的影响 float 元素可以形成块，如 span 元素。可以让行内元素也拥有宽和高，因为块级元素具有宽高浮动元素的位置尽量靠上，尽量靠左（float:left）或右（float:right），如果那一行满足不了浮动元素的宽度要求，则元素会往下掉
对兄弟元素的影响不影响其他块级元素的位置，影响其他块级元素的文本，上面贴非 float 元素，旁边贴 float 元素或者边框，对父级元素的影响，从布局上 “消失”，高度塌陷

4. 响应式布局

4.1 meta 标签

最简单的处理方式是加上一个 meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1">

其中，width = device-width 这一句的意思是让页面的宽度等于屏幕的宽度。

4.2 使用 rem

rem 指的是 html 元素的 font-size，html 元素的 font-size 默认是 16px，所以 1 rem = 16px；然后根据 rem 来计算各个元素的宽高，然后配合 media query 就可以实现自适应。

4.3 media query

css2 允许用户根据特定的 media 类型定制样式，基本语法如下

@media screen and (max-width: 360px) {  
     html { font-size: 12px;    }
}

意思就是：当屏幕的宽度小于等于 360 px 的时候 html 的字体大小为 12 px。

有一个需要注意的点是范围大的要放在上面，范围小的放在下面。假设有两个样式，一个适应 360px 以下，一个适应 640px 以下，如果 360px 的放在上面，但是小于 360px 同样满足小于 640px，这就不是我们想要的结果了，所以范围大的需要放在上面。

CSS水平居中的9种方法

通过margin: 0 auto; text-align: center实现CSS水平居中。这种方法是实现CSS水平居中最最常用的
通过display:flex实现CSS水平居中。随着越来越多兼容flexbox，所以通过“display:flex”实现CSS水平居中的方案也越来越受青睐。通过display:flex实现CSS水平居中的原理是父元素display:flex;flex-direction:column;而子元素align-self:center;这个跟CSS垂直居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。
通过display:table-cell和margin-left实现CSS水平居中。对于父元素和子元素的宽度都确定的情况，适合通过display:table-cell和margin-left实现CSS水平居中。使用时，父元素display:table-cell，子元素给剩余宽度一半的margin-left。
通过position:absolute实现CSS水平居中。这种方法跟上一个方法适用场景一样，也是适用于父元素和子元素的宽度都确定的情况。使用时，父元素position:absolute，子元素给剩余宽度一半的margin-left。
通过width:fit-content;实现CSS水平居中。这种方法可以确保子元素宽度不确定的情况下，也能实现CSS水平居中。需要注意的是，需要配合“margin: 0 auto; text-align: center;”使用。
通过display:inline-block和text-align:center实现CSS水平居中。display:inline-block能改父元素内的子元素的表达样式，同样需要配合“margin: 0 auto; text-align: center”使用。
通过position:relative、float:left和margin-left实现CSS水平居中。给父元素样式position:relative，给子元素float:left和margin-left就可以实现CSS水平居中。
通过隐藏节点+float的方法实现CSS水平居中。我们可以通过增加一个隐藏节点，然后使其float:left，这样子元素就会被隐藏节点推着水平居中。这种增加隐藏节点方法也适用于CSS垂直居中，原理一样，但是不用float。
通过transform实现CSS水平居中。这种方法是最不推荐的方法，因为transform属性在各个浏览器中的表现行为不一致，所以会出现一些兼容性的问题，只有当已知用户浏览器时才推荐使用。

BFC

BFC 是什么

首先，BFC（block formatting context），中文直译：块格式化上下文。BFC的概念，无论是在W3C CSS2.1官方文档，还是在MDN文档中，都是十分难读懂的。再翻阅了大量博客后，首先必须了解，视觉格式化模型这个概念：

视觉格式化模型

CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制。这是 CSS 的一个基础概念。视觉格式化模型根据 CSS 盒模型为文档的每个元素生成 0，1 或多个盒。
盒尺寸：明确指定，受限或没有指定
盒类型：行内(inline), 行内级别(inline-level), 原子行内级别(atomic inline-level), 块(block)盒；
定位方案(positioning scheme): 常规流，浮动或绝对定位；
树中的其它元素: 它的子代与同代；
视口(viewport) 尺寸与位置；
内含图片的固定尺寸；
其它信息。
CSS 视觉格式化模型的一部分工作是从文档元素生成盒。生成的盒拥有不同类型，并对视觉格式化模型的处理产生影响。生成盒的类型取决于 CSS 属性 display 。

对于这个概念，可以简单理解为，页面文档在浏览器（视觉媒体）上的显示，是通过一定的模型构建的，就如同我们在word中写文章时，可以进行排版一样，这些模型就是帮助我们在浏览器中构建网页内容的排版。那么页面中的元素，就会根据这些模型生成一个个的盒子，这就是我们页面中的最基本的单位。

BFC基本描述

块格式化上下文（block formatting context）是Web页面的可视CSS渲染的一部分。它是块盒子的布局发生及浮动体彼此交互的区域。(可以理解为页面中的块盒（block boxes）所使用的的渲染模型就是BFC)

什么是块盒（block boxes）

块级盒（Block-level boxes）指由块级元素构成的盒子，每个块级元素至少会生成一个盒子，我们称其为主块级盒子。块级盒描述块级元素跟它的父元素和兄弟元素的表现。

块容器盒（Block containing boxes）指只包含其他块级盒的盒子，或指生成行内格式化上下文（inline fomatting context）的盒子，由此生成的盒子只包含行内盒（inline boxes）。其描述了元素与后代之间的影响。

块盒（Block boxes）指既是块级盒，又是块容器盒的盒子。

BFC特性

内部的Box会在垂直方向，从顶部开始一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。BFC的区域不会与float box叠加。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
计算BFC的高度时，浮动元素也参与计算。

BFC 可以用来做什么

解决margin重叠的问题根据BFC的特性，同一个BFC下的两个相邻的盒子会出现垂直margin重叠的问题，这个问题会影响我们对页面布局的控制，通常我们可以为其中一个盒子添加一个父元素，并使其触发BFC，即可解决这个问题
浮动带来的布局问题同一个BFC下即使有元素浮动，BFC下元素的最左边边缘总是会与包含它的盒子左边相接触，那么就会出现浮动元素遮盖了其他元素的情况。BFC还有一条重要特性：BFC的区域不会与float box 重叠。试想，在一个BFC，如果存在一个float元素，和一个div，浮动元素会遮盖住div，此时，如果给这个div构建一个新的BFC，由于BFC特性，内外不相互影响，此时div会被float元素挤开。

比如下面这个例子，绿色盒子会因为浮动遮盖住红色的盒子，但由于两个盒子都在同一个BFC（body元素）下，根据BFC特性，红色盒子会与包含块相接，此时只要让红色盒子触发BFC，我们为红色盒子添加一个触发BFC的条件overflow:hidden;，此时红色盒子由于BFC的特性隔离开绿色，这样我们就可以通过float元素的方式实现两栏布局。

清除浮动这里就要说到我们常见的浮动元素引起的高度坍塌的问题。由于浮动特性，浮动元素会脱离父元素，我们是否可以通过触发BFC来解决高度坍塌的问题呢？

根据特性的第6条，在触发BFC后，这个盒子的高度将包含浮动元素的高度，在计算时，浮动元素会参与高度计算，我们可以理解为，当一个父元素中包含了浮动元素，而浮动元素超出了父元素，此时我们为父元素创建BFC，那么浮动元素就会包裹进这个BFC解决了父元素中高度塌陷的问题。

css进阶

精灵图

什么是精灵图?

css精灵图技术（sprite）直译为“CSS精灵”，也被称为通常被解释为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”，是一种网页图片应用处理方式。

为什么需要精灵技术?

很多大型网页在首次加载的时候都需要加载很多的小图片，而考虑到在同一时间，服务器拥堵的情况下，为了解决这一问题，采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。

css精灵图技术的作用

减少加载网页图片时对服务器的请求次数
提高页面的加载速度
减少鼠标滑过的一些bug

css精灵技术的使用方法

css精灵图（sprite）其实就是通过将多个图片融合到一张图片文件中，使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非标签。在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现图片的显示。

其实说白了就是将精灵图设为一个大背景，然后通过background-position来移动背景图，从而显示出我们想要显示出来的部分。 ## 字体图标

图标字体的下载

网址：icomoon.io
点击左上角的IcoMoon App
进入之后点击Import Icons把SVG图片上传上去
全选上传上去的图片，点击右下角的Generate Font
每个项目下都会有一个Get Code按钮，点击它会出现一个使用方法的弹窗
点击左上角的Preferences，在Font Name中设置生成字体的名称
设置好之后，关闭弹出窗口，点击右下角的Download按钮进行下载

字体图标的使用

在样式里面声明我们使用的图标字体,告诉别人我们使用的自定义的字体.这里主要注意两个问题.

声明我们使用的icomoon
注意路径问题!

<style>
        @font-face {
            /* 1.注意font-family:icomoon */
            font-family: 'icomoon';
            /* 2.注意路径! */
            src:  url('fonts/icomoon.eot?7kkyc2');
            src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
                url('fonts/icomoon.woff?7kkyc2') format('woff'),
                url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
        }
    </style>

比如我们要给html文件中的span使用字体图标

在body中写span标签
我们打开之前下载下来的icomoon文件夹中的demo.html,在网页中,选中我们想要的图标的右面的小图标,复制,粘贴到我们的span标签中
在样式中可以给span标签设置样式

字体图标的追加和加载原理

注意找到我们之前icomoon文件夹中的selection.json文件
打开icomoon网站，点击IcoMoon App
点击Import Icons，导入我们的selection.json 文件，会发现之前的字体图标出现了。（这里我们用的是最开始生成手机字体图标的文件夹），然后再选择我们新要的图标，之后selection()出现我们选择了字数，点击右面的Generate Font生成字体图标。
我们新选择的字体图标和之前的手机字体图标，都会出现，（这里是没有出现，因为在上面，截图截不全，被遮住了，但是通过下面的selection(4)可以看出的确是有四个字体图标的），点击右面的Download，下载会得到icomoon文件夹，这个时候就可以把之前的icomoon文件夹删除掉了。
将项目中之前的fonts文件夹删除，然后换成新的icomoon文件夹中的fonts文件夹。之后打开icomoon文件夹中的demo.html网页，将我们需要的字体图标，粘贴到测试字体图标.html文件中，这里我们选择第一个小房子。
可以根据自己的需要设置一下样式，我之前已经给span元素设置过了，这里就不再设置了。然后打开网页，会出现我们之前的手机字体图标，和小房子字体图标。

CSS三角的做法

<div class="test"></div>
 .test {
        width: 0;
        height: 0;
        border: 20px solid transparent;
        border-top-color: yellowgreen;
      }

css样式初始化

一般标签在浏览器中都有默认样式，例如body标签有默认的外边距，ul有默认的小黑点和内边距，前端程序员在写页面的时候会把这些默认的样式都清除掉，让所有标签的外观效果在所有浏览器表现一致，这个步骤就是css的初始化。

HTML, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td {
    border:none;
    font-family:"微软雅黑","黑体","宋体";
    font-size:14px;
    margin:0px;
    padding:0px;
    }
html,body{
    height: 100%;
    width: 100%;
    }
address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal;
}
a{
    text-decoration:none;
}
a:link{
    color:#fff;
}
a:visited{
    color:#fff;
}
a:hover{
    color:#fff;
}
a:active{
    color:#fff;
}
input::-ms-clear{
    display:none;
    }
input::-ms-reveal{
    display:none;
}
input{
    -webkit-appearance: none;
    margin: 0;
    outline: none;
    padding: 0;
}
input::-webkit-input-placeholder{
    color: #ccc;
}
input::-ms-input-placeholder{
    color: #ccc;
}
input::-moz-placeholder{
    color: #ccc;
}
input[type=submit],input[type=button]{
    cursor: pointer;
}
button[disabled], input[disabled] {
    cursor: default;
}
img{
    border:none;
}
ul,ol,li{
    list-style-type:none;
}
/*公共方法*/
.clear{
    clear: both;
}
.clearleft{
    clear: left;
}
.clearright{
    clear: right;
}
.floatleft{
    float: left;
}
.floatright{
    float: right;
}
.cursor{
    cursor: pointer;
}
/*背景及色值表*/
.bg000{
    background: #000;
}
.color000{
    color: #000;
}

LOGO SEO优化

logo里面首先要放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可。
为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来。

方法1：text-indent移到盒子外面(text-indent:-9999px),然后overflow:hidden,淘宝的做法。

方法2：直接给font-size:0;京东的做法。
最后给链接一个title属性，这样鼠标放到logo上面就可以看到提示文字。

网站 favicon 图片

favicon.ico图标是网站的缩略标志，显示在浏览器标签、地址栏和收藏夹，用于显示网站的logo

制作favicon图标.准备一张长宽一样的图片，转换为ico图标，借助第三方转换网站：http://www.bitbug.net/
favicon图标放到网站根目录下
HTML页面引入favicon图标
在html页面里的元素之间引入代码。

<link rel="shortcut icon" href="favicon.ico" />

网站TDK三大标签

title 网站标题

搜索引擎了解网页的入口和对网页主题归属的最佳判断点。

<title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>

description 网站说明

简要说明我们网站主要是做什么的。

<meta name="description" content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物
体验!" />

keywords 关键字

keywords 是页面关键词，大多情况下为 6～8 个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2 的形式。

<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡" />

模块化开发

css模块化开发主要目的

提高代码重用性及渲染效率。

什么是模块化

构建标准化的灵活多用的单元。具体一点解释，是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程，每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。

CSS模块化的实现

常见的CSS模块化思想，如：Sass、SCSS、LESS、BEM、OOCSS、AMCSS

Sass

SCSS

LESS

其它

CSS鼠标样式

cursor的属性：

pointer：手型
crosshair：十字型
text：平时鼠标移动到文本上的样式
wait：等待的效果
default：默认的那种效果
help：带问号的鼠标样式
e-resize：向右的箭头
ne-resize：向右上方的箭头
n-resize：向上的箭头
nw-resize：向左上方的箭头
w-resize：向左的箭关
sw-resize：向左下的箭头
s-resize：向下的箭头
se-resize：向右下方的箭头
auto：系统自动的效果

表单/文本框

取消表单轮廓

outline:none
outline-color 规定边框的颜色。
outline-style 规定边框的样式。
outline-width 规定边框的宽度。
inherit 规定应该从父元素继承 outline 属性的设置。

防止拖拽文本域

textarea{resize:none}

none 用户无法调整元素的尺寸。
both 用户可调整元素的高度和宽度。
horizontal 用户可调整元素的宽度。
vertical 用户可调整元素的高度。

vertical-align实现行内块和文字垂直居中对齐

vertical-align 属性设置一个元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 使元素及其后代元素的底部与整行的底部对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length 将元素升高或降低指定的高度，可以是负数。
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。

图片底侧空白缝隙解决方案

vertical-align:bottom|middle|top
把图片转换为块级元素 display:block

文字溢出省略号显示

1.单行文本溢出显示省略号:

white-space:nowrap;//(强制一行内显示,默认normal自动换行)
overflow:hidden;//超出部分隐藏
text-overflow:ellipsis;//文字用省略号代替

2.多行文本溢出显示省略号:

display: -webkit-box;//弹性伸缩盒子模型显示
-webkit-box-orient: vertical;//设置或检索伸缩和对象子元素的的排列方式
-webkit-line-clamp: 3;//限制一个块级元素显示的文本行数
overflow: hidden;
text-overflow:ellipsis;//文字用省略号代替

HTML5+CSS3

HTML5

HTML5新增的标签

header 头部标签
nav 定义导航链接
section 定义文档中的节
article 定义文章
aside 定义页面内容之外的内容
audio 定义声音内容
canvas 定义图形
figcaption 定义 figure 元素的标题
figure 定义媒介内容的分组，以及它们的标题
footer 定义 section 或 page 的页脚
video 定义视频
datalist 定义选型列表

HTML5新增的表单

search：与text文本框类似，用于搜索；
tel：与text文本框类似，用于电话；
url：与text文本框类似，用于url格式的地址；
email：与text文本框类似，用于email格式的地址；
number：与text文本框类似，用于数值；
range：只允许输入一段范围内的数值，通过min和max属性来设置范围；
color：颜色文本框
file：文件选择文本框，HTML5中通过multiple属性可以多选；
datetime、date、month、week、time、datetime-local 各种日期与时间输入的文本框；
output：定义不同类型的输出；

HTML5新增的表单属性

<input> 标签 (w3school.com.cn)

required属性：具有该属性的元素，如果其内容为空则不允许提交，并给出相应的提示。
pattern属性：具有该属性的元素，如果内容不为空则把内容与pattern的值进行正则匹配，匹配不成功则不通过并提示。
min属性和max属性：它们是值类型和日期类型的input元素专用属性，限制了输入的范围。
step属性：控制元素的值增加或减少的步幅，如输入1-100之间的数字，且步幅是5，那么只能输入1、6、11....。
placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
autocomplete 规定是否使用输入字段的自动完成功能。

CSS3

CSS3新增的选择器

一、css3之前的选择器

ID选择器
类选择器
包含选择器(E F)
伪类选择器（:link,visited,hover,active,focus,first-child）
伪元素选择器（::first-line,first-letter,before,after）
通配选择器(.)
属性选择器(foo[name='martin'])
子包含选择器(E>F)
相邻兄弟选择器(E+F)

二、css3新增选择器

E[foo^='bar'] 匹配E元素，该元素包含foo属性，且foo属性值以bar开头
E[foo$='bar'] 匹配E元素，该元素包含foo属性，且foo属性值以bar结尾
E[foo*='bar'] 匹配E元素，该元素包含foo属性，且foo属性值包含bar字符串

三、新增结构伪类选择器：

E:root 匹配文档所在的根元素
E:nth-child(n) 匹配E所在父元素第n个匹配E的元素，非E的子元素也参与排序，若第n个子元素不是E元素，则该语句没有效果（注意这里的n从1开始）
E:nth-last-child(n) 匹配E所在父元素倒数第n个匹配E的元素
E:nth-of-type(n) 匹配E所在父元素第n个匹配E的元素，非E的子元素不参与排序(n同样是从1开始）注意区别nth-child(n)
E:last-child
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty

CSS3的新特性

CSS3新特性汇总_simon的博客-CSDN博客_css3新特性

1.选择器：

伪元素选择器:

::before
::after
::first-line
::first-letter
::section 伪类选择器 :
.list>li:first-child 选中第一个子元素
.list>li:last-child 选中最后一个子元素
.list>li:nth-child(n) 选中第五个子元素
.list>li:nth-child(odd) 选中偶数行
.list>li:nth-child(even) 选中奇数行
.list>li:nth-child(2n) 支持数学表达式，选中偶数行
.list>:nth-of-type(1) 选择类型匹配的，选中的是第五个li,跳过ul中其他类型其他常用特性：阴影边线弧度滤镜背景的扩充定位（display）

2.媒体查询

css3通过屏幕的分辨率自动判断大小，从而适配对应的css样式。

@media only screen and (min-width: 1200px) {
.example {background: pink;}
}
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}

3.@font-face(url) 字体

@font-face
{
font-family: myFirstFont;
src: url('/example/css3/Sansation_Light.ttf')
,url('/example/css3/Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}

4.css3的变幻效果

transform 主要用来实现变幻效果 2D效果：

平移动画：translate(x轴的位置，y轴的位置)

transform:translate(100px,200px)

缩放动画：scale(数值)

transform:scale(1.5)

旋转动画：rotate(数值+弧度deg)

transform:rotate(20deg)

倾斜动画：skew(x轴deg,y轴deg)

transform:skew(20deg,30deg)旋转x轴y轴

3D效果：

rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

transform:rotateX(50deg);

5.css3过渡效果

transition-property	//规定设置过渡效果的 CSS 属性的名称。
transition-duration	//规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	//规定速度效果的速度曲线。
transition-delay	//定义过渡效果何时开始。

6.css3帧动画

@keyframes 规则

定义和用法

通过 @keyframes 规则，您能够创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。语法

@keyframes animationname {keyframes-selector {css-styles;}}

7.渐变（Gradients）

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

8.CSS3 多列

column-count 属性指定了需要分割的列数

本地存储

HTML5 提供了2种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储(本地存储)

存储方式：以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。

大小：每个域名5M

支持情况：注意：IE9 localStorage不支持本地文件，需要将项目署到服务器，才可以支持！

检测方法：

if(window.localStorage){
 alert('This browser supports localStorage');
}else{
 alert('This browser does NOT support localStorage');
}

常用的API：

getItem //取记录
setIten//设置记录
removeItem//移除记录
key//取key所对应的值
clear//清除记录 存储的内容：数组，图片，json，样式，脚本。。。（只要是能序列化成字符串的内容都可以存储）

sessionStorage - 针对一个 session 的数据存储(会话存储) HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。

HTML 和 CSS