目录
一、html5
1.常见的字符编码：
GB2312 中国的；GBK 中国扩充的； ASCII 美国的；UTF-8 万国码；ISO88591 欧洲的
2.meta标签:
设置网页的元数据，不会变的，给浏览器看的
属性值： charset:设置编码；description/name/content：页面描述；keyword：关键词；文档的作者、最后修改时间、其他元数据等；
做请求的重定向：http-equiv='refresh' content="秒数；url=目标路径” />
3.常用标签：
hgroup包裹一组相关的标题，例如：
<hgroup>
<h1>一级标题</h1>
<h2>二级标题</h2>
</hgroup><em></em>斜体标签；
<blockquote></blockquote>长引用，块元素，会换行；
<q></q>短引用，不换行；
<center></center>实现居中效果；
4.块元素和行内元素：
块元素一定占据一行；行内元素只占自身元素的大小；
行内元素不放块元素，除非转成块元素；
5.结构标签：
<main></main>页面主体部分标签；
<aside></aside>和主体相关的内容，侧边栏；
<article></article>文章；
<section></section>独立的标签，在其他的都不合适的时候；
<header></header>
<main>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
<div></div>
<span></span>
</main>
<footer></footer>6.列表：
注意：列表之间可以相互嵌套；
<ul type="square">
<ol>
<li></li>
<li>
</li>
</ol>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
<dl>
<!-- 下定义 -->
<dt>结构</dt>
<!-- 具体内容 -->
<dd>表示网页的结构</dd>
<dt>表现</dt>
<dd>对页面进行修饰</dd>
</dl>
7.img:
alt：可以用来设置在图片不能加载时，对图片的描述
搜索引擎可以通过alt属性来识别不同的图片
如果不写alt属性，则搜索引擎不会对img中的图片进行收录
<img
width="400px"
height="300px"
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fx0.ifengimg.com%2Fucms%2F2022_09%2FED3ADAAB7608B3A42AC1C8BA541E38C9AEB1233C_size71_w1200_h800.jpg&refer=http%3A%2F%2Fx0.ifengimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648535785&t=e8550f6fe1e0595c75361933f5891b66"
alt="乌克兰"
/>8.图片的格式：
JPEG(JPG)
- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
- 一般用来保存照片等颜色丰富的图片
GIF
- GIF支持的颜色少，只支持简单的透明，支持动态图
- 图片颜色单一或者是动态图时可以使用gif
PNG
- PNG支持的颜色多，并且支持复杂的透明，不支持动图
- 可以用来显示颜色复杂的透明的图片
专为网页而生的
webp
-谷歌新推出的专门用来表示网页的一种格式
-它具有其他图片格式的所有优点，而且文件格式还很小
-缺点：兼容性不好
base64
-讲图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入
-一般都是需要和网页一起加载的图片才会使用base64
网页加载流程：
第一次请求：加载网页本身
第二次之后请求，加载外部资源
9.iframe：
<iframe></iframe>属性：
src ：指向一个外部页面的路径，可以使用相对路径
frameborder 内联框架的边框
width：
height：
name ：可以为内联框架指定一个name属性
在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索
<iframe src="./03.列表.html" name="tom"></iframe>
<iframe src="https://www.baidu.com/" frameborder="0"></iframe>
<iframe src="https://www.w3school.com.cn/js/index.asp" width="600px" height="600px" frameborder="0"></iframe>10.音视频：
<audio></audio>属性（均不用给值）：
controls 是否允许用户播放
autoplay 打开页面时，是否自动播放
loop 是否循环播放
二、css
（一）复合选择器
1.交集选择器
div.red {
font-size: 24px;
}注意：如果交集选择器有元素选择器，元素选择器要放在前面
2.并集选择器（分组选择器）
h1,h3 {
color: yellowgreen;
}同时选择多个选择器对应的元素：例子：#b1,p,.red
(二)关系选择器
1.子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素>子元素{}
这里的子代是前面父级的第一层子代
2.后代选择器
作用：选中指定元素内的指定后代元素
语法：祖先 后代
3.相邻兄弟选择器
选择下一个兄弟(仅挨着我的)
语法：前一个+下一个{}
例子：p+span
4.通用兄弟选择器
选择下面所有的兄弟(前面的不选)
语法：兄～弟{}
例子：p～span
(三)属性选择器
语法：[属性名]{} 选择含有指定属性的元素
[属性名=属性值]{} 选择含有指定属性和属性值的元素
[属性名^=属性值]{} 选择属性值以指定值开头的元素
[属性名$=属性值]{} 选择属性值以指定值结尾的元素
[属性名*=属性值]{} 选择属性值含有某值的元素
<head>
<style>
p[title]{color: tomato;}
[title=abc]{font-size: 30px;}
[title^=ab]{color: blue;}
[title$=ab]{color: turquoise;}
[title*=c]{color: skyblue;}
</style>
<head>
<body>
<h1 title="a" >满江红·写怀</h1>
<h3 title="ab">岳飞·宋</h3>
<p>····</p>
<p title="abc">靖康耻，犹未雪。臣子恨，何时灭！</p>
<p title="abcdab">驾长车，踏破贺兰山缺。</p>
<p>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
<p>待从头、收拾旧山河，朝天阙。</p>
</body>(五)伪类选择器（:）
1.not伪类
去掉不想选择的元素
(六)伪元素选择器（::）
1.first-letter
第一个首字母
p::first-letter {
font-size: 24px;
}2.first-line
第一行
3.selection
在网页中，鼠标选中文本后，显示效果为蓝底白字，这个伪元素可以改变选中后的选择效果
(七)选择器的权重
内联样式 1000
id选择器 100
类和伪类选择器 10
元素选择器 1
通配符、子选择器、相邻选择器等。如*、>、+ 0000
继承的样式 没有优先级
!important 最高优先级
三、字体样式
1.em
相对于当前元素的大小来计算的，1em=1font-size
2.rem
相对于根元素（html）的字体大小计算
3.颜色
rgb（红色浓度，绿色浓度，蓝色浓度）可以取0-225，也可以用%；
也可以用十六进制：
0 1 2 3 4 5 6 7 8 9 a b c d e f
00 - ff
00表示没有，相当于rgb中的0
ff表示最大，相当于225
语法：#红色绿色蓝色;
红色：
#ff0000
像这种两位两位重复的颜色，可以简写
比如：#ff0000 可以写成 #f00
#abc #aabbcc
常用的十六进制颜色：#f00 红色 #f60 橘色 #ccc 灰色
#0f0 绿色 #000黑色 #fff 白色；
HSL值 HSLA值：
background-color: hsl(10, 100%,50%);H 色相 （0-360）hue [hju:]
S 饱和度 saturation [,sætʃə'reiʃən] 颜色浓度0%-100%
L 亮度 lightness [ˈlaɪtnəs] 颜色亮度0%-100%
A 透明度 alpha ['ælfə]
4.字体分类
设置哪种字体
@font-face {
/* 给字体起的名字 */
font-family: 'xiyangyagn';
/* 字体路径 */
src: url("./字体/ZCOOLKuaiLe-Regular.ttf");
}
span {
font-family:'xiyangyagn';
font-size: 40px;
}5.font-style：
可选值：
normal 默认值，文字正常显示
italic 文字斜体
olique 文字倾斜，与italic一般相同，一般用italic
6.font-variant
可选值：
small-caps 都以大写字母显示，但是本来大写的比本来小写要大
<p class="p2">我是一段文字，ABCDEFGabcdefg</p>效果如下
7.行高（line height）-
-文字占有的实际高度
* 使用line-height来设置行高
* 行高类似于我们上学单线本，单线本是一行一行，线与线之间的距离就是行高，
控制文字行与行之间的距离
* 网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示
—— 可接收的值：
1.直接就写一个大小，eg：22px
2.可以指定一个百分数，则会相对于字体去计算行高，eg：30%
3.可以直接传一个数值，则行高会设置字体大小相应的倍数，eg：2
—— 行高经常还用来设置文字的行间距
行高=上间距+文字高度+下间剧
行间距 = 行高 - 字体大小
8.text-transform
设置文本的大小写
可选值：
capitalize 单词的首字母大写，空格识别单词
uppercase 所有字母都大写
lowercase 所有字母都小写
2.text-decoration
可以用来设置文本的修饰
可选值：
none：默认值，不添加任何修饰，正常显示
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线
4.text-align
用于设置文本的对齐方式
可选值：
left 默认值，文本靠左对齐
right ， 文本靠右对齐
center ， 文本居中对齐
justify ， 两端对齐
- 通过调整文本之间的空格的大小，来达到一个两端对齐的目的
也可以让图片水平居中
5.vertical-align
设置元素垂直对齐的方式
可选值：
baseline 默认值 基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
应用：1:图文垂直对齐方式
2:图片三像素的问题
父元素如果不设置高，由图片撑开，此时图片的底部就会有三像素的空白
解决方式一：vertical-align属性值不为默认值
解决方式二：给图片转成块元素
解决方式三：给父元素设置font-size为0
注意 vertical-align 只对行内元素、行内块元素和表格单元格元素生效：不能用它垂直对齐块级元素。
6.多行省略
适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
注：
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
1901
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
