《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) :空格
(2)<:小于号(little)
(3)>:大于号(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>
)
《Web前端开发之HTML+CSS精英课堂【渡一教育】》文档版笔记(完结)相关推荐
- web前端开发之div+css教程精华收集二
11个让你代码整洁的原则 http://www.xinran001.com/bbs/thread-73231-1-1.html HTML 实体字符 http://www.xinran001.com/b ...
- date javascript 时区_第23节 Datejs 日期库-Web前端开发之Javascript-零点程序员-王唯
Datejs 是一个开源的JavaScript库,用来解析.格式化和处理日期数据,支持多种语言的日期格式处理:官网:www.datejs.com/ Moment.js 是一个简单易用的轻量级JavaS ...
- Web前端开发之“常见模块你真的很了解吗?”
本文节选自<编写高质量代码--Web前端开发修炼之道 > 3.4 常见模块你真的很了解吗 3.4.1 标题和内容 标题和内容模块如图3-13 所示. 图3-13 标题和内容模块 这种标题配 ...
- Web前端开发之HTML篇
前端开发是用来设计给用户看的网页的部分,而Web前端开发则是通过创建Web页面来呈现给用户的过程,其包含了html(结构),css(样式),JavaScript(行为)三大部分.在本篇文章中,我主要对 ...
- Web前端开发之HTML语言
文章目录 一.前端语言功能介绍(HTML,CSS ,JavaScript作用) 1.1.HTML介绍 1.2.HTML的初始格式 1.2.2.初始标签 二.标签分类 2.1.单标签 2.2.双标签 三 ...
- Web前端开发之CSS学习笔记3—颜色和背景
目录 1.CSS的颜色表达 1.1前景色color 1.2背景色background-color 2.背景 2.1 background-image:url()设置背景图; 2.2 backgroun ...
- Web前端开发之CSS学习笔记8—居中和自适应
目录 1.居中 1.1水平居中 1.2垂直居中 2.单列布局自适应 3.双列布局自适应 3.1双列自适应 3.2半边固定半边自适应 3.三列布局自适应 3.1浮动法 3.2绝对定位法 3.3margi ...
- Web前端开发之CSS学习笔记10—栅格布局(网格布局)
目录 [网格布局grid] 1.网格布局的构成 2.父容器grid container 3.生成网格容器 display:grid/inline-grid 4.构建网格 grid-template-c ...
- Web前端开发之CSS学习笔记11—文本格式和动画设计
目录 1.文本对齐text -align 2.保留空白字符white-space 3.设置文本方向direction 4.设置文本缩进text-indent 4.设置字符间距letter-spacin ...
最新文章
- Karto的前端实现与解读
- 聊聊dubbo的Filter
- Flask abort
- 中国水处理行业十四五趋势规划与布局动态分析报告2022年
- thinkphp5 获取当前的域名
- HttpServletRequest说明
- 微信 php收藏功能实现,关于微信小程序收藏功能的实现
- Axure智慧水务移动端原型、智慧泵房、水厂监控、营收管理、DMA漏损、维护管理、GIS地图、水质监控、电商系统
- 【报告分享】数据大治理-毕马威阿里研究院.pdf(附下载链接)
- Tomcat安装后没有出现tomcat主页
- 【OpenCV学习】梯度化一张图片
- 工具解析:杀毒引擎惨遭打脸,黑帽大会爆惊天免杀工具
- IMU-Allan方差分析
- php反序列化漏洞实验,PHP反序列化漏洞简介及相关技巧小结
- 宁波计算机软件再好的大学是,浙江这些实力较强的大学,分数会不会虚高?
- 手工安装hr表+oracle,[20200825]手工安装HR schema.txt
- 电子文档秒变手写文字:这个工具绝了!!
- Word基础(八)带圈字符
- 如何在页面上预览word
- 音频剪辑软件哪款好用易操作?