目录
Web开发HTML常用标签介绍表单CSS样式及选择器分类标签分类及嵌套尺寸及颜色表示盒模型布局方式背景属性CSS文本属性Web开发
网页，交由浏览器运行的程序
组成：HTML CSS JavaScript
开发前准备：
编辑器：Vscode、Pycharm、Sublime、NotePad、EditPlus…运行环境：浏览器 Chrome Firefox调试工具：浏览器自带开发者工具
浏览器分类：
按照浏览器内核（引擎）：Chrome Firefox Safari IE/Edge Opera
HTML
超文本标记语言，通过标签/标记的形式书写网页结构并且填充内容标签分类 双标签：<标签名>标签内容</标签名>eg.<b></b>单标签：<标签名> 只有开始，没有结束，允许手动添加‘/’表示闭合
eg.<img>或<img/>语法规则
（1）标签不区分大小写，推荐全小写
（2）双标签如果少闭合，浏览器会自动添加闭合标签
（3）浏览器只能识别标签，如果写在html标签外部的内容，都不识别，会原样输出到窗口中
（4）浏览器会忽略代码中多余的换行和空格，一律解析为一个空格字符
<!--HTML大小写不敏感，推荐使用小写--><!--HTML5的文档类型声明--><!doctype html><!--文档开始，页面中所有内容都应该写在HTML标签中--><html><!--文档头部，可以设置小图标，网页标题，显示在浏览器选项卡上；还可以引入资源文件，设置网页相关信息--><head><!--设置网页标题--><title>我的第一个网页</title><!--meta标签可以用于设置网页附加信息，网页编码类型，关键字，网页描述，开发人员信息等，借助于标签属性定义--><meta charset="utf-8"><!--meta标签中添加name和content标签属性，设置网页附加信息，name属性固定取值，content自由设置--><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> <!--align居中center--><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><!--允许自定义标签，自定义标签属性--><h7 aa="bb">自定义</h7><!--段落--><p>段落文本</p><!--普通文本--><span>span</span><label>label</label><b>bold加粗</b><br><!--break换行--><hr><!--水平分割线--><strong>strong加粗</strong><i>italic斜体</i><u>underline下划线</u><!--字符实体--><--'<'>--'>'©--版权符号©¥--人民币符号‘￥’ --空格<!--容器标签--><div>导航栏</div><div>页面主体</div><div>页面底部</div><!--1.有序列表（ordered list），默认以阿拉伯数字标识列表项--><!--type属性用于设置列表的项目符号，有序列表默认使用数字，可以修改为'a','A','i','I'--><ol type="a"><li>list item1</li><li>list item2</li></ol><!--2.无序列表（unordered list），默认以实心圆点标识列表项--><!--type可取circle（空心圆）,square（实心方块）,none（取消项目符号）--><ul type="XXX"><li>list item1</li><li>list item2</li></ul><!--补充：网页下拉菜单使用列表嵌套实现，只能使用父子关系嵌套--><ul><li>西游记<ol><li>大师兄</li><li>二师兄</li><li>沙师弟</li><li>唐僧</li></ol></li></ul><!--图片标签：使用src(source)属性设置图片路径，默认按照原始尺寸显示在网页中，可以手动调整图片尺寸--><!--标签属性书写在开始标签中，用于补充说明当前的标签内容或者修饰元素的样式，微元素添加额外的标识。标签属性由属性名和属性值组成，多个标签属性之间使用空格隔开--><!--设置宽高，缺省方向会等比例缩放--><img src="happy.jpg" width="300px"><!--等比例放大缩小--><img src="happy.jpg" width="300px" height="300px"><!--title属性用于设置鼠标悬停在图片上时的显示文本--><!--alt属性用于设置图片加载失败时的提示文本--><!--用户可以点击超链接，跳转至其他的资源文件--><!--href属性必填，用于指定链接地址，网络路径必须写协议--><!--target属性选填，用于设置目标文件的打开方式，默认在当前窗口打开（_self），可以设置新建窗口打开（_blank）--><a href="04_img.html" target="_blank">图片文件</a><a href="">百度</a><!--图片超链接--><a href="04_img.html"><img src="happy.gif"></a><!--href的特殊取值--><!--空表示刷新--><a href=""></a><!--#表示锚点，链接至本页，不会造成刷新，修改URL--><a href="#"></a><!--javascript:void(0)阻止超链接默认的点击跳转功能，允许自定义点击事件--><a href="javascript:void(0)"></a><!--定义锚点，name属性设置锚点名称，自定义。锚点链接中，地址使用#（锚点的标志），跟上锚点名称--><a href="#5">点击跳转至页面指定位置</a><a name="5">跳转至此处</a><!--表格由结构化的行和单元格组成，用于数据的展示或辅助排版--><table border="1px" width="500px" height="500px"><!--table row创建行--><tr><!--th表示单元格，自带加粗和居中效果--><th>姓名</th><th>年龄</th><th>班级</th></tr><tr><td>老齐</td><td>30</td><td>001</td></tr><tr><td>小泽</td><td>32</td><td>002</td></tr></table><!--单元格合并，为单元格添加属性：colspan:跨列合并rowspan:跨行合并取无单位的数值，表示包含自身在内合并几个单元格。发生单元格合并，要删除被合并的单元格以保证结构完整。--><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><!--表格行分组：可将表格中的若干行划分为一组，表示表头，表尾和表格主体默认情况下，所有行都会自动添加到tbody（表格主体）中显示--><table border="1px" width="300px" height="300px"><!--thead划分表头--><thead><tr><th>姓名</th><th>年龄</th></tr></thead><!--tfoot--><tfoot><tr><td colspan="2">合计：</td></tr></tfoot><!--tbody--><tbody><tr><td>LQ</td><td>30</td></tr><tr><td>LQ</td><td>30</td></tr></tbody></table>
表单
表单用于采集用户信息并且提交给服务器组成： 表单元素（form）：负责提交数据表单控件：采集信息<!--form元素负责将表单数据按照指定的提交地址（action）和提交方式（method）发送给服务器--><!--1. 提交方式默认为get，将表单中的数据以参数的形式拼接在url后面（?key1=value1&key2=value2）--><!--2. post方式提交数据会将数据封装在请求体中传输，安全性更高；如果涉及二进制数据提交（图片，文件或音视频）只能使用post方式提交，并且设置数据的编码类型(enctype)为multipart/form-data--><form action="/login" method="get" enctype=""><!--表单控件用于采集用户信息，只能放在form中使用，数据才会被提交--><!--type:必填，指定控件类型--><!--name:必填，指定控件名称（key）--><!--placeholder:设置提示文本--><!--maxlength:设置最大输入字符数--><!--readonly:不需要取值，设置输入框只读--><!--value:设置控件的值（value）--><!--checked:设置按钮默认选中--><p>用户姓名：<input type="text" name="uname" placeholder="请输入用户名"></p><p>用户密码：<input type="password" name="upwd"></p><p>用户性别：<!--一组按钮的控件名称必须保持一致，按钮中必须设置value--><input type="radio" name="gender" value="boy" checked="checked">男<input type="radio" name="gender" value="girl">女</p><!--label for id 实现文本与控件的绑定--><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">rap</label><input id="spa" type="checkbox" name="hobby" value="spa" checked><label for="spa">保健</label></p><!--文件选择框：二进制数据必须使用post方式并且修改编码类型--><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><!--功能按钮：提交，重置，普通按钮，可以使用value属性设置按钮的显示文本--><!--提交按钮，点击时将数据发送服务器--><p><input type="submit" value="注册"><input type="reset" value="重置"><input type="button" value="点击"></p><!--button 标签表示按钮，标签内容即为按钮的显示文本，书写在form中，等价于提交按钮；书写在form外，就是普通按钮，需自定义点击处理--><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></style>书写样式代码，实现结构与样式的分离，使用选择器匹配文档中的元素并设置样式
选择器：根据标签名，属性值或层级结构查找对应元素
选择器{属性：值；}
例如：标签选择器，根据标签名匹配元素
<style>h2{color:orange;font-size:32px;}</style>
3）外链样式表
创建样式表文件（.css），使用选择器匹配元素应用样式。在HTML文件中使用<link rel="stylesheet" href="XXX.css" type="text/css">样式表特点
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的外边距
<!DOCTYPE html><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>Document</title><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：设置行高，文本在当前行中一定是垂直居中。可以设置行高根元素高度保持一致，实现一行文本在元素中的垂直居中效果。可以取像素值或无单位的数值（表示字体大小的倍数，以此计算行高）。
