HTML与CSS基础总结

时间  2020-06-14
标签 html css 基础 总结 栏目 HTML 繁體版
原文   原文链接

HTML与CSS基础总结

一. 认识WEB

网页主要由文字、图像和超连接等元素构成。固然，除了这些元素，网页中还能够包含音频、视频以及Flash等html

1.浏览器的分类和内核

五大常见浏览器介绍：web

  1. IE （edge）（Trident） 👉 (blink)
  2. 火狐（firefox）（Gecko）
  3. 谷歌（chrome）（blink）
  4. 苹果（safari）（webkit）
  5. 欧朋（Opera）（blink 早期：presto ）

浏览器的内核至关于汽车的发动机，是最核心的存在,它负责将代码转换成用户眼中的界面chrome

查看统计网站浏览器

2.图解web标准

  • 添加入了 JS



二. HTML基础

1.文档类型<!DOCTYPE>

做用: 声明位于文档中的最前面的位置，处于 <html> 标签以前。此标签可告知浏览器文档使用哪一种 HTML 或 XHTML 规范。编辑器

2.页面语言lang

<html lang="en">  指定html 语言种类
复制代码

最多见的2个：ide

  1. en定义语言为英语
  2. zh-CN定义语言为中文

3. 字符集

<meta charset="UTF-8" />
复制代码

utf-8是目前最经常使用的字符集编码方式，经常使用的字符集编码方式还有gbk和gb2312。布局

  • gb2312 简单中文 包括6763个汉字 GUO BIAO
  • BIG5 繁体中文 港澳台等用
  • GBK包含所有中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312
  • UTF-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" />
复制代码

**总结： **

  1. base 能够设置总体连接的打开状态
  2. base 写到 <head> </head> 之间
  3. 把全部的链接 都默认添加 target="_blank"

7.特殊符号

一些特殊的符号，咱们再html 里面很难或者 不方便直接 使用， 咱们此时可使用下面的替代代码

显示结果 描述 实体名称
空格 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
× 乘号 &times;
¥ 元（yen） &yen;
© 版权（copyright） &copy;
™ 商标 &trade;
® 注册商标 &reg;



三. CSS选择器

1.三种样式表总结

样式表 优势 缺点 使用状况 控制范围
行内样式表 书写方便，权重高 没有实现样式和结构相分离 较少 控制一个标签（少）
内部样式表 部分结构和样式相分离 没有完全分离 较多 控制一个页面（中）
外部样式表 彻底实现结构和样式相分离 须要引入 最多，强烈推荐 控制整个站点（多）

2.CSS基础选择器

①标签选择器

②类选择器

③id选择器

④通配符选择器

基础选择器总结

选择器 做用 缺点 使用状况 用法
标签选择器 能够选出全部相同的标签，好比p 不能差别化选择 较多 p { color：red;}
类选择器 能够选出1个或者多个标签 能够根据需求选择 很是多 .nav { color: red; }
id选择器 一次只能选择器1个标签 只能使用一次 不推荐使用 #nav {color: red;}
通配符选择器 选择全部的标签 选择的太多，有部分不须要 不推荐使用 * {color: red;}

3.font字体

属性 表示 注意点
font-size 字号 咱们一般用的单位是px 像素，必定要跟上单位
font-family 字体 实际工做中按照团队约定来写字体
font-weight 字体粗细 记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位
font-style 字体样式 记住倾斜是 italic 不倾斜 是 normal 工做中咱们最经常使用 normal
font 字体连写 1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现

4.CSS外观属性总结

属性 表示 注意点
color 颜色 咱们一般用 十六进制 好比 并且是简写形式 #fff
line-height 行高 控制行与行之间的距离
text-align 水平对齐 能够设定文字水平的对齐方式
text-indent 首行缩进 一般咱们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration 文本修饰 记住 添加 下划线 underline 取消下划线 none

5.连接伪类选择器

  • a:link /* 未访问的连接 */
  • a:visited /* 已访问的连接 */
  • a:hover /* 鼠标移动到连接上 */
  • a:active /* 选定的连接 */

6.复合选择器总结

①后代选择器

②子元素选择器

③交集选择器

④并集选择器

复合选择器总结

选择器 做用 特征 使用状况 隔开符号及用法
后代选择器 用来选择元素后代 是选择全部的子孙后代 较多 符号是空格 .nav a
子代选择器 选择 最近一级元素 只选亲儿子 较少 符号是**>** .nav>p
交集选择器 选择两个标签交集的部分 既是 又是 较少 没有符号 p.one
并集选择器 选择某些相一样式的选择器 能够用于集体声明 较多 符号是逗号 .nav, .header
相邻元素选择器 选择相邻兄弟元素的下一个元素 相邻兄弟后的下一个元素 较少 ul+h2
同辈元素选择器 选择相邻兄弟的全部元素 相邻兄弟的全部元素 较少 prev~sibings
连接伪类选择器 给连接更改状态 较多 重点记住 a{} 和 a:hover 实际开发的写法

7.背景总结

属性 做用 值
background-color 背景颜色 预约义的颜色值/十六进制/RGB代码
background-image 背景图片 url(图片路径)
background-repeat 是否平铺 repeat/no-repeat/repeat-x/repeat-y
background-position 背景位置 x和y坐标
background-attachment 背景附着 fixed(背景固定)
背景简写 书写更简单 背景颜色,背景图片地址,背景平铺,背景滚动,背景位置
背景色半透明 背景颜色半透明 background:rgba-(0,0,0,0.3);后面必须是4个值



四. 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.优先级

选择器 选择器权重
继承 或者 * 0，0，0，0
元素选择器 0，0，0，1
类选择器，伪类选择器 0，0，1，0
ID选择器 0，1，0，0
行内样式style="" 1，0，0，0
!important 重要的 无穷大

若是盒子里的图片大于盒子宽高, 那么设置图片的宽为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中,新增了盒子阴影,这样咱们的盒子就能够添加阴影。image-20200610093824503

语法:

box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 10px 10px 14px rgba(0,0,0,.3) 复制代码
值 描述
h-shadow 必需。水平阴影的位置。容许负值
v-shadow 必需。垂直阴影的位置。容许负值
blur 可选。阴影的尺寸,虚影
color 可选。阴影的颜色
inset 可选。将外部阴影改成内部阴影,不经常使用!

注意：

  • 默认的是外阴影(outset),可是不能够写这个单词,不然致使阴影无效
  • 盒子阴影 不占用空间，不会影响其余盒子排列

②文字阴影

在CSS3中,咱们可使用text-shadow属性应用于文本

语法:

text-shadow: h-shadow v-shadow blur color;
复制代码
值 描述
h-shadow 必需。水平阴影的位置。容许负值
v-shadow 必需。垂直阴影的位置。容许负值
blur 可选。模糊的距离。
color 可选。阴影的颜色
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程