一、HTML简介
1.web标准
Web标准：网页主要由结构、表现和行为三部分组成
| 标准 | 说明 |
|---|---|
| 结构 | 用于对网页元素进行整理和分类，主要使用HTML |
| 表现 | 用于设置网页元素的版式、颜色、大小等外观样式，主要使用CSS |
| 行为 | 指网页模型的定义及交互的编写，主要使用JavaScript |
2.什么是HTML
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
3.HTML基本结构
| 标签名 | 定义 | 说明 |
|---|---|---|
<html></html> | HTML标签 | 页面中最大的标签，即根标签 |
<head></head> | 文档头部 | 注意在head标签中必须要设置的标签是title |
<title></title> | 文档标题 | 让页面拥有一个属于自己的网页标题 |
<body></body> | 文档主体 | 元素包含文档的所有内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天是个好日子</title>
</head>
<body>
遇到困难睡大觉
</body>
</html>
<!DOCTYPE html> 文档类型声明标签 告诉这个页面采用html5版本来显示页面
<html lang="en"> 告诉浏览器或者搜索引擎这是一个英文网站，本页面采用英文来显示
<meta charset="UTF-8"> 采用UTF-8保存文字，如果不写就写乱码
二、HTML常用标签
1.HTML标签参考手册*
2.注释
<!-- HTML注释 -->
**注释：**在开始标签中有一个惊叹号，但是结束标签中没有。
浏览器不会显示注释，但是能够帮助记录 HTML 文档。
CSS注释与HTML注释不同
/* CSS注释 */
3.基础标签
| 标签 | 说明 |
|---|---|
< h1 > - < h6 > | 定义标题 |
< p > | 定义段落 |
< br / > | 换行 |
段落标签和换行标签：
-
文本会根据浏览器大小自动换行
-
段落和段落之间有空隙
-
换行标签只是简单地开始新的一行，段落之间会插入一些垂直地距离
4.文本格式化标签
| 标签 | 描述 |
|---|---|
| < b > | 定义粗体文本。 |
| < big > | 定义大号字。 |
| < em > | 定义着重文字。 |
| < i > | 定义斜体字。 |
| < small > | 定义小号字。 |
| < strong > | 定义加重语气。 |
| < sub > | 定义下标字。 |
| < sup> | 定义上标字。 |
| < ins > | 定义插入字。 |
| < del > | 定义删除字。 |
5.盒子标签
< div >与< span >标签没有语义，相当于一个装载内容的盒子
div单独占据一行，span在一行可以有多个
| 标签 | 描述 |
|---|---|
| < div > | 定义文档中的分区或节（division/section） |
| < span > | 定义span，用来组合文档中的行内元素 |
6.图像标签
<img src="URL" / >
-
src：必填属性，用于指定图像文件的路径和文件名
-
alt：替换文本属性，当图片加载不出来的时候，就会出现替换文本文字
-
title：悬浮文字，鼠标放在图片上显示的文字
-
width：设置图像的宽度
-
height：设置图像的高度
-
border：设置图像的边框粗细
注：
-
图像的属性必须写在标签名之后
-
属性不分先后顺序，属性之间用空格隔开
-
采用键值对的形式，属性=属性值
1.相对路径：以引用文件所在位置为参考基础，而建立出的目录文件
简单来说，就是图片相当于HTML页面的位置
2.绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
如：D:\前端\图片.jpg
7.超链接标签
<a href="URL" target="_self">链接文字</a>
-
href：必需属性，指定连接的URL地址
-
target：指定打开方式，默认当前页面打开，
_blank表示从新的页面打开链接资源 -
name：规定锚的名称，当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了
<body>
<a href="#我的命名">点击这里进行跳转</a>
<br>
<br>
<a name="我的命名">成功跳转到这里</a>
</body>
链接分类：
-
外部链接：从一个网站跳转到另一个网站，以http://www开头
-
内部链接：网站内部页面之间相互链接，如index.html，路径为同一级
-
空链接：#，表示链接为空
-
下载链接：href里面是一个文件或者压缩包
-
网页元素链接：在网页中的各种网页元素，如文本、图像、白哦个、音频、视频等都可以添加超链接
-
锚点链接：点击链接，可以快速定位到页面的某个位置，需要使用name属性
8.表格标签
表格的基本语法
<table>
<tr>
<th>表头单元格内的文字</td>
</tr>
<tr>
<td>普通单元格内的文字</td>
<td>普通单元格内的文字</td>
</tr>
</table>
<table>是定义表格的标签<tr>用于定义表格中的行<td>用于定义表格中的单元格，有几个单元格该行就有几列<th>用于定义表头单元格，常用于表格第一行，表头单元格里面的文字会加粗居中显示
合并单元格
- 跨行合并（竖向）：rowspan=‘合并单元格的个数’ 最上侧单元格为目标单元格，写合并代码
- 跨列合并（横向）：colspan=‘合并单元格的个数’ 最左侧单元格为目标单元格，写合并代码
9.表单标签
表单用于收集信息
在网页中，也需要跟用户进行交互，收集用户资料，这时候就需要表单
表单域
<form action="URL" method="提交方式" name="表单域名称">
密码：<input type="password">
</form>
from：定义表单域，以实现用户信息的收集和传递
- action：用于指定接受和处理数据的服务器URL地址
- method：设置表单数据提交方式，其取值为get或post（get效率高但不安全、请求大小有限，post安全、请求大小无限但效率低）
- name：指定表单名称，以区分同一个页面中的多个表单域
表单控件
1.input输入表单元素
<input type="" />
- < input / >标签为单标签
- type属性指定不同的控件类型
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） |
| checkbox | 定义复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段。该字段中的字符被掩码 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，清除表单中所有数据 |
| submit | 定义提交按钮，把表单数据发送到服务器 |
| text | 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符 |
input其它属性
-
name：由用户自定义，定义Input属性的名称
-
value:规定input元素的值，传递给服务器
-
checked：规定input元素首次加载时被选中，使用语法为
checked="checked" -
maxlength：规定输入字段中的字符的最大长度
注：
-
name和value是每个表单元素的属性值，主要给后台人员使用
-
name表单元素的名字，要求单选框和复选框要有相同的name值，表示同一组
-
checked属性主要针对于单选按钮和复选框 一打开页面 就可以默认选中某个表单元素
label标签
使用场景：label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
核心：label标签的for属性应该与相关元素的id属性相同
2.select下拉表单元素
<select>
<option>北京</option>
<option>浙江</option>
</select>
- select：定义下拉列表
- option：定义下拉列表项
在option中定义 selected="selected" 当前选项即为默认选项
3.textarea文本域元素
使用场景：当用户输入内容较多的情况下，就不能使用文本框text标签了，常见于留言板、评论
<textarea cols="50" rows="10"></textarea>
注：
(1)通过textarea标签可以创建多行文本输入框
(2)cols=“每行中的字符数” rows=“显示的行数” 但我们实际开发中都是用CSS来改变大小
10.列表标签
| < ol > | 定义有序列表。 |
|---|---|
| < ul > | 定义无序列表。 |
| < li > | 定义列表项。 |
| < dl > | 定义定义列表。 |
| < dt > | 定义定义项目。 |
| < dd > | 定义定义的描述。 |
<ul>
<li>niko</li>
<li>hunter</li>
<li>monesy</li>
</ul>
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
同样，有序列表也是一列项目，列表项目使用数字进行标记。
三、 CSS基础
1.什么是CSS
CSS用于页面美化、页面布局。
- CSS 指的是层叠样式表* (Cascading Style Sheets)
- CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
- CSS 节省了大量工作。它可以同时控制多张网页的布局
- 外部样式表存储在 CSS 文件中，只需一个文件就可以改变整个网站的外观
2.选择器
CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。
我们可以将 CSS 选择器分为五类：
-
简单选择器（根据名称、id、类来选取元素）
-
组合器选择器（根据它们之间的特定关系来选取元素）
-
伪类选择器（根据特定状态选取元素）
-
伪元素选择器（选取元素的一部分并设置其样式）
-
属性选择器（根据属性或属性值来选取元素）
-
标签选择器：选择一个标签改变属性
-
类选择器：创建一个类的样式，开头为
.类名，调用时class="类名"
<head>
<style>
.classname{
color:red;
}
</style>
</head>
<body>
<p class="classname" >
今天是个好日子
</p>
</body>
- id选择器：通过
#来定义，只能被唯一调用 - 通配符选择器：通过
*来选择所有标签，自动调用
3.CSS语法及使用
三种使用CSS的方法
（1）外部样式表：通过使用外部样式表，只需要一个文件就可以改变整个网站的外观。
每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。外部 .css 文件不应包含任何 HTML 标签。
<head>
<link rel="stylesheet" href="name.css">
</head>
（2）内部样式表：如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。内部样式是在 head 部分的 <style> 元素中进行定义。
（3）行内样式表：在标签内部设置<style>属性
<P style="color:pink">
我想和你谈一场不分手的恋爱
</P>
4.CSS背景
| background | 在一条声明中设置所有背景属性的简写属性。 |
|---|---|
| background-attachment | 设置背景图像是固定的还是与页面的其余部分一起滚动。 |
| background-clip | 规定背景的绘制区域。 |
| background-color | 设置元素的背景色。 |
| background-image | 设置元素的背景图像。 |
| background-origin | 规定在何处放置背景图像。 |
| background-position | 设置背景图像的开始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
| background-size | 规定背景图像的尺寸。 |
5.三大特性
层叠性
相同的选择器采取相同的样式造成样式冲突时，采取就近原则
继承性
子标签会继承父标签的部分样式
优先级
| 选择器 | 选择器权重 |
|---|---|
| 继承 或者* | 0，0，0，0 |
| 元素选择器 | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式style=“” | 1，0，0，0 |
| !important 重要的 | 无穷大 |
- 继承的权重为0
6.盒子模型
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
height 和 width 属性用于设置元素的高度和宽度。
height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。
height 和 width 属性可设置如下值：
- auto - 默认。浏览器计算高度和宽度。
- length - 以 px、cm 等定义高度/宽度。
- % - 以包含块的百分比定义高度/宽度。
- initial - 将高度/宽度设置为默认值。
- inherit - 从其父值继承高度/宽度。
7.CSS边框
border 属性允许指定元素边框的样式、宽度和颜色。
border-color 属性用于设置四个边框的颜色。
可以通过以下方式设置颜色：
- name - 指定颜色名，比如 “red”
- HEX - 指定十六进制值，比如 “#ff0000”
- RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
- HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
- transparent
**注释：**如果未设置 border-color，则它将继承元素的颜色。
border-style 属性指定要显示的边框类型（必需属性）。
允许以下值：
- dotted - 定义点线边框
- dashed - 定义虚线边框
- solid - 定义实线边框
- double - 定义双边框
- groove - 定义 3D 坡口边框。效果取决于 border-color 值
- ridge - 定义 3D 脊线边框。效果取决于 border-color 值
- inset - 定义 3D inset 边框。效果取决于 border-color 值
- outset - 定义 3D outset 边框。效果取决于 border-color 值
- none - 定义无边框
- hidden - 定义隐藏边框
border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
| 属性 | 描述 |
|---|---|
| border | 简写属性，在一条声明中设置所有边框属性。 |
| border-color | 简写属性，设置四条边框的颜色。 |
| border-radius | 简写属性，可设置圆角的所有四个 border-*-radius 属性。 |
| border-style | 简写属性，设置四条边框的样式。 |
| border-width | 简写属性，设置四条边框的宽度。 |
| border-bottom | 简写属性，在一条声明中设置所有下边框属性。 |
| border-bottom-color | 设置下边框的颜色。 |
| border-bottom-style | 设置下边框的样式。 |
| border-bottom-width | 设置下边框的宽度。 |
| border-left | 简写属性，在一条声明中设置所有左边框属性。 |
| border-left-color | 设置左边框的颜色。 |
| border-left-style | 设置左边框的样式。 |
| border-left-width | 设置左边框的宽度。 |
| border-right | 简写属性，在一条声明中设置所有右边框属性。 |
| border-right-color | 设置右边框的颜色。 |
| border-right-style | 设置右边框的样式。 |
| border-right-width | 设置右边框的宽度。 |
| border-top | 简写属性，在一条声明中设置所有上边框属性。 |
| border-top-color | 设置上边框的颜色。 |
| border-top-style | 设置上边框的样式。 |
| border-top-width | 设置上边框的宽度。 |
8.外边距、内边距
margin 属性用于在任何定义的边框之外，为元素周围创建空间。
CSS 拥有用于为元素的每一侧指定外边距的属性：
- margin-top
- margin-right
- margin-bottom
- margin-left
所有外边距属性都可以设置以下值：
- auto - 浏览器来计算外边距
- length - 以 px、pt、cm 等单位指定外边距
- % - 指定以包含元素宽度的百分比计的外边距
- inherit - 指定应从父元素继承外边距
**提示：**允许负值。
padding 属性用于在任何定义的边界内的元素内容周围生成空间。
CSS 拥有用于为元素的每一侧指定内边距的属性：
- padding-top
- padding-right
- padding-bottom
- padding-left
所有内边距属性都可以设置以下值：
- length - 以 px、pt、cm 等单位指定内边距
- % - 指定以包含元素宽度的百分比计的内边距
- inherit - 指定应从父元素继承内边距
**提示：**不允许负值。
9.CSS文本
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色。 |
| direction | 指定文本的方向 / 书写方向。 |
| letter-spacing | 设置字符间距。 |
| line-height | 设置行高。 |
| text-align | 指定文本的水平对齐方式。 |
| text-decoration | 指定添加到文本的装饰效果。 |
| text-indent | 指定文本块中首行的缩进。 |
| text-shadow | 指定添加到文本的阴影效果。 |
| text-transform | 控制文本的大小写。 |
| text-overflow | 指定应如何向用户示意未显示的溢出内容。 |
| unicode-bidi | 与 direction 属性一起使用，设置或返回是否应重写文本来支持同一文档中的多种语言。 |
| vertical-align | 指定文本的垂直对齐方式。 |
| white-space | 指定如何处理元素内的空白。 |
| word-spacing | 设置单词间距。 |
四、Emmet语法
1.快速生成HTML结构语法
- 生成标签，直接输入标签名，按tab键即可。
- 如果想要生成多个相同标签，加上 * 就可以。比如 div*3 就可以快速生成3个 div
- 如果有父子级关系，用 > 。比如 ul > li
- 如果有兄弟关系的标签，用 + 。比如 div + p
- 如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab键即可
- 如果生成的 div 类名是有顺序的，可以用自增符号 $
2.快速格式化代码
Vscode 快速格式化代码：shift + alt +f
也可以设置当保存页面时自动格式化代码
- 文件 --> 【首选项】 --> 【设置】
- 搜索emmet.include
- 在settings.json下的【用户】添加以下语句
"editor.formatOnType":true,
"editor.formatOnSave":true
五、VSCode
1.下载地址
官网下载速度很慢，所以下面放个网盘链接可以自行下载。
2.详细教程
- 如果有父子级关系，用 > 。比如 ul > li
- 如果有兄弟关系的标签，用 + 。比如 div + p
- 如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab键即可
- 如果生成的 div 类名是有顺序的，可以用自增符号 $
2.快速格式化代码
Vscode 快速格式化代码：shift + alt +f
也可以设置当保存页面时自动格式化代码
- 文件 --> 【首选项】 --> 【设置】
- 搜索emmet.include
- 在settings.json下的【用户】添加以下语句
"editor.formatOnType":true,
"editor.formatOnSave":true
五、VSCode
1.下载地址
官网下载速度很慢，所以下面放个网盘链接可以自行下载。
