★ 学习目标：
根据.psd文件/图片，用html+css布局出静态网页；
！DAY❶ 认识Web及常用标签
- 基础概念铺垫
- 网页构造原理
网页元素：文字，图片，链接，音视频等；
网页构造原理：网页元素用html标签描述出来，然后通过浏览器解析后展示给用户； - 五大浏览器
常见浏览器：Chrome,IE,Safari,火狐,Opera;
浏览器内核：排版/解释/渲染引擎（读取网页内容，计算显示方式显示页面）； - Web标准的三层组成：
结构——网页元素(html)；
表现——外观样式(css)；
行为——网页模型定义和交互(javascript)；
- 网页构造原理
| 浏览器 | 内核 |
|---|---|
| Chrome（市场份额最大） | Chromium/blink |
| IE | Trident |
| Safari | Webkit |
- html基础结构
HTML骨架标签
`<html>
<head>
<title></title>
</head>
<body>
</body>
</html>`
★ <html lang="en(英语)/zh-CN(中文)">;
★ <meta charset=UTF-8(编码/存储方式)>;
★ vscode中: 按 !+tab键 (自动生成骨架标签);
- VScode软件（开发工具）：
（微软推出，轻量，智能提示，自带emment，强大的调试功能，跨三大平台）
★ 常用插件：
live server(ctrl+s保存文件时自动刷新页面）；
Chinese(simplified) language pack for vs code(语言-中文简体）；
Open in browser;
JS-CSS-HTML Formatter(保存时自动格式化代码）；
Auto rename tag（自动重命名/匹配标签，方便双标签的修改）；
CSS peek（追踪至样式）；
- HTML语法规范
- 注释标签：
<!- - 注释内容 - ->
★快捷键ctrl+/ - 标签结构
双标签：<开始标签> </结束标签>
单标签：<开始标签 /> （新的H5中单标签不用加 / ） - 标签属性
（写在开始标签中；属性多个可以不讲究顺序；属性间空格隔开）
- 注释标签：
- HTML常用标签
-
排版标签
<h1~6> </h1~6>🏷标题标签（h1常用于文章标题/网站logo)
<p> </p>🏷段落标签
<hr>——水平线
<br>——换行 -
文本格式化标签
<b> </b>加粗
★<strong> </strong>加粗,强调(给搜索引擎)！
<i> </i>倾斜
★<em> </em>倾斜，强调！
<s> </s>添加删除线
★<del> </del>加删除线，强调！
<u> </u>添加下划线
★<ins> </ins>添加下划线，强调！ -
图像标签-img
<img src="图像路径"> -
音频标签-audio (H5新增标签，部分老版本浏览器不兼容）
支持格式：MP3(推荐) / Wav / ogg;
<audio src= "音频路径" controls> </audio> -
视频标签-video (H5新增标签，部分老版本浏览器不兼容）
支持格式：MP4(推荐) / WebM / ogg;
<video src= "视频路径" controls> </video> -
链接🔗标签属性
<a href = "链接地址/路径" > 链接文字 </a> -
相对路径
同级 ./dog.jpg; (./当前目录文件夹）
下一级 ./images/dog.jpg;
上一级 …/dog.jpg (…/上级目录文件夹)
-
| img属性 | |
|---|---|
| src | 图像路径 |
| alt | 图像不能显示时的替换文本 |
| title | 鼠标悬停时的内容 |
| width/height | 图像宽度/高度 |
| audio属性 | |
|---|---|
| src | 音频路径 |
| controls | 显示播放按钮控件 |
| autoplay | 音频加载完自动播放(部分浏览器不支持) |
| loop | 音频结束后自动循环播放 |
| video属性 | |
|---|---|
| src | 视频路径 |
| controls | 显示播放按钮控件 |
| autoplay | 视频加载完自动播放(部分浏览器不支持) |
| muted | 静音播放；chrome中不支持自动播放autoplay和muted须组合使用； |
| loop | 自动循环播放 |
| poster=“图片路径” | 加载视频等待时的画面图片 |
| preload=“auto(预先加载)/none(不预先加载)” | 如果有autoplay则忽略该属性 |
| a链接属性 | |
|---|---|
| href | 链接指向的url地址；(href=“#”) 空链接 |
| target | 页面打开方式:_self默认/_target新窗口 |
- 拓展
- 锚点链接（百度百科人物介绍中的目录跳转）
在跳转目标添加id，如id=tree
点击跳转位置添加链接 href=“#tree”; - base标签
在<head> </head>之间，添加<base target="_blank" />设置所有链接打开在新窗口显示； - 预格式化文本标签
<pre> </pre>
按写出来的代码格式显示，换行和空格也显示；
- 锚点链接（百度百科人物介绍中的目录跳转）
！DAY❷ 列表/表格/表单
- 列表——页面布局，与表格类似但自由度更高
- 无序列表（最常用，大量用于布局）★
- 有序列表（使用较少）
- 自定义列表
无序列表
<ul>
<li> 香蕉 </li>
<li> 苹果 </li>
<li>容器:放啥都可以</li>
</ul>
注：一般ul里面只包含li，li里面放其它内容；
有序列表
<ol>
<li>中国</li>
<li>俄罗斯</li>
</ol>
自定义列表
<dl>
<dt>北京（主题）</dt>
<dd>昌平区</dd>
<dd>海淀区</dd>
</dl>
<dl>
<dt>帮助中心（主题）</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
</dl>
- 表格——显示数据
表格结构：
<table>
<caption> 个人简介 </caption>
<tr>
<th> 姓名 </th> <th> 年龄 </th>
</tr>
<tr>
<td> 伍佰 </td> <td> 500</td>
</tr>
</table>
★ <caption> 表格标题，跟随表格移动；
★ <th> 表头单元格，默认格式加粗并居中；
| 表格html属性（不常用） | 值 |
|---|---|
| border(表格边框) | px(像素) |
| width/height(宽/高) | px |
| align(表格在网页水平对齐方式) | center/ left/ right |
| cellspacing(单元格边框间的空白间距) | px (默认2px) |
| cellpadding(单元格边框与里面内容的距离) | px (默认1px) |
* 合并单元格
rowspan = 合并的单元格个数;
colspan = 合并的单元格个数
* 表格在网页中划分结构（后续配合js使用）；
<thead> </thead>
<tbody> </tbody>
<tfoot> </tfoot>
- 表单——收集用户信息
- input 系列标签
| 表单属性 | 值 |
|---|---|
| type | text/password/radio单选/checkbox复选/button普通按钮/submit提交按钮/reset重置按钮/image(图片按钮)/file(上传文件按钮) |
| palceholder(占位符；提示输入内容) | 有value时不显示 |
| value | |
| name(表单的名字) | |
| checked(默认选中项） | checked |
| multiple(选择多个文件） | multiple |
- 按钮
<button> </button>
* 文本域(通常用来写留言板)
<textarea> </textarea>
* 下拉列表
(用得较少，在不同浏览器中显示不一致,且默认样式修改起来复杂)；
<select>
<option> 北京 </option>
<option selected(默认选中项)> 广州 </option>
<option> 上海 </option>
...
</select>
- label标签——绑定表单和文字，点击绑定相应范围光标会自动跳转位置；
（方法1）label直接包含输入框：
<label> <input type="radio">男 <label>
（方法2）通过for 和id来控制：
<input type="radio" id="abc"/>
<label for="abc"> 男 <label>
！DAY❸ 引入CSS
- HTML补充（布局标签和特殊字符）
- 无语义的布局标签
<div></div>一行只能放一个；
<span></span>一行可以显示多个； - 有语义的布局标签
<header></header>网页头部
<nav></nav>网页导航
<footer></footer>网页底部
<aside></aside>网页侧边栏
<section></section>网页区块
<article></article>网页文章 - 特殊符号/字符实体
- 无语义的布局标签
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 | | |
| < | 小于 | < |
| > | 大于 | > |
| & | 和号 | & |
| © | 版权(copyright) | © |
- CSS的3种样式表引入方式
（CSS—层叠样式表，为html美化样式）-
行内样式——(标签内，配合js使用)
<h1 style="属性1:值;属性2:值"> </h1> -
内嵌式——(写在
<head></head>标签中间)
<style>
选择器(选择标签){
属性1：值1
属性2：值2
}
</style> -
外部样式表/外联式——(样式单独写在.css文件中,在html页面通过link引入)
<link rel="stylesheet" type="text/css" href="style.css" />
stylesheet → 被引入的是一个样式文件；
type→链接的文档类型(h5可省略)；
href→链接的相对/绝对路径；
-
- CSS基础选择器
(作用：选择页面中特定的元素/标签，方便对其设置样式)- 标签选择器
- 类选择器 ★用的最多/可重复调用；
- id选择器 ★只能调用一次；
- 通配符选择器 作用于所有标签/消耗资源(降低响应速度)；
标签选择器
<style>
P {
属性1：值1
属性2：值2
}
</style>
（页面中所有的P标签都会变成该样式）
类选择器
<style>
.red{
属性1：值1;
属性2：值2;
}
.font{ font-size:100px }
</style>
★ 调用多个类选择器时: <div class="red font"><div>
★ 类名可由 数字/字母/下划线/中划线 组成，但不可由 数字/中划线 开头；
id选择器：
<style>
# pink{
属性1：值1
属性2：值2
}
</style>
调用时：<div id="pink"><div>
通配符选择器
<style>
* {
属性1：值1
属性2：值2
}
</style>
- CSS字体样式
| 字体属性 | 值 |
|---|---|
| font-style(字体风格) | normal(正常)/italic(倾斜) |
| font-weight(字体粗细) | 100～900；normal(正常★等同400)；bold(加粗★等同700)； |
| font(字号) | em/px(相对单位 ★常用)；in/cm/mom/pt(绝对单位★不常用) |
| font-family(字体样式) | ↓ ◕‿◕ |
| 字体样式(常见字体系列) | 场景 | 特点 | 举个栗子 |
|---|---|---|---|
| 无衬线字体(sans-serif) | 多用于网页 | 笔画粗细均匀，首尾无装饰 | 黑体、Arial |
| 衬线字体(serif) | 多用于报刊、书籍 | 笔画粗细不匀，首尾有笔锋 | 宋体、Times New Roman |
| 等宽字体(monospace) | 多用于程序代码 | 每个字母/文字宽度相等 | consolas、Courier New |
★ font-family:"Microsoft YaHei",黑体,宋体,楷体;
(字体渲染规则：从左到右顺序查找，都不支持的情况下，根据操作系统显示最后字体系列的默认字体;
字体样式综合写法：
p {
font：字体风格 字体粗细 字号/行高 字体样式；
font:italic 700 20px/1.5 “黑体”;
★(前俩属性可以不写,省略后为默认值；连写必须要写后俩)
}
- CSS文本样式
| 文本属性 | |
|---|---|
| text-align(水平对齐方式) | left(左对齐) / center(居中) / right(右对齐)； |
| text-align能控制块级盒子内子元素的水平对齐；对文本、span、a、img、input有效； | |
| text-indent(文本缩进) | 2em ★em表示相对当前文字大小的倍数 |
| text-decoration(文本修饰) | none(无装饰线) / underline(下划线) / line-through(删除线) |
| line-height(行高) | 20px(具体像素)；2(相对文字大小的2倍) |
| height=line-height (单行文字垂直居中） | |
| color(文字颜色) | pink(关键字) / #ff1234(十六进制) / rgb(0,0.225) |
- CSS背景设置
| 背景属性 | 值 |
|---|---|
| background-color(背景颜色) | transparent(默认透明) / 具体颜色； |
| background-image(背景图片) | url(图片路径); |
| (背景颜色/图片不影响盒子大小；显示时, 插入图片>背景图片>背景颜色); | |
| background-repeat(背景平铺) | repeat(默认平铺) / no-repeat(不平铺) / repeat-x(横向平铺) / repeat-y(纵向平铺)； |
| background-position(背景图片定位) | x坐标 y坐标； |
| 定位可以用50px(像素值),或方位名词left/right/top/bottom/center； |
背景连写：
background:背景颜色 背景图片 背景平铺 背景定位;(推荐顺序,非强制)
background:url("路径") no-repeat 50px center;
| 背景其它属性 | 值 |
|---|---|
| background-attachment(背景附着) | scroll(背景图随内容滚动) / fixed(背景图固定)； |
| 背景透明 ★CSS3属性 | background:rgba(0,0,0,0.3) 透明度30% |
- 🛠 一些工具
- pxcook/PS软件
测量像素值、吸色； - emmet语法快速生成标签
ul>li*3 ✚ tab键 (父子级用>)
div+p ✚ tab键 (生成正常非父子级标签)
dl>dt+dd
.demo$*10 ($自增,生成类名为demo1-10的div);
- pxcook/PS软件
！DAY❹ 复合选择器、元素显示模式、CSS三大特性(导航栏)
- 复合选择器
(目的：为了更精准地选择目标元素)；
(一般浏览器中，链接标签<a>有固定的样式，使用时一般单独指定样式)
| 选择器 | 样式 |
|---|---|
| 后代选择器(★常用) | .nav a{ } |
| 子代选择器 | .nav>p { }； (只选择最近一级子元素里的p) |
| 交集选择器 | p.red ★不常用； (类名为red的p标签) |
| 并集选择器(★常用) | p,span,.red { } |
| 伪类选择器(★常用) | 链接伪类 a:link(未访问的链接) / a:visited(已访问的链接) / a:hover(鼠标移到链接上 / a:active(选定的链接) |
- 元素显示模式 ★
- 块级元素—block
(div、p、h、ul、li、dd、form等);- 独自占一行；
- 可以自由设置宽/高/内、外边距;(不设置宽高时,宽默认和父级一样;高度默认由内容撑开)；
- 行内元素—inline
(a、span、b、u、i等);- 一行可以显示多个元素；
- 设置宽、高无效，默认宽高跟着里面的内容走；
- 行内块元素—inline-block
(img、input、textarea、button等);- 一行可以显示多个行内块元素 (中间会有缝隙)；
- 可以自由设置宽、高、内/外边距,(不设置默认为本身内容宽度)；
- img属于行内元素，但有行内块特性；
- 行内块竖着写(换行)会保留一个空格，横着写或给父级元素添加font-size:0;可以去掉行内块间的空格(不常用);
- 显示模式转换—display★
转换成块元素：display:block;
转换成行内块：display:inline-block;
转换成行内元素：display:inline(用得极少);
(块元素作为大容器，可以嵌套文本/块级元素/行内元素/行内块元素等）;
(p标签中不要嵌套div,p,h等，显示会有问题)；
(链接a内部可以嵌套其他任意元素，别套a);
- 块级元素—block
- CSS三大特性
- 继承性
子元素会继承父元素的属性，常见可继承的属性：color / text- / font- / line-height;
常见应用场景(一定程度上减少代码)：
给body设置font-size:16px，从而统一页面在不同浏览器中显示的文字大小;
继承失效的情况：
元素的浏览器默认样式优先于继承的样式；
（如链接a的color；标题h的font-size；div的宽/高不能继承，但宽度独占一行有类似继承的效果） - 层叠性
相同标签的相同属性有不同的值，后者会覆盖前者； - 优先级 ★
!important > 标签行内样式(1,0,0,0) > id选择器(0,1,0,0) > 类/伪类选择器(0,0,1,0) > 标签选择器(0,0,0,1) > 通配符选择器 > 继承的样式；
注意点：
定义样式 .blue{ color:blue !important;}，html结构<div class="blue"><span></span></div>；span可以继承div的样式，但!important不能提升继承的优先级，继承优先级永远最低；
- 继承性
！DAY❺ 盒子模型
- 盒子模型
CSS中规定每个盒子分别由：content(内容区域)、padding(内边距)、border(边框)、margin(外边距)构成；- 内容区—content
如：width:100%;height:100px; - 边框——border
border-width(边框粗细)：*px;
border-style(边框样式)：none / solid(实线) / dashed(虚线) / dotted(点线);
border-color(边框颜色)：;
边框样式连写：1px solid red; - 内边距—padding
padding:10px(上下左右);
padding:10px(上下) 20px(左右);
padding:10px(上) 20px(左右) 30px(下);
padding:10px(上) 20px(右) 30px(下) 40px(左);
单边设置padding-top/bottom/left/right: *px;
★ (如果盒子没有给定宽度，padding不会撑开盒子) - 外边距—margin
margin:10px(上) 20px(右) 30px(下) 40px(左) (数值设置同padding);
单边设置：margin-top/bottom/left/right:*px；
- 内容区—content
★ 关于水平居中：
margin:0,auto; (有宽度的块级盒子在页面水平居中);
父级盒子添加属性text-align:center; 可以使里面的行内/行内块元素水平居中；
★ 外边距折叠/塌陷
垂直布局的块级元素，上下的margin值会合并，保留较大的值作为外边距；
嵌套的块级元素，父子元素紧贴的margin-top值会合并作用在父元素上；
★ 嵌套塌陷的解决方式：
1.给父元素设置border-top或padding-top(分割父子元素的margin-top);
2.给父元素设置 overflow:hidden;
3.转换成行内块元素;
4.设置浮动;
★ 行内元素的padding、margin建议只给左右设置；
- CSS3盒子模型
box-sizing:content-box(默认) / border-box(width宽度包含padding和border);
* CSS表格样式
table,tr,td {
border:1px solid black(表格边框);
border-collapse:collapse(相邻边框合并/细线);
}
！DAY❻ CSS3伪类、伪元素选择器
-
结构伪类选择器
（减少对类的依赖，常用于查找父级元素中的子元素）- nth-child(n)
- nth-of-type( )
-
CSS3伪元素选择器
div::before/after {content:" “;}
★ 必写属性content:” " 才生效;
★ 默认伪元素选择器的属性为行内元素； -
属性选择器
示例： div[class^=icon]{ border:1px solid red; } ★ ^ 以icon开头； $ 以...属性结尾； * 包含...属性的标签；
！DAY❼ CSS三种布局之——浮动
- CSS三种布局
| 布局模式 | |
|---|---|
| 普通流(标准流) | 块级元素占一行,从上到下排列；行内/行内块元素从左到右排列,占满自动折行； |
| 浮动 | 多个块级盒子一行显示； |
| 定位 | 将盒子定在浏览器某一位置； |
- 浮动
选择器 {float: none/left/right}; - 浮动特点：
- 浮动元素脱离标准流，不占位置；
- 浮动元素漂浮在标准流的上层，会覆盖标准流的盒子；
- 浮动找浮动：下一个浮动元素会排列在上一个浮动元素的后面；
- 浮动元素属性 display:block; 但特性类似于行内块，多个一行显示并可设置宽高；
- 浮动子元素不会超过父例子内边距；
- 多个盒子中间的一个盒子浮动，只影响后面的盒子，不影响前面盒子标准流；
- margin:0 auto; 和 text-align:center; 对浮动的元素不生效；
- 清除浮动的使用场景
父级盒子的高度由多个子盒子的高度撑开，
父级盒子不方便给具体的高度，或父级盒子高度为0 (如购物网店商品展示区)；
为了不影响下面内容的布局，需要清除浮动； - 清除浮动的方法
- 直接设置父盒子高度；
- 额外标签法(隔墙法)
.clear { clear:both/none; }
<div class=clear> </div>★空盒子添加在在浮动的最后一个盒子后面; - 添加overflow（触发BFC)
给父级盒子添加css属性：overflow:hidden； - 父盒子添加::after伪元素
★高版本浏览器清除浮动的样式；
.clearfix:after {
content:" ";
clear:both;
display:block;
height:0;
visibility:hidden;
}
- 使用双伪元素清除浮动
.clearfix:before
.cleat:after {
content:" ";
display:table;
}
.clearfix:after {
clear:both;
}
！DAY❽ 定位
- 定位的必要性
标准流：块盒子垂直上下排列；
浮动：块元素一行显示，左右排列；
定位：元素自由在某个例子内摆放； - 定位模式：position属性+边偏移属性；
示例：
position:relative;
top:100px;
left:100px;
| position属性 | |
|---|---|
| static 静态定位 | 元素默认定位方式，相当于无定位； |
| ★ relative 相对定位 | 不脱标，相对自身原有位置移动； |
| ★ absolute 绝对定位 | 脱标，在最近有定位属性的父级元素内移动； |
| 父元素没有定位时，以浏览器为准; | |
| sticky 粘性定位 | 不脱标，兼容性不好；通用用js实现粘性； |
-
常用的子绝父相布局
父元素：relative相对定位，占位置，看起来和标准流没什么区别;
子元素：absolute绝对定位，不占用位置，显示在上层，可在父盒子中移动； -
定位拓展
-
堆叠顺序——z-index
默认按 html标签 顺序叠放，最后的在最外层；
z-index 数值越大，盒子显示越在上方；
z-index只应用于相对定位、绝对定位和固定定位的元素； -
水平居中位置计算
使用场景：脱标的盒子无法用 margin:auto; 设置水平居中；
（如：浮动、绝对定位、固定定位的的盒子）
方法1：
position:absolute;
top:0; left:0; right:0; botton:0;
margin:auto;
方法2：
position:absolute;
left:50%;
top:50%;
margin-left: -盒子宽度的一半;
margin-top: -盒子高度的一半;
-
！DAY❾ CSS高级技巧
-
鼠标样示—cursor;
-
表单样式
- 取消 input 表单点击的默认轮廓样式：outline:none;
- 光标定位到表单时，修改样式：
input:focus {border:1px solid red;} - 取消文本域的默认可拖拽：resize:none;
-
显示与隐藏（2种方法）
- display:none(隐藏) / block;
隐藏的元素不占位置； - visibility:hidden(隐藏) / visible(可见);
隐藏后保留元素原来位置； - display和visibility都不可以加过渡效果，使用过渡效果可以用opacity(透明度);
- display:none(隐藏) / block;
-
溢出文字隐藏—overflow
overflow 可以触发BFC，可以解决外边距塌陷的问题，以及具有清除浮动的效果；
overflow：visible(完全可见) / hidden(超出部分隐藏) / scroll(加滚动条) / auto(超出时添加滚动条); -
垂直对齐
(图片、表单、文字属于行内块元素，默认基线对齐)
场景：如果盒子不设置宽高，默认由图片撑开，图片和文字基线对齐，图片下方会有一条空白缝隙；
去除图片空隙：img { Vertical-align：top/middle/bottom; } -
css精灵技术(sprite) ★
为了减少服务器接收/发送请求的次数，提高加载速度; -
滑动门
a设置背景左侧，span设置背景右侧； -
CSS3特性——圆角
border-radius: 50% (圆○)
border-radius:**px; (椭圆,数值给高度的50%) -
CSS3特性——阴影
box-shadow:10px(水平阴影) 20px(垂直阴影) 30px(模糊距离/虚实) 40px(阴影大小) # 000(阴影颜色) outset/inset(外/内阴影);
！DAY❿ 项目补充
- 引入icon图标
www.baidu.com/favicon.ico (获取网页ico图标)
icon放在根目录中，在 head 之间引入：
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"> - 图片规范
优先考虑 webp格式；
尽量不使用 png 格式，png8色位太低，png24压缩率低体积大；
pc 平台单张图片不大于200kb; - 网站优化三大标签
title
description
keywords - CSS属性书写顺序
- 布局定位属性
display, position, float, clear, visibility, overflow; - 自身属性
width, height, margin, padding, border, background; - 文本属性
color, font, text-decoration, text-align, vertical-align, white-space, break-word; - 其他属性（CSS3）
content, cursor, border-radius, box-shadow, text-shadow;
- 布局定位属性
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
