HTML入门使用
执行代码：执行代码前 CRT+S保存后，在点右键打开浏览器；
Ps界面大小：720200072
加载顺序
HTML加载
- 1.解析HTML结构
- 2.加载外部的脚本和样式文件
- 3.解析并执行脚本代码
- 4.执行$(function(){})内对应代码
- 5.加载图片等二进制资源
- 6.页面加载完毕，执行window.onload
浏览器加载
- IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
- 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。
- 如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
- 样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。
- JS、CSS中如有重定义，后定义函数将覆盖前定义函数。
选择器
组合选择器
- 后代选择器div p——div后内所有p元素
- 子元素选择器div>p——选取div后边的子p
- 相邻兄弟选择器div+p——div后的第一个p
- 后续兄弟选择器div~p——div后的所有p
种类：
- 1.标签选择器(如：body,div,p,ul,li)
- 2.类选择器(如：class=“head”,class=“head_logo”)
- 3.ID选择器(如：id=“name”,id=“name_txt”)
- 4.全局选择器(如：*号)
- 5.组合选择器(如：.head .head_logo,注意两选择器用空格键分开)
- 6.后代选择器 (如：#head .nav ul li 从父集到子孙集的选择器)
- 7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示
- 8.继承选择器(如：div p,注意两选择器用空格键分开)
- 9.伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)
- 10.字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)
- 11.子选择器 (如：div>p ,带大于号>)
- 12.CSS 相邻兄弟选择器器 (如：h1+p,带加号+)
优先级
顺序：
- 通用选择器（*）
- 元素(类型)选择器
- 类选择器
- 属性选择器
- 伪类
- ID 选择器
- 内联样式
- !importent改变了样式本来的级联规则
优先级算法：
- 行内选择符、ID选择符、类别选择符、元素选择符。
- （优先级的算法：
- 每个规则对应一个初始"四位数"：0、0、0、0
- 若是 行内选择符，则加1、0、0、0
- 若是 ID选择符，则加0、1、0、0
- 若是 类选择符/属性选择符/伪类选择符，则分别加0、0、1、0
- 若是 元素选择符/伪元素选择符，则分别加0、0、0、1
- 算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。）
- 需注意的：
-
- !important的优先级是最高的，但出现冲突时则需比较”四位数“;
- 优先级相同时，则采用就近原则，选择最后出现的样式;
- 继承得来的属性，其优先级最低;
- !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
表
表格
table表格；tr表头；tr行；td列
列表
- 有序列表dl;dt;dd
- 无序列表ol;ul;li
表单input
- 文本域text
- 密码password
- 单选框radio
- 复选框CheckBox
- 提交框submit
CSS入门
单位
px,em ,%（相对单位）
font-size:25不加单位的数字毫无意思
px像素，相对单位。和屏幕的分辨率有关。
em：一个字体高（1倍字体高）,2em(当前默认字体的2倍)
%,百分比。相对单位。相对于当前默认值的百分比。
浏览器的默认字体大小为16px.
（PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。
EM就是根据基准来缩放字体的大小。EM实质是一个相对值，而非具体的数值。
EM是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。）
字符实体
颜色
表示方法
- 最简单、最古老的颜色类型在CSS颜色的关键词，如red blue等。
- 十六进制值#0000。
- RGB: rgb(255,0,0,0.5)最后的是透明度
- HSL:hsl( )函数接受色相、饱和度以及明度值
样式
<link rel="stylesheet" type="text/css" href="mystyle.css">//外部样式
<style>//内部样式
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
<p style="color:sienna;margin-left:20px">这是一个段落。</p>//内联样式
盒子模型
- Margin(外边距) - margin：上右下左
- Border(边框) - border:5px solid red;
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
浮动
clear:清楚浮动（left/right/both/none/inherit）
float(left/right/none/inherit)
清除浮动的方法：
- 父级div定义伪类：after和zoom。
- 在结尾处添加空div标签clear：both。
- 父级div定义height。
- 父级div定义overflow：hidden或auto。
- 父级div也一起浮动。
- 父级div定义display：table。
块级与行级
实例
- 级：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
- 行级：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
- 可变元素(根据上下文关系确定该元素是块元素还是内联元素)：applet ,button ,del ,iframe , ins ,map ,object , script
区别
-
区别一：
块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
-
区别二：
块级：块级元素可以设置宽高
行内：行内元素不可以设置宽高
-
区别三：
块级：块级元素可以设置margin，padding
行内：行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。
-
区别四：
块级：display:block;
行内：display:inline;
可以通过修改display属性来切换块级元素和行内元素
转换：
display：block；//转换为块级
display:inline;//转换为行级
display：inline-block；//内联块元素表现为同行显示，并且可以修改属性
不可见
- visibility:hidden;元素占空间
- display:none;元素不占空间
定位
position属性
- relative相对属性、absolute绝对父用relative，子用absolute
动画
-
animation(创建动画):名字 动画时间 样式 循环次数 播放方向 开始时间 时间外属性
-
animation-name:关键帧动画名字
-
animation-duration:播放动画的时间s\ms
-
animation-timing-function:动画播放的方式
-
animation-delay：动画开始时间
-
animation-iteration-count:循环次数：infinite(无限)|number
-
animation-direction:播放方向：normal(默认，向前播放)|alternate(偶数向前播放，奇数反向播放)
-
animation-play-state:状态：running(播放)|paused(暂停)
-
@keyframes（关键帧）：构建动画效果
from to0% 100%
动画过渡
transition:过度属性 时间 动画函数 开始时间；
文件目录
另外我们使用“…/”来表示上一级目录，“…/…/”表示上上级的目录，以此类推。
扫一扫
199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
