《Web前端开发之HTML+CSS精英课堂【渡一教育】》文档版笔记（完结）

116 阅读 0 评论 77 点赞

我是靠谱客的博主顺利台灯，最近开发中收集的这篇文章主要介绍《Web前端开发之HTML+CSS精英课堂【渡一教育】》文档版笔记（完结），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

这个笔记本来是想先上文档版的，但由于里面有些标签会导致显示不出来，所以之前只上了个思维导图版的。
时隔好久，想发篇markdown版的博文时，一进来就看见这篇文档版的草稿，顺便学下markdown的写法，也补上上文档版的笔记。
笔记较多也较零碎，但是渡一的课程质量真的是杠杠的（哈哈哈！我是渡一忠实粉！），所以还是建议大家直接去看课程的好。

（js的课程还在学习中，后期也会整理出文档版和思维导图版笔记的，希望能给大家带来帮助，如有描述不当的地方，欢迎指出~ ^ _ ^）

课程链接：https://ke.qq.com/course/231570
思维导图版笔记：https://blog.csdn.net/weixin_43494837/article/details/88774396

文档版：

一、html初级篇

1．html：hyperText markup language，超文本标记语言
2．<meta charset = “utf-8”>
（1）charset：编码
① utf-8：万国码，包括所有国家的语言，8bit
② gb2312：国家标准码，不包括繁体
③ gbk：国家标准扩展码，包括繁体

3．<html lang = “en, ch”>
（1）lang：语言，为爬虫而标识
① en：英文
② ch：中文
4．基本标签
（1）<p>：段落标签，成段
（2）<h1>~<h6>：标题，成段，更改字体大小，加粗
（3）<strong>：加粗
（4）<em>：斜体
（5）<del>：删除线
（6）<address>：地址，成段，斜体
5．容器
（1）<div>：成段
（2）<span>：无效果
（3）作用：结构化，捆绑操作

二、html进阶篇

1．<div>里一个单词（没有空格）不换行，会溢出（文字超出div的框）
2．&打头：
（1）&nbsp：空格
（2）&lt：小于号（little）
（3）&gt：大于号（great than）
3．<br>：换行
4．标签分类
（1）单标签：不需要修饰，自己带有功能（<meta> <br> <hr>）
（2）双标签：包裹东西，修饰东西
5．列表
（1）有序列表

<ol	type = “a”				// 序号为小写字母
reversed = “reversed”		// 排列为倒序
start = “8”>				// 排序起始位置

（2）无序列表

<ul	type = “disc”>				// 序号为实心圆
  			square				// 	方块
  			circle				//	圈（空心）

6．<img>
（1）alt 图片占位符
（2）title 图片提示符
7．<a>
href：hyperText reference，超文本引用
作用：
①超链接
②锚点（本页目录跳转）
③打电话 tel
④发邮件 mailto
⑤协议限定符 javascript:
8．<form> 传送数据必须：数据名、数据值
9．产品吸引注意力的3个特点
（1）刚需
（2）用户体验
（3）用户粘性（懒惰性），如默认选中
10．编程模式
结构（html）、行为（js）、样式（css）相分离
11．浏览器
（1）浏览器 = shell（外壳）+ 内核
（2）主流浏览器
①条件
1）在市场上有一定的份额
2）有自己研发的内核
②包括

1）IE						trident
2）Firefox					Gecko
3）Google chrome			Webkit（旧） / blink（新）
4）Safari					Webkit
5）Opera					presto

12．注释 
作用：
①备注
②调试

三、css初级篇

1．css：cascading style sheet，层叠样式表
2．引入css
（1）行间样式 style = “ ”
（2）页面级 <style> </style>
（3）外部文件 <link rel=”stylesheet” href=””style.css> ，同时（异步）加载
3．css选择器

（1）Id选择器			#（井号）
（2）class选择器			.（点）
（3）标签选择器			（标签名）
（4）通配符选择器			*（星号）
（5）属性选择器			[]（中括号）

四、css复杂选择器，权重计算问题，基础属性

1．复杂选择器
（1）父子选择器 / 派生选择器空格
（2）直接子元素选择器（直接下一级） >
（3）并列选择器
（4）分组选择器（多个标签共用）
2．字体
Arial 通用字体，乔布斯发明
3．color
（1）土鳖式纯英文单词：只能测试用
（2）颜色代码 #
（3）颜色函数 rgb( , , )
（transparent：透明色）
4．css权重

（1）!important							infirity（无穷）
（2）行间样式								1000（256进制）
（3）id选择器							100（256进制）
（4）class选择器|属性选择器|伪类（:）选择器	10（256进制）
（5）标签选择器|伪元素（::）选择器			1（256进制）
（6）通配符选择器							0（256进制）

五、css企业开发经验、习惯，盒子模型，层模型

1．开发经验
（1）垂直居中（单行）：文本高度line-height = 容器高度height
（2）1 em = 1 font-size
2．元素分类
（1）inline 行级元素
① 包括

<span> <strong> <em> <a> <del>

② 特点内容决定元素所占位置
不可以通过css改变宽高
（2）block 块级元素
① 包括

<div> <p> <ul> <li> <ol> <form> <addredd>

② 特点独占一行
可以通过css改变宽高
（3）inline-block 行块级元素
① 包括

<img>

② 特点内容决定元素所占位置
可以通过css改变宽高

3．盒子模型
（1）border 盒子壁 + padding 内边距 + content（width + height）盒子内容

（2）magin / padding内容
①上|右|下|左 ②上|左右|下 ③上下|左右
（3）触发盒子的bfc
① bfc ： block format context
② 方法
1） position: absolute
2） display: inline-block
3） float: left / right
4） overflow: hidden
使用1）和3）时，浏览器内部会给盒子自动加上2）
4．层模型 position
（1）absolute
① 脱离原来位置进行定位
② 相对于最近的有定位的父级进行定位，否则相对于文档进行定位
（2）relative
① 保留原来位置进行定位（灵魂出窍）
② 相对于自己原来的位置进行定位
一般用relative进行参照，再用absolute进行定位
5．浮动模型 float
（1）浮动元素产生了浮动流
① 产生了浮动流的元素，块级元素看不到
② 产生了bfc的元素和文本类属性的元素以及文本，都能看到浮动元素
（2）清除浮动流 clear
生效条件：只作用于块级元素

六、css高级篇

1．伪元素
（1）::before
（2）::after
天生是行级元素，必填属性content
2．溢出容器，打点展示
（1）单行文本（三件套）
① white-space: nowrap
② overflow: hidden
③ text-overflow: ellipsis
（2）多行文本
① 后端估算返回（为适应旧浏览器）
② 前端只做截断（hidden），不做打点
3．图片代替文字（网速低于20k时，浏览器会屏蔽css和js）
（1）方法一
text-indent > width
white-space: nowrap
overflow: hidden
（2）方法二
height: 0
padding-top = 图片的height
overflow: hidden
4．公司规定
（1）行级元素只能嵌套行级元素（但<a>不能嵌套<a>）
（2）块级元素可以嵌套任何元素（但<p>不能嵌套<div>）