一．基本标签
2020年10月15日星期四
1.骨架：标签[元素/标记]
2.<!doctype html>–申明文档类型–HTML5
专业术语:DTD–文档定义类型[document type definiton]
3.开始标签
Zh-cn-----中文
--头部-不可视化区域-存储信息-给浏览器查看 --身体-可视化区域-给用户看的所有信息 元数据：专门告诉浏览器或搜索引擎关于网页的基本信息Charset=”utf-8”
属性 属性值-------存在于开始标签里
字符集信息 网页的编码格式
Gb2312 gb国标缩写 包含了6763个字
Gbk 国标扩展 21886
Gb18030 70224
Utf-8 包含全世界所有的语言文字
Name=”keywords” ------核心搜索关键字 作用：作为网页名字的补充
名字 关键字
Content=”内容” -----
Name=”description”
名字 描述-------
Div 双标签:最基础的分区标签 存放内容的
标题标签:
~ 双标签 字体大小依次减小 字体加粗具有权重H1权重最高（新闻标题，logo）页面出现一次
放在标题区域的–网页更加结构化
P 双标签 段落标签 存储打断=大段文字
三个列表标签：
无序列表：ul 双标签
标签下面只能是
- 标签
- 标签下可放其他标签
ul开始标签的属性：
Type：disc实心圆点 Circle空心圆点 square黑色方块
-
有序列表：ol 双标签 标签下面只能是<li></li>标签，跟无序列表一样 Ol开始标签的属性： Type：1，A，a，I，i <ol type=””> <li></li> </ol> 自定义列表：dl 双标签 <dt>列表的标题</dt> <dd>b列表标题的内容</dd> 内容展示的标签：（从左到右排列的） Span---双标签---包裹文字 没效果 可横排显示 Strong--双标签--加粗 权重高 strong>b B--双标签--加粗 Em--双标签--倾斜--权重高 em>i I--双标签--倾斜 <dl> <dt></dt> <dd></dd> </dl>Img 图片 单标签
属性：src：“图片的地址”----路径不能出现汉字
路径的写法
1.相对路径：当前位置寻找，范围小，指定区域寻找
参照物：位置关系，兄弟关系
图片和网页同级，直接写图片名称 04.gif
当前目录：表示方法 ./ （可省略）
上级目录：表示方法 …/
上上级目录：表示方法 …/…/
根目录：表示方法 /2.绝对路径：完整的路径
范围大，根
从盘符出发：C盘/D盘
从网页出发：http/https:
Alt：图片加载不出来说明是一张什么图片
Title：说明图片信息
Width：图片的真实宽
Height：图片的真实高
目的：网页加载慢的时候，用来占据位置，防止网页布局混乱
a标签
超链接 双标签
属性：
href=”需要链接的地址”
Hypetext reference 超文本引用
点击网页某个部分可以跳转到其他网页或者指定位置
Target=”_blank”—新窗口打开
“_self”—默认当前窗口
<a href=” ” target=”_blank” id=”top”>输入文字
换行标签
锚点：标签起一个id名
在a标签中的href=”#id名字” 可以跳转到指定地方CSS样式
写法：
1.行内样式：直接将样式写在开始标签中 style属性中Color:字体颜色 Font-size：字体大小 单位px2.内嵌样式：head标签中通过style标签书写
Rel---relationship:定义链接文件和html的关系 Stylesheet 样式表
3.外部样式：在css文档中写css样式，那个页面需要css样式，就引入那个页面
在head标签中通过link标签引入行内样式的缺点：
1.样式和结构没有分离
2.不利于后期维护
3.样式不能重复使用内嵌样式的优点：
1.样式和结构分离
2.能够重复使用
缺点：
只能在一个页面使用，不能在多个页面使用外部样式的优点：
1.结构样式分离
2.有利于后期维护
3.多个页面使用
4.可重复使用优先级：行内样式>内嵌样式=外部样式
CSS基本选择器
1.标签选择器：选择范围广语法 标签名{css属性名称：属性值；…}
2.id选择器：#表示id选择器 具有唯一性
语法 #id名字{css属性名称：属性值；…}3.class选择器 .表示class选择器
语法 .class名字{css属性名称：属性值; …}4.通配符选择器：*表示通配符选择器
语法 在style标签中 *{css样式}
含义：选择页面中所有的标签单个权重问题
Id>class>标签>通配符组合选择器
1.后代选择器：选择器之间用空格隔开
2.子元素选择器：表示符号：>
3.兄弟选择器：表示符号：~
4.比邻选择器：表示符号：+
5.属性选择器：表示方法：
[属性名=”属性值”]{css样式}
选择器名[属性名=”属性值”]{css样式}
6.逗号（并集）选择器：表示符号：, 设置共同的样式
7.li .beauty{font-weight:bold;}
就是选择li标签里边的并且li的名字为beauty的标签组合选择器权重问题
Id>class>tag(标签)
看id数
Id数越多，权重越大
Id数一样
class数越多，权重越大
class数一样
标签数越多，权重越大
权重一样的，后边覆盖前边的命名规则：
1.英文状态下的小写字母
2.必须由字母，数字，连字符(-)所组成
3.必须见名知意
4.不允许带有广告的单词：advertising：ad：adv
5.禁止出现中文拼音和汉字，或者禁止出现单个字母和纯数字
6.禁止驼峰命名 itemNamecolor:red; 字体颜色
font-size：30px； 字体大小 单位：像素px
font-weight：bold； 字体粗细 bold粗体 默认：normal
font-weight：lighter；字体粗细 lighter细体 100-900的数字—字重text-decoration：none； 文字修饰
none 没有的
undreline 下划线
overline 上划线
line-through 中划线(删除线)
字体颜色表示方法：
1.颜色的英文单词
2.十六进制的颜色0-9和a-f组成 (6位)
#ffffff—白色
#000000–黑色
3.rgb–三原色(红色 0~255)
(绿色 0~255)
(蓝色 0~255)
4.rgba–三原色 a-透明度
0 完全透明 1完全显示 0.5半透明 简写.5字体默认大小：
浏览器默认字体大小：16px
最小字体：12px
单位：绝对单位 px 像素
相对单位 em–父元素字体大小–父元素*倍数=像素
rem–根据根标签html字体大小计算Html标签
1.按照写法：单双标签
2.排列顺序：块级标签和行级标签
块级标签：div p ul li h系列标签 dl ol
特点：独占一行
行级标签：span a strong i em b
特点：横排显示，在同一行显示盒模型
网页中所有的标签都可以看做是一个盒模型
1.content 内容
2.Padding 内边距
特点 a，把整个盒子撑大
B，padding区域颜色和内容区域的颜色一致
C，Padding 作用：设置盒子边框和内容的距离
Padding的写法：
分样式：padding-top： 上
Padding-right： 右
Padding-bottom：下
Padding-left： 左
复合样式：
Padding：50px； 上=右=下=左
Padding：50px 30px； 上=下 左=右
Padding：50px 30px 20px；上 左=右 下
Padding：50px 30px 20px 10px；上 右 下 左
文本对齐方式：left center right
text-aglin：center； 居中对齐3.border 边框
Border：30px solid red；
大小 样式 颜色
不给边框颜色：默认颜色就是内容字体的颜色
不给边框大小：默认边框线大小为3px
边框线可以没有大小，颜色，但是必须设置样式
Border分样式：
border-width：边框线大小
border-style：边框线样式
border-color：边框线颜色
边框线颜色：transparent 透明色
边框线样式：solid 实线
Dashed 虚线
Dotted 点线
Double 双实线单个边框的复合样式：
border-top：30px solid red;上边框线
border-left：30px solid red;左边框线
border-bottom：30px solid red;下边框线
border-right：30px solid red;右边框线
单个边框的复合样式：
border-top-width：上边框线的大小
border-top-style：上边框线的样式
border-top-color：上边框线的颜色4.margin：外边距
调整盒子和盒子之间的距离，可以有负值
应用：盒子和盒子之间的距离
正值：向下
负值：向上
特殊值：auto–一般是复合样式：只有左右
自动的 浏览器会帮助你计算 左右值一样Margin的应用
外边距重合问题：兄弟关系
外边距重合：谁的外边距大就显示谁的外边框
解决问题的方案：
1.中间添加一个元素，设置边框线
2.给其中一个设置外边距或者上边距嵌套关系：
外边距重合，谁的外边距大就显示谁的外边框
解决问题的方案：
1.给父级添加padding
2.加边框线
3.加overflow：hidden;(内容超出隐藏)标准盒模型的
box-sizing：content-box；
实际大小：
width：width(content)+padding(左右)+border(左右)
height：width(content)+padding(上下)+border(上下)
实际占据空间位置大小：
content+border+padding+margin怪异盒模型：IE模式
box-sizing：border-box；
怪异盒模型 width=content+border+padding
大小：width/height
占据位置大小：width/height+margin
怪异盒模型实际大小包含padding和borderfont-failmy：字体样式
目前的字体设计领域：字体大致分为两大类
1.serif（有衬线）：多用于网页正文，内容等大量文字内容区域
2.san serif（无衬线）：多用于文章标题,表格，宣传海报等一些要求文字醒目的领域。
@font-face 引入文字
@font-face{font-faimly：BB；src：url(“.font/h.ttf”);}
white-space:nowrap;-------文本不换行
over-flow:hidden;---------超出文本隐藏
text-overflow:ellipsis;---------文本超出的显示省略号
省略号三步走，缺一不可；-----限制宽度line-height：行高
测量这一行文字的顶部到下一行文字的顶部，一行文字的的高度
目的：设置文字，行与行之间的距离
行间距：两行文字之间的距离
行高的计算：行高=字体大小+行间距
整体设计：一行文字的高度=行高倍数值*字体大小
body{font：16px/1.5 simsun，”黑体”}
整体设置行高和字体样式，注意：顺序不能变
文字的垂直居中：行高的大小和盒子的高度一致vertical-align:基线对齐
vertical-align:2px;可以是数值
top：顶部最上边
text-top：文字顶部
middle： 小写x中线对齐
baseline：小写x下面基线对齐
text-bottom：文字底部
bottom：底部最下边
解决图片下方的空隙问题：
1.使用除了baseline以外的其他属性值
2.直接将图片变成块级元素：display：block；
vertical-align起作用的前提条件
作用范围是哪一些标签：行内元素(inline)
行内块元素(inline-block)
只有以上两个才会存在基线对齐问题
块级元素没有基线对齐问题！！！！！
图片和文字之间的垂直居中对齐：
需要给对齐的行内或者行内块都要设置一个
vertical-align：middle；1.块级元素：(负责结构的) display：block；
常见的块级元素：div, p, ul, li, ol, dl, h1~h6…
特点：
1.独占一行
2.支持宽高padding，margin，margin：auto；
3.不给宽度的时候，宽度默认是父级的100%
4.可以容纳其他的块级镖旗和行级标签
5.p标签，不可包裹其他块级标签（为什么？控制台）2.行级元素：(负责内容的)display：inline；
常见的行级标签：span, img, a, i, strong, em, b…
特点：
1.多个行内元素
2.不支持宽高，margin不支持上下，不支持margin：auto；
3.支持padding，上下padding，只对自身有效，上下padding不影响其他元素的位置。
4.行级标签不能包裹块级标签
5.a标签可以包裹其它块级标签（例外）
6.a标签不能嵌套a标签（why？控制台）
标签之间可以相互转换：通过设置display的值实现3.行内块元素：display：inline-block；
特点：不支持margin：auto；
行内块有间隙问题：空白字符–看不见–实际存在且有大小
解决方案：
给行内块元素的父级（body）设置字体大小为0
行内块元素重新设置大小hover：伪类
写法：选择器：hover{css样式}
hover—鼠标悬停在元素上，然后出现一些css样式（改变或增加css样式）
1.自身的hover div：hover{css样式}
2.通过自己hover儿子（后代） div：hover span{css样式}
3.div：hover ~p{css样式}
绝对不能越辈分，无法选择爸爸爷爷，只能选择兄弟邻居后代元素的隐藏：
1.设置display：none；
让这个元素消失，不占任何位置
显示：只要不是none就行2.visibility：hidden；
让这个元素消失，只是视觉上消失，实际页面存在，依然对布局起作用。
显示：visibility：visible；—可见度3.opacity：0~1；
0 完全透明–视觉消失，实际页面存在
1 完全显示
设置透明度—连带内容一起清晰或模糊背景样式
背景单个样式：
background-color：背景颜色
background-img：url（“图片地址”）：背景图片
background-repeat：背景平铺
默认：repeat；
不重复：no-repeat；
x轴平铺：repeat-x；
y轴平铺：repeat-y；背景图大小：background-size；
1个值：等比例缩放
2个值：宽，高
特殊值：cover：图片等比例缩放，直到覆盖背景区域，然后停止缩放
contain：等比例缩放图片，直到有一条边触碰到盒子边框就会停止缩放
值：px，%；背景图显示位置：origin
background-origin：
padding-box；默认值，从padding区域开始显示
content-box；从内容区域开始显示
border-box；背景图片相对于边框左上角开始xians背景图片裁剪：
background-clip;
padding-box；显示内边距和内容区域的背景图
content-box；显示内容区域部分的背景图
border-box；全部显示，以外的裁剪背景定位：
background-position：x y；
值：数值，px，%；
关键词：left，top，right，bottom，center
搭配：水平和垂直方向
给一个关键词时，默认是居中背景关联：
background-attachment：
fixed（不动）/scroll（动）
决定背景在这个视口是固定的还是滚动的背景的复合样式：
颜色 图片 重复 定位/大小 关联；
background：red url() repeat 50px 10px/100px scroll；
多张背景图：后面加逗号隔开样式初始化：
1.浏览器兼容—页面差异性
2.标签的默认样式，不同的浏览器默认值不一样
3.对seo有影响
样式统一：样式初始化
通配符：网站大，css文件大，所有的标签都会初始化，运行负载加大了，加载时间长，导致用户体验效果变差。
逐个清除：力求影响最小化
body{user-select:none;}-----禁止用户选择文字圆角：
border-radius：单位 px %； 复合样式
一个值：四个角一样
两个值：左上角右下角，右上角和左下角
三个值：左上角，右上角和左下角，右下角
四个值：左上角，右上角，右下角，左下角
50% 半径=圆
分样式：单独设置某一个角
border-top-left-radius：左上角
border-top-right-radius：右上角
border-bottom-left-radius：左下角
border-bottom-right-radius：右下角渐变色：img 背景图片
1.线性渐变
linear-gradient(red,blue)
渐变色方向默认是从上到下
可以改变方向：
to 到哪里去
to right (to right，red 10%，blue)
to left
to bottom
to top
对角线：
角度问题-----deg (30deg,red,blue)
负值/正值
值变大-----顺时针旋转
值变小-----逆时针旋转重复性渐变：
repeating-linear-gradient(red,red 10px,blue 10px,blue 20px);
无限重复填满整个盒子2.径向渐变：
radial-gradient();
(形状 at 圆心位置，color1，color2…)
椭圆：ellipse 半径不一样 长轴和短轴
圆：circle 半径一样大
radial-gradient(circle at 50px 50px,red,yellow)
重复径向渐变：
repeating-radial-gradient(circle at 50px 50px,red,red 10px,blue 10px,blue 20px)半径长短：
closest-side：圆心到最近的边距离开始渐变过度
farthest-side：最远的边
radial-gradient(farthest-side at 50px 50px) ;
closest-corner：最近的角
farthest-corner：最远的角多张背景渐变：
先径向渐变再线性渐变
300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
