WEB基础

语义化标签

元素	说明
`article`	定义独立的来自外部的文档，如新闻投稿、博客文章、论坛帖子等
`aside`	一般用于网页中的侧边栏或者文章内部的标注框
`header`	页面的头部区域，通常包括网站logo、链接导航、搜索框、banner
`nav`	页面的导航链接区域
`main`	定义文档主要内容
`section`	定义文档的区域
`footer`	文档的页脚
`mark`	标记、突出显示文本
`ul`	无序列表
`form`	创建HTML表单
`button`	定义按钮
`i`	用于表示区分普通文本的其他文本，浏览器通常会将其内容显示为斜体

表单标签

1、`<form></form>`标签

action：规定表单提时，表单数据提交的URL
method：规定用于发送form-data的HTTP方法，常用属性值为get、post

2、`<input />`元素

类型	描述
`text`	普通文本框，一般默认20个字符宽度
`textarea`	多行文本框
`button`	普通按钮
`radio`	单选框
`checkbox`	多选框
`reset`	表单重置按钮
`submit`	表单提交按钮
`password`	密码输入框，密码字段使用圆点或星号代替

3、`<label></label>`标签

4、`<select></select>`标签

<select>
	<option value=" trainee">C1见习工程师能力认证</option>
	<option value="web ">C4前端基础能力认证</option>
	<option value=" java">C4Java基础能力认证</option>
	<option value=" python">C4Python基础能力认证</option>
</select>

图1：select元素使用示例

5、`<button></button>`元素

用于定义普通按钮

转义字符

在这里插入图片描述

Head头

图1：常见Head头

1、`<title></title>`

2、`<link />`

图2：link给标题添加小图标

属性	属性值	描述
`href`	`URL`	设置目标链接的文件路径
`rel`	`stylesheet、icon、sidebar、prev`等	规定当前文档与链接文档之间的关系
`type`	`MIME_type`	目标连接文档的MIME类型

3、`<style></style>`

4、`<script></script>`

图3：script标签嵌入脚本

图4：使用script标签链接外部脚本文件

5、`<meta />`

名称	值	描述
keywords	关键字	描述网页关键字，使用逗号分隔
description	描述内容	网站主要内容的简短描述
author	作者	描述网站作者
viewport	width	viewport视口宽度，设置为device-width表示为设备的宽度	定义viewport的初始大小，仅用于移动设备
height	viewport视口高度
maximum-scale	最大缩放比例
initial-scale	初始缩放比例
minimum-scale	最小缩放比例
user-scalable	是否允许用户缩放

content-type：规定文档的字符编码，等同于charset属性设置字符编码
default-style：设置默认CSS样式表组的名称
refresh：设置文档自动刷新的时间间隔，content只包含一个正整数，则为重新载入页面的时间间隔（秒），content包含一个正整数和【url=XXX】格式的字符串时，该正整数则是重定向到指定链接的时间间隔（秒）

6、`<base />`

图5：base标签使用示例

CSS引入样式

CSS（层叠样式表）定义了HTML元素在页面中的样式、布局以及整个页面的布局。CSS遵循W3C规范，实现了跨浏览器的标准化。

1、行内样式

2、内嵌样式

<style>
	p {
		color: #333;
		font-size: 16px;
	}
</style>

3、外部样式

3.1 链接样式（最常用）

3.2 导入样式

在CSS文件中直接使用@import url()
在HTML文件中需要在<style></style>标签中使用@import url()

// 在HTML文件中导入
<style>
	@import url(style.css);
</style>
// 在CSS文件中导入
@import url(style.css);

CSS背景属性

属性	属性值	说明
`background-color`	颜色值，如`rgb`，`rgba`，`十六进制`表示等，设置为`transparent`表示背景透明	设置背景颜色
`background-image`	`url( filepath )` 或 `none`	设置背景图像
`background-size`	`宽高`、`百分比宽高`、`contain`、`cover`	设置背景图片尺寸
`background-repeat`	`repeat`/ `repeat-x`/ `repeat-y`	设置背景图片重复方式
`background-position`	`top left`/ `top center`/ `center`等	设置背景图片的位置

1、background-size属性

1.1 contain

保持图片纵横比例缩放背景图片，使背景图片能够在背景区域完全显示
有可能出现图片无法完全覆盖背景区域

1.2 cover

保持图片纵横比不变，最大程度覆盖背景区域
有可能导致背景图片部分区域无法显示

2、background-repeat

2.1、repeat（默认）

允许水平和垂直方向重复（平铺）背景图片

2.2、repeat-x

只允许水平方向重复（平铺）背景图片

2.3、repeat-y

只允许垂直方向重复（平铺）背景图片

3、background

简写属性可以在一个属性声明中设置一个或多个背景属性，常用的属性设置如上表

background: #ff0000 url('smiley.gif') no-repeat cover;

CSS文本属性

1、color属性

颜色名，如【red】
十六进制值，如【#FFFFFF】
RGB值，如【rgb(255, 0, 0)】
rgba值，如【rgba(255, 0, 0, 0.9)】

2、font-size属性

3、font-weight属性

用于设置文本的粗细，可设置的值有：

属性值	说明
`normal`	标准字符（默认）
`bold`	粗体字符
`bolder`	更粗的字符
`lighter`	更细的字符
`100、200、300、400、500、` `600、700、800、900`	`400`相当于`normal` `700`相当于`bold` 数值越大字体越粗

4、font-family属性

font-family："Times New Roman", "Georgia", "Serif";

5、text-align属性

center（居中对齐）
left（左对齐）
right（右对齐）

6 line-height属性

数字：行间距为当前字体大小乘此数字
固定值：设置固定的行间距，如20px
百分比：行间距为当前字体大小乘百分比

7、text-indent属性

固定值：设置固定首行缩进，如20px
百分比：首行缩进值为父元素宽度乘此百分比

8、letter-spacing属性

9、word-spacing属性

10、text-decoration

属性	属性值	描述
text-decoration-line	none	无线条	设置要使用哪种文本装饰的类型（下划线、上划线、删除线）。
underline	下划线
overline	上划线
line-through	删除线
text-decoration-color	颜色名、十六进制颜色、rgb等	设置装饰线颜色
text-decoration-style	solid	实线	设置装饰线的样式
double	双实线
dotted	点划线
dashed	虚线
wavy	波浪线

例：

text-decoration: underline wavy red;  /* 表示为红色波浪形下划线 */

11、text-transform

uppercase：全部文本均为大写字母
lowercase：全部文本均为小写字母
capitalize：文本的每个单词首字母为大写字母

12、writing-mode

horizontal-tb：文本流在水平方向从上到下排列，文字方向为水平方向

图1：horizontal-tb属性值示例

sideways-lr：文本流在垂直方向，从下至上、从左至右排列

图2：sideways-lr属性值示例

sideways-rl：文本流在垂直方向，从上至下、从右至左排列

图3：sideways-rl属性值示例

vertical-lr：文本流在垂直方向，从上至下、从左至右排列，文字方向为水平方向

图4：vertical-lr属性值示例

vertical-rl：文本流在垂直方向，从上至下、从右至左排列，文字方向为水平方向，跟古诗阅读顺序一致

图4：vertical-lr属性值示例

13、white-space

属性值	描述
normal	合并空格，换行符转化为一个空格，允许自动换行
nowrap	合并空格，换行符转化为一个空格，不允许自动换行
pre	保留空格，保留换行符，不允许自动换行
pre-line	合并空格，保留换行符，允许自动换行
pre-wrap	保留空格，保留换行符，允许自动换行
break-spaces	保留空格，保留换行符，允许自动换行，行尾空格保留，空白符占用空间

基础选择器

选择器类型	描述	示例
通配选择器	通配选择器使用一个星号``表示，``会匹配所有元素	`* {` `color: red;` `}`
标签选择器	通过标签名匹配，匹配文档中所有为此标签名的元素	`p {` `color: red;` `}`
id选择器	通过井号`#`来定义id选择器，根据元素的`id`属性匹配（精确匹配）元素	`#box {` `width: 300px;` `}`
类选择器	通过点`.`来定义类选择器，根据元素的`class`属性匹配（精确匹配）元素	`.container {` `height: 100px;` `}`
组合选择器	包括四种组合方式：后代选择器、子代选择器、相邻选择器、兄弟选择器	`#box>.nav p {` `color: blue;` `}`

1、通配选择器

/*选择类名为box的元素的所有后代，添加一个黑色的字体颜色*/
.box * { color: #000; }

* {
	margin: 0;
	padding: 0;
	border: 0;
}

2、标签选择器

3、id选择器

4、类选择器

5、组合选择器

选择器	间隔符	描述
后代选择器	空格	选取该元素的后代元素
子代选择器	`>` 大于号	选择该元素的第一级子元素
相邻选择器	`+` 加号	选择该元素之后相邻第一个元素，且两者具有相同的父元素
兄弟选择器	`~` 波浪号	选择该元素之后的同层级元素

例：有以下代码，选择所有类名为title的元素后的第一个<p>元素，将其字体颜色改为红色，如下图所示，可使用相邻选择器选择元素设置样式

图9：怪异盒模型属性

// 示例代码
<style>
    .title + p {
        color: red;
    }
</style>
<body>
    <p class="title">CSDN能力认证中心</p>
    <p>C1见习能力认证</p>
    <span>C4专项能力认证</span>
    <p>C5全栈能力认证</p>
</body>

伪类选择器

1、常用的伪类

伪类	描述
`:hover`	用于设置鼠标悬停在元素上方时的样式
`:focus`	用于设置元素获得焦点时的样式
`:active`	用于设置元素被激活时（按下按键时、松开按键时）的样式
`:link`	用于设置元素点击之前的样式（仅可用于`a`标签）
`:visited`	用于设置被访问的元素的样式（仅可用于`a`标签）
`:first-child`	用于选取属于其父元素的第一个子元素，且满足冒号前的基础选择器选取要求
`:first-of-type`	用于选取属于其父元素的第一个特定类型的子元素
`:last-child`	用于选取属于其父元素的最后一个子元素且满足基础选择器选取要求
`:last-of-type`	用于选取属于其父元素的最后一个特定类型的子元素
`:nth-child(N)`	选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求，N可以为数字、关键字`（odd / even）`、公式（如：2n+1）
`:nth-of-type(N)`	选择匹配属于其父元素的第N个指定类型的子元素，N可以为数字、关键字`（odd / even）`、公式
`:nth-last-child(N)`	选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求，从最后一个子元素开始计数，N可以为数字、关键字`（odd / even）`、公式
`:nth-last-of-type(N)`	选择匹配属于其父元素的第N个指定类型的子元素，从最后一个子元素开始计数，N可以为数字、关键字`（odd / even）`、公式

2、例：有以下代码，判断最终的样式效果

<style>
	p:first-child {
		color: red;
	}
</style>
<div>
	<span>CSDN能力认证中心</span>
	<p>C1见习能力认证</p>
	<p>C4专项能力认证</p>
	<p>C5全栈能力认证</p>
</div>

该元素为p元素
该元素为该元素父级元素的第一个子元素

伪元素	描述	示例
`::after`	用于创建伪元素，在元素内容之后插入内容，该伪元素默认为行内元素	`p::after {` `content: ＂结束＂;` `}`
`::before`	用于创建伪元素，在元素内容之前插入内容，该伪元素默认为行内元素	`p::before {` `content: ＂开始＂;` `}`
`::first-line`	向文本的首行添加样式，只能应用于块级元素	`p::first-line {` `color: #333;` `}`
`::first-letter`	向文本的首字母添加样式，只能应用于块级元素	`p::first-letter {` `font-size: 16px;` `}`
`::marker`	用于改变li元素的数字或符号的样式，只能作用于`display`属性值为`list-item`的元素	`ul li::marker {` `content: '*';` `}`
`::placeholder`	用于设置表单元素占位符文本的样式	`input::placeholder {` `color: blue;` `}`

1、例：将li元素内容前的符号设置为‘星号’

图1：【::maker】伪元素示例

1.1 代码示例

<style>
	ul li::marker {
		content: '★';
        }
</style>
<ul>
	<li>C1 见习工程师能力认证</li>
	<li>C4 专项工程师能力认证</li>
	<li>C5 全栈工程师能力认证</li>
</ul>

CSS优先

1、CSS优先级

【内联样式】 > 【ID选择器】 > 【类选择器、属性选择器、伪类选择器】 > 【标签选择器、伪元素选择器】

选择器	权重
内联样式	1000
ID选择器	100
类选择器、属性选择器、伪类选择器	10
标签选择器、伪元素选择器	1
相邻选择符、子代选择符、兄弟选择符、后代选择符	0

2、选择器权重计算

#header .nav li { list-style: none; }

权重相同时，根据HTML代码从上往下执行的特点，后面选择器会覆盖前面选择器中相同的属性
权重不同时，权重大的选择器生效

3、!important规则

当你在一个样式声明中使用!important规则时，这个样式将覆盖其他的任何声明
!important规则与优先级无关，但是会直接影响样式的最终显示结果

块级元素与行内元素

1、块级元素

在浏览器显示时总是独占一行
宽高、内外边距可以控制，且上下左右的外边距均可对周围元素产生影响
可以包含内容、行内元素和其他块级元素
宽度未设置时默认为其父级元素的宽度，高度未设置时为内容的高度
常见块级元素：div、form、footer、h1-h6、ol、ul、p、video
设置display属性为display: block可将元素转换为块级元素

2、行内元素

不独占一行，默认不自动换行
宽高、上下边距不可以控制，仅有左右边距可以控制且会对周围元素产生影响
一般只能包含内容和其他行内元素，不可包含块级元素
设置宽高无效，宽高默认为内容的宽高
常见行内元素：span、label、a、em、strong、img
设置display属性为display: inline可将元素转换为行内元素

3、行内块级元素

综合块级元素与行内元素的特性
不独占一行
元素宽高、内外边距均可设置，上下左右边距均会对周围元素产生影响
宽高未设置时默认为内容宽高
常见行内块级元素：button、input、textarea、select
设置display属性为display: inline-block可将元素设置为行内块级元素

盒子模型

图1：火狐浏览器开发者工具中的标准盒模型

padding（内边距）是包围在内容区域外的空白区域，代表的是盒子边框与实际内容之间的距离，通过【padding】相关属性设置大小
border指的是盒子模型的边框。border除了可以使用border-width设置边框大小外，可以使用border-style设置边框的样式，如实线、虚线，使用border-color设置边框颜色
margin（外边距）指的是盒子和其他元素之间的空白部分，代表的是盒子的边框与其他相邻盒子边框之间的距离，通过【margin】相关属性设置大小

3、标准盒模型与怪异盒模型的区别

3.1标准盒模型

图2：标准盒模型结构图

例：将div设置为标准盒模型box-sizing：content-box，CSS设置如下

图3：标准盒模型CSS

图4：div在标准盒模型中的实际大小

图5：标准盒模型属性

3.2怪异盒模型

图6：怪异盒模型

图7：怪异盒模型CSS

图8：div在怪异盒模型中的实际大小