Web前端基础回顾（HTML、CSS）
目录
- Web开发
- HTML
- 常用标签介绍
- 表单
- CSS
- 样式及选择器分类
- 标签分类及嵌套
- 尺寸及颜色表示
- 盒模型
- 布局方式
- 背景属性
- CSS文本属性
Web开发
网页，交由浏览器运行的程序
组成：HTML CSS JavaScript
开发前准备：
- 编辑器：Vscode、Pycharm、Sublime、NotePad、EditPlus…
- 运行环境：浏览器 Chrome Firefox
- 调试工具：浏览器自带开发者工具
浏览器分类：
- 按照浏览器内核（引擎）：Chrome Firefox Safari IE/Edge Opera
HTML
- 超文本标记语言，通过标签/标记的形式书写网页结构并且填充内容
- 标签分类
- 双标签：<标签名>标签内容
eg. - 单标签：<标签名> 只有开始，没有结束，允许手动添加‘/’表示闭合
eg.
- 语法规则
（1）标签不区分大小写，推荐全小写
（2）双标签如果少闭合，浏览器会自动添加闭合标签
（3）浏览器只能识别标签，如果写在html标签外部的内容，都不识别，会原样输出到窗口中
（4）浏览器会忽略代码中多余的换行和空格，一律解析为一个空格字符
<html>
<head>
<title>我的第一个网页title>
<meta charset="utf-8">
<meta name="Generator" content="">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
head>
<body>
网页主体：所有给用户看的内容都应该写在body中，会渲染在浏览器窗口中
body>
html>
常用标签介绍
- 段落
- 标题
- 普通文本
- 格式
- 列表标签
- 图片与超链接
- 表格
<h1 align="center">一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>五级标题h5>
<h6>六级标题h6>
<h7 aa="bb">自定义h7>
<p>段落文本p>
<span>spanspan>
<label>labellabel>
<b>bold加粗b>
<br>
<hr>
<strong>strong加粗strong>
<i>italic斜体i>
<u>underline下划线u>
<--'<'
>--'>'
©--版权符号©
¥--人民币符号‘￥’
--空格
<div>导航栏div>
<div>页面主体div>
<div>页面底部div>
<ol type="a">
<li>list item1li>
<li>list item2li>
ol>
<ul type="XXX">
<li>list item1li>
<li>list item2li>
ul>
<ul>
<li>
西游记
<ol>
<li>大师兄li>
<li>二师兄li>
<li>沙师弟li>
<li>唐僧li>
ol>
li>
ul>
<img src="happy.jpg" width="300px">
<img src="happy.jpg" width="300px" height="300px">
<a href="04_img.html" target="_blank">图片文件a>
<a href="http://www.baidu.com">百度a>
<a href="04_img.html">
<img src="happy.gif">
a>
<a href="">a>
<a href="#">a>
<a href="javascript:void(0)">a>
<a href="#5">点击跳转至页面指定位置a>
<a name="5">跳转至此处a>
<table border="1px" width="500px" height="500px">
<tr>
<th>姓名th>
<th>年龄th>
<th>班级th>
tr>
<tr>
<td>老齐td>
<td>30td>
<td>001td>
tr>
<tr>
<td>小泽td>
<td>32td>
<td>002td>
tr>
table>
<table border="1px" width="300px" height="300px">
<tr>
<td colspan="2">示例td>
<td>示例td>
tr>
<tr>
<td>示例td>
<td rowspan="2">示例td>
<td>示例td>
tr>
<tr>
<td>示例td>
<td>示例td>
tr>
table>
<table border="1px" width="300px" height="300px">
<thead>
<tr>
<th>姓名th>
<th>年龄th>
tr>
thead>
<tfoot>
<tr>
<td colspan="2">合计：td>
tr>
tfoot>
<tbody>
<tr>
<td>LQtd>
<td>30td>
tr>
<tr>
<td>LQtd>
<td>30td>
tr>
tbody>
table>
表单
- 表单用于采集用户信息并且提交给服务器
- 组成：
- 表单元素（form）：负责提交数据
- 表单控件：采集信息
<form action="/login" method="get" enctype="">
<p>
用户姓名：<input type="text" name="uname" placeholder="请输入用户名">
p>
<p>
用户密码：<input type="password" name="upwd">
p>
<p>
用户性别：
<input type="radio" name="gender" value="boy" checked="checked">男
<input type="radio" name="gender" value="girl">女
p>
<p>
兴趣爱好：
<input id="dance" type="checkbox" name="hobby" value="dance">
<label for="dance">蹦迪label>
<input id="rap" type="checkbox" name="hobby" value="rap">
<label for="rap">raplabel>
<input id="spa" type="checkbox" name="hobby" value="spa" checked>
<label for="spa">保健label>
p>
<p>
用户头像：
<input type="file" name="uimg">
p>
<p>
<input type="hidden" name="uid" value="001">
p>
<p>
所在地址：
<select name="city">
<option value="bj">北京option>
<option value="sh">上海option>
<option value="gz">广州option>
<option value="sz">深圳option>
select>
p>
<p>
个人介绍：
<textarea name="uinfo">textarea>
p>
<p>
<input type="submit" value="注册">
<input type="reset" value="重置">
<input type="button" value="点击">
p>
<button>form内button>
form>
<button>form外button>
CSS
样式及选择器分类
- 层叠样式表，实现网页布局及元素样式的设置
- 使用方式
1）行内样式：
- 借助style标签属性，书写样式声明
- 样式代码：
css属性名：属性值； - 常用属性：
font-size设置字体大小，取像素值，默认16px
color设置文本颜色，取颜色值
background-color设置背景颜色
例如：
<h1 style="color:red;background-color:green;">小泽h1>
2）内嵌样式表
- 使用
书写样式代码，实现结构与样式的分离，使用选择器匹配文档中的元素并设置样式
选择器：根据标签名，属性值或层级结构查找对应元素
选择器{
属性：值；
}
例如：标签选择器，根据标签名匹配元素
<style>
h2{
color:orange;
font-size:32px;
}
style>
3）外链样式表
- 创建样式表文件（.css），使用选择器匹配元素应用样式。
- 在HTML文件中使用
- 样式表特点
1）层叠性：多个样式共同作用于同一个元素
2）继承性：子元素可以继承父元素或祖先元素的文本样式
注：超链接的文本色需要自行设置
3）优先级：发生样式冲突时考虑优先级，优先级高用谁
优先级划分：
- 行内样式的优先级最高
- 选择器样式优先级一致，发生样式冲突时，看样式代码的书写顺序，后来者居上
- 浏览器默认样式和继承样式优先级最低
4. 选择器分类
- 标签选择器：根据标签名匹配元素，应用样式，如：h1{ }
- id选择器：根据id属性值匹配唯一的元素
<style>
#d1{
}
style>
<h1 id="d1">h1>
- 类选择器：根据class属性值匹配元素，允许重复使用类名，实现样式的复用
特殊：
【1】class属性可以设置多个值，使用空格隔开。如：class=“c1 c2 c3”
【2】选择器可以组合使用，常见：标签选择器与类选择器组合使用。如：p.c1{ }
<style>
.c1{
}
.c2{
/*设置文本的水平对齐方式，默认居左*/
text-align:center;
}
/*选择器组合使用*/
p.c1{/*匹配类名为c1的p元素*/
}
style>
<h1 class="c1 c2">示例文本h1>
<p class="c2">示例文本p>
- 群组选择器：为一组元素统一设置样式
selector1,selector2{ }
<style>
#d1,.c2,p{
font-size:20px;
}
style>
-
后代选择器：在选择器1中查找所有满足选择器2的后代元素
selector1 selector2{ } -
子选择器：在选择器1中查找所有满足选择器2的直接子元素
selector1>selector2{ } -
伪类选择器：伪类用于表示元素的某种状态，必须和基础选择器结合使用
分类：
（1）超链接伪类选择器
:link 访问前
:visited 访问后
补充：a{text-decoration:none; /*取消超链接默认下划线*/}
（2）动态伪类
:hover 鼠标滑过（悬停）
:active 鼠标点按（激活）
（3）表单控件状态
:focus 输入框的焦点状态
input:focus{
/*取消输入框在焦点状态下的轮廓线*/
outline:none;
}
（4）子元素过滤选择器
:last-child：匹配最后一个子元素
:first-child：匹配第一个子元素
:nth-child(n)：匹配第n个子元素
- 选择器的优先级
- 相同类型的选择器发生样式冲突，后来者居上
- 不同类型的选择器发生样式冲突，看权重，权重越高，优先级越高
标签选择器 1
类/伪类 10
id选择器 100 - 后代选择器，子代选择器的权重由各个选择器的权重累加计算
#box span{} /*100+1*/
#box>h1.c1{} /*100+1+10*/ - 群组选择器的权重由各个选择器单独计算
标签分类及嵌套
- 标签分类
- 块元素（h1~h6、p、div、ul、ol、li、form、table、body）
- 独占一行，不与其他元素共行
- 可以手动设置宽高
- 默认情况下宽度与父元素保持一致
- 行内元素（a、b、strong、label、span）
- 允许共行显示，不能手动调整宽高。尺寸由内容决定
- 行内块元素（input、img、button）
- 既能共行显示，又可以设置宽高
注： 行内元素与行内块元素默认按照文本的基础线对齐，可以设置vertical-align设置元素之间的垂直对齐方式，取top/middle/bottom添加给行内块元素上，调整左右元素与当前元素的垂直对齐。
- 标签嵌套
- 块元素中可以嵌套任意类型的标签
注意：p标签中只能嵌套行内或者行内块元素，不能嵌套块元素 - 行内元素中尽量只嵌套行内或行内块元素
尺寸及颜色表示
- 尺寸单位
px：默认单位，指定像素值
%：百分比，参照父元素对应属性值进行计算
em：相对单位，表示字体大小，参照父元素的字体大小进行计算。默认1em = 16px
rem：参照根元素的字体大小计算 - 颜色表示
1）英文单词
2）rgb(r,g,b)使用三原色设置颜色，每种颜色取值0~255，值越大越饱和
3）rgba(r,g,b,alpha)使用三原色设置，并且可以设置透明度，alpha取值0（透明）~1（不透明），取小数设置半透明。特殊值：rgb(0,0,0) 黑；rgb(255,255,255) 白 ；rgb(0,0,0,0) 透明色，最后一项是0即可（transparent也是透明的意思）
4）十六进制表示颜色
十六进制以#为前缀，每两位为一组代表一种三原色，三原色取值0~255，转换十六进制00 ~ff。十六进制中每位字符的取值范围：0 ~ 9，a ~ f
特殊值：#000000 黑 #ffffff 白
短十六进制：由三位组成，代表三原色。浏览器会自动对每一位进行重复，补全成6位十六进制
#000 --> #000000
#fff --> #ffffff
#0f0 --> #00ff00
盒模型
- 元素是由各种框组成的（内容框、边框、边距），为元素设置尺寸，边框和边距，会影响元素在文档中的实际尺寸，影响布局
- 内容框设置
1）大部分元素在设置weight/height时，指定的就是内容框大小（button设置的是加border及其内部的大小）
2）内容溢出：元素内容超出元素设置的尺寸，可以使用属性overflow处理溢出
overflow：visible（默认值，溢出可见）；hidden（隐藏，类似于裁剪）；scroll（强制在水平和垂直方向加可用的滚动条）；auto（自动在发生溢出的方向添加可用的滚动条） - 边框设置
1）边框设置
border: width style color;
边框样式（border-style）可取：solid 实线 ； dotted 点线； dashed 虚线； double 双线
2）单边框设置
border-top 上边框/border-bottom 下边框/border-left 左边框/border-right 右边框
取值: width style color;
3）网页三角标制作- 设置宽高为0
- 统一设置四个方向透明边框
- 调整某个方向边框可见
特殊：行内元素拼接三角标时，默认不能手动调宽高，自带高度（由字体大小决定），可以设置font-size:0；或者去掉默认高度；或者转换元素类型，转换成块元素/行内块元素 设置尺寸为0。
转换元素类型：
-
属性display
-
取值：block（块元素）、inline（行内元素）、inline-block（行内块元素）、none（元素隐藏）
4）轮廓线：轮廓线在文档中不占位，边框是实际占位的。
outline：width style color；
常用：outline:none(取消文本框焦点状态下的边框)5）边框圆角
属性：border-radius设置圆角半径
取值：像素值/百分比（分别按照元素的宽高t计算取值）
使用：常用像素值设置四个角的圆角效果；使用50%调整元素的显示形状（正圆或椭圆）6）盒阴影
属性：box-shadow
取值：offsetX offsetY blur（speed）color
网页坐标系：一律以左上角为原点，向右向下分别为X轴和Y轴的正方向
属性值：
offsetX/offsetY：设置阴影的偏移距离
blur：设置阴影的模糊程度，取像素值，越大越模糊
spread：选填，设置阴影的延伸距离
color：设置阴影颜色，默认为黑色
-
内边距设置
设置内容框与边框之间的距离
属性：padding
取值：像素值
取值规律：
1）50px 统一设置四个方向的内边距
2）50px 20px 分别设置上下 左右的内边距
3）10px 20px 30px 分别设置上、右、下，缺省方向与右侧内边距保持一致
4）10px 20px 30px 40 px 分别设置上、右、下、左四个方向的内边距
单方向内边距设置：只能取一个值
padding-top、padding-right、padding-bottom、padding-left
取消默认内边距：padding:0 -
外边距设置
设置元素与元素之间的距离
属性：margin
取值：像素值，取值规律同padding
特殊取值：
1）设置左右自动外边距（auto），实现元素在父元素范围内水平居中
2）取负值，元素位置的微调
单方向外边距设置：margin-top、margin-right、margin-bottom、margin-left
外边距合并：1）垂直方向
-
第一个子元素设置的margin-top，作用于父元素上。可以为父元素设置顶部边框或者添加padding-top:0.1px
-
同时为元素设置上下边距，元素之间最终选用最大的边距值
2）水平方向
- 行内元素对盒模型属性部分支持，不支持width/height设置，不支持上下边距
- 水平方向上外边距会叠加显示
具有默认外边距的元素：
body、h1~ h6、p、ul、ol{
margin:0;
padding:0;
/*取消列表的项目符号*/
list-style:none;
}
- 元素在文档中实际尺寸的计算
属性：box-sizing
取值：
- content-box：
- 为元素设置的width/height指定的是内容框的大小
- 计算尺寸：各个属性值累加计算（width/height+border+padding+margin）
- border-box:
- 为元素设置的width/height指定的是包含边框在内区域的大小
- 计算尺寸：width/height+margin
作业：
参考导航栏，父元素固定500宽，实现在body中居中；5个子元素（导航项）之间设置10px的外边距
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
body{
margin: 0;
}
a{
text-decoration: none;
color: #ffffff;
display: inline-block;
width: 92px;
height: 50px;
margin-right: 10px;
/* background: green; */
font-size: 20px;
text-align: center;
/* 一行文本在当前行中永远是垂直居中，可以手动设置行高跟元素高度保持一致，实现一行文本在元素中的垂直居中效果 */
line-height: 50px
}
a:hover{
background: green;
}
#nav{
background: orange;
width: 500px;
height: 50px;
/* 父元素字体大小为0,解决水平方向上由于代码换行导致的子元素之间出现的空隙,子元素需要手动调整可见字体大小 */
font-size: 0px;
margin: 0 auto;
}
.no-margin{
margin: 0
}
style>
head>
<body>
<div id="nav">
<a href="">淘宝a>
<a href="">淘宝a>
<a href="">淘宝a>
<a href="">淘宝a>
<a href="" class="no-margin">淘宝a>
div>
body>
html>
布局方式
-
静态流/文档流布局
根据元素类型和代码的书写顺序，从上到下，从左到右依次显示 -
浮动布局
属性：float
取值：left / right
特点：
1）浮动元素会从它在文档中的原始位置脱离文档流，“悬浮”在父元素的上方，按照浮动方向一次停靠在前一个元素的边缘。
2）元素脱流之后，在文档中不占位，可以手动设置宽高
3）“文字”环绕效果：浮动元素会遮挡正常元素的位置，但是不影响内容显示，正常内容会围绕在浮动元素周围显示
问题：
1）浮动元素不占位，后面正常的元素会向前占位
解决：清除浮动
属性：clear
取值：left / right / both
使用：添加在正常元素上，使其不受前面浮动元素的影响2）子元素全部浮动，造成父元素高度为0，影响父元素自身背景或边框样式的显示，影响整体布局
解决方式一：给父元素固定高度（适用于内容确定的元素。例如：导航栏）
解决方式二：给父元素设置overflow：hidden（适用于内容不确定，需要动态加载的元素。例如：页面主体）
解决方式三：父元素末尾添加空的块元素，设置clear：both -
定位布局
1）定位用于实现元素显示位置的调整
2）属性：position
取值：relative / absolute / fixed
使用：元素设置position属性之后，才能称为已定位的元素，已定位的元素可以结合偏移属性调整显示位置
3）偏移属性：top（设置距离参照物顶部的偏移量） left bottom right
4）分类
- 相对定位（relative）：设置相对定位的元素会参照它在文档中的原始位置偏移，不会脱离文档流。
- 绝对定位（absolute）：设置绝对定位的元素会参照离它最近的已定位的祖先元素进行偏移，没有的话最终参考窗口的（0,0）点偏移；会脱离文档流（不占位，可以手动调宽高）
- 使用：父元素设置相对定位，子元素设置绝对定位。
- 固定定位（fixed）：设置固定定位的元素会参考浏览器窗口进行偏移，不会跟随页面滚动而滚动，会脱离文档流。常见于聊天窗口，博客的目录或广告。
eg. 模拟右下角的固定广告
#chat{
width:300px;
height:300px;
background:green;
position:fixed; /*固定定位*/
right:0; /*居浏览器右为0*/
bottom:0; /*居浏览器下为0*/
}
5）堆叠次序调整：
- 已定位的元素与文档中正常元素发生堆叠，已定位元素在上方显示。
- 同为已定位元素发生堆叠，看标签的书写顺序，后来者居上
- 可以使用z-index属性调整已定位元素的堆叠次序，取无单位的数值，值越大，越靠上
背景属性
- 设置背景颜色：background-color:pink
- 背景图片相关
1）background-image:url(“XXX.jpg”)：设置背景图片
2）background-repeat：设置背景图片的重复方式
默认：元素尺寸 > 背景图的尺寸时，浏览器会自动重复平铺，直至铺满元素；元素尺寸 < 背景图的尺寸时，背景图默认从元素的左上角显示，超出部分不可见。
调整背景图的重复方式：
repeat默认值：沿水平和垂直两个方向重复平铺
repeat-x：沿水平方向重复平铺
repeat-y：沿垂直方向重复平铺
no-repeat：不重复
3）background-position: x y;
设置背景图片显示位置
取值方式：
-
取像素值，在元素坐标系中设置背景图片的起始坐标
-
取方位值
- 水平：left / center / right
- 垂直：top / center / bottom
- 默认缺省方向的值为center
-
百分比：x% y%计算背景图片的起始坐标：（元素尺寸-图片尺寸）*x%
特殊值：0% 0% --> left top; 50% 50% --> center; 100% 100% --> right bottom
4）background-size: width height;
设置背景图片的尺寸
取像素值，百分比或关键字： -
像素值，直接指定宽高，只给一个值表示设置宽，高度会等比例缩放
-
百分比，根据元素尺寸计算背景图的尺寸
-
关键字：
- cover覆盖，背景图片等比拉伸至足够大完全覆盖元素，超出部分不可见
- contain包含，等比拉伸至刚好被元素容纳
5）简写属性：
background: color url() repeat position;
背景图片的尺寸，background-size需要单独设置
div{
width:500px;
height:500px;
background-color:pink;
background-image:url("xxx.jpg");
background-repeat:no-repeat;
background-position:100px 100px;
}
CSS文本属性
- 字体相关
1）font-size
2）font-weight：设置字体的粗细程度，取bold / normal；或者取整百数值表示粗细程度100 ~ 900，400等价于normal，700等价于bold
3）font-style：设置斜体，取italic
4）font-family：设置字体名称。如果字体名称为中文或出现空格，必须使用引号；可以取多个值设置备用字体，属性值之间使用逗号隔开。
5）简写属性：
font：style weight size family；
注意：简写属性中，size和family是必填项 - 文本相关
1）color
2）text-decoration：设置文本装饰线，可取：underline 下划线、overline 上划线、line-through 删除线、none 取消装饰线
注意：装饰线紧贴文本显示，颜色与文本色一致
3）text-align：设置文本的水平对齐方式，默认居左。可取：left/center/right/justify(两端对齐)
4）line-height：设置行高，文本在当前行中一定是垂直居中。可以设置行高根元素高度保持一致，实现一行文本在元素中的垂直居中效果。可以取像素值或无单位的数值（表示字体大小的倍数，以此计算行高）。