html&css小白笔记
H5的文档声明，声明当前网页是按照html5标准编写的，编写网页时一定要写在最上面，如果不写文档声明，则会导致有些浏览器会进入怪异模式，浏览器解析页面会导致页面无法正常显示。
meta标签用来设置网页的一些元数据，比如玩也字符集，关键字，简介。meta是一个自结束标签，编写一个自结束标签时可以在开始标签中添加一个 /
img标签引入外部图片
src:设置一个外部图片的路径
alt:图片不能显示时，对图片的描述，搜索引擎可以通过alt属性来识别不同的图片，如果不写alt属性，则搜索引擎不会对img中图片进行收录。
图片格式
JPEG(JPE)
-- JPEG图片支持颜色比较多，图片可以压缩，但是不支持透明，一般用来保存颜色丰富的图片
GIF
-- GIF支持颜色少，只支持简单透明，支持动态图，图片颜色单一或动图时使用
PNG
-- PNG支持颜色多，并且支持复杂透明，可以用来显示颜色复杂的透明图片
语法规范
HTML不区分大小写。
HTML标签必须结构完整，要么成对出现，要么自结束标签。
HTML标签可以嵌套，但是不能交叉嵌套。
HTML标签中的属性必须有值，且值必须加引号（单双均可）。
浏览器尽最大的努力正确的解析页面,你所有的不符合语法规范的内容,浏览器都会为你自动修正,但是有些情况会修正错误。
内联框架
使用内联框架可以引入一个外部页面
使用iframe来创建一个内联框架
属性：
src：指向一个外部页面的路径，可以使用相对路径
name：为内联框架指定一个name属性
在现实开发中不推荐使用内联框架,因为内联框架中的内容不会被搜索引擎所检索
超链接
使用超链接可以让我们从一个页面跳转到另一个页面
使用a标签来创建一个超链接
属性：
href:指向链接跳转的目标地址，可以写一个相对路径也可以写一个完整的地址。
例： 我是一个超链接
target:可以用来指定链接打开的位置
可选值:
_self，表示在当前窗口打开（默认值）
_blank，在新的窗口打开链接
可以设置一个内联框架的name值，链接将会在指定的内联框架中打开。
跳转到id为"hello"所在位置
和
作用：这两个标签都表示一个强调的内容
em主要表示语气上的强调, em在浏览器中默认使用斜体显示
strong表示强调的内容,比em更强烈,默认使用粗体显示
和
作用：i斜体 b加粗
h5规范中规定,对于不需要着重的内容而是单纯的加粗或者是斜体,就可以使用b和i标签.
作用：smal1标签中的内容会比他的父元素中的文字要小一些，在h5中使用small标签来表示一些细则一类的内容
比如:合同中的小字,网站的版权声明都可以放到small
作用：网页中所有的加书名号的内容都可以使用cite标签,表示参考的内容
比如:书名 歌名 话剧名 电影名。。
q标签表示一个短的引用(行内引用)q标签引用的内容,浏览器会默认加上引号号
blockquote标签表示一个长引用(块级引用)
和
使用sup标签来设置一个上标,使用sub标签来设置一个下标
和
使用del标签来表示一个删除的内容del标签中的内容,会自动添加删除线
ins表示一个插入的内容ins中的的内容,会自动添加下划线
和
需要页面中直接编写一些代码pre是一个预格式标签,会将代码中的格式保存,不会忽略多少个空格
code专门用来表示代码我们—般结合使用pre和code来表示一段代码
CSS基础
注释/内容/
可以将CSS样式编写到元素的style属性当中。
将样式直接编写到style属性中,这种样式我们称为内联样式，内联样式只对当前的元素中的内容起作用,内联样式不方便复用。
内联样式属于结构与表现耦合，不方便后期维护，不推荐。
例：
hello
也可以将css样式编写到head中的style标签里将样式表编写的style标签中,然后通过css选择器选中指定元素然后可以同时为这些元素一起设置样式,这样可以使样式进一步的复用将样式表编写到style标签中,也可以使表现和结构进一步分离它也是我们推荐的使用方式
例： p{ color:red; font-size:40px; }
还可以将样式表编写到外部的css文件中,然后通过link标签来将外部的css文件引入到当前页面中,这样外部文件中的css样式表将会应用到当前页面中.
将css样式统一编写到外部的样式表中,完全使结构和表现分离,可以是样式表可以在不同的页面中使用,最大限度的使样式可以进行复用,将样式统一写在样式表中,然后通过link标签引入,可以利用浏览器的缓存加快用户访问的速度提高了用户体验,所以在开发中我们最推荐使用的方式就是外部的css文件
例：
先创建.css文件，然后写入样式表
p{
color:red;
font-size:40px;
}
然后在使用
CSS语法
选择器:
-通过选择器可以选中页面中指定的元素,并且将声明块中的样式应用到选择器对应的元素上。
声明块:
-声明块紧跟在选择器的后边,使用一对{}括起来。
-声明块中实际上就是一组一组的名值对结构,这一组一组的名值对我们称为声明。
-在一个声明块中可以写多个声明,多个声明之间使用;隔开,声明的样式名和样式值之间使用:来连接
块元素和内联元素
所谓块元素就是会独占一行的元素，div就是一个块元素。
例：
div这个标签没有任何语义，就是一个纯粹的块元素，并且不会为他里面的元素设置任何的默认样式，主要用来页面布局。
span是一个内联元素（行内元素）
所谓行内元素，指的是只占自身大小的元素，不会占用一行。
常见的内联元素：a img iframe span
span没有任何语义，span标签专门用来选中文字，然后为文字设置样式。
a元素可以包含任意元素，除了它本身。
p元素不可以包含任何块元素。
常用选择器
元素选择器
作用:通过元素选择器可以选择页面中所有指定元素
语法：标签名 {}
id选择器
作用：通过元素的id属性值选中唯一的一个元素
语法：#id属性值 {}
类选择器
作用：通过元素的class属性值选中一组元素
语法：.class属性值 {}
可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开。
例：
则它既属于p2也属于hello
选择器分组(并集选择器)
作用：通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1,选择器2,选择器N{}
例：#p1,.p2,h1{
background-color:yellow;
}
复合选择器（交集选择器）
作用：可以选中同时满足多个选择器的元素
语法：选择器1选择器2选择器N{}
通配选择器
选择页面中所有元素
语法：*{}
后代元素选择器
作用：选中指定元素的指定后代元素
语法：祖先元素 后代元素{} <！--空格隔开-->
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素 {}
元素之间的关系
父元素:直接包含子元素的元素
子元素:直接被父元素包含的元素
祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素
后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素
兄弟元素:拥有相同父元素的元素叫做兄弟元素
伪类
伪类专门用来表示元素的一种的特殊的状态,,比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类
如：
:link 表式普通链接（没访问的链接）
例：为没访问过的链接设置一个颜色为绿色
a:link{
color:green;
}
:visited 表示访问过的链接(由于涉及到用户的隐私问题,所以使用visited伪类只能设置字体的颜色)
:hover 表示鼠标移入的状态 :active 表示的是超链接被点击时的状态
:hover和:active也可以为其他元素设置
:focus 获取焦点状态
例：input:focus{
background-color:yellow;
}
::selection 表示选中内容的状态 (注意:这个伪类在火狐中需要采用另一种方式编写::-moz-selection)
伪元素
使用伪元素来表示元素中的一些特殊位置
如：
:first-letter 第一个字符
:first-line 第一行
:before 表示元素最前面的部分
:after 表示元素最后面的部分
（一般before都需要结合content这个样式一起使用,通过content可以向before或after的位置添加一些内容）
例：
为p中第一个字符来设置一个特殊的样式
p:first-letter{
color:red;
font-size:20px;
}
属性选择器
title属性
这个属性可以给任何标签指定,当鼠标移入到元素上时,元素中的title属性的值将会作为提示文字显示
属性选择器
作用：可以根据元素中的属性或属性值来选取指定元素
语法
[属性名] 选取含有指定属性的元素
[属性名="属性值"] 选取含有指定属性值的元
[属性名^="属性值"] 选取属性值以指定内容开头的元素
[属性名$="属性值"] 选取属性值以指定内容结尾的元素
[属性名*="属性值"] 选取属性值以包含指定内容的元素
子元素选择器
:first-child 可以选中第一个子元素
:last-child 可以选中最后一个子元素
:nth-child 可以选中任意位置的子元素
·该选择器后面可以指定一个参数，指定要选中第几个子元素
even -表示偶数位置的子元素
odd -表示奇数位置的子元素
:first-of-type
:last-of-type
:nth-of-type
·和:first-child类似，只不过child，是在所有的子元素中排列。而type，是在当前类型的子元素中排列。
兄弟元素选择器
后一个兄弟选择器
作用：可以选中一个元素后紧挨着的指定的兄弟元素
语法：前一个+后一个
选中后边所有兄弟元素
语法：前一个~后边所有
否定伪类
作用：可以从已选中的元素中剔除某些元素
语法：
:not(选择器)
例：
为所有的p元素设置背景颜色为黄色，除了class值为hello的
p:not(.hello){
background-color:yellow;
}
样式的继承
像儿子可以继承父亲的遗产一样,在CSS中,祖先元素上的样式,也会被他的后代元素所继承,利用继承,可以将一些基本的样式设置给祖先元素,这样所有的后代元素将会自动继承这些样式。但是并不是所有的样式都会被子元素所继承，比如：背景相关的样式都不会被继承。
选择器的优先级
当使用不同的选择器,选中同一个一元素时并且设置相同的样式时,这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)决定优先级高的优先显示。
优先级规则：
内联样式, 优先级1000
id选择器, 优先级100
类和伪类, 优先级10
元素选择器,优先级1
通配* , 优先级0
继承的样式没有优先级
当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后在比较, ,但是注意,选择器优先级计算不会超过他的最大的数量级,如果选择器的优先级一样,则使用靠后的样式。
并集选择器的优先级是单独计算的
可以在样式的最后,添加一个!important,则此时该样式将会获得一个最高的优先级,将会优先于所有的样式显示甚至超过内联样式,但是在开发中尽量避免使用!important
例：
.p1{
color:yellow;
background-color:greenyellow !impotant;
}
列表
列表就相当于去超市购物时的那个购物清单,在HTML也可以创建列表,在网页中一共有三种列表:
1.无序列表
2.有序列表
3.定义列表
无序列表
使用ul标签来创建一个无序列表
使用li在ul中创建一个个的列表项
通过type属性可以修改无序列表的项目符号
可选值:
disc,默认值,实心的圆点
square,实心的方块
circle,空心的圆
注意:默认的项目符号我们一般都不使用! !如果需要设置项目符号,则可以采用为1i设置背景图片的方式来设置，ul和li都是块元素
有序列表
有序列表和无序列表类似,只不过它使用ol来代替ul，有序列表使用有序的序号作为项目符号，ol也是块元素
type属性,可以指定序号的类型
可选值:
1,默认值,使用阿拉伯数字
a/A采用小写或大写字母作为序号
i/1采用小写或大写的罗马数字作为序号
定义列表
定义列表用来对一些词汇或内容进行定义使用dl来创建一个定义列表dl中有两个子标签
dt:被定义的内容
dd:对定义内容的描述
单位
颜色单位(RGB)
在CSS可以直接使用颜色的单词来表示不同的颜色，也可以使用RGB值来表示不同的颜色
所谓的RGB值指的是通过Red Green Blue三元色,过这三种颜色的不 同的浓度,来表示出不同的颜色
例：
rgb(红色浓度,绿色浓度,蓝色浓度);
颜色的浓度需要0-255之间的值，255最大，0为没有
浓度也可以采用一个百分数来设置,需要一个0%-100%之间的数字，使用百分数最终也会转换为0-255之间的数
十六进制RGB
也可以使用十六进制的rgb值来表示颜色,原理和上边RGB原理一样,只不过使用十六进制数来代替,使用三组两位的十六进制数组来表示一个颜色
语法：#红绿蓝
像这种两位两位重复的颜色,可以简写比如:
#ff0000可以写成#f00
文字
color:颜色;
设置字体颜色
font-size:大小;
设置文字的大小,浏览器中一般默认的文字大小都是16px
font-size设置的并不是文字本身的大小,在页面中,每个文字都是处在一个看不见的框中的我们设置的font-size实际上是设置格的高度,并不是字体的大小，一般情况下文字都要比这个格要小一些,也有时会比格大,根据字体的不同,显示效果也不同
font-family:样式;
指定文字的样式
当采用某种字体时,如果浏览器支持则使用该字体,如果字体不支持，则使用默认字体 ,该样式可以同时指定多个字体,多个字体之间使用,(逗号)分开当采用多个字体时，浏览器会优先使用前边的字体，如果前边没有在尝试下一个
浏览器使用的字体默认就是计算机中的字体，如果计算机中有,则使用,如果没有就不用(C:\Windows\Fonts 字体所在位置)
在开发中,如果字体太奇怪,用的太少了,尽量不要使用,因为可能用户的电脑没有此字体，达不到想要的效果
在网页中将字体分成5大类:
serif(衬线字体)
sans-serif (非衬线字体)
monospace (等宽字体)
cursive (草书字体)
fantasy (虚幻字体)
可以将字体设置为这些大的分类,当设置为大的分类以后,浏览器会自动选择指定的字体并应用样式
一般会将字体的大分类,指定为font-family中的最后一个字体
font-style:
作用：设置文字斜体
可选值：
normal 默认值，文字正常显示
italic 文字会以斜体显示
oblique 文字会以倾斜的效果显示
大部分浏览器都不会对倾斜和斜体做区分,也就是说我们设置italic和oblique它们的效果往往是一样的一般我们只会使用italic
font-weight:
作用：设置字体的加粗效果
可选值：
normal 默认值
bold 文字加粗显示
该样式也可以指定100-900之间的9个值,但是由于用户的计算机往往没有这么多级别的字体,所以达到我们想要的效果也就是200有可能比100粗, 300有可能比200粗,但是也可能是一样的
font:
在CSS中还为我们提供了一个样式叫font,使用该样式可以同时设置字体相关的所有样式,可以将字体的样式的值,统一写在font样式中,不同的值之间使用空格隔开,无顺序要求
但是要求文字的大小和字体必须写，而且字体必须是最后一个，大小必须是倒数第二个
例
p{
font:italic small-caps bold 60px "微软雅黑";
}
行间距
在CSS并没有为我们提供一个直接设置行间距的方式,我们只能通过设置行高来间接的设置行间距,行高越大行间距越大
line-height:
使用line-height来设置行高行高类似于我们上学单线本,单线本是一行一行,线与线之间的距离就是行高,网页中的文字实际上也是写在一个看不见的线中的,而文字会默认在行高中垂直居中显示
行间距=行高 - 字体大小
通过设置line-height以间接的设置行高,
可以接收的值:
1.直接接受一个大小
2.可以指定一个百分数，则会相对于字体去计算
3.可以直接传一个数值，则行高会设置字体大小相应的倍数
对于单行文本来说,可以将行高设置为和父元素的高度一致, 这样可以使单行文本在父元素中垂直居中
在font中也可以指定行高
·在字体大小后可以添加/行高,来指定行高,该值是可选的,如果不指定则会使用默认值
文本样式
text-transform:
作用：设置文本的大小写
可选值：
none 默认值,该怎么显示就怎么显示,不做任何处理
capitalize 单词的首字母大写,通过空格来识别单词
uppercase 所有的字母都大写
lowercase 所有的字母都小写
text-decoration:
可选值：
none: 默认值,不添加任何修饰,正常显示
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线
超链接会默认添加下划线,也就是超链接的text-decoration的默认值是underline,如果需要去除超链接的下划线则需要将该样式设置为none
letter-spacing
作用：指定字符间距
例：
letter-spacing:10px; 字符间距为10px
word-spacing
作用：设置词与词之间的距离，实际上是设置词与词之间的空格大小
text-align
作用：设置文本的对齐方式
可选项：
left默认值,文本靠左对齐
right,文本靠右对齐
center ,文本居中对齐
justify，两端对齐 ,通过调整文本之间的空格的大小,来达到一个两端对齐的目的的
text-indent
作用：设置首行缩进
当给它指定一个正值时，会自动向右侧缩进指定的像素
如果为它指定一个负值,则会向左移动指定的像素通过这种方式可以将一些不想显示的文字隐藏起来
例：
text-indent:2em 缩进两个字符
以上内容由csdn论坛Zzz-lie整理以下附件由特别可爱学生提供，本文件禁止滥用！
