Html&CSS初学笔记
1、HTML
<!--html5标识-->
<!doctype html>
<!--根标签-->
<html>
<!--头标签，以下内容不会在网页中显示-->
<head>
<!--meta 定义网页属性-->
<meta charset="utf-8"/>
<meta name="keywords" content="关键字"/>
<meta name="descriotion" content="网页描述" />
<title>网页标题</title>
</head>
<body>
<!--图片标签-->
<img src="图片名称.格式" alt="图片描述" width="220px" height="220px"/>
<!--超链接标签
href： 目标路径(可以是对应元素的ID，元素ID不能是数字开头且在同一个网页内必须唯一。使用：#ID 格式)
target：打开方式
_blank：新标签页打开
_self：当前页打开（默认值）
-->
<a href="https:\\baidu.com" target="_blank">百度</a>
<a href="#top">回到顶部</a>
<a href="mailto:[email protected]">联系我们</a>
<!--段落标签-->
<p>床前明月光</p>
<!-- div块元素 独占一行
div标签没有任何语义，就是一个纯粹的块元素，并且不会对它 里面的元素设置任何的默认样式
div元素主要用来对页面进行布局的。
常见块元素：
p h1 h2..
-->
<div>我是div</div>
<!--
span是一个内联元素（行内元素）
所谓的行位元素，指的是只占自身代销的元素，不会占用一行
span没有任何的语义，span标签专门用来选中文字，
然后为元素设置样式
常见的内联元素：
a img iframe span
-->
<span>我是span</span>
<!--
一般情况下只使用块元素去包含内联元素，而不使用内联元素去包含块元素
a元素可以包含任意元素，除了它本身
p元素不可以包含任何其他的块元素
-->
</body>
</html>
2、CSS
内联样式：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>CSS</title>
</head>
<body>
<!--内联样式-->
<p style="color:yellow;font-size:30px;">床前明月光</p>
</body>
</html>
内部样式表：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>CSS</title>
<!--内部样式表-->
<style type="text/css">
p{
color:red;
font-size:40px;
}
</style>
</head>
<body>
<p>床前明月光</p>
</body>
</html>
外部样式表：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>CSS</title>
<!--外部样式表-->
<link rel="stylesheet" tyep="text/css" href="style.css"/>
</head>
<body>
<p>床前明月光</p>
</body>
</html>
style.css：
p{
color:green;
font-size:30px;
}
CSS语法：
选择器 声明块
选择器：
通过选择器可以选中页面中的指定元素(标签)，并且将声明块中的样式应用到选择器对应的元素上
选择器优先级规则：
内联样式优先级 1000
id选择器优先级 100
类和伪类优先级 10
元素选择器优先级 1
通配* 优先级 0
继承的样式没有优先级
如果选择器中包含多个选择器，优先级相加后比较。
在样式后面加 !important 则此时该样式会获得一个最高的优先级。
元素选择器：
作用：通过元素选择器可以选择页面中的所有指定元素
语法：标签名{}
ID选择器：
作用：通过元素的ID属性值选中唯一的一个元素
语法：#ID属性值{}
类选择器
作用：通过元素的class属性值选中一组元素
语法：.class属性值{}
选择器分组
作用：通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1,选择器2,选择器N{}
通配选择器：
作用：可以用来选中页面中的所有的元素
语法：*{}
复合选择器（交集选择器）
作用：可以选中同时满足多个选择器的元素
语法：选择器1选择器2选择器N{}
后代元素选择器(空格间隔)：
作用：选中指定元素的指定后代元素
语法：祖先元素 后代元素{}
子元素选择器(>间隔)：
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
子元素伪类：
:first-child -> 可以选中第一个子元素
:last-child -> 可以选中最后一个子元素
:nth-child(i) -> 可以选中第i 个子元素
even 表示偶数位置的子元素
odd 表示奇数位置的子元素
:first-of-type
:last-of-type
:nth-of-type
和:first-child这些非常类似，
只不过child是在所有的子元素中排列
而type是在当前类型的子元素中排列
后一个兄弟元素选择器：
作用：选中一个元素后紧挨着的指定的一个兄弟元素
语法： 前一个 + 后一个
后边所有兄弟元素选择器：
作用：选中一个元素后紧挨着的指定的所有兄弟元素
语法： 前一个 ~ 后一个
伪类选择器：
专门用来表示元素的一种特殊的状态，
比如：访问过的超链接，普通的超链接，获取焦点
当需要为处在哲哲特殊状态的元素设置样式时，就可以使用伪类
正常链接 -> a:link
访问过的链接 -> a:visited(只能定义字体颜色)
鼠标滑过的链接 -> a:hover
正在点击的链接 -> a:active
获取焦点 -> :focus
选中 -> ::selection
:link :visited :hover :active优先级一样，:link :visited需要写在:hover :active签名，:hover需要写在:active前面。
否定伪类
作用：可以从已选中的元素中剔除出某些元素
语法：:not(选择器)
示例：p:not(.hello) 剔除p元素中class属性值为hello的元素
伪元素选择器：
第一个字符 -> :first-letter
第一行 -> :first-line
:before表示元素最前边的部分，:after表示元素最后边的部 分。通常需要结合content样式一起使用，通过content可以向 before或after的位置添加一些内容。
属性选择器：
作用：可以根据元素中的属性或者属性值来选取指定元素
语法：[属性名] 选取含有指定属性的元素
[属性名="属性值"] 选取含有指定属性值的元素
[属性名^="属性值"] 选取属性值以指定内容开头的元素
[属性名$="属性值"] 选取属性值以指定内容结尾的元素
[属性名*="属性值"] 选取属性值含有指定内容的元素
声明块：
声明块紧跟在选择器后面，使用一对{}括起来，
声明块中实际上就是一组一组的名值对结构
这一组一组的名值对称为声明
在一个声明块中可以写多个声明，多个声明之间使用;隔开，声明的样式名和样式值之间使用:来连接
class属性：
class属性和id属性类似，但是class属性可以重复
拥有相同class属性值的元素，是同一组元素
可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开
float属性
可选项：
none 默认值，元素默认在文档流中排列
right 元素会立即脱离文档流，向页面的右侧浮动
left 元素会立即脱离文档流，向页面的左侧浮动
当一个元素设置浮动以后（float属性是一个非none值）
元素会立即脱离文档流，元素脱离文档流以后，它的下边的元素会立即向上异动
元素浮动以后，会尽量向页面的左上或右上漂浮
知道遇到父元素的边框或者其他的浮动元素
如果浮动元素的上边是一个没有浮动的块元素，则浮动元素不会超过块元素
浮动的元素不会超过它上边的兄弟元素，最多一边齐
浮动不会盖住文字，文字会自动环绕在浮动元素的周围，可以通过浮动来设置文字环绕图片的效果
文档流
元素在文档流中的特点
块元素
1、块元素在文档流中会独占一行，块元素会自上而下排列。
2、块元素在文档流中默认宽度是父元素的100%。
3、块元素在文档流中的高度默认被内容撑开
内联元素
1、内联元素在文档流中只占自身的带下，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续从左往右排列
2、在文档流中，内联元素的宽度和高度默认都被内容撑开
当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距。