第一部分
1. 基础HTML
1.1 了解什么是HTML
它是一种编程语言，是作为软件开发的基础语言
浏览器解析代码后呈现的就是我们看到的网页，可以鼠标右击查看网页源代码
一个网站一般都是由多个网页组成，每一个网页实际上都是一个.html文件
1.2 编辑器 VS Code
VS Code的全称为Visual Studio Code，来自微软，来自微软，是一个开源的、基于Electron的轻量代码编辑器
1.2.1 下载方式：
1. 电脑自带的应用商店内搜索
2. VS Code下载地址：http://code.visualstudio.com/
1.2.2 设置
文件→首选项→设置（大小、是否换行等设定）
1.2.3 编辑器的基本使用（小小的快捷方式）
1.2.3.1 ctrl相关
ctrl + s : 保存
ctrl + a : 全选
ctrl + x : 剪切
ctrl + c : 复制
ctrl + v : 粘贴
ctrl + z : 撤销
ctrl + y : 前进
ctrl + / : 快捷添加和删除注释
ctrl + d : 选择相同元素的下一个
1.2.3.2 shift相关
shift + end : 从头选一行
shift + home : 从尾部选中一行
shift + alt + ↓ : 快速复制一行
shift + alt + a : 快捷添加和删除注释
1.2.3.3 Alt相关
alt + ↑或↓ : 快速移动一行
alt + 鼠标左键 : 多光标
1.2.3.4 Tab相关
tab : 向后缩进
tab + shift : 向前缩进
tab + 单词 或 单词 + tab : 创建标签
1.3 了解网页开发
一个大型网站的开发，离不开团队内各个岗位的配合，每个岗位都不可或缺
1.3.1三个基本职位：
UI设计师：设计稿撰写
web前端开发师（H5开发）：将设计稿编写为代码
将数据库里的数据显示到页面
编写HTML(结构)以及CSS（样式）
web后端开发师
1.3.2 Web前端的三大核心技术
HTML：结构
CSS：样式
JavaScript：交互行为
1.4 HTML的基本结构和属性
超文本标记语言是标准通用标记语言下的一个应用，是网页制作必备的编程语言
超文本：文本内容+非文本内容（图片、视频、音频等）
语言：编程语言
标记（也叫做标签）：<单词>
单标签：<head></head>；<p></p>等
双标签：<br>等（种类少）
标签可以上下排列，也可以组合嵌套
标签的属性：用来修饰标签，设置当前标签的一些属性
<标签 属性1="值1" 属性2="值2">
1.5 HTML的初始代码
每个.hrml文件都有的代码叫做初始代码，要符合.html文件的规范写法
无论写什么样的网页，这些代码都是要有的
初始代码：（快捷方式：！+Tab键）
<!DOCTYPE html> 文档声明：告诉浏览器这是一个.html文件
<html lang="en"> html的最外层标签，包裹着所有html标签代码
lang="en"：表示是一个英文网站 lang=“zh-CN”：表示这是一个中文网站
<head> 设置的内容
<meta 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>
1.6 HTML语义化
HTML语义化指的是：根据网页中内容的结构，选择合适的HTML标签进行编写
1.7 HTML除初始以外的常用代码
1.7.1注释
写法：<!-- 注释的内容 -->
功能：在浏览器中看不到，也不会运行或显示注释的内容，只能在代码中看到
1.7.2 标题
写法：<h1></h1>……<h6></h6>
注意：在一个网页中，h1标题最重要，一个.html文件中只能有一个h1标题
1.7.3 段落
写法：<p>段落内容</p>
功能：文章分段
1.7.4 文本修饰标签
1.7.4.1 强调
写法：<srong>强调内容</strong>
功能：：会对文本进行加粗
写法：<em>强调内容</em>
功能：会对文本进行斜体
1.7.4.2 上标文本及下标文本
写法：<sup>上标内容</sup>
功能：使文本上标
用法：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>（代码输入）
=a² + b² = c²（展示效果）
写法：<sub>下标内容</sub>
功能：使文本下标
用法：H<sub>2</sub>O（代码输入）
= H₂O（展示效果）
1.7.4.3 删除文本及插入文本
一般删除文本都是和插入文本一同使用
写法：<del>删除内容</del>
功能：删除文本内容（就是在“删除内容”中间横划一道黑线）
写法：<ins>插入内容</ins>
功能：插入文本内容（就是在“插入内容”的下方划一条横线）
1.7.5 图片标签及图片属性
写法：<img src="图片位置" alt="当图片出问题时显示的文字"title="提示图片信息"width="图片宽度"height="图片高度">
功能：<img>：单标签（插入图片时需要输入）
src: 引入图片的地址(网址或文件路径)
alt：当图片出问题时显示的文字（不用即为没有）
title：提示图片信息（不用即为没有）
width：图片宽度（不用即为图片默认）
height：图片高度（不用即为图片默认）
1.7.6 跳转链接
写法：
文本链接：<a href="链接的地址"被设置链接的文本></a>
图片链接：<a href="链接的地址"
<img src="被设置链接的图片的地址">
功能：为文本或图片设置跳转链接，点击可直接跳转至相应网页
写法： <target="_blank或_self">
功能：若选择_blank，则网页在新窗口打开
若选择_self，则网页在当前页打开
若没有选择，则默认为在当前页打开
写法：<base target="_blank或_self">
功能：改变整个html链接的默认行为，一般在整个.hrml文件的<head></head>部分
1.7.7 跳转锚点
写法：
id属性：<a href="#设定的id属性">锚点的名字</a>
<hx id="设定的id属性">被设定id属性的文本<hx> （x=1~6，x∈Z）
或
name属性：<a href="#设定的name属性">锚点的名字</a>
<a name="设定的name属性"></a> （注意：这里的name属性加给的是a标签）
<hx>强调的文本</hx> （x=1~6，x∈Z）
功能：设定类似目录的锚点，点击即可跳转
1.7.8 特殊符号
写法：& + 字符 （详情参考：https://www.cnblogs.com/yipianchuyun/p/16278595.html）
功能：输入特殊字符，解决字符使用冲突（如：“<” 和 “>”）
1.7.9 无序列表
写法：<ul type="type属性">
<li>文本</li>
</ul> （type属性详情参考：https://www.jb51.net/w3school/tags/att_ul_type.htm）
注意：无序列表的<ul><li>和</li></ul>两组标签之间不能添加其他标签，但<li></li>标签之间可以有其他标签
1.7.10 有序列表
写法：<ol type="type属性">
<li>文本</li>
</ol> (type属性详情参考：https://www.w3school.com.cn/tags/att_ol_type.asp)
注意：有序列表用的非常少，常用的是无序列表，无序列表可以代替有序列表
和无序列表一样，有序列表的<ol><li>和</li></ol>两组标签之间不能添加其他标签，但<li></li>标签之间可以有其他标签
1.7.11 定义列表
写法<dl>
<dd>列表项需要添加标题</dd>
<dt>对标题进行描述的内容</dt>
</dl>
功能：向列表项需要添加标题，添加对标题进行描述的内容
2. 切图流程
3. PC企业站、PC游戏站布局（实战阶段）
本文含有隐藏内容，请 开通VIP 后查看