html5新特性
1.语义标签
常用语义标签： <header></header>头部 <nav></nav>导航栏 <section></section>区块(语义化div） <main></main>主要区域 <artical></artical>主要内容 <aside></aside>侧边栏 <footer></footer>底部 ... 这些标签可以在页面上多次使用 Video（视频） Audio（音频） 使用它们可以很方便的在页面中嵌入音频和视频，不用用flash以及其他浏览器插件
2.增强表/表2.0
1.新的input type
2.新的表单元素
<input><textarea><select><option>... <datalist>：数据列表，为input提供输入建议列表 <progress>：进度条显示连接/下载进度 <meter>：刻度尺/度量衡，描述数据所处的阶段，红(危险)=>黄色(警告)=>绿色(优秀) <output>：输出内容，语义上说，这里的数据是通过计算和输出获得的 type=‘email’‘tel文本等限制 tel：电话控件 url：url地址控件 email：email具有校验功能的控件 color：颜色控件 date：日期控件(年，月，日，不包括时间)，火狐支持，谷歌支持，time：时间控制，火狐支持，谷歌支持datetime-local：火狐暂时不支持日期时间控制，谷歌支持month： 月插件等。。。
3.表单元素的新属性
通用属性： placeholder：占位提示文字 mutiple：是否允许多次输 autofocus：输入焦点自动获取 form：指定输入元素所属的表单，输入框可以放在表单外并提交 验证属性(了解): required：输入框内容不能为空 min：允许输入的数字最小值 max：允许输入的数字最大值 minlength：允许输入的字符串最小长度 maxlength：允许输入的字符串最大长度 pattern：输入框内容必须符合正则表达式 required:规定是否为必填项
3.视频和音频
视频播放：<video src=""><video> 查看视频的所有属性、方法和事件：console.log(videoBirds); 音频播放：<audio src=""></audio> 查看视频的所有属性、方法和事件：console.log(bgMusic); WEB可用的绘图技术： (1)Canvas绘图：H5原生技术，基于网页画布绘制2D位图技术，善于表现细腻的色彩 (2)SVG绘图：H基于技术的借鉴SVG绘图空间2D矢量图画技术，缩放不会失真 (3)WebGL绘图:还没有H基于标准技术HTML5 Canvas提供硬件3D加速渲染；有一个非常强大的3D扩展库：three.js
4.Canvas绘图
H5基于网页画布2的本土技术D位图绘图技术，表现细腻的色彩，可用于统计图表、页面游戏、地图应用、网页特效等。 使用Canvas的步骤： <canvas id="c2" width="400" height="300"></canvas> Canvas自身是一个300*150的inline-block注：元素：注：Canvas不能使用画布尺寸CSS设置-扭曲整个图像！ 使用H5 Canvas API进行绘图： var ctx = c2.getContext('2d'); ///画矩形 ctx.fillStyle = '#000' 填充颜色/渐变对象 ctx.strokeStyle = '#000' 描边颜色/渐变对象 ctx.lineWidth = 1 描边线宽度 ctx.fillRect(x, y, w, h)： 填充矩形 ctx.strokeRect(x, y, w, h)： 描边矩形 ctx.clearRect(x, y, w, h)： 描边矩形 ///绘制文本 ctx.font = '10px sans-serif' ctx.textBaseline = 'alphabetic/top/bottom' ctx.fillStyle = '#000' ctx.strokeStyle = '#000' ctx.fillText(txt, x, y) 填充文本 ctx.strokeText(txt, x, y) 描边文本 ctx.measureText(txt).width 基于当前字体设置的宽度的测量文本 ///绘制路径-概念相似PS中钢笔工具 ctx.beginPath() ctx.moveTo() ctx.lineTo() ctx.arc() ctx.rect() ctx.ellipse() ctx.closePath() ----------------------------- ctx.stroke() 基于现有路径的描述 ctx.fill() 基于现有路径填充 ctx.clip() 切割基于现有路径 ///绘制图像 ctx.drawImage(img, x, y) 绘制图像(原始尺寸) ctx.drawImage(img, x, y, w, h) 绘制图像(指定尺寸) ///保持图纸上下文的变形和状态 ctx.rotate() 图像旋转 ctx.translate() 图像平移 ctx.scale() 图像缩放 ------------------ ctx.save() 图纸上下文的保存 ctx.restore() 上下图恢复 2.Chart.js —— 了解 简单灵活JS图表绘制工具库，基于Canvas实现。还有类似的工具ECharts、FreeChart、FusionCharts... 官网：http://www.chartjs.org/ 基本使用方法： <canvas id="c3"></canvas> <script src="js/Chart.js"></script> <script> new Chart(c13, { type: 'bar/line/pie', data: { labels: datasets: [{ label: '', data: [...] } ] } }); </script>
5.SVG绘图
Scalable Vectr Graphic，可缩放向量图
在H5标准之前的使用方法：SVG标签不能直接书写在网页中，只能编写在独立的XML文档中；
网页中使用<img src="x.svg">进行嵌入
纳入H5标准后的使用方法：SVG标签可以直接书写在网页中。
Canvas与SVG的不同：
(1)Canvas是位图；SVG是矢量图
(2)Canvas是JS绘图技术(不是DOM元素)；SVG是标签绘图技术(是DOM元素)
(3)Canvas内容不能使用CSS；SVG内容可以使用CSS；
(4) Canvas内容不方便绑定事件处理；SVG内容方便进行事件绑定
常用的SVG图形：
(1)矩形
<rect width="100" height="50" x="400" y="350" fill="#f0f" fill-opacity="0.3" stroke="#00f" stroke-width="6" stroke-opacity=".3"></rect>
(2)圆形
<circle r="100" cx="400" cy="300" fill="#f0f" fill-opacity="0.4" stroke="#00f" stroke-width="6" stroke-opacity=".4"></circle>
(3)椭圆
<ellipse rx="100" ry="50" cx="400" cy="350" fill="#f0f" fill-opacity=".4" stroke="#00f" stroke-width="6" stroke-opacity=".4"></ellipse>
(4)直线（没有fill只有stroke）
<line x1="45" y1="350" x2="450" y2="350" stroke="#f00" stroke-width="4px" stroke-opacity=".4"></line>
(5)折线（fill必须设置透明/stroke必须手工指定）
<polyline points="150,200 250,100 350,300 450,50" stroke="#00f" stroke-width="6" stroke-opacity=".4" fill="transparent"></polyline>
(6)多边形
<polygon points="100,150 100,300 400,300 400,150 250,220" fill="#f0f" fill-opacity=".4" stroke="#00f" stroke-width="6" stroke-opacity=".4"></polygon>
(7)文本
<text alignment-baseline="before-edge" font-size="40" fill="#f0f" stroke="#00f">达内科技2018ajgy</text>
(8)图像
<image xlink:href="img/p3.png" x="400" y="200" width="100" height="200"></image>
扩展小知识：
(1)使用滤镜（高斯模糊）
参考MDN手册：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/filter
声明滤镜：
<filter id="f2">
<feGaussianBlur stdDeviation="3"></feGaussianBlur>
</filter>
使用滤镜：
<image/text/rect filter="url(#f2)">
(2)使用颜色渐变对象
声明渐变对象：
<linearGradient id="g2" x1="0" y1="0" x2="100%" y2="0">
<stop offset="0" stop-color="red"></stop>
<stop offset="0.5" stop-color="yellow"></stop>
<stop offset="1" stop-color="green"></stop>
</linearGradient>
使用渐变对象：
<text/rect fill="url(#g2)" stroke="url(#g2)">
6.地理定位
通过浏览器获取当前用户的所在地理坐标，以实现“LBS服务”（Location Based Service），如实时导航、周边推荐。
情形1：用户使用手机浏览器——可以根据内置GPS芯片读取数据
情形2：用户使用PC浏览器——可以根据电脑的IP地址进行反向查询(需要很大的IP分配库)
window.navigator.geolocation : {
watchPosition(){},
clearWatch(){},
getCurrentPosition(function(pos){
'定位成功'
定位时间：pos.timestamp
维度：pos.coords.latitude
经度：pos.coords.longitude
海拔：pos.coords.altitude
速度：pos.coods.speed
}, function(err){
'定位失败'
}){},
}
7.拖放API
H5之前没有拖放API，可以使用“鼠标按下 + 鼠标移动”两个事件来模拟用户拖动事件。
H5之后专门提供了七个鼠标拖动相关事件句柄：
拖动的源对象(source)可能触发的事件：
dragstart：拖动开始
drag：拖动中
dragend：拖动结束
拖动的目标对象(target)可能触发的事件：
dragenter：拖动进入
dragover：拖动悬停
drop：松手释放
dragleave：拖动离开
注意：拖放API事件句柄中所有的事件对象都有一个dataTransfer属性（数据运输对象），用于在源对象和目标对象间传递数据。
源对象：event.dataTransfer.setData(key, value)
目标对象：var value = event.dataTransfer.getData(key)
8.WebWorker
背景：Chrome浏览器中发起资源请求的有6个线程；但是只有1个线程负责渲染页面——称为UI主线程——浏览器中所有的代码只能由一个线程来执行。
问题：若浏览器加载了一个很耗时的JS文件(可能影响DOM树结构)，浏览器必须等待该文件执行完成才会继续执行后续的代码(HTML/CSS/JS等)——如果一个JS文件要执行10s(可能有很深的循环/递归等科学计算/解密)，会发生什么？——执行耗时JS任务过程中，会暂停页面中一切内容的渲染以及事件的处理。
解决方案：H5新特性——Web Worker
Worker的本质：就是一个执行指定任务的独立线程；且该线程可以与UI主线程进行消息数据传递。使用方法：
HTML文件中：
var w = new Worker('js/x.js')
w.postMessage('发送给Worker线程的消息');
w.onmessage = function(e){
e.data; //来自Worker线程的消息
}
JS文件中：
onmessage = function(e){
var data = e.data; //接收UI线程的消息
//执行耗时任务....
postMessage(result); //给UI线程发送消息
}
注意：Worker任务不允许直接操作DOM树，也不允许使用任何的BOM对象！需要的数据只能由UI主线程来传递，处理的结果也必须交由UI线程来显示。
9.WebStorage
Web项目存储数据常用的方案：
(1)服务器端存储
1)数据库存储，如商品、用户等核心数据
2)Session/内存存储，如用户的登录信息
(2)客户端存储
3)Cookie存储，如用户偏好、访问历史，浏览器兼容性好但处理麻烦且容量限制
4)H5 WebStorage存储，如用户偏好、访问历史等安全要求的数据，老IE不兼容但易使用且容量大
H5WebStorage存储具体涉及到两个对象：
(1)window.sessionStorage：类数组对象，通过key=>value对存储字符串数据——会话级存储
添加数据：sessionStorage['key'] = 'value'
修改数据：sessionStorage['key'] = 'newValue'
删除数据：delete sessionStorage['key']
获得数据：var v = sessionStorage['key']
(2)window.localStorage：类数组对象，通过key=>value对存储字符串数据——本地/跨会话级/永久存储
添加数据：localStorage['key'] = 'value'
修改数据：localStorage['key'] = 'newValue'
删除数据：delete localStorage['key']
获得数据：var v = localStorage['key']
10.WebSocket
css3新增
新增选择器 p:nth-child（n）{color: rgba（255, 0, 0, 0.75）}
弹性盒模型 display: flex;
多列布局 column-count: 5;
媒体查询 @media （max-width: 480px） {.box: {column-count: 1;}}
个性化字体 @font-face{font-family:BorderWeb;src:url（BORDERW0.eot）；}
颜色透明度 color: rgba（255, 0, 0, 0.75）；
圆角 border-radius: 5px;
渐变 background:linear-gradient（red, green, blue）；
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
阴影 box-shadow:3px 3px 3px rgba（0, 64, 128, 0.3）；
倒影 box-reflect: below 2px;
文字装饰 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
边框效果 border-image:url（bt_blue.png） 0 10;
2d 转换
旋转 transform: rotate（）；
倾斜 transform: skew（）；
平移 transform:translate（）；
缩放 transform: scale（）；
平滑过渡 transition:;
<video src="1.mp4" autoplay 自动播放 loop 循环 controls 控件></video>
<audio src="" autoplay 自动播放 loop 循环 controls 控件></audio>
css3新特性
属性选择器，E[属性=‘属性值’]也就是 input[type=‘text’] 结构伪类选择器 伪元素选择器 2d转换 3d转换 动画 过度 字体图标 浏览器私有前缀
前端优化
前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;第二类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等
HTML5
表单
<input type="">
type{
文本 text (设定最大输入数 maxlength 、 框内提示文字 placeholder)
密码 password (设定最大输入数 maxlength 、 框内提示文字 placeholder)
单选 radio （多个选项中单选name需相同 ,添加label标签后点击文本也可以选择）
<p><label for="man">男</label> <input type="radio" id="man" name="sex"></p>
<p><label for="woman">女</label><input type="radio" id="woman" name="sex"><br></p>
年月日 date
多选 checkbox （默认选中checkted）JS: checkbox.checked （选中值为true,未选中值为false）
数字选择 number (设定上下限 max min 设定选择间距step)
文件选择 file
图片 imgage
提交 submit
重置 reset
禁用 disabled = true //是否禁用
}
下拉框单选<select> <option>123</option> </select>
{
作为提示不可选中 disabled
默认选项 selected
}
自由文本 <textarea></textarea>
{
行 cols 列 rows
框内提示文字 placeholder
}
表格
<table>
{
宽（width）
对齐方式 align (left center right)
表格边框宽度 （border）
单元边沿与其内容之间的空白 (cellpadding)
单元格之间的空白 (cellspacing)
合并单元格 （跨行合并：rowspan="合并单元格个的个数"
跨列合并：colspan="合并单元格个的个数" ）
外侧边框的哪个部分是可见的(void、above、below、hsides...)
内侧边框的哪个部分是可见的(none、groups、rows、cols、all)
表格的摘要（summary）
}
标签
1.块级标签 块级元素 ：独占一行 默认宽度100% 可以设置宽高
块级元素：<h1>-<h6>、p、div、ul、ol、li...
宽度默认100%；默认独占一行；可以直接设置 宽 高 边距 填充
2.行内标签 行内元素 ：并排显示 默认宽度是内容宽度 不可以直接设置宽高
行内元素：a,label,b,em,i,del,s,ins,u,span...
宽度自动；默认并排显示，不能直接设置 宽 高 边距 填充
3.行内块元素 ：可以设置宽高 并排显示
行内块元素：img、input
宽度自动；默认并排显示，可以直接设置 宽 高 边距 填充，自带2-3像素的边距
三种转换：
元素->行内： style=" display:inline; "
元素->块： style=" display:block; "
元素->行内块: style=" display:inline-block; "
背景图（css 中）
background: slateblue; 设置背景色
background-image: url("./images/sgwe.jpg"); 设置背景图片
background-repeat: no-repeat; 设置图片不重复
background-position: ; 水平方向 垂直方向
background-position-x: ; 设置水平位置
background-position-y: ; 设置竖直位置
background-position: 10px 100px; 如下
background-position: x y; 没写哪个哪个就是默认全局居中
background-position: center top; 设置位置在头部的中间
background-attachment: fixed; 设置背景图片附着（固定）
background-size: cover; 平铺在整个容器中 auto 图片本身大小
border: 1px solid #000; 设置边框 粗细 实线/虚线（solid/dashed） 颜色
border-radius: 50%; 设置边框圆角 （单位 px或% 都行）
box-shadow:inset 5px 5px 5px green; 设置元素阴影 内阴影inset 不写就是外阴影 （三个值：横向位置 纵向位置 虚化）
Background-size:100% 100%; 背景图一个百分之百占比
transparent 透明色
例：将一个P标签做成一个球
<head>
<style>
p {
width: 200px;
height: 200px;
border: 1px solid #000;
/* 设置元素边框粗细 实线 颜色 */
border-radius: 50%;
/* 设置边框圆角 */
box-shadow:inset 5px 5px 5px green;
/* 设置元素阴影 */
}
</style>
</head>
<body>
<p></p>
</body>
background-image: url("./images/sgwe.jpg");
/* 设置背景图片 */
background-repeat: no-repeat;
/* 设置背景图片平铺 */
/* background-position:50 ; 水平方向 垂直方向 */
/* background-position: center top; */
/* 在头部的中间 */
/* background-position: 10px 100px; */
/* background-position: x y;没写哪个哪个就是默认全局居中 */
/* 设置背景图片位置 */
background-attachment: fixed;
/* 设置背景图片附着 */
/* background: slateblue url("./images/sgwe.jpg") no-repeat fixed 250px 0; */
background-size: cover;
/* 设置背景图片尺寸 需要单独写出来*/
object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。
contain：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。
cover：被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
fill：被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。
none：被替换的内容将保持其原有的尺寸。
scale-down：内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
vertical-align: middle;
导航栏
nav 标签为导航栏标签
导航栏内用ul il 写
复制付费文本
方法1：F12 F1 设置禁用JS
方法2：F12 元素 事件帧监听 删除复制事件
方法3：找到HTML中存放内容的段落，找到父级，添加一个id或者class，然后在控制台打印console.log(document.getElementById('自建ID').innerText)
CSS
选择器
1.类选择器
在此例中，所有带有 class="center" 的 HTML 元素将为红色且居中对齐：
例1 .center {
text-align: center;
color: red;
}
例2 <head>
<style>
p.center { （只影响p标签中有center类的元素）
text-align: center;
color: red;
}
p.large { （只影响p标签中有large类的元素）
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">本段将是红色并居中对齐。</p>
<p class="center large">本段将是红色、居中对齐，并使用大字体。</p>
</body>
2.标签选择器
页面上的所有 <p> 标签都将居中对齐，并带有红色文本颜色：
p {
text-align: center;
color: red;
}
3.id选择器（注意：id名称不能以数字开头）
这条 CSS 规则将应用于 id="para1" 的 HTML 元素：
#para1 {
text-align: center;
color: red;
}
4.通配符选择器
下面的 CSS 规则会影响页面上的每个 HTML 元素：
* {
text-align: center;
color: blue;
}
5.分组选择器
分组选择器选取所有具有相同样式定义的 HTML 元素
例3
<head>
<style>
.center,p { (所有元素中带有center类和p标签)
color: red;
}
</style>
</head>
<body>
<label class="center">本段将是红色</label>
<p>本段将是红色</p>
</body>
6.后代选择器（包含选择器）
用来选择元素或元素组的后代，写法就是把外层标签写在前面，内层标签写在后面，中间用空格分开。当标签发生嵌套的时候，内层标签就成为外层标签的后代；
<head>
<style>
.two p{
color:red;
}
</style>
</head>
<div class="two">
<p>aaaaaaa</p> (红)
<div>
<p>bbbbbbb</p> (红)
<div>
<p>fffffff</p> (红)
</div>
</div>
<p>bbbbbbb</p> (红)
<p>ccccccc</p> (红)
</div>
7.子元素选择器
只能选择作为某元素子元素的元素，其写法就是把父级标签写在前面，子集标签写在后面，中间跟一个>进行连接，注意，符号左右两侧各保留一个空格；
<head>
<style>
.two>div>p{
color: red;
}
</style>
</head>
<div class="two">
<p>aaaaaaa</p>
<div>
<p>bbbbbbb</p> （红色）
<div>
<p>fffffff</p>
</div>
</div>
<p>bbbbbbb</p>
<p>ccccccc</p>
</div>
8.:after 选择器
:after 选择器向选定元素的最后子元素后面插入内容，使用content 属性来指定要插入的内容
<style>
p:after
{
content:"- 注意我";
}
</style> /*在每个p标签后都会添加一个 - 注意我 */
</head>
<body>
<p>我的名字是 Donald</p>
<p>我住在 Ducksburg</p>
<p><b>注意：</b> :after在IE8中运行，必须声明 !DOCTYPE </p>
</body>
9.属性选择器
*[title] {color:red;} /*所有包含title属性的元素为红色*/
a[href] {color:red;} /*有herf属性的a标签颜色为红色*/
a[href][title] {color:red;} /*同时有herf 和 title属性的a 标签为红色*/
*[type|="wer"] {color: blue;} /*type属性值为wer的标签会被选择*/
{
color: red;
}
为 XML 文档使用属性选择器
a[href="#"] {color: red;} /*根据属性值选择*/
a[href="#"][title="W3School"] {color: red;} /*与上类似*/
p[class="i w"] /*类为i w 的P标签才会被选择*/
{
color: red;
}
p[class~="i"] /*类中有i 的 p 标签就会被选择*/
{
color: red;
}
伪类选择器
伪元素为行内元素，可以转换为其他类型元素。
伪类选择器： 用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示
1.链接伪类选择器：
:link 选择所有未被访问的链接
:visited 选择所有已被访问的链接
:hover 选择鼠标指针位于其上的链接
:active 选择活动链接(鼠标按下未弹起的链接)
:hover 只能父级控制子级 ，若是兄弟级控制兄弟级， 写法： #a1:hover~#a2{}（注意hover后波浪线） 注意，hover效果 可以用display:none写，可以用overflow:fiddenxie写 不能用opacity：0 :hover 前不能有空格！！！
例1：
<head>
<style>
a:link{ (未被点击时为红色)
color:red;
}
a:visited{ （点击过后为黄色）
color:yellow;
}
a:hover{ （鼠标经过时为棕色）
color:brown;
}
a:active{ （鼠标被点击时为粉色）
color:pink;
}
</style>
</head>
<body>
<a href="#">好好学习</a>
</body>
2.focus伪类选择器用于选取获取焦点的表单元素，焦点就是光标 （仅用于<input type="text">文本框中，有聚焦作用）
例2：
<head>
<style>
input:focus{
background-color: green; （鼠标点击后输入框内为绿色）
}
input:hover{
background-color: red; （鼠标经过时背景颜色为红色）
</style>
</head>
<body>
<input type="text" style="outline: none;"> (outline:none; 外部边框为空)
</body>
3. .p::after{} .p::before{} 在元素后/前添加元素 元素内容为 content:"";
4.结构伪类选择器
p:first-child{} 匹配元素中的第一个元素（选择器选中的是父元素中的子元素）E:last-child 匹配元素中的最后一个元素
E:nth-child（n） 匹配元素中的第n个元素，这个n可以是数字也可以是公式也可以是关键字 公式：
2n ：求偶数
2n+1：奇数
5n：5的倍数 5-10-15-20-25
n+5 ：从第5个开始
-n+5：前5个
关键字：只有odd 和 even 两个关键字（奇数偶数）
优先级
优先级：!important > 行内样式 > 内链样式 > 外部引入 ( ！important 可直接添加在css样式中 ) 后代选择器 > 子类选择器； 为同种选择器时，哪个的描述多哪个优先级高。 id 相当于身份证号； class 相当于小名。
样式 / 属性
引入css样式的三种类型：行内样式、内嵌样式（利用选择器）、外部引入。 外部引入的CSS：新建css文件，在html文件中<head>标签中添加<link rel="stylesheet" href="">标签。在 href="" 中添加css文件路径。
1.字体
color: aquamarine;
/* 字体颜色 */
background-color: #d5d5d5;
/* 背景色 */
font-size: 20px; 因为该属性的值会被用于计算em和ex长度单位，定义该值可能改变其他元素的大小。
/* 字体大小 */
font-weight：
定义字体粗细：normal
正常粗细。与400等值。
bold
加粗。 与700等值。
lighter
比从父元素继承来的值更细(处在字体可行的粗细值范围内)。
bolder
比从父元素继承来的值更粗 (处在字体可行的粗细值范围内)。
②font-family：
定义字体
margin: 10px 20px 30px 40px;
/* 外边距 (顺时针为 上右下左) */
padding: 20px;
/* 内边距 */
font-family: "楷体";
/* 字体样式 */
font-style: italic;
/* 字体倾斜 */
font-weight: bold;
/* 字体粗细 */
text-align: center;
/* 字体对齐方式 */ 文字居中对齐
text-decoration: underline;
/* 字体下划线 */
text-indent: 2em;
/* 首行缩进 */
letter-spacing: 10px;
/* 设置字间距 */
line-height: 60px;
/* 设置行高 */
text-shadow: 30px 30px 30px blue;
/* 设置文本阴影：水平方向偏移量，垂直方向偏移量，阴影面积，阴影颜色 */
line-height: 50px ; ***其他元素使用频率也很高
/*设置行高*/
border-radius;
改边框厚度 改边框圆滑
background：transparent;
文本框透明
placeholder：
占位提示文字
margin: 100px auto;
/*强制文字在一行文本框内*/
word-wrap:break-word; //文字溢出换行
2.div
border: 10px solid black;
/* 虚线：dotted dashed */
/* 边框：宽度 实线 颜色 */
cursor:pointer //鼠标移上变手
3.a
target: （不是css属性，直接写在a标签内） _blank _parent _self _top framename 规定在何处打开链接 cursor:pointer //鼠标移上变手 a:link，定义正常链接的样式 a:visited，定义已访问过链接的样式 a:hover，定义鼠标悬浮在链接上时的样式 a:active，定义鼠标点击链接时的样式 注意： 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 text-decoration 属性是用来设置 a 标签的划线属性的。其属性值有： none：去掉下划线 underline：设置下划线 overline：在文本上方设置线条 line-through：在文本中间设置线条 initial：默认值 inherit：从父元素中继承
4.列表样式
list-style-type 属性的常见属性值的描述： none：不使用项目符号 disc：实心圆 circle：空心圆 square：实心方块 decimal：阿拉伯数字 lower-alpha：小写英文字母 upper-alpha：大写英文字母 lower-roman：小写罗马数字 upper-roman：大写罗马数字
其他
display:none;
/*隐藏该区域*/
opacity: 0; （调整透明度）
/*隐藏该区域（值为0.透明度为0；值为1，透明度为100%）*/
background-color: rgba(255, 248, 220, 0.4);
/*调整颜色透明度 （r,g,b,a） a值为透明度 */
z-index:;
调整元素显示优先级，必须配合定位使用
box-sizing: border-box;
盒子大小等于你设置的大小
border-radius: 5px; / 5%;
设置边框圆角
background:linear-gradient（red, green, blue）；
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
背景渐变
Background-size:100% 100%;
背景图一个百分之百占比
<link rel="icon" href="./img/火影logo.png"> 给标签前添加logo
盒子突起效果：
box-shadow:inset 0px 0px 10px black;
立体效果：
box-shadow:5px 5px 30px 10px black;
cursor:pointer //鼠标移上变手
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
/*将页面移到中央*/
button disabled = true 按钮不可按 按钮属性，不是css
transparent 透明色
list-style:none; 去除无序列表的符号
object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。
contain：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。
cover：被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
fill：被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。
none：被替换的内容将保持其原有的尺寸。
scale-down：内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
居中显示
1.整体居中 （建议使用）
.d2{
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
2.整体居中显示 （不建议使用）
.d2{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
3.设置行内居中：
（1）.设置行高lint-height:;为父容器高度，行内自动垂直居中
（2）.padding、margin
（3）.定位
（4）.position: absolute; top:0; bottom:0;
4.flex布局
5.vertical-align 属性设置元素的垂直对齐方式
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
盒模型
设置盒模型的margin等属性时
值若唯一x，则上下左右均为x;
值若为二x，y，则上下为x，左右为y；
值若为三，x，y,z, 则上为x，左右为y，下为z；
注意：在已设置宽高的盒模型中添加内外边距后，盒模型会变大，但是可用空间还是原来的宽高；
在已添加内外边距盒模型的css中添加box-sizing: border-box；时将强制把盒模型的大小变回原本设置的宽高，盒模型中可用空间将被缩小；
iconfont
三种方法 （以字体的方式调整） 1.<head>中用<link>导入css文件 ； 将代码复制在标签中（<i ></i> ，可以再对i标签进行修饰） 2.
浮动
可以让块级元素并排显示，浮动不会影响前面的元素 float:left;
高度坍塌：（父元素高度为0）
正常文档流的父元素，里面的所有子元素都为浮动元素的时候，父元素的高度不会被子元素所撑开
清除浮动：
1.父元素设置死高 /* 不建议使用 */
2.父元素设置溢出隐藏(没有溢出元素) 内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
/* 不建议使用 */
3.在父元素的结束标签前面添加一个空的块级元素，设置clear: both;属性，本质就是闭合浮动， 就是让父盒子闭合出口和 入口，不让子盒子出来
4.父元素类名:💖::after{
display:block;
clear: both;
content:"";
} 💖 /* 清除浮动 */
clear 属性：
left; 在左侧不允许浮动元素。
right; 在右侧不允许浮动元素。
both; 左右两侧都不允许浮动。
none; 默认值。允许浮动出现在两侧。
inherit; 规定应该从父元素中继承clear属性值。
浮动元素超过父盒子宽度就会自动换行
边距重合
边距重合：
正常文档流的父元素里面的两个子元素在垂直方向相遇，上面的设置下边距，下面的设置上边距，两个中间的边距不会相加，只会 取最大值。
具体的叠加规则是：正正取大值、正负值相加、负负最负值
解决方法：直接给margin-bottom与margin-top其中一个元素两者之和
边距传递
边距传递：
正常文档流的父元素里面的第一个子元素设置上边距时，这个上边距会传递给父级元素。
解决方法：
1、用父元素padding代替子元素margin /* 不推荐使用*/
2、父元素透明边框 border:1px solid transparent; /*不推荐使用*/
* 3、子元素绝对定位 postion:absolute;
4、父元素 overflow:hidden; (溢出隐藏) /* 可以使用 */
5、父或子元素加 float:left;
6、父或子元素加 display:inline-block; /*不推荐使用*/
7、在盒子内添加一个空的伪元素做盒内第一个元素
.bx::before{
content:'';
width:100%;
height:1px; /*设置高度为1px*/
margin-bottom:-1px; /*设置底外边框为 -1px 与高度抵消*/
display:block;
}
溢出隐藏
overflow属性规定当内容溢出元素框时发生的事情，有四个参数：
overflow: visible; 内容不会被修剪，会呈现在元素框之外，这是默认值。
overflow: hidden; 内容会被修剪，但是浏览器不会显示供查看的滚动条。
overflow: scroll; 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容。
overflow: auto; 自动。由浏览器决定如何显示，如超出则会显示滚动条。
overflow-y: scroll; 设置仅在y轴的超出滚动条。
overflow: hidden;
/* 文字溢出隐藏 */
white-space: nowrap;
/* 不换行，内容在一行显示 */
text-overflow: ellipsis; /*！！！需要搭配overflow:hiddenl;使用*/
/* 溢出文字为省略号 */
word-wrap:break-word; //文字溢出换行
定位 Position
定位=定位模式 + 边偏移
position 属性指定了元素的定位类型：static； relative（相对定位） fixed（固定定位）； absolute（绝对定位）； sticky（粘性 定位）
static 定位 静态定位的元素不会受到 top, bottom, left, right影响
fixed（固定定位） 元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动：
注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠.
relative 相对定位 他是相对于自己原来的位置来移动的,移动相对定位元素，但💖它原本所占的空间不会改变💖
例1：div
{
position:relative; /*在原来位置的基础上下移左移了30px*/
left:30px;
top:30px;
}
absolute 绝对定位 子绝父相：如果子级使用绝对定位，父级则需要相对定位。
1、自己绝对定位，💖不会占有位置💖，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒 子，会和其他盒子重叠。
2、父盒子需要加定位限制子盒子在父盒子内显示。
3、父盒子布局时，需要占有位置，因此父亲只能是相对定位。
sticky 粘贴定位 定位表现为在跨越特定阈值前为相对定位，之后为固定定位.特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生 效。否则其行为与相对定位相同
将盒子固定在版心右侧位置。
1、让固定定位的盒子left:50%,走到浏览器可视区(相当于版心)的一版位置。
2、让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一般位置。
定位的叠放次序：z-index
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)
z-index:1;
1、数值可以是正整数、负整数或是0，默认是auto，数值越大，盒子越靠上
2、如果属性值相同，则按照书写顺序，后来者居上。
3、数字后面不能加单位。
4、只有定位的盒子才有z-index属性
拓展：
定位特殊性：绝对定位和固定定位也和浮动类似
1、行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2、块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
3、浮动元素，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)，但是绝对定位(固定定位)会压住下面标准流所有内容。
<div></div>
<span></span>span的字会跟在div后面
原因：浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素
overflow-y 指定如何处理顶部/底部边缘的内容溢出元素的内容区域
visible 不裁剪内容，可能会显示在内容框之外。
hidden 裁剪内容 - 不提供滚动机制。
scroll 裁剪内容 - 提供滚动机制。
auto 如果溢出框，则应该提供滚动机制。
no-display 如果内容不适合内容框，则删除整个框。
no-content 如果内容不适合内容框，则隐藏整个内容。
二级导航
在导航栏设置无序列表，在每一行设置二级列表。一般状态二级导航为display: none;（隐藏内容）。设置一级导航的hover属性；当鼠标经过时取消隐藏。
控制鼠标经过的hove加在一级导航的div中。hover后跟要控制的元素 例：
.div1:hover ul{ /*鼠标经过.div1元素时，控制的元素是ul*/
display: block;
}
2D
旋转 transform: rotate（*deg）；
倾斜 transform: skew（）； skewX / skewY
平移 transform:translate（）； X / Y
缩放 transform: scale（）； X,Y
平滑过渡 transition: 1s; //全部平滑过渡 transition: all 1s;
//若要单个控制平滑 transition: width 1s; (单独控制宽度的平滑时间)
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
/*将页面移到中央*/
动画
添加动画：1. @keyframes 动画名 {
from{}
to{}
}
2. @keyframes 动画名 {
0%{
}
50%{
}
100%{
}
}
绑定动画： animation: 动画名 动画持续时间 延迟多少时间播放 动画重复次数（infinite持续播放）（linear匀速播放） 动画结束位置（forwards留在原位）;
animation-name: example; 动画名
animation-duration: 5s; 动画时间
animation-timing-function: linear; 规定速度曲线（linear匀速 ease慢块慢 ease-in慢速开始 ease-out慢速结束 ease-in-out慢速开始和结束 cubic-bezier(n,n,n,n)0 到 1 的数值）
animation-delay: 2s; 动画延迟
animation-iteration-count: infinite; 播放次数（持续播放 infinite；）
animation-direction: alternate; 向前播放、向后播放还是交替播放
注意：使用移动动画的元素必须添加相对定位
动画延迟可以为负值，动画则为从已播放的 N 秒开始
fiex布局
注意，设为 Flex 布局以后，子元素的float、clear 等属性将失效。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis） 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size(项目宽度)，占据的交叉轴空间叫做cross size（项目高度） 弹性盒子内一般不设置死的宽高（突出弹性的特点） 子元素设置flex:1;即可铺满盒子 （若不给死宽高使用比例，则需要没有死宽高的子元素都设置比例）
设置在父盒子的属性
以下6个属性设置在父容器上。 * flex-direction ：主轴方向 * flex-wrap ：是否换行，怎么换行 * flex-flow ：flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。 * justify-content： 属性定义了项目在主轴上（X）的对齐方式。 * align-items：属性定义项目在交叉轴上（Y）如何对齐。 * align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 *flex-direction属性值 row（默认值）：(X)主轴为水平方向，起点在左端。 row-reverse：(X)主轴为水平方向，起点在右端。 column：(Y)主轴为垂直方向，起点在上沿。 column-reverse：(Y)主轴为垂直方向，起点在下沿。 *flex-wrap属性值 nowrap（默认）：不换行。（项目总宽度如果超出盒子宽度，项目宽度会被挤压【不会超出盒子】） wrap：换行，第一行在上方。 wrap-reverse：换行，第一行在下方。 *flex-flow属性 flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为 nowrap flex-flow:flex-direction flex-warp; *justify-content属性 justify-content属性定义了项目在主轴上（X轴）的对齐方式 flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between：两端对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。(项目之间的间隔为左右两个项目间隔之和) space-evenly 间隔相等 *align-items属性 align-items属性定义项目在交叉轴上（Y轴）如何对齐 flex-start：交叉轴的起点对齐。（上端对齐） flex-end：交叉轴的终点对齐。（下端对齐） center：交叉轴的中点对齐。（上下居中） baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 *align- content属性 align- content属性定义了行的对齐方式。如果项目只有一根轴线，该属性不起作用。 该属性中的六个属性值与justify-content中的六个属性意思相似，不同之处在于justify-content沿主轴方向的作用于单个子元素，而align-content沿交叉轴方向作用于行。 flex-start：与交叉轴的起点对齐。（所有项目上对齐） flex-end：与交叉轴的终点对齐。（所有项目下对齐） center：与交叉轴的中点对齐。（所有项目上下居中，上下项目间没间隔） space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。（所有项目上下排满，项目间有间隔，项目间间隔为两个单项目间隔） space-around：每根轴线两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍。（） stretch（默认值）：轴线占满整个交叉轴。（项目若没设高则会拉长占满）
设置在项目上的属性（子元素上）
* order : 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 * flex-grow: 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 * flex-shrink: 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 * flex-basis: 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 * flex: 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 * align-selff:属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch *order属性 属性值一般为number类型也可以是initial（默认值），inherit（从父元素继承的值）为设置弹性盒对象元素的顺序：数字越小越靠前。取值0.1.2... *flex-grow属性 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。 *flex-shrink属性 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 *flex-basis属性 定义了在分配多余空间之前，项目占据的主轴空间（main size）相当于宽度，优先级大于自身设定的宽度。 * flex属性 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 flex:1；0占有空间 ，1缩放比例，100px固定值 这个0 1 auto是什么意思， flex-grow：表示当子元素的空间小于父元素的空间时,如何处理剩余空间,默认值为0表示不占有剩余空间; felx-shrink：表示当子元素的空间大于父元素的空间时,如何缩小子元素，默认值为1表示等比缩小 flex-basis ：用于设置项目占据的主轴空间,设置为auto表示项目占据的主轴大小等于项目的实际内容大小,设置为固定值表示项目占据的主轴大小等于固定值 *align-self属性 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性（优先级高）。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
移动端布局（响应式）
* 视口：视口（viewport）就是浏览器显示页面内容的屏幕区域，视口可以分为视觉视口,布局视口和理想视口 * 布局视口：布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。（当移动端浏览器展示PC端网页内容时，由于移动端设备屏幕比较小，不能像PC端浏览器那样完美地展示网页，这正是布局视口存在的问题。这样的网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容） * 视觉视口：用户正在看到的网站区域。可以通过缩放操作视觉视口。但不会影响布局视口，布局视口依然保持原来的宽度。 * 理想视口：理想视口是指对设备来讲最理想的视口尺寸。采用理想视口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。在理想视口情况下，布局视口的大小和屏幕宽度是一致的，这样就不需要左右滚动页面了。在开发中，为了实现理想视口，需要给移动端页面添加标签配置视口，通知浏览器来进行处理。
meat视口标签
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> name=“viewport”:意为视口标签 Content:里边包裹的若干属性 标准的写法: width：视口的宽度可以，设置特殊值device-width宽度是设备的宽度 initial-scale：初始化缩放倍数 一般是大于0数字 user-scalable：是否允许用户自行缩放，取值0或1，yes或no maximum-scale：最大缩放(一般是大于0数字)允许放大的倍数 minimum-scale：最小缩放(一般是大于0数字)允许缩小的最大倍数
二倍图
物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。 这是厂商在出场时就设置好了(也就是我们的分辨率)， 我们开发时候的1px不一定等于一个物理像素 PC端页面 1个px等于一个物理像素 但是移动端就不一样 一个px能显示的物理像素点的个数 称为物理像素比或屏幕像素比 对于一张 50px * 50px 的图片，在手机Retina(视网膜)屏中打开 按照原本的物理像素比会放大倍速 这样会造成图片模糊在标准的viewport设置中 使用倍图来提高图片质量 解决在高清设备中的模糊问题一般都是使用二倍图 ，但因为手机屏幕的影响 现在还存在三倍四倍图的情况背景图片注意缩放
移动端开发的选择
1.单独制作移动端页面（主流） 流式布局（也就是百分比布局） Flex布局（推荐） rem适配布局 混合布局（我们日常的布局方式就叫混合布局） rem单位 rem(root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对与html元素的字体大小。比如，根元素(html)设置font-size=12px;非根元素设置width:2rem;则会换成px表示就是24px。优势：可以通过修改html里面的文字大小来改变页面中元素大小，可以整体控制。rem是html与单个元素的比例单位，em是父元素与子元素的比例单位。 * rem的适配方案 <1>.媒体查询+rem方案 <2>.rem.js+rem （媒体查询限制CSS样式的范围，以便于在满足某些媒体条件时才适用。简单来说：媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式。 ） * 它都有那些媒体类型 All（所有设备） Print（打印设备） Screen（电脑，笔记本，手机等设备） * 它都有那些媒体特性 width 网页显示区域完全等于设置的宽度 height 网页显示区域完全等于设置的高度 max-width / max-height 网页显示区域小于等于设置的宽度 min-width / min-width 网页显示区域大于等于设置的宽度 orientation: portrait (竖屏模式) | landscape (横屏模式) * 语法关键字，将媒体特性与媒体类型链接到一块进行设备检测 and 可以将多个媒体特性链接到一块,相当于且 not 排除某个媒体特性 相当于非,可以省略 only 指定某个特定的媒体类型, 可以省略 * 媒体查询有两种语法 外联语法:<link rel="stylesheet" type="text/css" media="only screen and (max-width:750px)" href=""/> 内嵌式语法: @media screen and (min-width:320px){ html{ font-size: 21.33px; } } * 外联语法： <link rel="stylesheet" type="text/css" media="only screen and (max-width:350px)" href=“css350.css"/> <link rel="stylesheet" type="text/css" media="only screen and (max-width:750px)" href=“css750.css"/> * 内嵌语法： @media screen and (min-width:320px){ body { background：#000； } } @media screen and (min-width:750px){ body{ background：#f99; } } 2制作响应式页面兼容移动端（其次） 就是通过媒体查询 限制屏幕的宽度 然后根据不同的宽度写不同的代码
移动端PC端转换
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android| Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS |Symbian|Windows Phone)/i))) {
// window.location.href = ""; //手机
} else {
window.location.href = ""; //电脑
}
/*pc 移动都添加到scipt标签中(位置在body下面)*/
// 摘要：控制不同尺寸屏幕上的rem基准单位
// 以iPhone6位基准 375px 最大适配750px 屏幕
var maxAdaptation = 750
document.addEventListener('DOMContentLoaded', function () {
var deviceWidth = document.documentElement.clientWidth > maxAdaptation ? maxAdaptation : document.documentElement.clientWidth
document.documentElement.style.fontSize = (deviceWidth / 15) + 'px'
var funID
window.onresize = function () {
clearTimeout(funID)
funID = setTimeout(function () {
var deviceW = document.documentElement.clientWidth > maxAdaptation ? maxAdaptation : document.documentElement.clientWidth
document.documentElement.style.fontSize = (deviceW / 15) + 'px'
}, 500)
}
}, false)
/*只添加在移动端*/
添加下划线的方法
1.元素名::after{
content:'';
height:2px;
background-color:black;
display:block;
}
2.div{
border-bottom:宽度 样式 颜色；
}
以下属性使用时必须配合定位
使用动画时配合相对定位 z-index;调整显示优先级时必须使用定位
JS
JS基本知识
一个完整的javascript实现应该有三个部分构成:ECMAScript、DOM、BOM javascript特点：1.解释型语言（不进行编译，不用转换成二进制的计算机语言）2.动态型语言（是一类在运行时可以改变其结构的语言） JS能够做什么： 能改变页面中的所有 HTML 元素 能改变页面中的所有 HTML 属性 能改变页面中的所有 CSS 样式 能删除已有的 HTML 元素和属性 能添加新的 HTML 元素和属性 能对页面中所有已有的 HTML 事件作出反应 能在页面中创建新的 HTML 事件
JS外部引入
1、<script src=‘’xxxxx.js“></script>引入 2、脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中，或兼而有之。 3、把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。
变量
声明变量： var name ; var 是一个js关键字，用来声明变量的，使用var关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管理
JS输出方式
Js的输出方式：
alert（msg）：弹出框
console.log(msg)：打印日志（consol方法不止一个）
prompt(msg):输入框 注意：输入类型为字符串
例：输入班级人数与每个人分数求和
var a = prompt('请输入班级总人数')
var sum = 0
for(var i = 1;i<=a;i++){
var b = Number( prompt ('请输入第' + i + '位同学的分数'))//进行强制类型转换将输入的字符串转换为Number
sum = sum + b
}
console.log(sum)
基本数据类型
JS 把数据类型分为两类：
简单数据类型 （Number String Boolean Undefined Null）
复杂数据类型 （数组、object、function...)//数组属于object（对象）
三种对象类型：
对象（Object）\ 日期(Date)\ 数组（Array）
* Number 数字型，包含整型和浮点型值 默认值：0
* Boolean 布尔值类型，true\false 等价于1\0
* String 字符串类型 注意：在JS中，字符串都带有引号
* Undefined 声明变量但是没有给变量赋值，此时 变量=undefined
* Null 声明变量为空值
简单数据类型
数字型范围：
* 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
* 最小值：Number.MIN_VALUE，这个值为：5e-324
三个特殊值：
* Infinity ，代表无穷大，大于任何数值
* -Infinity ，代表无穷小，小于任何数值
* NaN ，Not a number，是计算机科学中数值数据类型的一类值，表示未定义或不可表示的值。常在浮点数运算中出现
字符串型 String
var a = '我是帅哥'
var a = "我是帅哥"
注意：因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号
JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)不能单双引号搭配
Undefined
声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）
例：
var a;
console.log(a); // undefined
console.log('你好' + a); // 你好undefined
console.log(11 + a); // NaN
NaN console.log(true + a); // NaN
null
一个声明变量给 null 值，里面存的值为空
例:
var q = null;
console.log('你好' + q); // 你好null
console.log(11 + q); // 11
console.log(true + q); // 1
转义符：
\n 换行
\ 代码中换行使用（在行尾添加）
\' 单引号
\" 双引号
\t tab缩进
\b 空格
字符串长度
通过字符串的 .length 属性