最全HTML与CSS基础总结，不进来看看吗？
原创最全HTML与CSS基础总结，不进来看看吗？
原创
HTML与CSS基础总结
一. 认识WEB
1.浏览器的分类和内核
2.图解web标准
二. HTML基础
1.文档类型
2.页面语言lang
3. 字符集
4.标签语义化
5.锚点定位
6.base 标签
7.特殊符号
三. CSS选择器
1.三种样式表总结
2.CSS基础选择器
3.font字体
4.CSS外观属性总结
5.链接伪类选择器
6.复合选择器总结
7.背景总结
四. CSS的三大特性
1.层叠性
2.继承性
3.优先级
五. CSS布局问题与边框阴影样式
1.外边距合并
2.圆角边框
3.盒子阴影和文字阴影
一. 认识WEB
网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等
1.浏览器的分类和内核
五大常见浏览器介绍：
IE （edge）（Trident） 👉 (blink)火狐（firefox）（Gecko）谷歌（chrome）（blink）苹果（safari）（webkit）欧朋（Opera）（blink 早期：presto ）
本次给大家推荐一个免费的学习蔻qun，前面603 中间985最后993，
里面概括应用网站开发，css，html，JavaScript，jQuery，Vue、Ajax，node，
angular等。对web前端开发技术感兴趣的同学，
不管你是小白还是大牛我都欢迎，每天技术分享。
浏览器的内核相当于汽车的发动机，是最核心的存在,它负责将代码转换成用户眼中的界面
查看统计网站
2.图解web标准
添加入了JS
二. HTML基础
1.文档类型<!DOCTYPE>
作用: 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
2.页面语言lang
<html lang="en"> 指定html 语言种类
最常见的2个：
en定义语言为英语
zh-CN定义语言为中文
3. 字符集
<meta charset="UTF-8" />
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。
gb2312 简单中文 包括6763个汉字 GUO BIAOBIG5 繁体中文 港澳台等用GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312UTF-8则基本包含全世界所有国家需要用到的字符这句代码非常关键， 是必须要写的，否则可能引起乱码的情况
作用: 这句话是让 html 文件是以 UTF-8 编码保存的, 浏览器根据编码去解码对应的html内容
4.标签语义化
一个需求可以用不同的标签来完成，那么这之间有什么区别呢？一个是标签语义强，起强调作用。一个是没有语义，没有强调作用
语义好的网页更受SEO的喜欢，在搜索引擎里面的排名会更靠前
SEO优化 ===> 在输入关键字的时候，搜索引擎会罗列很多很多的网页出来，而用户基本习惯都是点前面的网页，不会去点后面的网页，所以如果网页在搜索引擎中的排名更加靠前，那么自然而然会带来更多的用户点击访问。
如何优化（了解）：
1.花钱买关键字 见效快，花钱多
2.让页面更加规范，语义更加明确（在合适的地方使用合适的标签）
作用: 根据标签的语义，在合适的地方给一个最为合理的标签，让结构更清晰。
5.锚点定位
通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：
<!--1.使用<a href="#id名">链接文本</a>点击,锚点到对应的位置 -->
<a href="#two"> 点击进行锚点跳转 </a>
<!-- 2.使用相应的id名标注跳转目标的位置 -->
<h3 id="two">锚点目标</h3>
6.base 标签
<base target="_blank" />
**总结： **
base 可以设置整体链接的打开状态
base 写到 之间
把所有的连接 都默认添加 target="_blank"
7.特殊符号
一些特殊的符号，我们再html 里面很难或者 不方便直接 使用， 我们此时可以使用下面的替代代码
三. CSS选择器
在这里插入图片描述
1.三种样式表总结
2.CSS基础选择器
①标签选择器
②类选择器
③id选择器
④通配符选择器
基础选择器总结
3.font字体
4.CSS外观属性总结
5.链接伪类选择器
a:link /* 未访问的链接 /
a:visited / 已访问的链接 /
a:hover / 鼠标移动到链接上 /
a:active / 选定的链接 */
6.复合选择器总结
①后代选择器
②子元素选择器
③交集选择器
④并集选择器
复合选择器总结
7.背景总结
四. CSS的三大特性
CSS有三个非常重要的三个特性：层叠性、继承性、优先级
1.层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠) 另一个冲突的样式, 层叠行主要解决冲突的问题
层叠性原则：
样式冲突, 遵循的原则就是就近原则, 哪个样式离结构进, 就执行哪个样式样式不冲突, 不会层叠
2.继承性
CSS中的继承：子标签会继承父标签的某些样式, 如文本颜色和字号。
简单的理解就是：子承父业
恰当地使用继承可以简化代码，降低CSS样式的复杂性子元素可以继承父元素的样式( text- ,font- , line- 这些元素的开头可以继承,以及color属性)
行高的继承性
body {
font:12px/1.5 Microsoft YaHei;
}
如果子元素没有设置行高，则会继承父元素的行高为1.5
此时子元素的行高是：当前元素文字大小 * 1.5
body行高 1.5 这样最大的优势就是里面子元素可以根据自己文字大小自动调整行高
3.优先级
如果盒子里的图片大于盒子宽高, 那么设置图片的宽为100%
五. CSS布局问题与边框阴影样式
1.外边距合并
1.1相邻元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时,如果上面元素有下边距margin-bottom下面的元素有上外边距margin-top，则他们呢的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为,相邻块元素垂直外边距的合并（也称外边距塌陷）
解决方案：尽量只给一个盒子添加margin值。
1.2 嵌套块元素垂直外边距的合并（塌陷）
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距
父元素和子元素的上外边距和发生合并
合并后的外边距为: 取两者外边距较大者
解决方案：
①、可以为父元素定义上边框
②、可以为外父元素定义上内边距
③、可以为父元素添加 overflow:hidden
2.圆角边框
在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。
border-radius属性用于设置元素的外边框圆角
border-radius:length;
参数可以为数值或百分比如果是正方形,想要按设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写50%如果是个矩形，设置高度的一般就可以做该属性是一个简写属性，可以跟四个值，分别是左上角、右上角、右下角、左下角分开写：border-top-left-radius、border-top-right-radius·····
3.盒子阴影和文字阴影
①.盒子阴影
在CSS3中,新增了盒子阴影,这样我们的盒子就可以添加阴影。
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 10px 10px 14px rgba(0,0,0,.3)
注意：
默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效
盒子阴影不占用空间，不会影响其他盒子排列
②文字阴影
在CSS3中,我们可以使用text-shadow属性应用于文本
语法:
text-shadow: h-shadow v-shadow blur color;
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。