HTML标签
- 双标签：成对出现
- 单标签：只有开始标签（<br>换行<hr>水平线）
HTML基本骨架
- <html>包含整个网页
- <head>网页头部，存放给浏览器的信息，如CSS，<title>
- <body>网页主体，用来存放给用户看的信息，如图片文字
- 快速生成骨架：!+Tab/Enter
标签关系
- 父子（html与head）
- 兄弟（head与body）
注释
vscode中，添加或删除注释的快捷键：CTRL+/
标签介绍
标题标签，一般用在新闻标题，文章标题等
标签名：h1~h6（双标签）
特点：文字加粗，字体逐渐减小，独占一行
经验：h1一般一个网页只用一次，其他无所谓
段落标签，一般用在成段文字，产品描述等
标签名：p（双标题）
特点：独占一行，段落间存在间隙
换行与水平标签
换行<br>水平线<hr>，由于没有内容，均为单标签。浏览器不能识别字符换行，所以需要用换行时，加入<br>即可。
文本格式化标签，为文字添加特殊格式，突出重点。
- 加粗标签<strong>\<b>
- 倾斜标签<em>\<i>
- 下划线<ins>\<u>
- 删除线<del>\<s>
均不换行
图像标签，在网页中插入图片。
标签使用：<img src="url">
- 可选alt：替换文本，图片无法显示时显示的文字
- 可选title：提示文本，鼠标悬停时显示的文字
- 可选width/height：图片的宽高，值为数字，没有单位，默认等比例缩放
url以 ./ 开头，在目录中自动查找图片（.表示当前文件夹，..表示上一级文件夹，Windows默认\，其它系统/，建议/）
不换行
属性写法：写在尖括号里，标签名后面，用空格隔开，属性不区分顺序。
超链接标签，点击跳转到其他页面。
使用方法：<a href="链接"></a>
跳转到网页链接，直接放链接；跳转到另一个HTML文件，放文件的相对路径。
加入属性：target="_blank"新窗口跳转。
href="#"表示是空链接。
音频标签
使用方法：<audio src="url"></audio>
支持格式：Mp3,Ogg,Wav
属性：
- controls显示控制面板
- loop循环播放
- autoplay自动播放（一般被浏览器禁用）
视频标签
使用方法：<video src="url"></video>
属性：
- controls、loop同audio标签
- muted静音播放
- autoplay在静音下可以自动播放
列表 表格 表单
均为嵌套关系。
列表，布局内容排列整齐的区域。
分类：无序列表、有序列表、定义列表。
无序列表
使用：<ul>嵌套<li>，ul是无序列表，li是列表条目。
- li中可以包裹任何内容。
有序列表
使用：<ol>嵌套<li>，ol是有序列表，li是列表条目。
定义列表，一般用在网页底部显示帮助。
使用：<dl>嵌套<dt>和<dd>，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情。
- dl里只能包含dt和dd
- dt和dd里可以包含任何内容
表格
使用：标签<table>（表）嵌套<tr>（行），<tr>嵌套<td>（内容单元）/<th>（表头单元）。
网页中表格默认没有边框，加入border属性添加边框。
表格结构标签
- thead--表格头部
- tbody--表格主体
- tfoot--表格底部
结构标签非必须。
合并单元格
- 跨行合并，保留最上的单元格，添加属性rowspan
- 跨列合并，保留最左的单元格，添加属性colspan
- 删除其他单元格。（要合并几个属性值为多少）
不能跨结构标签合并。
表单，收集用户信息。
input标签，type属性值不同，功能不同。
- text--文本框，单行文本
- password--密码框
- radio--单选框
- checkbox--多选框
- file--上传文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
</head>
<body>
文本框：<input type="text">
<br>
密码框: <input type="password">
<br>
单选框:
<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女
<br>
多选框: <input type="checkbox">
<br>
上传文件: <input type="file" multiple>
</body>
</html>input占位文本：添加placeholder属性，属性值为提示信息。
radio常用属性：
- name--控件名称，分组，同组只能单选
- checked--设置默认值（多选框checkbox同理）
添加多个文件：
input-type为file下添加multiple属性。
下拉菜单
使用：<select>（菜单）嵌套<option>（每一项）。
默认选中添加selected属性。
option-value属性：发送数据。
文本域，多行输入文本
使用：<textarea></textarea>
- name、id：发送数据
- cols、rows：设置文本域属性（一般用CSS设置，不在HTML中设置）
label标签，网页中某个标签的说明文本，可以绑定文字和控件，增大点击生效范围。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
</head>
<body>
<!--
1. label 标签只包裹内容
2. label 标签的 for 属性值和表单控件的 id 属性值相同
-->
<input type="radio" id="man">
<label for="man">男</label>
<!--
1. 使用 label 标签包裹文字和控件，不需属性
-->
<label>
<input type="radio">女
</label>
</body>
</html>button标签
使用：<button type=""></button>
type属性值：
- submit--提交按钮（默认）
- reset--重置按钮
- button--普通按钮，一般配合JavaScript使用
form标签，表单区域。
action属性值为发送数据的地址。
无语义的布局标签，划分网页区域，摆放内容。
- <div>：独占一行
- <span>：不换行
字符实体，在网页中显示预留字符。
- 空格 （代码中多个键盘空格，浏览器仅识别一个）
- < 小于号 <
- > 大于号 >
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
</head>
<body>
<h1>注册信息</h1>
<form action="">
<h2>个人信息</h2>
<label>姓名：</label><input type="text" placeholder="输入姓名"><br><br>
<label>密码：</label><input type="text" placeholder="输入密码"><br><br>
<label>确认密码</label><input type="password" placeholder="确认密码"><br><br>
<label>性别：</label>
<label><input type="radio" name="gender">男</label>
<label><input type="radio" name="gender" checked>女</label><br><br>
<label>居住城市：</label>
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">武汉</option>
</select><br><br>
<label for="">工作描述：</label>
<textarea name="" id="" cols="30" rows="10"></textarea><br><br>
<label for=""><input type="checkbox">已阅读并同意一下协议：</label>
<ul>
<li><a href="#">《用户服务协议》</a></li>
<li><a href="#">《隐私政策》</a></li>
</ul><br><br>
<button type="submit">免费注册</button>
<button type="reset">重新填写</button>
</form>
</body>
</html>CSS
层叠样式表，用来描述HTML文档的呈现。在<title>标签下方添加<style>标签，在<style>中书写CSS代码。
基本写法举例
内部样式表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
<style>
#p {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<p id="p">体验CSS</p>
</body>
</html>外部样式表，css代码写在单独CSS文件中，HTML使用link引入。
<link rel="stylesheet" href="./mycss">行内样式，配合JavaScript
<div style="color:red;font-size:20px">这是div</div>基础选择器
选择器：查找标签，设置样式。
标签选择器
使用标签作为选择器，选中同名标签设置相同样式。
p {
color:red;
}类选择器
首先定义类名，再给需要的标签添加class属性。一个标签需要使用不同类，用空格隔开class属性不同类名。
//CSS文件：
.red {
color: aqua;
}
//HTML文件
<div class="red">这是一个段落</div>
id选择器
与类选择器类似，一般配合JavaScript使用，很少用来设置CSS样式。
//CSS文件：
#red {
color: aqua;
}
//HTML文件
<div id="red">这是一个段落</div>
同一个id选择器在一个页面只能使用一次。
通配符选择器
查找页面所有标签，设置相同样式。（不需要调用，浏览器自动设置）
* {
color: aqua;
}
文字控制属性
- font-size：字体大小（常用单位px）
- font-weight：字体粗细（数字（原400）或关键字normal/bold）
- font-style：字体倾斜（关键字normal/italic）
- line-height：行高，设置多行文本间距（数字+px/倍数）。垂直居中：行高等于盒子高度
- font-family：字体族，属性值为字体名（不用加引号，建议无衬线字体）
- font：字体复合属性，必须写字号与字体，简写，适合设置网页文字公共样式
- text-indent：文本缩进，属性值为数字+px/数字+em（当前标签字号大小）
- text-align：文本/图片对齐，属性值left、center、right
- text-decoration：修饰线（none/underline/line-through/overline）
- color：颜色，属性值支持：单词、rgb(,,)、rgba(,,,)、#十六进制
调试工具-Google Chrome
- 检查
- 选中工具
复合选择器
由两个或多个基础选择器，通过不同方式组合而成，能更精确高效地寻找目标标签。
后代选择器，选中某元素的所有后代元素。父子选择器空格隔开。
div span{
color:red;
}子代选择器，父子选择器用>隔开。
div > span{
color:red;
}并集选择器，选中多组标签设置相同的样式，选择器之间用逗号隔开。
div,
p,
span{
color:red;
}交集选择器，选中同时满足多个条件的元素，选择器之间连写，没有任何符号。
p.box {
color: red;
}伪类选择器，伪类表示元素状态，选中元素的某个状态设置样式。
鼠标悬停：选择器:hover{}
a:hover{
color:red;
}伪类-超链接：
- :link 访问前
- :visited 访问后
- :hover 悬停
- :active 点击时
注意要按lvha顺序书写。
CSS特性
继承性，子级默认继承父级文字控制属性。例如工作中给<body>设置属性，则所有文字可以享受属性，但是如果有标签有默认样式或者另外设置了样式，则不会继承父级相应属性。
层叠性，相同属性后定义的覆盖前定义的，不同属性会叠加生效。
优先级，当一个标签选择多种选择器，基于不同种类的选择器的匹配规则。
通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
* {
color: red !important;
}（选择器范围越大，优先级越低）
如果是复合选择器，则需要权重叠加计算。从优先级高到低比较个数，同一级个数多的优先级高，个数相同向后比较。
继承权重最低，！important权重最高。
/* (0, 0, 2, 1) */
.c1 .c2 div{
color: blue;
}
/* (0, 1, 0, 1) */
div #box{
color: green;
}
/* (0, 1, 1, 0) */
#box .c3{
color: orange;
}Emmset写法
代码简写方式，输入缩写VS code自动生成代码。
HTML
- 类选择器 <div class="box"></div> 标签名.类名
- id选择器 <div id="id"></div> 标签名#id名
- 同级标签 <div></div><p></p> div+p
- 父子级标签 <div><p></p></div> div>p
- 多个相同标签 <span></span><span></span> span*2
- 有内容的标签 <div>neirong</div> div{neirong}
CSS
大多数简写方式为属性单词首字母
w500+h200+bgc
.c3{
width: 500px;
height: 200px;
background-color: #fff;
}背景属性
背景图，装饰性的图片效果
background-image（bgi）
- 背景图url
div{
width: 400px;
height: 400px;
background-image: url(./images/background);
background-repeat: no-repeat;
background-position: left top;(0 0)
background-size: 100%;
background-attachment: fixed;
}默认平铺复制。文字在上，图片在下
background-repeat（bgr）：
- no-repeat 不平铺（默认左上角）
- repeat 平铺
- repeat-x 水平方向平铺
- repeat-y 垂直方向平铺
background-position（bgp）：第一个值表示水平方向，第二个值是垂直方向。只写一个值，另外一个默认居中。
关键字：
- left 左
- right 右
- center 居中
- top 顶部
- bottom 底部
坐标：数字+px，正负均可。
background-size（bgz）：
- cover 放大至完全覆盖盒子 可能图片显示不全
- contain 放大至一边贴合 可能留白
- 百分比 100%图片宽度跟盒子宽度一样，图片高度按等比例缩放
- 数字+单位
background-attachment（bga）：
- fixed 固定
background（bg）：背景复合属性，空格隔开各个属性值，不区分顺序。背景图缩放加/
div{
background: pink url(./images/) no-repeat center bottom/cover;
}显示模式
标签的显示方式，根据标签的显示模式选择合适的显示模式。
块级元素
- 独占一行
- 宽度默认父级的100%
- 添加宽高属性生效
- 如div
行内
- 一行共存多个
- 宽高属性不生效
- 宽高由内容生效
- 如span
行内块
- 一行共存多个
- 宽高属性生效
- 宽高默认由内容撑开
- 如image
转换显示模式
- block 块级
- inline-block 行内块
- inline 行内
div{
width: 400px;
height: 200px;
display: inline;
}结构伪类选择器
根据元素的结构关系查找元素。
- E:first-child 查找第一个元素
- E:last-child 查找最后一个元素
- E:nth-child(N) 查找第N个元素（第一个N为1）
:nth-child(公式)
- 2n 偶数标签
- 2n+1;2n-1 奇数标签
- 5n 5倍数标签
- n+5 第5个以后的标签
- -n+5 第5个以前的标签
伪元素选择器
创建虚拟元素（伪元素），用来摆放装饰性内容。
- E::before 在E元素里面最前面添加一个伪元素
- E::after 在E元素里面最后面添加一个伪元素
- 必须设置cotent:""属性，用来设置伪元素内容，如果没有内容，引号留空即可
- 伪元素默认是行内显示模式
- 权重和标签选择器相同
div::before{
content: "love";
}PxCook
支持PSD文件的文字、颜色、距离自动识别。
盒子模型
盒子模式重要组成部分
- 内容区域 - width&height
- 内边距 - padding（内容与盒子边缘之间）（pd）
- 边框线 - border（bd）
- 外边距 - margin（出现在盒子外面） （mg）
div{
width: 300px;
height: 300px;
background-color: #fff;
padding: 20px;
border: 1px solid #000;
margin: 50px;
}Google浏览器检查里计算样式可看到效果。
margin
- solid 实线
- dashed 虚线
- dotted 点线
border-方位名词（bdl、bdr，bdt，bdb），设置不同方向的样式。
padding-方位名词（pdl等），设置不同方向的内边距。
padding多值写法：
- 一个值 四个方向一样
- 两个值 上下一样，左右一样
- 三个值 左右一样，跟上下分别不一样
- 四个值 四个方向均不一样
记忆：顺时针，没有数值就和对向一样。
尺寸计算
默认盒子尺寸=内容+border+padding
- 手动减法，减掉border、padding尺寸
- 内减模式：box-sizing:border-box
外边距margin
拉开两个盒子的距离，与padding写法含义相同。居中：margin: 0 auto;要求盒子有宽度。
清除默认样式
*{
margin:0;
padding:0;
box-sizing:border-box;
}元素溢出 overflow
控制溢出元素的内容的显示方式。
- hidden 溢出隐藏
- scroll 溢出滚动（无论是否溢出）
- auto （溢出滚动）
外边距问题-合并
垂直排列的兄弟元素，上下margin合并，取较大值生效。
外边距问题-塌陷
父子级标签，子级的添加上外边距会产生塌陷问题。
- 取消自己margin，父级设置padding
- 父级设置overflow:hidden
- 父级设置border-top
行内元素-内外边距问题
行内元素添加margin和padding，无法改变元素垂直位置；给行内元素添加line-height可以改变垂直位置。
盒子模型-圆角
border-radius 设置元素外边框为圆角，属性值数字+px/半分比（最大值50%），设置圆角半径。 从左上角顺时针赋值，没有取值的角与对角相同。
胶囊形状--给长方形盒子的圆角属性值设置为高度的一半。
盒子模型-阴影
box-shadow 给元素设置阴影效果，属性值X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影。
position定位属性
static：HTML元素的默认定位方式，不受top/bottom/left/right等元素的影响。不以任何特殊方式定位，根据页面正常流进行定位。
relative：相对于正常元素进行定位。设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
fixed：相对于视口进行定位。元素会被移出正常文档流，并不为元素预留空间。 top、right、bottom 和 left 属性用于定位此元素。元素的位置在屏幕滚动时不会改变。当元素祖先的transform、perspective、filter或 backdrop-filter属性非 none时，容器由视口改为该祖先。
absolute：相对于最近的定位祖先元素进行定位。然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
sticky：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其"粘贴"在适当的位置（比如 position:fixed）。
grid：网格布局
标准流
也指文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。
浮动
让块元素水平排列。
- float:left 左看齐
- float:right 右看齐
code.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
<link rel="stylesheet" href="./mycss.css">
</head>
<body>
<div class="product">
<div class="left"></div>
<div class="right">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>mycss.css
.left{
float: left;
width: 234px;
height: 628px;
background: skyblue;
}
.right{
float: right;
width: 978px;
height: 628px;
background-color: brown;
}
.right li{
float: left;
margin-right: 14px;
margin-bottom: 14px;
width: 234px;
height: 300px;
background-color: orange;
}
.product{
margin: 50px auto;
width: 1226px;
height: 628px;
background-color: pink;
}
li{
list-style: none;
}
*{
margin: 0;
padding: 0;
}
.right li:nth-child(4n){
margin-right: 0;
}浮动后盒子脱标。
清除浮动：浮动元素会脱标，如果父级没有高度，自己无法撑开父级高度。解决：清除浮动。
- 在父元素内容最后添加一个块级元素，设置CSS属性clear:both，可以清除左右两侧影响。
- 在父元素内容最后添加一个伪元素，添加
.clearfix::after{ content: ""; display: block; clear: both; } - 双伪元素发在前后添加伪元素，添加
.clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } - overflow 父元素添加CSS属性overflow:hidden
Flex布局
Flex布局即弹性布局，是浏览器提倡的布局模型，适合结构化，提供了强大的空间分布对齐能力，不会产生脱标现象，更简单更灵活。
弹性盒子主轴宽度默认为内容宽度，侧轴宽度默认为弹性容器宽度。
组成
- 弹性容器
- 弹性盒子（沿主轴方向排列）
- 主轴默认在水平方向
- 侧轴/交叉轴默认在垂直方向。
父元素设置display:flex，创建Flex容器
主轴对齐方式 justify-content
- flex-start 默认值，弹性盒子从起点依次排列。
- flex-end 弹性盒子从终点一次排列。
- center 弹性盒子沿主轴居中排列。
- space-between 弹性盒子沿主轴均匀排列，空白均分于弹性盒子之间。
- space-around 弹性盒子沿主轴均匀排列，空白均分于弹性盒子两侧。
- space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等。
侧轴对齐方式 align-items
控制当前弹性容器内所有弹性盒子的侧轴对齐方式
- scretch 弹性盒子沿侧轴被拉伸至铺满容器（盒子没有设置尺寸才能拉伸）
- center 弹性盒子沿侧轴居中排列
- flex-start 弹性盒子从起点沿侧轴排列
- flex-end 弹性盒子从终点沿侧轴以此排列
某个弹性盒子侧轴对齐 align-self
控制弹性盒子，用法与align-items一样。
- scretch 弹性盒子沿侧轴被拉伸至铺满容器（盒子没有设置尺寸才能拉伸）
- center 弹性盒子沿侧轴居中排列
- flex-start 弹性盒子从起点沿侧轴排列
- flex-end 弹性盒子从终点沿侧轴以此排列
修改主轴方向 flex-dirction
- column 垂直方向，从上到下
弹性伸缩比 flex
控制弹性盒子的主轴方向的尺寸。属性值为整数，表示占用父级剩余尺寸的份数。
弹性盒子换行 flex-wrap
- wrap 换行
- nowrap 不换行（默认）
行对齐方式 align-content
与主轴对齐属性值用法相同。
- flex-start 默认值，弹性盒子从起点依次排列。
- flex-end 弹性盒子从终点一次排列。
- center 弹性盒子沿主轴居中排列。
- space-between 弹性盒子沿主轴均匀排列，空白均分于弹性盒子之间。
- space-around 弹性盒子沿主轴均匀排列，空白均分于弹性盒子两侧。
- space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等。
学成在线项目
项目目录
>study 主目录
>images 存放固定使用的图片素材
>uploads 存放非固定使用的图片素材
>css 存放CSS文件
>base.css 基础公共样式
>index.css首页CSS样式
>index.html 首页HTML文件
网页制作思路
- 布局思路：先整体后局部，从外到内，从上到下，从左到右。
- CSS思路：画盒子、调整位置、控制样式。
logo制作思路
logo功能：
- 点击跳转首页
- 提升搜索引擎排名
实现：
标签结构：h1>a>网站名（搜索关键字）
导航制作技巧（nav）
导航功能：
- 单击跳转页面
实现方法：
- 标签结构：ul>li*3>a
避免堆砌a标签，是网站搜索排名降级。
搜索区域（search）
实现方法：
- 标签结构：.search>input+a/button
用户区域（user）
实现方法：
标签结构：.user>a>img+span
banner区域
结构：通栏banner>版心>.left+.right
左侧侧导航（left）
实现方法：
- 标签结构：.left>ul>li*9>a
布局思路
- a默认状态：背景图为白色右箭头
右侧课程表（right）
实现方法：
- 标签结构：.right>h3+.content
精品推荐（recommend）
实现方法：
标签结构：.recommend>h3+ul+a.modify
布局思路：flex
精品课程（course）
实现方法：
标签结构：.hd+.bd
布局思路
盒子模型
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
