一、网页构成
HTML+CSS+JS
二、HTML（超文本语言）
基础框架
注意：本文中<标签名/>为自结束标签，<标签名>（无 “ / ”则省略了</标签名>）
进入VS Code，选择HTML语言输入 “ ！”，再按 “Tab” 后，会有以下代码出现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>1.<!DOCTYPE html> 是文档声明，声明当前网页版本，是html5的写法
2.<html lang="en"> 是默认语言为英文，但可以输出中文，只是会让你的浏览器提示你要不要翻译此页，改成zh就没有翻译选项（即变成了中文页面）
3.<head></head> 是头部的标签，帮助浏览器或搜索引擎来解析网页
4.用meta标签设置网页的元数据
charset用来设置网页的字符集，避免乱码问题
name 指定的数据的名称
content 指定的数据内容
<meta charset="UTF-8">选定字符集为UTF-8
<meta http-equiv="X-UA-Compatible" content="IE=edge">是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式
<meta name="viewport" content="width=device-width, initial-scale=1.0">指定一个元数据名为viewport(设备屏幕上显示网页的区域），它的内容值在content（属性值）里
5.<title></title> 网页标题，搜索引擎根据title中内容判断网页主要内容
6.<body></body>是html的子元素，用来书写网页的主体
常用基础标签
（一）框架标签
<html> <head><title><body>
（二）标题和段落，文本格式化标签
| 标题标签 | <h1><h2><h3><h4><h5><h6> |
| 段落标签 | <p> |
| 换行 | <br/>(自结束标签） |
| 分割线 | <hr/> |
| 加粗 | <strong> / <b> |
| 倾斜 | <em> / <i> |
| 删除线 | <del> / <s> |
| 下划线 | <ins> / <u> |
（三）分区，跨度，标签
| <div> | 大盒子，独占一行 |
| <span> | 小盒子，可以多个占用一行 |
| 注释 Ctrl+/ | <!-- --> |
| 链接标签 | <a herf="(网址)" target=“_blank"> </a> |
（四）HTML中的实体（转义字符）
|   | 空格 |
| > | 大于符号 |
| < | 小于符号 |
| © | 版权符号 |
（五）列表、表格、表单
- 列表
- 无序标签<ul>（里面用<li>）
- 有序标签<ol>（里面用<li>）
- 自定义标签<dl>，标题<dt>，内容<dd>
ul属性 备注 list-style 无序列表样式none 默认竖着排列 设置左右浮动，横向排列，（清除浮动） type circle空心圆、disc实心圆、square正方形 ol属性 备注 type A、a、1、i、l
- 表格<table (可以写属性）>
- 表格属性
align / valign 表格位置 / 表格内文字位置 border /width / height 边框 / 宽 / 高 cellspacing 单元格于内容之间的距离 cellpadding 单元格之间的距离 background / bgcolor 背景 / 背景颜色
<table> <thead> <tr> <th>……</th> </tr> </thead> <tbody> <td> <th>……</th> </td> </tbody> </table> - 表格属性
- 表单标签（普遍属性：name标签名称 / 检索值，disabled禁用效果，readonly只读针对input的text/password和textarea，value设定或获取输入值）
- form表单： action = "url"（接口请求地址，不常用）,method = 提交方式 get（获取） post（发送）
- label标签名：for="以下表单的id属性"（非必须）
- 提交（button / input）
- input代替
- value：按钮上的名称
- type： submit提交 reset重置 button 按钮
- button按钮 type="subumit"提交
- textarea文本框： cols规定文本可见区域宽度，rows行数
- select选择下拉框：<select>需要name（里面用<option>，option需要value)
- input标签：包含在<form>中，<input type = "属性值”/>
input类型（type） text 文本 / password 密码 name（必须） radio 单选框 / checkbox 多选框 value/name datetime-local 日期（不够美观）
- input代替
(六）图像标签
<img />图像标签，例：<img src="img.jpg"/>
| src | 图片路径 |
| alt | 替换文本 |
| title | 提示文本 |
| width/height | 设置图像宽高 |
| border | 设置图像边框粗细 |
盒子分类（设置居中见盒模型）
块元素（div,h1-h6,p,table,ul,section,content...)
可自动换行，可设置宽高
margin（外边框），padding（内边框）上下左右有效
内联元素/内联块(a,span,input,select,button)
内联元素（a,span）：不自动换行，设置宽高无效
margin仅左右有效，padding都有效
默认排列方式从左到右
内联块（input,select,button）：可设置宽高，margin可变
消除默认边距html,body{margin和padding均设为0}
转化（在CSS内）
display：inline（块转行内）
display：block（行内转块）
display：inline-block（转换为内联块）
页面结构
| <header> | 标题头部区域内容（用于页面或页面中一块区域） |
| <fooder> | 标题脚步区域内容 |
| <section> | web网页中一块独立区域 |
| <article> | 独立文章内容 |
| <aside> | 侧边栏（相关内容和应用） |
| <nav> | 导航类辅助内容 |
三、CSS
（一）选择器
（二）常见属性
1.盒模型
（1）外边距margin的应用
- margin 清除周围的（外边框）元素区域， 没有背景颜色，是完全透明的。
- margin 可以单独改变元素的上，下，左，右边距，可以一次改变所有的属性
（设置方式1：margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;）
（设置方式2：margin:25px 50px 75px 100px;上 右 下 左
margin:25px 50px 75px;上 左右 下
margin:25px 50px;上下 左右
margin:25px;全部）
- 设置居中：
块元素居中：盒子必须设置了宽度，两外边距设置为auto
行内元素或行内块元素的居中，给其父元素添加text-align:center即可
- 嵌套块元素垂直外边距合并造成的塌陷：对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
解决方案：
为父元素定义上边框（透明的） border:1px solid transparent;
为父元素定义上（细细的）内边距 padding：1px;
为父元素添加overflow:hidden;（常用）
5.其他属性(网页布局）
(1)流动布局
(2)浮动布局：（要求一浮全浮，否则当前浮动元素会影响后面的标准流）
float：left/right
清除浮动（清除浮动元素造成的影响）
- 如果父盒子本身有高度，则不需要清楚浮动
- 清楚浮动后，父级就会根据浮动的子盒自动检测高度，父级有了高度，就不会影响下面的标准流了
- 方法：(一般使用clear：both；）
-
额外标签法（隔墙法）：（只有块元素可以，不常用）找到最后浮动的盒子，写一个标签(<div class="clear">)，在style内加上
.clear{ clear:both; } -
给父级元素添加overflow属性，将其属性值设置为hidden、auto或scroll。常用overflow:hidden;（缺点：无法显示溢出部分）
-
给父级元素添加after伪元素
clearfix:after{ content:''; display:block; height:0; clear:both; visibility:hidden; overflow:hidden; } .clearfix{ /*IE6、7专有*/ *zoom:1; } <!--父元素内 <div class = "box">改为<div class = "box clearfix"> --> -
给父元素添加双伪元素(使用同上）
.clearfix:before, .clearfix:after{ content:""; display:table; } .clearfix:after{ clear:both; } .clearfix{ *zoom:1; }
-
(3)定位：
- 相对定位：（以自己原来的位置为顶点，地面上的位置谁都不许占）
position：relative
left 500px（距离原来位置左边500像素）
top 10px（距离原来位置底部10像素）
- 绝对定位：从里到外找第一个有定位的的外层元素作为起点，没有就用浏览器原点
position:absolute;
left 500px（距离起点左边500像素）
top 10px（距离起点底部10像素）
- 固定定位：相对于浏览器可视窗口进行定位，起飞后在xoy面移动，固定定位会固定在浏览器的某个位置，不会随滚动条滚动（特殊的绝对定位）
position：fixed
常用属性
| display | Flex |
| flex-direction | 指定弹性盒子中子元素的排列方式 |
| flex-wrap | 设置当弹性盒子的子元素超出父容器时是否换行 |
| justify-content | 设置弹性盒子中元素在主轴（横轴）方向上的对齐方式 |
| align-items | 设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式 |
设置居中（注意设置html和body）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.login {
width: 300px;
height: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="login">
登录
</div>
</body>
</html>（三）引入CSS
方法一：标签引入
- 基础选择器
- （类选择器：用class属性值）（标签选择器）（id选择器）
类选择器
.hhh{
width:400px;
height:400px;
background-color: rgb(104,219,27);
}
标签选择器
div{
......
}
id选择器
#id名称{
......
}
- 复合选择器
- 并集选择器（多个选择器应用相同样式时使用）
- 后代选择器
- 交集选择器
- 伪类选择器/伪元素（见底下链接的补充一）
并集选择器:
多种选择器应用相同样式
选择器,选择器,……{属性名称:属性值}
后代选择器：
定义子标记的样式进行子标记定位
父标记选择器+空格+子标记的选择器{属性名称:属性值}
方法二：行内引入
<div class="hhh" style = 'background-color: aqua;"> hhhhh </div>方法三：文件外引入
在HTML（同一个）目录下新建一个文件index.css
index.css
仍然使用选择器 . 换成 #
index.html
<link rel = "stylesheet" herf = "./index.css " />
<body>
<div id = "hhh"> hhhhh </div>
</body>其他网页补充：
810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
