目录
一、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 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。