html5和css基础知识
目录
一、html5
1.常见的字符编码：
2.meta标签:
3.常用标签：
4.块元素和行内元素：
5.结构标签：
6.列表：
7.img:
8.图片的格式：
9.iframe：
10.音视频：
二、css
（一）复合选择器
1.交集选择器
2.并集选择器（分组选择器）
(二)关系选择器
1.子元素选择器
2.后代选择器
3.相邻兄弟选择器
4.通用兄弟选择器
(三)属性选择器
(五)伪类选择器（:）
1.not伪类
(六)伪元素选择器（::）
1.first-letter
2.first-line
3.selection
(七)选择器的权重
三、字体样式
1.em
2.rem
3.颜色
4.字体分类
5.font-style：
6.font-variant
7.行高（line height）-
8.text-transform
2.text-decoration
4.text-align
5.vertical-align
6.多行省略
一、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中的图片进行收录
<imgwidth="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 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
html5和css基础知识相关推荐
- css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
- HTML+CSS基础知识简单版
HTML+CSS基础知识简单版 一.HTML概述 HTML:超文本标记语言,其实就是用来开发网页的一门语言: CSS:层叠样式表,可以用于渲染网页.美化网页.做网页. 1.HTML介绍 HTML:超文 ...
- HTML+CSS基础知识5
HTML+CSS基础知识5 30.`<strong>`.`<em>`和`<b>`.`<i>`标签的区别 31.引用标签 32.iframe嵌套页面 33 ...
- HTML+CSS基础知识3
HTML+CSS基础知识3 15.css选择器 16.css的继承 17.css优先级 18.css盒子模型 19.css标签分类 20.显示框类型 21.标签的嵌套规范 22.溢出隐藏 23.透明度 ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
- HTML/CSS基础知识（四）
WEB标准和W3C的理解与认识 Web标准是一系列标准的集合. 网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior). 对应的标准也分三方面:结 ...
- html css基础知识
1 这是自己学习html时候做的一些记录,供大家参考 <!-- 2 块和内联3 块元素:独占一行的元素4 div p h ul5 div没有任何语义,就是一个纯粹的快元素6 就是为了方便布局7 ...
- CSS基础知识（一）：选择器
文章目录 前言 一.CSS基础知识 二.选择器 1.选择器 2.基础选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.4 通配符选择器 2.5 基础选择器总结 3.复合选择器 3. ...
- CSS基础知识---三种选择器
CSS基础知识---三种选择器 选择器 标签选择器 id选择器 class选择器 全部代码 选择器 标签选择器 id选择器 class选择器 标签选择器 选择器优先级:id>class>标 ...
- CSS基础知识（定位）
CSS基础知识 CSS布局的三种机制 普通流(标准流) 浮动 定位 定位模式 静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 边偏移 定位 ...
最新文章
- django框架使用mysql报错,及两种解决方法
- Netty 入门示例
- 「大数据概述四」数据中台建设
- python 怎么调用 矩阵 第几行_第58集 python机器学习：混淆矩阵精度指标
- mysql 启动 内存_mysql启动内存的疑问
- 英语单词辨异 —— 容易理解错的单词
- 常用的python内置方法
- PuTTY怎么读，PuTTY怎么发音，PuTTY的发音
- Ubuntu20.04安装mujoco
- 中华石杉互联网Java进阶面试训练营【全网发布ing】
- Android开发-基本概念小整理(四)为了面试的小伙伴们所准备~~
- Mysql的分组函数
- 电脑PHP动画制作画板,涂鸦板简单实现 Html5编写属于自己的画画板
- 专家修炼-学习的方法
- ABAP 设置鼠标光标
- vue实现循环滚动图片
- 微信小程序图片放大预览效果的实现，轮播图点击放大预览
- SQL 20008 加密函数
- 基于构件技术的流程银行,再造核心竞争力
- Python之服务巡检