web标准
所谓的web标准指的是系统规范的的网页书写的要求，它是由W3C组织制定，在它里面要求网页的 结构 样式 行为 三者相分离。
结构：就是通过HTML标签搭建的网页的结构。
样式：就是通过CSS对当前的网页结构进行修饰和美化。
行为：通过JS让网页可以理解用户的一些操作，从而使用户与网页之间产生交互。
CSS:在国内被称之为级联样式表，层叠样式表，样式表，它的作用就是修饰当前网页中的HTML元素。
基本使用步骤：
<head>标签之内，<title>标签之下
<style>标签是HTML当中专门准备好的 用来存放CSS代码块的
type 类型里的text/css这句话的作用就是告诉浏览器将来在解析这里代码的时候按照CSS的语法来解析。style标签对之间的区域就可以用来书写CSS代码。
CSS使用核心思想：通过具体的CSS选择器找到我们想要操作的元素然后设置样式（写在style标签之中）
CSS设置的基本语法就是：
如：给p元素设置宽度为200px，高度为200px，背景设置颜色绿色
p{
width:200px;
height:200px;
background-color:green;
}
常见的CSS元素属性width定义宽度，单位px，height定义高度，background定义背景颜色
固定语法：选择器{CSS代码}，CSS样式分行写，每行结尾用；结束。
CSS选择器：
CSS中已经定义好的用来选中某些元素的固定语法，它的作用就是选中我们想要设置样式的元素。
CSS选择器分类：
简单选择器+复合选择器
简单选择器：
1.标签名选择器：通过具体的HTML标签名称来选择元素。（会将当前网页中所有叫该名字的标签都选中）
2.类名选择器：通过标签名来选择元素。
一个完整的网页需要很多标签组合在一起编写实现，因为HTML标签的种类有限，所以同名的一个标签有可能会在一个网页中出现多次。此时如果想要对这些同名的标签分别设置不同的样式。那么直接使用标签名选择器没有办法实现。这种情况下我们就可以使用类名选择器。
使用步骤：
定义HTML网页结构，然后在我们想要选中的元素身上设置class属性。
将我们想要一起选中的元素们身上设置相同的class属性值（类名）
此时我们只需要在style标签中按着固定的语法来调用我们的类名：.类名
3.id选择器：通过id名称选择元素。
如果我们只想从一堆元素中选中其中的某一个元素，那么就可以使用id选择器。类似于人的身份证号码一样。
id选择器的使用：
在我们想要选中的元素身上设置一个id属性；
给这个id属性设置一个值，称为id名；
在style当中通过固定的语法进行调用：#id名{}；
要求在一个网页当中不能出现同名的id值（虽然有效果但不能这么做）。
简单选择器总结：
标签名和类名选择器默认可以一次性选中多个元素，id名选择器一次只能选中一个元素。
一个标签身上可以既具有类名又具有id名，且这两个属性值是可以相同的。
允许一个标签的身上同时设置多个类名，要求多个类名之间用空格隔开。
关于id选择器要求一个页面当中同一个id名称只能出现一次。
id名与类名命名规则（以下规则同时适用于id名与类名）：
名称不能是纯数字，或者以数字开头（可以以数字结尾）；
名称不能是中文（虽然有效果但是不能使用）；
名称不能以特殊字符开头，或者包含特殊字符（_-字符例外）：~！@#￥%……&*()；
名称尽可能做到见名知意。
元素展示类型
在html当中定义了很多个元素，这些元素在网页上显示的时候会存在自己默认的状态，例如有些元素在默认情况下宽高属性不起作用，有些元素独占一行显示，我们称这种现象为元素展示类型，认为的将元素展示类型分为三种：块元素，行内元素，行内块元素。
1.块元素，当同时存在多个块元素时候，每个块元素都会独占一行显示，且默认情况下它的宽高属性可以起作用。
2.行内元素，当同时存在多个行内元素的时候，这些元素会显示在一行，如果一行放不下自动折行。默认情况下它的宽高属性不起作用。
3.行内块元素，当多个行内块元素同时存在时，这些元会显示在一行，默认情况下它的宽高属性起作用。
4.注：不需要死记那些是块，哪些是行内元素，哪些是行内块元素。
布局标签补充
1.标签<div>我是一个大盒子</div>（块元素）
是网页布局中经常使用的标签，从某种感觉上我们认为它是html当中体积最大的一个标签（在它里面可以放很多的其它标签）
2.标签<span></span>（行内元素）
是一个布局常用标签，他一般里面用来存放文字，我们认为这个标签非常的小。
3.段落标签里面不能包裹标题标签，浏览器不能正常解析。
元素展示类型的转换
在我们进行网页布局的过程中，往往会遇到一些特殊的模块，对于这种模块来说我们之前的一些常见标签在使用的时候显示“语义”有些不对应，所以我们可以使用相应的标签进行强制的类型转换，从而让它可以展示成设计稿上的样本。在CSS当中有一个display属性可以设置不同的值来完成类型的转换。
1.转换成块元素：display：block；
2.转换成行内块元素：display：inline-block
3.转换成行内元素：display：inline；
display：none（表示默认情况下不显示）。
简单选择器权重
权重：可以理解为不同类型的CSS选择器在对同一个元素进行样式设置的时候，出现的控制能力不同的现象。
对于简单选择器来说：id选择器>类名选择器>标签名选择器
1.在权重相同时，同一个元素后写的CSS样式会覆盖先写的CSS样式。（覆盖性）
2.CSS的定义存在继承的特点，子元素会继承父（祖先）元素的一些样式，但不是所有的元素都能继承，继承一般发生在块元素的身上。（继承性）
3.不同选择器对同一个元素的CSS控制能力存在着强弱（优先级）
复合选择器
在实际的网页制作过程中往往会出现很多结构层级嵌套很深的现象，而这种结构的模块又很多，大家使用的标签名又一样。所以此时就可以通过复合选择器，将这些简单选择器进行组合，从而让我们选择元素变得简单。
常见的复合选择器
1.后代选择器：这种选择器就是以某一种选择器为起点，将它为祖先然后不停的向下进行穿透查找，去选择它后面的后代元素。
语法：起点元素 后代元素 ...{设置样式}
注：1.后代选择器当中每个部分都可以采用任意的简单选择器代替。
2.不同部分之间要用空格隔开。
3. ...表示可以不停的向下查找
2.并列选择器
就是将多个选择器使用 逗号 进行连接，表示同时选中这些元素，然后设置相同的样式。其中每个部分的选择器都可以由任意类型的选择器构成。
选择器权重总结
1.简单选择器：id名>class名>element名
2.复合选择器：复合选择器由多个其他类型选择器组合而成，为了方便比较，认为的给每个简单选择器定义了一个数值，分别是：id（100） class（10） ele（1），这三个数值我们也称之为权重值，有了它们之后我们只需要将当前选择器中出现的权重值进行相加求和，最终结果就是该选择器的权重，数值越大权重越大。
3.切记权重比的就是不同选择器对同一个元素的控制力比较（区别继承的影响）
CSS文件存放位置
CSS代码可以被放在很多地方，习惯性的有三种写法：内嵌CSS，外链CSS，行内CSS。
1.内嵌CSS指的就是将CSS代码写在html网页中。
2.外链CSS指的就是将CSS代码写在外部的独立的CSS文件中。
3.行内CSS指的就是将CSS代码写在具体的html标签身上。
注：
01.依据浏览器渲染页面原理，我们选择将CSS代码写在HTML文件靠前的位置。
02.使用外链CSS写法的时候，外部独立的CSS文件当中不需要写style标签，同时还需要通过link标签将某个CSS文件引入到具体的html文件当中。（rel属性对不要省略）
03.对于这三种CSS文件存放位置来说，行内CSS的权重最高，但是外链与内嵌没有绝对的权重大小关系，它们的控制能力完全取决于它们各自使用的选择器权重。
04.如果想要直接将某一个样式的权限提至最高，我们只需要在该句CSS代码的最后设置为 ！important。
HTML5：H5就是这个新的语言标准
在HTML5中定义了一个叫audio的标签，可以直接引入一段声音资源到我们的网页当中。
1.默认情况下引入的声音资源是不会自动播放的
2.HTMl5中定义了一个autoplay属性来自动播放（现在的浏览器都不支持了）
但是可以这么用：
<audio src="music/yinyue.mp3" autoplay controls（显示出播放器控件） loop(设置循环播放)></audio>
不同的浏览器中显示出来的播放器控件不一样，且不同的浏览器中自动播放情况不一样。
3.目前来说没有哪种音频格式可以兼容所有的浏览器，因此我们在引入声音资源的时候就需要尽可能多的引入不同的格式，从而兼顾所有的浏览器。为了解决这个问题，H5中就定义了一个新的标签叫source。
<audio autoplay（用来设置自动播放） controls（显示出播放器控件） loop(设置循环播放)>
对不起，您的浏览器不支持该标签（降级的说明性文字：当浏览器不支持显示该行文字）
<source src="music/yinyue.mp3"/>
<source src="music/yinyue.ogg"/>
.......
</audio>
视频标签
video
视频标签和音频基本一样，默认不会自动播放，需要加autoplay controls（显示出播放器控件） loop(设置循环播放)。
CSS3.0
之前所说的都是CSS2.0，下面介绍一些CSS3.0
常见文字样式
1.行高：line-height，当我们将行高的大小设置成当前元素的高度时，可以实现单行文本在当前元素中垂直居中显示的效果。
2.水平对齐方式：text-align：left，center，right，分别表示设置文字在当前盒子当中水平对齐。
3.字体大小：font-size，单位是px，一般情况下浏览器会有一个最小的显示字体。
4.字体粗细：font-weight，可以设置关键字，或者数值（100-900），关键字有normal表示正常，还有bold表示加粗。
5.字体名称：font-family，一般常用的就是“微软雅黑”，“黑体”。
6.字体颜色：color，可以设置字体颜色单词，还可以是十六进制数字。
文字阴影
font是一个复合属性写法，他的后面可以放置很多个单独的文字样式，中间用空格隔开。
font：文字粗细 大小/行高 字体名称；
font：bold(加粗) 30px/200px（高/宽） '微软雅黑'；
CSS3中的文字阴影
text-shadow：x y r color;
text-shadow:0px 0px 0px red，0px 0px 0px red(可以再加一层阴影)，......;
注：
1.x表示阴影在水平方向的偏移量，可以设置负值，正负不表示大小，只表示方向。水平向右为正，向左为负，单位是px
2.y表示阴影在垂直方向偏移量，垂直向上为负，向下为正
3.r表示阴影的模糊程度，数值越大越模糊，单位为px
4.color 表示阴影的颜色
5.C3允许一段文字有多层阴影，多层之间用逗号隔开，每一层内不同的参数之间用空格隔开。
凹凸文字：
过渡属性
一个元素本身默认有一种样式的显示，然后当用户执行一些操作的时候（例如鼠标向上）它的样式会变成另外一种显示，而过渡的作用就是让这个元素的样式在默认和最终展示之间有一个中间变化过程。
:hover{}就是一个选择器
p:hover{}选中的就是p元素被鼠标移上时的状态
transition：all 1s linear 0s；
注：
1.第一个参数的作用是设置元素身上的哪些属性产生过渡，一般用all表示所有的属性都过渡。
2.第二个参数的作用是设置过渡需要时长，单位是s，不要省略
3.第三个参数的作用是设置过度的动画形式，linear表示匀速
4.第四个参数的作用是设置当前过渡等待多久之后才会执行（延时），即使为0，单位也不能省。
5.:hover表示选择某个元素被鼠标移上时的状态。
6.transition既可以添加在元素的默认状态，也可以添加在鼠标移上状态，区别就是第二种做法在鼠标离开时不会再有过度变化。
上面为默认状态，下面为过渡状态。
扫一扫
9175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
