第六周学习（开始前端）

<!DOCTYPE html>
<html><!-- html是根标签，一个页面中有且只有一个根标签，网页里面的所有内容都应该写在根标签里面-->
	<head><!-- 中的内容不会在网页中显示，head是设置一些信息让浏览器看的,帮助浏览器解析网页的 -->
		<meta charset="utf-8">
		<title></title><!-- title网页的标题标签，默认会显示在标签页顶部-->
	</head>
	<body>（页面中所有可见的内容写在<body>中）
	</body>
</html>
<!-- -->
<!-- 在这个结构中，可以来编写HTML的注释，注释中的内容，不会在页面中显示，但可以在源码中查看-->

实体

在HTML中，一些如<>这种特殊字符是不能直接使用，需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称为实体（转义字符串)

浏览器解析到实体时，会自动将实体转换为其对应的字符

实体的语法: &实体的名字; 小于号 &lt ;(字母和分号之间是没空格的)

大于号 &gt ; 空格 &nbsp ; 版权符号 &copy ;

超链接

使用超链接可以让我们从一个页面跳转到另一个页面使用a标签来创建一个超链接
属性:
href:指向链接跳转的目标地址,可以写一个相对路径也可以写一个完整的地址

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接</title>
	</head>
	<body>
		<h1>超链接练习</h1>
		<!--a标签中的target属性可以用来指定打开链接的位置
		可选值:
		_self,表示在当前窗口中打开(默认值>
		_blank,在新的窗口中打开链接	
            可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开-->
        <!--浏览器可以直接打开的文件 -->
		<a href="./图片标签.html">超链接-跳转文件</a><br>
		<a href="HTML属性.html" target="_self">我是一个超链接</a><br>
        <!--浏览器不可以直接打开的文件 -->
		<a href="内部资源.zip">内部资源</a><br>
	
	</body>
</html>

注意点：

1.代码中的多个空格，多个回车，都会被浏览器解析成一个空格！

2.虽然a是行内元素，但a元素可以包裹除他自身以外的任何元素！

选择器

通配选择器

/* 选中所有元素 */

* {

color : orange ;

font-size : 40px ;

}

元素选择器

/* 选中所有 h1 元素 */

h1 {

color : orange ;

font-size : 40px ;

}

备注：元素选择器无法实现差异化设置，例如上面的代码中，所有的 p 元素效果都一样。

类选择器

/* 选中所有 class 值为 speak 的元素 */

.speak {

color : red ;

}

id选择器

/* 选中 id 值为 earthy 的那个元素 */

#earthy {

color : red ;

font-size : 60px ;

}

复合选择器

交集选择器

作用：选中同时符合多个条件的元素

/* 选中：类名包含 rich 和 beauty 的元素 */

.rich.beauty {

color : green ;

}

并集选择器

作用：选中多个选择器对应的元素，又称：分组选择器。

/* 选中 id 为 peiqi ，或类名为 rich ，或类名为 beauty 的元素 */

#peiqi ,

.rich ,

.beauty {

font-size : 40px ;

background-color : skyblue ;

}

后代选择器

作用：选中指定元素中，符合要求的后代元素。

/* 选中 ul 中所有 li 中的 a */

ul li a {

color : orange ;

}

子代选择器

作用：选中指定元素中，符合要求的子元素（ 儿子元素 ）。（先写父，再写子）

/* 类名为 persons 的元素中的子代 a 元素 */

.persons > a {

color : red ;

}

兄弟选择器

相邻兄弟选择器：

作用：选中指定元素后，符合条件的 相邻兄弟 元素。

/* 选中 div 后相邻的兄弟 p 元素 */

div + p {

color : red ;

}

通用兄弟选择器：

作用：选中指定元素后，符合条件的 所有兄弟 元素。

/* 选中 div 后的所有的兄弟 p 元素 */

div ~ p {

color : red ;

}

属性选择器

作用：选中属性值符合一定要求的元素。

/* 选中具有 title 属性的元素 */

div [ title ]{ color : red ;}

伪类选择器

常用

一、动态伪类：

1. :link 超链接 未被访问 的状态。

2. :visited 超链接 访问过 的状态。

3. :hover 鼠标悬停在元素上的状态。

4. :active 元素激活的状态。

5. :focus 获取焦点的元素。

二、结构伪类

常用的：

1. :first - child 所有兄弟元素中的 第一个 。

2. :last - child 所有兄弟元素中的 最后一个 。

3. :nth - child(n) 所有兄弟元素中的第 n 个。

4. :first - of - type 所有 同类型 兄弟元素中的 第一个 。

5. :last - of - type 所有 同类型 兄弟元素中的 最后一个 。

6. :nth - of - type(n) 所有 同类型 兄弟元素中的第 n 个。

三、否定伪类：

:not( 选择器 ) 排除满足括号中条件的元素。

四、 UI 伪类：

1. :checked 被选中的复选框或单选按钮。

2. :enable 可用的表单元素（没有 disabled 属性）。

3. :disabled 不可用的表单元素（有 disabled 属性）。

五、目标伪类

:target 选中锚点指向的元素。

六、语言伪类

:lang() 根据指定的语言选择元素（本质是看 lang 属性的值）。

选择器的优先级

行内样式 > ID 选择器 > 类选择器 > 元素选择器 > 通配选择器 。

特殊规则：

1. 行内样式 权重大于 所有选择器 。

2. !important 的权重，大于 行内样式 ，大于 所有选择器 ， 权重最高！

计算方式：每个选择器，都可计算出一组权重，格式为： (a,b,c)

a : ID 选择器的个数。

b : 类、伪类、属性 选择器的个数。

c : 元素、伪元素 选择器的个数。

盒子模型

组成：

CSS 会把所有的 HTML 元素都看成一个盒子，所有的样式也都是基于这个盒子。

1. margin （外边距）： 盒子与外界的距离。

2. border （边框）： 盒子的边框。

3. padding （内边距）： 紧贴内容的补白区域。

4. content （内容）： 元素中的文本或后代元素都是它的内容。

. 关于默认宽度

所谓的默认宽度，就是 不设置 width 属性时 ，元素所呈现出来的宽度。

总宽度 = 父的 content — 自身的左右 margin 。

内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右

padding 。

padding 复合属性的使用规则：

1. padding: 10px ; 四个方向内边距都是 10px 。

2. padding: 10px 20px ; 上 10px ，左右 20px 。（上下、左右）

3. padding: 10px 20px 30px ; 上 10px ，左右 20px ，下 30px 。（上、左右、下）

4. padding: 10px 20px 30px 40px ; 上 10px ，右 20px ，下 30px ，左 40px 。（上、右、

下、左）

注意点：

1. padding 的值不能为负数。

2. 行内元素 的左右内边距是没问题的，上下内边距不能完美的设置。

3. 块级元素 、 行内块元素 ，四个方向 内边距 都可以完美设置。

样式的继承

有些样式会继承，元素如果本身设置了某个样式，就使用本身设置的样式；但如果本身没有设置某个样

式，会从父元素开始一级一级继承（优先继承离得近的祖先元素）。

会继承的 css 属性

字体属性、文本属性（除了 vertical-align ）、文字颜色等。

不会继承的 css 属性

边框、背景、内边距、外边距、宽高、溢出方式等

一个规律：能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的。

生活总结

最近好忙呜呜呜呜呜呜呜呜呜，请假回家复查耽误了好多进度，疯狂赶赶赶。

下周计划

继续学习浮动、定位，还有很多没学，要不停的赶进度了