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