HTML5css3笔记整理,HTML5+CSS3学习笔记（完整）.docx

HTML +CSS

HTML

什么是网页

什么是HTML

网页的形成

网页是由网页元素组成，这些元素是利用HTML标签描述出来，然后通过浏览器解析来显示给用户的

前端人员开发代码 ---> 浏览器显示代码(解析、渲染) ---> 生成最后的Web页面

总结：

常用浏览器

WEB标准

HTML语法规范

HTML基本结构标签

HTML常用标签

标题标签： h1 ~ h6 ,文字大小，粗细，重要性递减

段落标签：

换行标签：
: 强制换行，为单标签，间隙没有段落的大

文本格式化标签

div 和 span

图像标签

超链接标签：

注释标签：

特殊字符

表格标签

表头单元格标签：

这些属性要写到表格标签 table 里面去

指的是一个单元格，可以理解为单元格中的那一行

列表标签：

无序列表：

有序列表：

ol 中只能放 li 标签，li 中可以放任意标签

自定义列表：

表单标签：

表单元素：

当为单选按钮和复选按钮时，如果想要实现多选一的效果，那么 几个单选框的name必须要一样

标签

表单元素：

文本域：

CSS第一天

2.1 css简介

2.2 css语法规范

2.3 css代码风格

2.4 css基础选择器

标签选择器：写上标签名

类选择器：

id选择器：

通配符选择器：

2.4 css字体属性

2.5 css文本属性

2.5 css内部样式表

2.6 Chorme调试工具使用

CSS第二天

3.1 Emmet语法(Vscode已经集成该语法)

3.2 css复合选择器

3.2 css的元素显示模式

转化原因：块元素可以控制宽度和高度，比如想要把a标签变大

行内元素可以在一行中放多个

简洁版小米侧边栏案例

3.3 css的背景

默认是 scroll 背景图像随着对象的内容滚动

注意：这里和字体属性的合并写法不一样，背景的复合写法可以不按顺序

CSS第三天

4.1 CSS三大特性

子元素根据父元素自动调整行高

4.2 盒子模型

比如在表格中，通过常规设置后相邻两个单元格的边框宽度会变为原来的2倍，通过 border-collapse：collapse使得相邻两边框合并在一起，边框宽度变得和原来一样宽

/*?a?属于行内元素?此时必须要转换为?行内块元素(可以设置高度和宽度了)?*/

但是在我的浏览器中行内元素设置了上下边距也同样起了效果

最下方的 | 可以放入 中，通过 font-style:normal 使之变得不倾斜

去掉 li 前面的项目符号(小圆点)，语法： list-style: none;

4.3 圆角边框

4.3 盒子阴影

4.3 文字阴影

4.4 CSS浮动

行内元素加了浮动之后，具备了行内块元素的特性，因此不需要再另外转化为行内

块，就可以设置宽度和高度了

通栏的盒子(和浏览器一样宽的盒子):不需要指定宽度，默认和浏览器一样宽

浮动的元素是不占有高度的

4.4 清除浮动

4.5 PS切图

安装完成后需要重启 PS ，然后在PS 的扩展功能中找就行了，具体操作

可查看 Cutterman官网

注意侧边导航栏 subnav 中的大于符号做法，让大于符号右浮动即可

前端开发>

注意：这里必须要清除浮动，因为上面的模块没有高度

.clearfix:before,.clearfix:after?{

????content:?"";

????display:?table;

}

?.clearfix:after?{

?????clear:both;

?}

?.clearfix?{

?????*zoom:1;

?}

4.6 定位

如果一个盒子既有 left 属性，也有 right 属性，则默认会执行 left 属性，同

理，同时有 top 和 bottom ，会执行 top

4.7 元素的显示和隐藏

C