基础标签:

h1–h6 : 1最大6最小， 独占一行
p ： 独占一行
img：alt是图片不存在时显示的内容
hr: 独占一行
br：换行， 可以连续换行

a: 跳转页面，target中_self和 _blank;
strong为强调标签
可以统一设置跳转方式
空链接：javsscript; 和 # ，其中#要回到顶部
指定id即可跳转锚点，当前界面指定位置前面加#，其他页面指定位置，在链接后面+#和id即可，a标签没有过度动画
< id=“666” href=“javascript;” >666</>
< href="#666">跳转到666</>

列表标签:

无序列表快捷写法： ul>lin>hx+uln+li*n
##有序列表一样的##
定义列表格式:

<.dl>
<.dt>
<.dd>
<.dt>
<.dd>
其中dt为definition title， dd为definition description

表格标签

格式：

需要显示的内容

tr为行，td为列数；table中属性 border为表格线粗细默认为0可以改为1

宽度和高度：table和td使用

水平对齐:teble和tr和td

垂直对齐：tr和td

内外边距:table

注意：1.表格标签有一个边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框。 2.表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现。水平对齐：align 垂直对齐：valign

tr和td中也有align，同时设置时td优先，
table中有属性cellspacing控制外边距
cellpadding控制内边距

细线表格制作方式table属性bgcolor黑色
tr中bgcolor白色,cellspacing为1px就ok， caption为表格标题标签, **th为每一列标题标签，自动加粗居中**
td中设置colspan可以水平合并，
rowspan是垂直合并，
合并只能向后向下合并

表单标签

表单项的分类： input 标签
type=“text”:文本输入框
type=“password”：密码输入框
type=“radio”:单选按钮
type=“checkbox”:复选框
type=“date”(h5提供的日期组件）
type=“tel”(h5提供的组件）
type=“file”:上传文件
type=“button”:普通按钮，必须指定value属性
type=“submit”:提交
type=“Email”:邮件
type=“url”:域名
type=“number”:电话
type=“reset”:重置按钮
type=”hidden":隐藏域
select标签下拉菜单
selected=selected可以设置默认
option:下拉菜单（应用场景：省市联动）

<.slect> <.optgroup label="名字">
<.option value="">
<.option value="">
<./optgroup> <./slect>

textarea:文本域（应用场景：个人自我描述cols和rows可设定宽度）
value为默认赋值，name赋值全部一样就可以互斥效果，单选和多选默认选中可以设置checked=checked，name里面的数据会提交到服务器网址，在action中加链接
label可以绑定，将文字用label包裹，给输入框加一个id，在label中用for属性绑定指定id就可以,
fieldset标签可以是边框线，legend是边框线标题

多媒体标签

video标签用于播放，属性
属性值描述 autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。

controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。

height pixels 设置视频播放器的高度。

loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。

muted muted 规定视频的音频输出应该被静音。

poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。

preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 “autoplay”，则忽略该属性。

src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

<.audio src=""><./audio>音频
<.audio>
<.source src="" type="">
<./audio>

.
<.summary>详情信息
详情摘要
<./details>
marquee是跑马灯效果
属性：方向direction,速度scroll amount loop默认-1无限滚动，可以设置次数，
behaviorf设置滚动类型，slide和alternate

快捷键技巧：

ctrl+f搜素关键词 ctrl+d复制一行 ctrl+x删除一行 ****选中文字ctrl+alt+t快速加标签 ctrl+shift+↑/↓快速移动当前行，ctrl±/+合并/打开代码。ctrl+shift++，快速打开多个合并代码
(and)nbsp;是空格< >©

CSS

，在css之前首先要清空默认边距

代码如下：/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:’’}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

文字属性

：
文字样式font-style: normal;
文字粗细font-weight: lighter;
文字大小font-size: 20px;
文字字体font-family: 字体1，字体2; 注意中文字体包括英文，英文字体不包括，阴文优先在前面
简化写法 font:normal lighter 20px 微软雅黑; syle和weight可以省略交换，size和family不可以省略交换，必须放在最后面。

文本装饰 text-decoration取值underline ，line-through，over-line，none，none可以去掉超链接下划线， 缩写为td
文本居中text-align，左中右，缩写为ta
文本缩进:text-indent:2em;
文字颜色rgb(255,255,255);
rgba(255,255,255,1);
id选择器格式
#id{
属性
}
不可以重复

类选择器格式
.class{

}

类名可以重复，一个标签多个类名，如class"类名1 类名2"

后代选择器
类名1 类名2 …{
找类名1下面所有的类名2
}
子元素选择器
类名1>类名2>…{
查找直接子元素
}
交集选择器
类名1类名2{
}
并集选择器
类名1，类名2{
}
伪元素选择器：给标签前或者后添加内容，格式如下：
标签::before{
content：“内容”；
display就可以设置高宽：
}
标签::after{
content：“内容”；
display就可以设置高宽：
}

序选择器
:first-child,选出同级别第一个，不区分类型
:last-child,选出同级别最后一个，不区分类型
:first-of-type 选出同级别同类型第一个
:last-of-type 选出同级别同类型最后一个
:nth-child（n）同级别中第n个，不区分类型
:nth-of-type(n)同级别同类型第n个
:nth-last-of-type(n)同级别同类型倒数第二
属性选择器
p[id]找到p中有id的标签
p[class=cc]找打p中class=cc的标签
属性取值以什么开头[ attribute^=value]
属性取值以什么结尾[ attribute&=value]
属性包含某个特定值[ attribute*=value]
通配符选择器，给所有标签设置，遍历所有标签，效率低
格式 *{

}
css继承性，
css层叠性，相同选择器最后一个有效
间接选中离哪个近就是那个属性
id>类>标签>通配符>继承>浏览器
！ important只能用于直接选中的标签提升优先级到最高
权重问题看id 类标签，如果一样多，最后的优先，直接选中才有效
span用来选中个别词语的标签，不独占一行，是文本级别标签
div独占一行，是容器级别标签
块级元素默认和body一样宽，可以设置宽高。
行内默认和内容一样宽，不可以设置宽高。
为了可以不独占一行又可以设置宽高，行内块级，如img
行内，块级，

行内块级转化：设置display，block inline inline-block

背景图片和精灵图
背景图片属性： background-image，可以来源于本地和网络，图片小了会自动平铺，去百度搜图片复制图片地址就可以
背景属性 background-repeat，repeat-x repeat-y
repeat no-repeat，默认是repeat，可以用来做页面背景和导航条
background-position背景定位用的，水平和垂直，背景图片在背景颜色上面，
定位图片重要内容可以用background-position：center 0;
背景属性缩写格式
background 背景颜色背景图片平铺方式关联方式定位方式
快捷方式：bg+；
背景会随着滚动条滚动而消失，关联方式属性可以设置改变
格式为background-attachment，scroll为滚动，fixed为不滚动
快捷键：标签.类名可以快速生成类名

盒模型

边框连写格式一：boder：宽度样式颜色； boder—top，boder-left等单独设置；快捷方式bd+；可以查css123里面有样式设置 bt+ bl+ br+ bb+;

连写格式二:boder-with: 上右下左；
boder-style：上右下左；
boder-color：上右下左；
省略规律，省略时对边颜色一样
none代表不要该边框

内边距：非连写 padding-top padding-left padding-top padding-bottom，设置内边距边框会变化
连写方式 padding：上右下左；省略得对应边一样，内边距也有背景颜色

外边距: 非连写 margin-top margin-left margin-top margin-bottom，连写方式 margin：上右下左；省略后对应边一样，外边距没有颜色

注意：默认所有标签与body左上角不对齐，定位会出问题，要设置如*{margin：0；padding：0}

外边距距离合并现象：水平方向外边距就直接相加；垂直方向大的会覆盖小的

css盒子模型

html所有标签都可以设置边框，内边距，外边距，宽，高
内容宽高=内容宽高；
元素宽高=边框+内边距+内容宽高；
元素空间宽高：外边距+边框+内边距+内容宽高；

盒子的box-sizing属性

box-sizing:boder-box；设置之后可以保证改变padding或者boder后，盒子大小不变,原理就是缩小内容宽度
嵌套关系中让小盒子在大盒子中居中方法有2个：①设置大盒子的padding，但是大盒子大小会变化，要添加box-sizing：boder-box；②设置小盒子的margin，但是顶部外边距时大盒子也会被影响一起动，要添加boder属性给予限制；一般都使用padding，margin不用于嵌套.

注意:

嵌套关系中，可以用margin ：0 auto；设置盒子自动水平居中，还有margin ：0 auto也可让盒子自动居中，可以理解为body本来就是一个大盒子

行高设置为line-height为一行文字高度，盒子搞设置height；文字默认在行高水平居中，行高==盒子高，文字在盒子中就居中了，多行文字用padding居中，记得加box-sizing=boder-box
还原字体和字号：下载个fireworks，距离以左边内边距为准，顶部内边距是边框到行高顶部的距离。！！！！好看的背景色#efefef
list-style可以设置li中的样式

浮动

浮动只有水平排版，是半脱离标准流方式，没有居中对齐，只能左对齐右对齐，注意：margin 0 auto没有效果。浮动流不区分行内，块级，行内块级元素，都可以设置宽高，都水平排版。
浮动元素会脱离标准流，标准流会占下浮动原有位置，浮动会盖在标准流上面

浮动元素排列规则:

相同方向：先浮动在前面，后浮动在垢面；
不同方向：左浮动找左浮动，右浮动找右浮动；

重点;浮动元素浮动之后的位置，由浮动前在标准流中的元素确定

浮动中的靠贴现象，浮动元素超过父元素宽度，会自动调整位置，知道贴到body最左边为止，浮动不会占用浮动的空间会给浮动让位置，常见于物品人物介绍

清除浮动

浮动元素不能撑起父元素高度。

清除浮动方式：

①：给父元素设置一个高度，不推荐使用

②：设置clear属性：right表示右边换行，left左边换行，both包含left和right，

但是margin会失效，不推荐

③外墙法：在两个盒子中间加上一个块级元素，设置一个clear :both属性，设置盒子高度就可以；内墙法：在第一个盒子末尾添加块级元素设置claer both，空盒子多不推荐；

④内墙法：在第一个盒子末尾添加块级元素设置claer both，不推荐；

⑤伪元素选择器+隔墙法：推荐使用格式：标签::after{
content：" ";
display:block;
height:0;
visibility:hidden:
clear:both;
}但是IE6不兼容，还要加上标签{*zoom:1;}就可以；
默认内容可以超出盒子，可以添加属性overflow：hidden：就可以屏蔽超出部分
⑥:前一个盒子设置overflow：hidden；后面的浮动就不会跟在后面而是换行但是IE6不兼容，还要加上标签{*zoom:1;}就可以；
overflow：hidden：还可用来盒子嵌套时给大盒子设置，效果和box-sizing=boder-box一样，只是没了边框， 顶部对齐直接浮动

定位

相对定位：

不会脱离标准流，

区分块级行内等元素,相对在标准流原来位置移动，margin ，padding 会加给原来空间,

不是相对定位后的原来位置要占空间，同一个方向只能有一个属性，top（bottom）,left(right)
常见应用场景有：对元素微调和配合绝对定位，注册界面输入框和二维码不水平对齐，除了浮动还可以相对定位，设置position：relative ，top：xx left：xx

绝对定位:

设置position：absolute top（bottom）:xx,left(right):xx，

绝对定位会脱离标准流,会浮动，不区分行内块级，同一个方向只能有一个属性，

定位规律：
1：无论有没有祖先元素，默认以body为参考点，

不是整个网页

2.绝对定位有祖先元素，不一定是父元素，并且祖先元素也是定位流（可以绝对相对固定），那么就以祖先元素为参考点
3.绝对定位有祖先元素，多个祖先原始都有定位流，他会以离他最近的作为参考点
绝对定位注意点：绝对定位会忽略父元素padding属性

子绝父相定位

p154：绝对定位永远水平居中:margin 0 auto 在绝对定位中没有用，奇淫技巧：

先设置绝对定位元素百分比：left:%50，再设置绝对定位元素margin-left：-元素宽度一般

固定定位

固定定位脱离标准流，不会占空间，不区分行内块级position:fixed元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。主要用于导航条和广告

定位流z-index属性用于控制定位流覆盖关系,默认每个元素都z-index：0；后定位会盖住前定位元素，设置z-index，谁的大谁在上面
注意点：从父现象：两个元素父元素都没有z-index，那么谁的z-index大谁在上面，如果两个父元素都有z-index属性，子元素得z-index会被父元素覆盖，父元素z-index谁大子元素就谁在上面

过渡模块和a标签伪类选择器

格式：a:link,修改从未被访问的链接的样式，a:visited:修改被访问后的样式，a:active:修改长按连接的样式，a:hover:修改鼠标悬停在链接的状态，四个可以单独出现，

一起出现的时候有严格顺序要求，遵循爱恨原则。 LoVe HAte，

transition-property:属性，规定应用过渡的 CSS 属性的名称
transition-duration,定义过渡效果花费的时间。默认是 0
transition-delay,规定过渡效果何时开始。默认是 0。transition-timing-function,控制过渡元素的运动速度
过渡三要素:有属性变化，告诉系统哪个元素过渡，过渡时长。

注意，多个属性过渡时，用逗号隔

过渡连写格式:transition:属性1 时长1 速度1 延迟1，属性2 时长3 速度3 延迟4，…………；速度和延迟可有可无。多个属性运动时间和过渡时间和运动速度一样，直接写成 transition：all 时间；

2D转换模块

注意，默认水平右垂直下位正方向，2D转换会修改坐标系，比如旋转，
平移：transform: translate(水平,垂直);
旋转：transform: rotate(30deg);通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
伸缩：transform: scale(2,4);通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
默认旋转是以中心为参考，transform-origin 属性可以改变参考点，transform-origin:(0,0)就会以图形左上角为参考，取值可以为像素，百分比，关键字如center，left等等，默认所有元素围绕Z轴旋转，Z方向正对屏幕向外，想围绕哪个轴旋转，就设置rotateX()，rotateY()，rotateZ()，

透视属性，perspective：像素，像素越大，距离越远，属性必须添加到呈现近大远小的父元素里面

盒子阴影

box-shadow：水平偏移垂直偏移模糊度阴影扩展阴影颜色内外阴影，注意盒子默认设置外阴影，阴影颜色由内容颜色决定，快速添加阴影只需要设置

水平偏移垂直偏移模糊度

文字阴影，box-shadow：水平偏移垂直偏移颜色，快速写法也是只要前3个参数， opacity为透明属性，取值0-1

动画模块

三要素
1.告诉执行那个动画:animation-name
2.告诉创建动画的名称：@keyframes 动画名称 {

          from   {}to{}

}

3.告诉动画持续时间animation-duration
animation-delay 规定动画何时开始。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 “ease”。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。往返是alternative
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。暂停是paused;可以和过渡hover一起使用

第二种创建动画方法

用百分比

告诉执行那个动画:animation-name
2.告诉创建动画的名称：@keyframes 动画名称 {

          0% {}25%{}75%  {}可以无线百分比

}

animation-fill-mode 指定动画等待状态和结束状态的样式，none不做改变，backwards显示等待状态第一帧样式，forwards结束保持最后一帧样式，both就是等待和结束都实现

动画简写，animation：名称时长速度延迟执行次数往返动画，连写只要名称和时长

@keyframes和过渡一样写在标签外面,动画中固定不变的属性先写

3D转换

想看到某个元素为3D效果，只需要给它的父元素设置transform-style:preserve-3d;就可以
背景相关:
background-size auto auto 等比拉伸到浏览器宽度，自其他己看css比较简单 background-origin规定背景图片的定位区域。padding-box 背景图像相对于内边距框来定位。border-box 背景图像相对于边框盒来定位。content-box 背景图像相对于内容框来定位。
background-clip,border-box 背景被裁剪到边框盒。padding-box 背景被裁剪到内边距框,content-box 背景被裁剪到内容框。. background-size 属性可以添加多个背景，

先添加的在上面

WEB菜鸟笔记(一)相关推荐

菜鸟笔记(一) - Java常见的乱码问题
2019独角兽企业重金招聘Python工程师标准>>> 本文将介绍一种Java Web/Api 开发常见的乱码问题. 前提摘要:在学习Java Web的过程中,乱码问题是经常遇到的, ...
php入门公开课,【PHP公开课|送你一篇有关laravel入门教程的php菜鸟笔记】- 环球网校...
[摘要]PHP作为一种超文本预处理器,已经成为了我们常用的网站编程语言,并且结合了C语言,Java等我们常见的编程语言,所以,有很多web开发领域的新人都看中了他的使用广泛性,有很多人都想了解php的 ...
java web学习笔记（持续更新）
java web学习笔记一.Java Web简介二.认识Servlet 1.什么是Servlet? 2.请求路径 3.tomcat 4.Servlet的使用三.Servlet简单应用 1.创建S ...
2019年Java Web学习笔记目录
Java Web学习笔记目录 1.Java Web学习笔记01:动态网站初体验 2.Java Web学习笔记02:在Intellij里创建Web项目 3.Java Web学习笔记03:JSP元素 4. ...
构建高性能WEB站点笔记二
构建高性能WEB站点笔记因为是跳着看的,后面看到有提到啥epoll模型,那就补充下前面的知识. 第三章服务器并发处理能力 3.2 CPU并发计算进程好处:cpu 时间的轮流使用.对CPU计算和 ...
构建高性能WEB站点笔记三
构建高性能WEB站点笔记三第10章分布式缓存 10.1数据库的前端缓存区文件系统内核缓冲区,位于物理内存的内核地址空间,除了使用O_DIRECT标记打开的文件以外,所有对磁盘文件的读写操作都要经 ...
web学习笔记-html-html新增
CCS学习系列笔记 web学习笔记–css(1) web学习笔记–css(2) web学习笔记–css(3) web学习笔记-html-html新增 1.html基本发展 2.h5新增的功能 3.新增 ...
Web前端笔记（21-45）
Web前端笔记 (21-45) 21.嵌套列表 1.概念 2.有(无)序列表嵌套 3.定义列表嵌套 22.表格标签 1.种类 2.举例未加语义化标签添加语义化标签 23.表格属性 1.常见表格属 ...
zigbee菜鸟笔记（一）zigbee的基础知识
一.什么是zigbee 有问题发送邮件至468078841@qq.com ZigBee,也称紫蜂,是一种低速短距离传输的无线网上协议,底层是采用IEEE 802.15.4标准规范的媒体访问层与物理层. ...

WEB菜鸟笔记(一)