HTML5

1、深入了解网站开发

UI设计师

设计稿

web前端开发工程师（H5开发）

设计稿–>代码

数据库里的数据–>显示到页面

HTML ：结构
CSS ：样式
JavaScript ：用户交互行为

web后端开发工程师

数据库

2、HTML基本结构和属性

HTML：超文本标记语言
超文本：文本内容 + 非文本内容（图片、视频、音频）
标记：<单词>
语言：编程语言

标记也叫做标签，分为单标签和双标签

html常见标签：HTML5 元素标签含义大全(元素周期表)—HTML5星空 (html5star.com)

标签的属性：来修饰标签的，设置当前标签的一些功能。

<标签属性=“值” 属性2=“值2”>

<header title="hello">hello world</header>
<footer title="bye">see you world</footer>

设置title后当光标移至该语句时会出现该标题

3、HTML初始代码

每一个html文件都需要添加初始代码（符合html文件的规范写法），初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码。

！+ tab键：快捷创建html的初始代码

<!DOCTYPE html><!---文档声明：告诉浏览器这是一个html文件--->
<html lang="en">
    <!---
		html文件的最外层标签：包裹着所有html标签代码
    	lang="en"表示是一个英文网站，lang="zh-CN"表示一个中文网站
	--->
    <head>
        <meta charset="UTF-8">
        <!---
			元信息：是编写网页的一些赋值信息
			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>

凡是跟网页头部相关的信息都在标签里书写，凡是和网页正文内容有关的信息都放在标签里书写

4、HTML注释

<!—注释的内容—>：在浏览器中看不到，只能在代码中看到

意义

把暂时不用的代码注释起来，方便以后使用。
对开发人员进行提示。

快捷添加删除注释

ctrl + / ：给当前行内容加上注释
shift + alt + a : 创建新的注释

5、HTML语义化

所谓html语义化指的是根据网页中内容的结构，选择适合的html标签进行编写

好处

在没有CSS的情况下，页面也能呈现出很好的内容结构
有利于SEO，让搜索引擎爬虫更好的理解网页
方便其他设备解析（如屏幕阅读器、盲人阅读器等）
便于团队开发与维护

6、标题与段落

h标签

p标签

标题 --> 双标签：

…

在一个网页中，h1标签最重要，并且一个.html文件中只能出现一个h1标签

h5，h6标签在网页中不经常使用

段落 --> 双标签：

<!DOCTYPE html>
<html lang="zh">
<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>first</title>
</head>
<body>
	<h1>简介</h1>
	<h2>基本信息</h2>
	<p>男，2xxx年x月x日出生于xx</p>
	<p>
		xxxxxxxxxxxx
	</p>
	<h2>早年经历</h2>
	<p>从小就帅</p>
	<h2>个人生活</h2>
	<p>美女环绕3</p>
</body>
</html>

7、文本修饰标签

强调 --> 双标签：（加粗）
：（斜体）

strong的强调性更强，em稍弱。

下标：
上标：
删除文本：
插入文本：

一般情况下，删除文本都是和插入文本配合使用的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>second</title>
	</head>
	<body>
		<p>
			北京著名的高档百货店————<em>赛特购物中心</em>即将闭店。昨天，赛特购物中心总台服务人员表示“<strong>如果手里有购物卡，请尽快到店消费</strong>”。据这位服务人员介绍，目前购物中心正在进行清仓大甩卖。<del>特价电视原价3600元</del>，<ins>现清仓价只需1999元！</ins>
		</p>
		<p>
			勾股定理：a <sup>2</sup> + b <sup>2</sup> = c <sup>2</sup>
		</p>
		<p>
			水分子：H<sub>2</sub>O
		</p>
	</body>
</html>

实现效果：

8、图片标签与图片属性

img --> 单标签

src：引入图片的地址
alt：当图片出现问题的时候，可以显示一段友好的提示文字
title：提示信息（鼠标放置时出现）
width、height：图片的大小（在有带宽高属性时，图片未加载时段落间距便已经固定，未设置该属性则图片未加载时前后两段罗没有间距）

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>third</title>
</head>
<body>
	<img src="https://itenant/amp/entityid/AAMqqyx.img?h=416&w=624&m=6&q=60&o=f&l" alt="图片出现错误" title="男乒夺冠">
    <!---该图片地址不存在--->
</body>
</html>

实现效果：

如果alt=“”则什么都没有出现，无法到此处存在图片。

9、引入文件的地址路径

相对路径

.在路径中表示当前路径

,.在路径中表示上一级路径（…/…/img/1.jpg表示当前文件的外面两层中的img文件夹中的1图片）

绝对路径

E:/ke/qf_dl2021/img/animal/dog.jpg

http://cms-bucket.ws.126.net/2019/04/16/7a5b31e0ce5474a7517.jpeg

10、跳转链接

a --> 双标签

herf属性：链接的地址
target属性：可以改变链接打开的方式，默认情况下当前页面打开（_self），新窗口打开（_blank)

base --> 单标签：改变标签的默认行为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>forth</title>
		<base target="_blank">
	</head>
	<body>
		<!-- <a href="http://www.baidu.com" target="_self">访问百度</a> -->
		<a href="http://www.baidu.com" title="访问百度">
			<img src="1.png" alt="">
			<br>
			手机
		</a>
	</body>
</html>

11、跳转锚点

不产生新的页面，只是在当前页面不同位置进行跳转，即书签链接。

实现一

#号+id属性（加给h标签）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>fifth</title>
	</head>
	<body>
		<a href="#语文书">语文</a>
		<a href="#数学书">数学</a>
		<a href="#英语书">英语</a>
		<h2 id="语文书">这是一本语文书</h2>
		<p>模拟段落</p>
		<h2 id="数学书">这是一本数学书</h2>
		<p>模拟段落</p>
		<h2 id="英语书">这是一本英语书</h2>
		<p>模拟段落</p>
	</body>
</html>

实现二

#号+name属性（加给a标签）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>fifth</title>
	</head>
	<body>
		<a href="#语文书">语文</a>
		<a href="#数学书">数学</a>
		<a href="#英语书">英语</a>
		<a name="语文书"></a>
		<h2>这是一本语文书</h2>
		<p>模拟段落</p>
		<a name="数学书"></a>
		<h2>这是一本数学书</h2>
		<p>模拟段落</p>
		<a name="英语书"></a>
		<h2>这是一本英语书</h2>
		<p>模拟段落</p>
	</body>
</html>

12、特殊符号

编写一些文本时，经常会遇到输入法无法输入的字符，或者往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在html中，为它们准备了专门的代码。

作用：解决冲突，左右尖括号，添加多个空格

重点符号：&it,&gt,&nbsp

13、列表

无序列表

<ul>、<li>：列表的最外层容器、列表项

ul和li必须是组合出现的，他们之间是不能有其他标签的

<!---正确写法--->
<ul>
	<li>第一项</li>
	<li>第二项</li>
</ul>

<!---错误写法--->
<ul>
    <p>
        <li>第一项</li>
    </p>
</ul>

type属性：改变列表标记的样式，可以放在ul标签统一更改中，也可以放在p标签中更改（一般都是用CSS去控制）

tip：使用li*5后按tab键可以快速创建五个li标签

有序列表

<ol>、<li>：列表的最外层容器、列表项

有序列表用的少，经常用的是无序列表，无序列表可以去代替有序列表。

定义列表

列表项需要添加标题和对标题进行描述的内容

<dl>：定义列表
<dt>：定义专业术语或名词
<dd>：对名词进行解释和描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>sixth</title>
	</head>
	<body>
		<dl>
			<dt>HTML</dt>
			<dd>超文本标记语言</dt>
			<dt>CSS</dt>
			<dd>层叠样式表</dt>
			<dt>JavaScript</dt>
			<dd>网页脚本语言</dt>
		</dl>
	</body>
</html>

运行结果：

嵌套列表

列表之间可以互相嵌套形成多层级列表

快捷方式：ul>li*4>ul>li*5+tab（>表示下一层嵌套）

删除多行的缩进：shift+tab

鼠标左键，shift+alt，鼠标左键，出现同一列（或者Ctrl+左键）

14、表格

表格标签

<table>：表格的最外层容器
<tr>：定义表格行
<th>：定义表头
<td>：定义表格单元
<caotion>：定义表格标题

他们之间有嵌套关系，要符合嵌套规范

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>seventh</title>
	</head>
	<body>
		<table>
			<caption>天气预报</caption>
			<thead><!---语义化标签--->
				<tr>
					<th>日期</th>
					<th>天气情况</th>
					<th>出行情况</th>
				</tr>
			</thead>
			<tbody><!---语义化标签--->
				<tr>
					<td>2021年8月7日</td>
					<td>天气晴</td>
					<td>适合出行</td>
				</tr>
				<tr>
					<td>2021年8月8日</td>
					<td>有小雨</td>
					<td>出门注意带伞</td>
				</tr>
			</tbody>
			<tfoot><!---语义化标签--->
				
			</tfoot>
		</table>
	</body>
</html>

运行结果：

语义化标签：<thead>,<tbody>,<tfoot>（无实际作用，只是为了更规范）

在一个table中tbody是可以出现多次的，但是thead和tfoot只能出现一次

表格属性

border：表格边框
cellpadding：单元格内的空间（用空白填充，上对齐时会被填充挡住）
cellspacing：单元格之间的空间（用空白填充）
rowspan：合并行
colspan：合并列
align：左右对齐方式（left，center，right）
valign：上下对齐方式（top，middle，bottom）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>seventh</title>
	</head>
	<body>
		<table border=1 cellpadding="20" cellspacing="10" align="center">
			<caption>天气预报</caption>
			<thead><!---语义化标签--->
				<tr>
					<th colspan="2">日期</th>
					<th>天气情况</th>
					<th>出行情况</th>
				</tr>
			</thead>
			<tbody valign="bottom"><!---语义化标签--->
				<tr>
					<td rowspan="2">2021年8月7日</td>
					<td>白天</td>
					<td>天气晴</td>
					<td>适合出行</td>
				</tr>
				<tr>
					<td>黑夜</td>
					<td>天气晴</td>
					<td>适合出行</td>
				</tr>
				<tr>
					<td rowspan="2">2021年8月8日</td>
					<td>白天</td>
					<td>有小雨</td>
					<td>出门注意带伞</td>
				</tr>
				<tr>
					<td>黑夜</td>
					<td>有小雨</td>
					<td>出门注意带伞</td>
				</tr>
			</tbody>
			<tfoot><!---语义化标签--->
				
			</tfoot>
		</table>
	</body>
</html>

实现效果：

15、表单

表单标签input

<form>:表单的最外层容器

<input>:标签用于搜索用户信息，根据不同的type属性值，展示不同的空间，如输入框，密码框，复选框等。

type属性

text：普通的文本输入框
password：密码输入框
checkbox：复选框
radio：单选框
file：上传文件
submit：提交按钮
reset：重置按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="https://www.baidu.com/"><!--action中地址为数据提交地址-->
			<h2>输入框：</h2>
			<input type="text" placeholder="请输入用户名">
			<h2>密码框：</h2>
			<input type="password" placeholder="请输入密码">
			<!--placehoder属性让输入框上出现提示（不为空时则消失）-->
			<h2>复选框</h2>
			<input type="checkbox" checked>苹果
			<input type="checkbox" checked>香蕉
			<input type="checkbox" disabled>梨子
			<!--
				checked属性使得选项被默认选择好
				disabled属性使得选项无法被选择
			-->
			<h2>单选框</h2>
			<input type="radio" name="gender">男
			<input type="radio" name="gender">女<!--通过相同的name变成一组，实现单选-->
			<h2>上传文件</h2>
			<input type="file">
			<h2>提交按钮</h2>
			<input type="submit">
			<h2>重置按钮</h2>
			<input type="reset">
		</form>
	</body>
</html>

表单相关标签

多行文本框：textarear

下拉菜单：select>option

辅助表单：label

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			<h2>多行文本框</h2>
			<textarea rows="20" cols="100"></textarea>
			<h2>下拉菜单</h2>
			<select>
				<option selected disabled>请选择</option>
				<option>深圳</option>
				<option>广州</option>
				<option>汕头</option>
			</select>
			<select size="2"><!--设置下拉菜单显示的项数-->
				<option>深圳</option>
				<option>广州</option>
				<option>汕头</option>
			</select>
			<select multiple><!--设置可以多选，通过ctrl键或者鼠标拖动-->
				<option>深圳</option>
				<option>广州</option>
				<option>汕头</option>
			</select>
			<input type="file" multiple><!--可以上传多个文件-->
			<input type="radio" name="gender" id="man"><label for="man">男</label>
			<input type="radio" name="gender" id="woman"><label for="woman">女</label>
			<!--将单选框的id与后面文字形成映射关系，使得点击文字也可以选中-->
		</form>
	</body>
</html>

表格表单结合

表单没有嵌套规范，表格有，所以应该先写表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="">
			<table border="1" cellpadding="30">
				<tbody>
					<tr>
						<th rowspan="4">
							总体信息
						</th>
						<th colspan="2">
							用户注册
						</th>
					</tr>
					<tr align="right">
						<td>用户名：</td>
						<td>
							<input type="text" placeholder="请输入用户名">
						</td>
					</tr>
					<tr align="right">
						<td>密码：</td>
						<td>
							<input type="password" placeholder="请输入密码">
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<input type="submit">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
							<input type="reset">
						</td>
					</tr>
				</tbody>
			</table>
		</form>
	</body>
</html>

16、div和span

div（块）：全称为division，”分割、分区“的意思，div标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数标签都可以嵌套在div标签中，div标签中还可以嵌套多层div标签，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。

span（内敛）：用来修饰文字的，div和span都是没有任何默认样式的，需要配合css使用。

CSS

1、CSS基础语法

格式：选择器

单位：px–>像素（pixel）、%–>百分比（相对于父容器）

基本样式：width、height、background-color

CSS注释：/* */

2、CSS样式

内联（行内、行间）样式

在html标签上添加style属性来实现的

<div style="width: 100px; height: 100px; background-color: #4682B4">
	这是一个块
</div>

内部样式

在style标签里添加的样式（优点是可以复用代码）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		div{width: 10%; height: 100px; background-color: #9ACD32;}
		span{background-color: #6A5ACD;}
	</style>
	<body>
		<div>
			这是一个块
		</div>
		<span>
			这是一个内联
		</span>
	</body>
</html>

外部样式

引入一个单独的CSS文件，name.css

通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性比指定资源的地址

通过@import方式引入（此方式问题较多，不建议使用）

3、CSS中的颜色表示法

单词表示法
十六进制表示法
RGB三原色表示法

4、CSS背景样式

background-color：背景颜色
background-image：背景图

url：背景地址

默认水平垂直都铺满背景图
background-repear：平铺方式

repeat-x：x轴进行平铺

repeat-y：y轴进行平铺

repeat：x，y都进行平铺（默认值）

no-repeat：不进行平铺
background-position：背景位置

x，y：数字（百分比）|单词

（background-position：100px 100px|center top）
background-attachment：背景图随滚动条的移动方式

scroll：背景位置是按照当前元素进行偏移的（默认值），即滚动滚动条时图片不动

fixed：背景位置是按照浏览器进行偏移的，即跟着滚动条滚动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{height: 2000px}/*扩大页面高度，使得出现滚动条*/
			div{width: 200px; height: 200px; 
				background-color: #9ACD32;
				background-image: url(../img/1.png); 
				background-position: 0 0;
				background-repeat: no-repeat;
				background-attachment: fixed;
			}
		</style>
	</head>
		<div></div>
	<body>
	</body>
</html>

显示效果

拖动前：

拖动后：

将background-attachment属性改为scroll后

拖动前：

拖动后：

若将背景图片位置设置为center center，则当为fixed时看不到背景图片（因为背景图片位于相对整个页面的center，已经超出容器大小，无法显示）

5、边框样式

border-style：边框样式

solid：实线

dashed：虚线

dotted：点线
border-width：边框大小
boerder-color：边框颜色

中间可加入方向，只针对某一条边来设置样式（top、bottom、left、right)

6、文字样式

font-family：字体类型

一次可以设置多个字体，当前面的字体电脑中不存在时则选择后续方案，都不存在时自动选择电脑默认字体
当字体类型名中出现空格时需要使用引号括起来

衬线体端点有棱角

font-size：字体大小

默认大小为16px

数值法：字体大小一般设为偶数（方便文字对齐）

单词法：

xx-small：最小
x-small：较小
small：小
medium：正常（默认值）
large：大
x-large：较大
xx-large：最大

font-weigt：字体粗细

单词法：

正常：normal
加粗：bold

数值法：

100-900（100-500为正常，600-900为加粗）

font-style：字体样式

正常：normal

斜体：italic（oblique也表示斜体，但是使用较少）

区别：italic带有倾斜属性的字体才可以设置倾斜操作

oblique没有倾斜属性的字体也可以设置倾斜操作

color：颜色

7、文本

text-decoration：文本装饰

下划线：underline
删除线：line-through
上划线：overline
不添加任何装饰：none

可以添加多个文本修饰，之间用空格隔开

text-transform：文本大小写

小写：lowercase
大写：uppercase
只针对首字母大写：capitalize

（针对英文）

text-indent：文本缩进

首行缩进

em单位：相对单位，1em永远都是跟字体的大小相同

text-align：文本对齐方式

默认左对齐

对齐方式：left，right，center，justify（两端点对齐）

line-height：段落行高

段落行高由上边距，字体大小，下边距三者组成

默认行高不是固定值，是随当前字体的大小不断变化的

取值：number（px）| scale（比例值，跟文字大小成比例）

改变行高取值其实是改变上边距大小

letter-spacing：字之间的间距

word-spacing：词之间的间距

（只针对于英文）

折行问题

在容器中输入中文或英文时默认会自动折行，但是当输入的英文中出现很长的单词或遇到阿拉伯数字时不会自动折行。

word-break：break-all（非常强烈的折行，将单词紧挨在一起）
word-wrap：break-word（不是那么强烈的折行，会产生空白区域）

8、CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式

一个CSS属性控制多种样式，叫做复合样式

复合样式：background，border，font

复合的写法：通过空格的方式实现

border-right : 2px black solid;

background : red url() repeat 0 0;

复合写法有的不需要关心顺序，有的需要。（background，border不需要）

font最少要有两个值size family，且size要在family前面，其他属性写在这二者前面

9、CSS选择器

ID选择器

css：#elem{}
html：id=“elem”

命名规范：

id是唯一值，在一个页面中只能出现一次，不能有相同的id
命名的第一位不能是数字
驼峰式(小驼峰：searchButton，大驼峰：SearchButton)、下划线式、短线式

clss选择器

css：.elem{}
html：class=“elem”

注：

class选择器是可以复用的（不同的容器可以有相同的class）
可以添加多个class样式（<div class="box content"></div>）
多个class样式的时候，样式的优先级根据CSS中的顺序决定，而不是class属性中的顺序
标签+类的写法（div.elem、p.elem使得该类只对于该容器生效）

标签选择器（TAG选择器）

div{}

适用的场景：

去掉某些标签的默认样式时
复杂的选择器中，如层次选择器

群组选择器（分组选择器）

可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用

通配选择器

*{} == div,ul,li,p,h1,h2…{}

尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用！

使用的场景：

去掉所有标签的默认样式时

层次选择器

后代：M N{} M后层的所有N标签
父子：M>N{} M的下一层N标签
兄弟：M~N{} 当前M下面的所有兄弟（同级别）N标签
相邻：M+N{} 当前M相邻的N标签

属性选择器

M[attr]{}

=：完全匹配
*=：部分匹配
^=：起始匹配
$=：结束匹配
[][]：组合匹配

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		div[class]{background:red}
		/*对带有class属性的div起作用，即第二三四五和最后一个*/
		div[class="box"]{background:red}
		/*对class属性的值为box的div起作用，即第二个和最后一个div*/
		div[class*="box"]{color: blue;}
		/*对class属性里含有box的div都起作用，即第二个、第四个和第五个和最后一个div*/
		div[class^="box"]{color:orange}
		/*对以box为起始字符的div起作用，即第二个和第五个和最后一个*/
		div[class$="box"]{color:orange}
		/*对以box为结束字符的div起作用，即第二个和第四个和最后一个*/
		div[class][id]{color:pink}
		/*对同时具有id和class属性的div起作用，即最后一个*/
	</style>
	<body>
		<div>
		    aaaaa
		</div>
		<div class="box">
		    bbbbb
		</div>
		<div class="search">
		   	cccccc
		</div>
		<div class="bigbox">
		    BBBBB
		</div>
		<div class="boxbig">
		    BBBBB
		</div>
		<div class="box" id="boxx">
		    bbbbb
		</div>
	</body>
</html>

伪类选择器

CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上时，用伪类来添加。

M：伪类{}

：link——访问前的样式（只能添加给a标签）
：visited——访问后的样式（只能添加给a标签）
：hover——鼠标移入时的标签（可以添加给所有的标签）
：active——鼠标按下时的标签（可以添加给所有的标签）

注：如果四个伪类都生效，一定要注意顺序为：LVHA

一般网站只这样去设置：a{}和a:hover{}（移入前后）

：after——通过伪类的方式给元素后面添加一个文本内容
：before——通过伪类的方式给元素前面添加一个文本内容

div：after{content:"world";color:red}

<div>hello</div>

-->hello world(hello为黑色，world为红色)

——可以用于实现浮动清除，设置列表前面的图标等功能

：checked，：disabled，：focus都是针对表单元素的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			:checked{width: 100px; height: 100px}
			:disabled{width: 100px; height: 100px}
			:focus{background-color: pink}
		</style>
	</head>
	<body>
		<input type="checkbox">
		<input type="checkbox" disabled>
		<input type="text">
	</body>
</html>

check之前：

点击（check）之后：

光标点击前

光标点击后

结构性伪类选择器

：nth-of-type(num)
：nth-child(num)

——num从1开始，表示第num项

——当num写n时表示所有项，2n表示偶数项，2n+1表示基数项

：first-of-type
：last-of-type
：only-of-type——只有一个时起作用

child和type的区别：

div：nth-of-type（2）表示第二个div

div：nth-of-child（2）表示第二个容器，如果第二个容器是div则起作用，不是则不起作用

10、CSS样式继承

文字相关的样式可以继承

布局相关的样式不能继承（如border，height等）

但是可以使用border：inherit来手动继承父样式

11、CSS优先级

相同样式优先级

当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况

内部样式和外部样式

内部样式和外部样式优先级相同，如果都设置了相同样式，那么后写入的引入方式优先级高

单一样式优先级

style行间>id>class>tag>*>继承

权重1000、100、10、1（代表的是等级，即使100个1也小于10）

<div id="elem" style="color:blue"句中的style称为style行间

！important

提升样式优先级，非规范方式，不建议使用

#elem{color：red !important}

不能针对继承的属性进行优先级的提升

标签+类与单类

标签+类的优先级大于单类

群组优先级

群组选择器与单一选择器优先级相同，靠后写的优先级高

层次优先级

权重比较

ul li .box p input{} 1+1+10+1+1

.hello span #elem 10+1+100

约分比较

ul li .box p input{} -->li p input{}

.hello span #elem -->#elem{}

尽量写三层以内的层次

12、CSS盒子模型

组成

content–>padding–>border–>margin

物品填充物包装盒盒子间的间距

content：内容区域 width和height组成的

padding：内边距（内填充）

只写一个值：上下左右
写两个值：上下、左右
写四个值：上、右、下、左

单一样式只能写一个值：padding-left/right/top/bottom

margin：外填充（两个盒子之间的间距）

背景颜色会填充到margin以内的区域（content，padding，border），不包括margin

文字会在content区域

padding不能为负值，而margin可以为负数（两个盒子相交）

box-sizing

box-sizing为盒子的尺寸，可以改变盒子模型的展示形态

默认值：content-box：width、height作用于content

border-box：width、height作用于content，padding和border

使用场景：

不用再去计算一些值（例如给定可以分配的范围，如果使用content-box需要计算多少的width加上padding后不会超过）
解决一些百分比的问题（如果设置一个占百分之百的盒子，后又加上边框和填充则会超过范围，出现滚动条，若设置为border-box则刚好

盒子模型的一些问题

margin叠加问题

上下margin同时存在的时候，会取上下值中较大的作为边距（左右则不会有该问题）

解决方案：

BFC规范
想办法只给一个元素添加间距

margin传递问题

margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的

解决方案：

BFC规范
给父容器加边框
margin换成padding

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			#box2{
				width: 100px;
				height: 100px;
				background-color: blue;
                margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			<div id="box2">
				
			</div>
		</div>
	</body>
</html>

将margin-top: 100px;改为margin-left: 100px

拓展

margin的居中

（margin可以左右自适应，不能上下自适应）

margin-left：auto——左边全都是空白，盒子右靠齐

margin-right：auto——右边全都是空白，盒子左靠齐

margin：0 auto——居中

width和height不设置的时候对盒子模型的影响

如果宽度设置为百分之百，添加边框后会超过父级盒子的大小

如果不设置，则宽度永远保持与父级一致

设置为100%，padding-left：50px：

不设置宽度，padding-left：50px：

13、标签分类

按类型

block（块）：div、p、ul、li、h1…

1、独占一行

2、支持所有样式

3、不写宽的时候跟父容器的宽相同

4、所占区域是一个矩形
inline（内联）：span、a、em、strong、img（因为img也是替换元素所以可以设置宽高）,

1、挨在一起的

2、有些样式不支持，比如width，height、margin（左右支持，上下不支持）、padding（左右支持、上下不支持）

3、不写宽时，宽度由内容决定

4、所占的区域不一定时矩形

5、内敛标签之间会有空隙，原因是换行产生的（可以通过在body把font-size全换成0然后在需要输入文本的地方重新设置字体大小，这样间隙中的空格大小则为0）
inline-block：input、select…

1、挨在一起，但是支持宽高

2、所占区域是一个矩形

3、标签之间会有空隙

布局一般用块标签，修饰文本一般用内联标签

按内容

Flow：流内容
Metadata：元数据
Sectioninng：分区
Heading：标题
Phrasing：措辞
Embedded：嵌入的
Interactive：互动的

按显示

替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容（没有属性的话本身没有显示内容）

img、iput

非替换元素：将内容直接告诉浏览器，将其显示出来

div、h1、p

14、显示框类型

display

block
inline
block-inline
none：不进行显示

可以将原本属于block的div标签更改为inline,

注：display：none——不占空间的隐藏

visibility：hidden——占空间的隐藏

15、标签嵌套规范

块标签可以嵌套内联标签

块标签不一定能嵌套块标签（比如p不能嵌套div）

内联标签不呢个嵌套块标签（a标签除外，a可以嵌套块）

ul、li
dl、dt、dd
table、tr、td

16、overflow溢出隐藏

overflow

visible：默认显示
hidden：裁剪隐藏
scroll：下方和右方都出现滚动条，不管是否溢出
auto：只有溢出方向出现滚动条。
x轴、y轴：overflow-x、overflow-y可对下方和右方分别设置

默认：

hidden：

17、透明度与手势

opacity：0（透明）-1（不透明）0.5为半透明

占空间，且所有的子内容也会透明！

rgba：前三个值设置背景颜色，最后一个值设置透明度（0-1）

可以让指定的样式透明，而不影响其他样式（其中的文字不会被透明）

cursor：手势

auto：自动变化（默认的手势）

default：普通箭头

要实现自定义手势：

准备图片：.cur、ico
cursor:url(./img/cursor/ico),auto

18、最大、最小宽高

min-width：宽度大于等于…（内容大于值时则自动增大宽）
max-width：宽度小于等于…（内容小于值时则自动减小宽）
min-height：高度大于等于…
max-height：高度小于等于…

%单位：换算–>以父容器的大小进行换算，跟祖先无关

一个容器怎么适应屏幕的高：

html，body{height：100%}

.container{height:100%}

19、CSS默认样式

有些标签有默认样式，有些标签没有默认样式

没有默认样式：div、span…

有默认样式：body、h1…h6、p、ul…

body–> margin：8px
h1–> margin（上下）：21.44px，font-weight：bold
p–> margin（上下）：16px
ul–> margin（上下）：16px padding（左）：40px
list-style：disc
a–> text-decoration：underline

20、CSS reset

简单的CSSreset：

*

优点：不用考虑哪些标签有默认的margin和padding

缺点：稍微影响性能（会对没有默认值的标签如div再次设置）
ul
a
a:hover
img

解决的现象：图片跟容器底部有一些空隙

出现该现象的原因：内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的

第二种解决方法：

vertical-align:baseline;基线对齐

vertical-align:bottom;底线对齐

写具体页面或一个布局效果的时候：

写结构
css重置样式
写具体样式

21、float浮动

文档流：文档流是文档中可显示对象在排列时所占用的位置

float特性：加浮动的元素会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列

float取值：left、right、none（默认）

浮动元素不会撑开父容器的大小，只有同属于文档流才可以撑开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		body{
			border: 1px black solid;
		}
		#box1{
			width: 100px;
			height: 100px;
			background-color: yellow;
			float: left;
		}
		#box2{
			width: 200px;
			height: 200px;
			background-color: red;
			float: left;
		}
		</style>
	</head>
	<body>
        <div id="box1"></div>
		<div id="box2"></div>
	</body>
</html>

由于浮动，此时body高度为0

如果将box2的浮动去掉，则body的高度会被box2撑开到200px

float注意点

只会影响后面的元素

如果只给box2设置浮动，则如下
内容默认提升半层

蓝色块为1层，蓝色块上的文字为1.5层，红色为2层，所以实现文字环绕浮动效果
默认宽根据内容决定

如果没设置宽时，本身div容器会和父容器宽相同，然而设置浮动之后宽会由内容决定
换行排列
主要给块元素添加，但也可以给内联元素添加

块元素原本按照上下排列，添加浮动后可以实现左右排列而方便布局

清除浮动

上下排列：clear

left、right、both

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <title></title>
		<style>
		#box1{width: 100px; height: 100px; background-color: red; float: left;}
		#box2{width: 200px; height: 200px; background-color: #4CC9FF; /* clear: left; */}
		</style>
	</head>
	<body>
		<div id="box1"></div>
		<div id="box2"></div>
	</body>
</html>

加上clear: left;–>

嵌套排列：

固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果
父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素
overflow：hidden（BFC规范），如果有子元素想溢出，那么会受到影响

display：inline-block，不推荐，父容器会影响到后面的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* #box1{width: 100px; height: 100px; background-color: red; float: left;}
		#box2{width: 200px; 	height: 200px; background-color: #4CC9FF; clear: left;} */
		
		#box1{width: 200px; border: 1px black solid; /* overflow: hidden */	display: inline-block}
		#box2{width: 100px; height: 200px; background-color: red; float: left} 
		</style>
	</head>
	<body>
		<!-- <div id="box1"></div>
		<div id="box2"></div> -->
		
		<div id="box1">
			<div id="box2">
				
			</div>
		</div>
		aaa
	</body>
</html>

设置空标签：不推荐，会多添加一个标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		#box1{width: 200px; border: 1px black solid;}
		#box2{width: 100px; height: 200px; background-color: red; float: left} 
		#clearfloat{clear: both}
		/*使得clearfloat不受box2的浮动影响，即这两个div上下排列
		  又因为clearfloat与box1都属于文档流，可以撑开box1*/
		</style>
	</head>
	<body>
		<div id="box1">
			<div id="box2"></div>
			<div id="clearfloat"></div>
		</div>
		aaa
	</body>
</html>

after伪类：推荐，是空标签的加强版，目前各大公司的做法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
	#box1{width: 200px; border: 1px black solid;}
	#box2{width: 100px; height: 200px; background-color: red; float: left} 
	.clear::after{content:""; clear: both; display: block;}
     /* clear标签只会对块起作用，而content内容是内敛，所以需要先display换为块*/
	</style>
	<body>
		<div id="box1" class="clear">
			<div id="box2">
			</div>
		</div>
		aaa
	</body>
</html>

22、position定位

css中position属性用于指定一个元素在文档中的定位方式，top、right、bottom、left属性则决定了该元素的最终位置

取值

static（默认）
relative
absolute
fixed
sticky

relative相对定位

如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不影响其他元素布局
left、top、right、bottom是相对于当前元素自身进行偏移的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		#box1{width: 100px; height: 100px; background-color: red;}
		#box2{width: 100px; height: 100px; background-color: yellow; position: relative;
		left: 100px; top: 100px;}
		#box3{width: 100px; height: 100px; background-color: blue;}
		</style>
	</head>
	<body>
		<div id="box1"></div>
		<div id="box2"></div>
		<div id="box3"></div>
	</body>
</html>

absolute绝对定位

使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认的宽根据内容决定（让块具备内联的特性）
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{width: 300px; height: 300px; border: 1px black solid; margin: 50px;}
			#box2{width: 100px; height: 100px; background-color: red;}
		</style>
	</head>
	<body>
		<div id="box1">
			<div id="box2"></div>
		</div>
	</body>
</html>

效果为：

如果给box2加上绝对定位position: absolute; left: 10px; top: 10px

则变为：

如果给box1加上定位position: relative

则变为：

即定位是相对于最近一个有定位的元素，如果没有则相对于整个文档

fixed固定定位

使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认的宽根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响，即无论怎么滚动都在那个位置，且与祖先元素无关

可以用于做返回顶部功能

sticky黏性定位

在指定的位置，进行黏性操作

div{background：red；position：sticky; top: 0

拖动前（无区别）：

拖动滚动条后：

z-index定位层级

默认层级为0

如果没有设置层级时，两个容器重叠时，默认后设置的图层会在上面，此时可以通过设置容器的层级来更改。
嵌套时候的层级问题

比较层级时通过外层比较，一个嵌套结构如果外层的层级低，里层的再高也不起作用，只有当外层没有设置层级时，里层的层级才会起作用

导航栏的实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{margin: 0; padding: 0;}
		ul{list-style: none;}
		#menu{width: 100px; height: 24px; border: 1px black solid; margin: 20px auto; text-align: center; position: relative;}
		#menu ul{width: 100px; border: 1px black solid; position: absolute; left: -1px; top: 24px; display: none; background-color: white;}
		#menu:hover ul{display: block;}
		#menu li:hover{background-color: antiquewhite;}
		p{text-align: center;}
		</style>
	</head>
	<body>
		<div id="menu">
			卖家中心
			<ul>
				<li>列表项</li>
				<li>列表项</li>
				<li>列表项</li>
				<li>列表项</li>
			</ul>
		</div>
		<p>测试段落</p>
	</body>
</html>

23、CSS添加省略号

width 必须有一个固定的宽
whit-space：nowrap 不让内容折行
overflow：hidden 隐藏溢出的内容
text-overflow：ellipsis 添加省略号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		#content{width: 100px; height: 20px; border: 1px black solid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
		</style>
	</head>
	<body>
		<div id="content">
			再没更卑微oh no，即使唉声叹气还要当趣味
		</div>
	</body>
</html>

该操作只能实现单行的省略

24、CSS Sprite

特性：CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载

好处：可以减少图片的质量，网业的图片加载速度快

减少图片的请求次数，加快网页的打开

25、CSS圆角设计

border-radius：20px

取值实际表示的是相切圆的半径

当取值等于块的宽和高的一半时（或50%），则得到一个圆

写两个值时，前一个代表左上和右下，后一个代表左下和右上

写四个值时，表示从左上开始顺时针到左下

取值为20px/40px时，代表相切的是一个宽为20px，高为40px的椭圆

height：100px；width：50px；border-radius：100px 100px 0 0则得到半圆

Q.E.D.

欢迎来到勇者の小栈

HTML5

1、深入了解网站开发

UI设计师

web前端开发工程师（H5开发）

web后端开发工程师

2、HTML基本结构和属性

3、HTML初始代码

4、HTML注释

意义

快捷添加删除注释

5、HTML语义化

好处

6、标题与段落

7、文本修饰标签

8、图片标签与图片属性

9、引入文件的地址路径

相对路径

绝对路径

10、跳转链接

11、跳转锚点

实现一

实现二

12、特殊符号

13、列表

无序列表

有序列表

定义列表

嵌套列表

14、表格

表格标签

表格属性

15、表单

表单标签input

表单相关标签

表格表单结合

16、div和span

CSS

1、CSS基础语法

2、CSS样式

内联（行内、行间）样式

内部样式

外部样式

3、CSS中的颜色表示法

4、CSS背景样式

5、边框样式

6、文字样式

font-family：字体类型

font-size：字体大小

font-weigt：字体粗细

font-style：字体样式

color：颜色

7、文本

text-decoration：文本装饰

text-transform：文本大小写

text-indent：文本缩进

text-align：文本对齐方式

line-height：段落行高

letter-spacing：字之间的间距

word-spacing：词之间的间距

折行问题

8、CSS复合样式

9、CSS选择器

ID选择器

clss选择器

标签选择器（TAG选择器）

群组选择器（分组选择器）

通配选择器

层次选择器

属性选择器

伪类选择器

结构性伪类选择器

10、CSS样式继承

11、CSS优先级

相同样式优先级

内部样式和外部样式

单一样式优先级

！important

标签+类与单类

群组优先级