0901 总结
前言：
1.前端学到现在为止我们接触了html（最基本的标签）css（美化网页，顺带实现一些小功能）js（牛逼的js，实现页面的交互）。
一.html标签
1.HTML基本的结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>·
</html>
2.HTML基本标签
-
代码注释方法：ctrl+/
-
引入外部的css文件使用的是标签
-
引入外部的js文件标签用的是
- 标签：这是一个段落标签，它从h1~h6字体从大到小
1.p标签
<p> 标签：表示一个段落，一个标签独占一行，自动换行，同时他也是行内标签
strong：粗体
i和em代表斜体
small：字体缩小
big:字体放大
sub：上标
sup：下标
del:删除文本
ins:添加文本
2.a标签
标签：（也叫特殊的标签），a标签的herf属性就是引入要跳转的地方，可以是一个网站，也可以是一个本地文件，还有锚点连接
<a href="#miao">找到那个描点链接</a>
<a id="miao">我是描点链接找我</a>
target属性: 规定在何处打开链接
_blank 在新窗口中打开链接
_self （默认），在当前窗口打开链接
_parent 在父窗口中打开链接文档
_top 在整个浏览器窗口打开文档
framename 在指定框架中打开窗口，若不存在，则打开一个新的窗口
-
注：连接的相对路径和绝对路径：相对路径：
- 文件和图片在同一个目录文件夹，直接写文件名
- 文件和图片在下一级目录里，文件夹名称+/+图片名称
- 图片你在文件的上一级目录里，…+/+图片名称
- 图片在文件的上一级的其他目录里，…/文件夹名称/图片名称
-
总结：找到下一级目录（文件夹）的图片（文件）用/ 跳出当前目录使用…/ 绝对路径：就是从头写到尾
3.pre标签
<pre>标签：这是格式化文本标签，保留文本的原来样式。
4.元素的分类
1.块元素（div h1-h6 form ul-li）：能设置宽高，自动换行，多个块元素标签在一起时会默认从上至下排列
2.行内元素（span a i em）：不能设置宽高，不会自动换行，设置margin上下方向无效；设置padding上下左右时会撑大空间
3.行内块元素（img input）：能设置宽高，不会自动换行，默认排列方式从左到右
元素的转换
1.display：inline 转换为行内元素
2.display：block 转换为块元素
3.display：inline-block 转换为行内块元素
5.行内块巧妙运用
页码在页面中间显示: 1. 把这些链接盒子转换为行内块， 之后给父级指定 text-align:center; 2. 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中
-
特殊字符：空格符 ；大于号<；小于号>；
-
表格标签
<tr> 用来创建表格中的一行 <td>用来创建表格中的一列 cosplay用来合并一列 rowplay用来合并一行
6.表单标签
input输入的type属性：
-
lable标签：为 input 元素定义标注，当点击标签内的文本时浏览器就会自动将光标转到
对应的表单元素上 -
<label for="sex">男</label> <input type="radio" name="sex" id="sex" /> 核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同。 -
select下拉菜单
textarea表单元素：<textarearows="3" cols="20"> 文本内容 </textarea> ； 不允许拖放 resize: none;
二.CSS样式
1.选择器
-
后代选择器：带空格的，父子也行，爷孙也行
-
子集选择器：带>的，必须是直接父子关系
-
群组选择器：选择器中指定了多个对象，对象之间用逗号来分隔
-
链接伪类选择器
1.伪类选择器用于向某些选择器添加特殊效果，如给链接添加特殊效果2. a：link 初始状态. a：visited 放问过状态 a：hover 鼠标经过状态 a：active 鼠标正在按下还没有弹起鼠标状态
3.注意点：一定要按照link visited hover active 的顺序
2.🦀focus伪类选择器
- 伪类
- 用于获取焦点的表单元素，焦点就是光标，一般情况下input类表单元素才能获取，获取后获得焦点，用于改变获取焦点后面样式的改变。
- 元素背景颜色默认值是 transparent （透明）。
3.结构性伪类
如果有大量元素,我该如何实现它.在css里面有没有任何关于子编号的方法：nth-child(),这样的东西.
：first-letter，选择元素文本的最后一个子；
：first-line，选择元素文本的第一行;
：before 在元素的最前面添加新内容;
：after 在元素的最后面添加新内容;
4.🐴字体样式
-
字体大小：font-size；（.谷歌浏览器默认的文字大小为16px ；2.可以给 body 指定整个页面文字的大小；3.单位是px像素）
-
字体粗细font-weight 属性值：100~900 400以上加粗。
-
字体综合写法：
body { font: font-style font-weight font-size/line-height font-family;}
注：字体连写是有顺序的，不能随意换位置；2.其中字号和字体必须同时出现）
-
字体的间距设置：letter-spacing 可以设置字体和字符之间的间距 （默认值：normal）
-
字母之间间距设置：word-spacing
文本属性
1.文本颜色：color
2.文本对齐：text-align
3.属性值：left：左对齐（默认） right：右对齐 center（居中对齐）
4.修饰文本：text-decoration：underline；添加下划线 text-decoration：noone；默认，没有下划线
5.文本缩进：text-indent （em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小） 行间距：line-height 6.vertical-align 属性应用：
CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。但是它只针对于行内元素 或者行内块元素有效。
语法：
vertical-align : baseline | top | middle | bottom[
注：此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。
- 溢出文字
单行文本溢出显示省略号–必须满足三个条件：
/*1. 先强制一行内显示文本*/ white-space: nowrap; （ 默认 normal 自动换行）
/*2. 超出的部分隐藏*/ overflow: hidden;
/*3. 文字用省略号替代超出的部分*/ text-overflow: ellipsis;
三.CSS三大特征
-
层叠性
- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
- 样式不冲突，不会层叠
-
继承性
- 子元素可以继承父元素的样式
- 行高可以跟单位也可以不跟单位
- 如果子元素没有设置行高，则会继承父元素的行高为 1.5
- 此时子元素的行高是：当前子元素的文字大小 * 1.5
- body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
-
优先级
- 选择器相同，则执行层叠性选择器不同，则根据选择器权重执行
- 注意点： 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为1000, !important 无穷大.
- 继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。
四，盒子模型
1.盒子模型
- (content是内容区域，padding是内边距，boder是边框，margin是外边距)
2.网页布局过程：
- 先准备好相关的网页元素，网页元素基本都是盒子 Box 。
- 利用 CSS 设置好盒子样式，然后摆放到相应位置。
3.往盒子里面装内容
- 盒子模型（Box Model）组成：CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：border边框、margin外边距、padding内边距、和 content实际内容
4.边框（border）
1.边框有三部分组成：边框宽度（border-width） 边框样式（border-style） 边框颜色（border-color）
2.边框样式 border-style 可以设置如下值：
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
3.表格的细线边框
border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
border-collapse: collapse; 表示相邻边框合并在一起
1.内边距（padding）
padding-left 左内边距 padding-right 右内边距 padding-top 上内边距 padding-bottom 下内边距
内边距会影响盒子实际大小：
如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。
解决方法：如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。
2.外边距（margin）
- 外边距是控制盒子与盒子之间的距离。
- 属性：
margin-left 左外边距 margin-right 右外边距 margin-top 上外边距 margin-bottom下外边距
3.盒子水平居中：margin: 0 auto;（行内元素或者行内块元素水平居中给其父元素添加 text-align:center）
4.margin的合并：当上下相邻的两个块元素相遇时，上面的元素有下外边距，下面的元素有上
外边距，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。而是取两个值中的较大者。
解决方法：只给一个盒子添加margin
3.margin的塌陷
对于两个嵌套关系（父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
- 解决方法：
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距。
- 可以为父元素添加 overflow:hidden。
清除内外边距： {padding:0; /* 清除内边距 */margin:0; /* 清除外边距 */}
5.背景
- 背景平铺（background-repeat）
repeat 平铺（默认） no-repeat 不平铺 repeat -x 横向上平铺 repeat -y 纵向上平铺
- 背景的定位
background-position：x，y； 前面的值是设置x轴的距离，后面y是设置y轴距离。
- 背景跟着文字的滚动跟着滚动
background-attachment：scroll； 默认设置，背景随着文档一起滚动。
background-attachment：fixed； 背景图片固定于窗口的相对位置。
6.浮动
-
页面布局分类
普通流（标准流）：从上到下，从左到右排布
浮动：让块元素横向排列
定位： 1.定位语法：定位=定位模式+边偏移（top bottom left right）
2.相对定位：参照自己原来的位置并且占据原来的位置 position：relative
3.绝对定位：参照是他的有定位的父元素的位置并且不占据原来的位置 position：absolute
4.固定定位：参照点是网页来移动位置的 position：fixed
-
什么是浮动：float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
float属性：none 不浮动（默认） left左浮动 right 右浮动 -
浮动特性：
浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置)
1.浮动的元素会一行内显示并且元素顶部对齐
2.浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
3.浮动的元素会具有行内块元素的特性，浮动元素的大小根据内容来决定，浮动的盒子中间是没有缝隙的
4.浮动元素经常和标准流父级搭配使用： 先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧
5.浮动布局注意点： 1.浮动和标准流的父盒子搭配 2.一个元素浮动了，理论上其余的兄弟元素也要浮动
清除浮动：
为什么需要清除浮动？
1.父级没高度。
2.子盒子浮动了。
3.影响下面布局了，我们就应该清除浮动了
清除浮动本质（清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度）
注意：1.如果父盒子本身有高度，则不需要清除浮动
2.清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
3.父级有了高度，就不会影响下面的标准流了
*清除浮动的多种方式
1、额外标签法（再最后一个浮动标签后，新加一个标签，给其设置clear：both；）
2、父级添加overflow属性（overflow：hidden）
3、使用after伪元素清除浮动
4、使用before和after双伪元素清除浮动
-
清除浮动样式（选择器{clear:属性值;} ）
left 不允许左侧有浮动元素 right 不允许右侧有浮动元素 both 同时清除左右两侧浮动
7.阴影
- 文字text-shadow属性：
语法：text-shadow:h-shadow v-shadow blur color;
h-shadow表示水平阴影的位置，允许负值，该值必需。
v-shadow表示垂直阴影的位置，允许负值，该值必需。
blur表示阴影的距离，color表示阴影的颜色，这两个值是可选的。
- 盒子box-shadow属性：
语法：box-shaow：水平位置 垂直位置 阴影模糊 阴影大小 阴影颜色 内外阴影
h-shadow：水平方式的阴影
v-shadow： 垂直方向的阴影
blur:阴影模糊程度
spread:阴影大小
color：阴影颜色
inset ： 设置内阴影 不设置外阴影
- 圆角边框：
语法：
boder-radius：数值；数值为50%时是正圆。
8.制表符
- 给 mod-help设置50px的左内边距和20px的上内边距，给定高度(185p×)
- 里面的布局利用自定义列表来实现(d1>dt+dd)
给d1设置浮动，让其可以水平排列，给每个dl盒子设置宽度 - 给dt设置文字大小(16px),设置下外边距(10px),让dt和d之间有些距离
最后一个에结构和样式不一样，需要单独设置
<div class="mod_help">
<dl>
<dt>服务指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl>
<dt>服务指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl>
<dt>服务指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl>
<dt>服务指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl>
<dt>服务指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl>
<dt>帮助中心</dt>
<dd>
<img src="images/wx_cz.jpg" alt=""> 品优购客户端
</dd>
</dl>
</div>
9.表格标签
tr：行标签 td：列标签 单元格的合并： 合并列：colspan 合并行：rowspan
thead：表头 tbody：正文 tfoot：脚注
-
品优购客户端
帮助中心
9.表格标签
tr：行标签 td：列标签 单元格的合并： 合并列：colspan 合并行：rowspan
thead：表头 tbody：正文 tfoot：脚注
154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
