看最后一行！！！
1. VSCode常用快捷键列表
-
1 代码格式化： Shift+Alt+F
-
2 向上或向下移动一行： Alt+Up 或 Alt+Down
-
3 快速复制一行代码： Shift+Alt+Up 或 Shift+Alt+Down
-
4 快速保存： Ctrl + S
-
5 快速查找： Ctrl + F
-
6 快速替换： Ctrl + H
2. HTML5简介与基础骨架
2.1 HTML5的DOCTYPE声明
<!DOCTYPE html>
DOCTYPE是 document type (文档类型) 的缩写。 <!DOCTYPE html > 是H5的声
明位于文档的最前面，处于标签之前。
他是网页必备的组成部分，避免浏览器的怪异模式。
2.2 HTML5基本骨架
-
html标签
定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML
文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开
始点和结束点。
-
head标签
head标签用于定义文档的头部。文档的头部描述了文档的各种属性
和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系
等。绝大多数文档头部包含的数据都不会真正作为内容显示给读
者。
-
body标签
body 元素定义文档的主体。
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和
列表等等。）
它会直接在页面中显示出来，也就是用户可以直观看到的内容
-
title标签
可定义文档的标题。
它显示在浏览器窗口的标题栏或状态栏上。
title标签是head标签中唯一必须要求包含的东西
title的增加有利于SEO优化
SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求
-
meta标签
meta标签用来描述一个HTML网页文档的属性，关键词等，例如：
charset="utf-8" 是说当前使用的是 utf-8 编码格式，在开发中我们经常会看
到 utf-8 ，或是 gbk ，这些都是编码格式，通常使用 utf-8 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
</head>
<body>
</body>
</html>
3. 标题标签
3.1 标题
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
生成h1~h6快捷键：h$*6
3.2 VSCode插件
可以快速打开浏览器
扩展 -> 搜索open in browser -> 点击安装
3.3 标题位置
在标签中添加属性： align="left | center | right" 默认居左|中|右
<h1 align="center">首页</h1>
4. 段落、换行、水平线标签
4.1 段落
<p>这是一个段落</p>
4.2 换行
<br /> <br>
4.3 水平线
<hr /> <hr color="" width="" size="" align=""/>
color:设置水平线的颜色
width:设置水平线的宽度
size:设置水平线的高度
align:设置水平线的对齐方式，默认居中，可取值left|right
5. 图片标签
img标签定义HTML页面中的图像
<img> 是单标签，不需要进行闭合操作
<img src="" alt="" title="" width="" height="">
src：路径（图片地址与名字）
alt：规定图像的替代文本（图片出错后显示碎片和文本）
width：规定图像的宽度
height：规定图像的高度
title：鼠标悬停在图片上给予提示
6. 图片路径详解
6.1 绝对路径
电脑的盘符存储与访问的具体地址
<img src="E:\picture\1.jpg" alt="" />
6.2 相对路径
两者相对关系，两者在同⼀路径下可以直接访问
子级关系：/
父级关系：../
同级关系：./（可以省略）
6.3 网络路径
直接访问具体的网络地址
<img src="http://iwenwiki.com/api/newworld/images/n1.png" alt="" />
7. 超文本链接标签
7.1 描述
用标签 <a></a> 来设置超文本链接
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，点击这些内容来跳转到新的文档
<a href="url">链接文本</a>
7.2 属性
在标签 <a> 中使用了 href 属性来描述链接的地址
默认情况下，链接将以，以下形式出现在浏览器中：
-
一个未访问过的链接显示为蓝色字体并带有下划线。
-
访问过的链接显示为紫色并带有下划线。
-
点击链接时，链接显示为红色并带有下划线。
后期我们会通过CSS样式修改掉这些效果(颜色发生改变)
7.3 表现
把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手
8. 文本标签
常用文本标签
| 标签 | 描述 |
|---|---|
| <em></em> | 定义着重文字 |
| <b></b> | 定义粗体文本 |
| <i></i> | 定义斜体字 |
| <strong></strong> | 定义加重语气 |
| <del></del> | 定义删除字 |
| <span></span> | 元素没有特定的含义 |
常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇
9. 列表标签：有序列表
9.1 有序列表
有序列表是一列项目，列表项目使用数字进行标记。 有序列表始于<ol></ol> 标签。每个列表项始于 <li></li> 标签。
<ol> <li>水果</li> <li>蔬菜</li> </ol>
9.2 type属性
ol的属性type 拥有的选项
<ol type="">
<li> </li>
</ol>
-
1 表示列表项目用数字标号（1,2,3...）
-
a 表示列表项目用小写字母标号（a,b,c...）
-
A 表示列表项目用大写字母标号（A,B,C...）
-
i 表示列表项目用小写罗马数字标号（i,ii,iii...）
-
I 表示列表项目用大写罗马数字标号（I,II,III...）
9.3 有序列表嵌套
<ol>
<li>
水果
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
</ol>
</li>
<li>蔬菜</li>
</ol>
10. 列表标签：无序列表
10.1 无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记
无序列表始于 <ul></ul> 标签。每个列表项始于 <li> </li>标签。
<ul> <li>水果</li> <li>蔬菜</li> </ul>
10.2 type属性
ul 的属性type 拥有的选项
<ul type=""> <li> </li> </ul>
-
disc 默认实心圆
-
circle 空心圆
-
square 小方块
-
none 不显示
10.3 无序列表嵌套
<ul> <li> 水果 <ul> <li>苹果</li> <li>香蕉</li> <li>西瓜</li> </ul> </li> <li>蔬菜</li> </ul>
10.4 快捷键
快速生成ul+li的布局：ul>li*3（数字根据自己的需要的li数量修改）
11. 表格标签
表格组成特点：行、列、单元格
单元格特点：同行等高、同列等宽。
11.1 标签
表格： <table>
行： <tr>
单元格(列)： <td>
<table> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table>
11.2 快捷键
快速生成表格结构：table>tr * 2>td * 3{单元格}
11.3 表格属性
border：设置表格的边框
width：设置表格的宽度
height：设置表格的高度
<table border="1" width="200px" height="100px"></table>
12. 表格单元格合并
单元格合并属性
水平合并：colspan（保留左边，删除右边）
垂直合并：rowspan（保留上边，删除下边）
<table border="1" width="600px" height="400px">
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td colspan="2">单元格67</td>
<td>单元格8</td>
<td rowspan="3">单元格9,14,19</td>
<td>单元格10</td>
</tr>
<tr>
<td colspan="2" rowspan="2">单元格11,12,16,17</td>
<td>单元格13</td>
<td>单元格15</td>
</tr>
<tr>
<td>单元格18</td>
<td>单元格20</td>
</tr>
</table>
效果图：（水平合并6，7）（垂直合并9，14，19）（组合合并11，12，16，17）
13. From表单
表单在 Web 网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能。
所有的用户输入内容的地方都用表单来写，如登录注册、搜索框
表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,按钮等，这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件
13.1 属性
<form action="url" method="get|post" name="myform"></form>
action服务器地址
name表单名称
method中Get和Post的区别
数据提交方式，get把提交的数据url可以看到，post看不到
get一般用于提交少量数据，post用来提交大量数据
13.2 表单元素
一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮
-
表单标签 <form></form>
-
表单域<input>
-
表单按钮<button></button>
<form> <input type="text"> <input type="submit"> <button>按钮</button> </form>
14. 表单元素
14.1 文本框
文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域
<form> 姓名: <input type="text" name="name"> <br> 号码: <input type="text" name="phone"> </form>
14.2 密码框
密码字段通过标签 <input type="password"> 来定义
<form> Password: <input type="password" name="pwd"> </form>
密码字段字符不会明文显示，而是以星号或圆点替代
14.3 提交按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理
<form> 用户名: <input type="text"> 密码：<input type="password"> <input type="submit" value="提交"> </form>
15. 块元素与行内元素（内联元素）
HTML5出现之前，经常把元素按照块级元素和内联元素来区分。在HTML5中，元素不再按照这种⽅式来区分， 而是按照内容模型来区分，分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型(embedded content)、交互型(interactive content)。元素不属于任何⼀个类别，被称为穿透的，元素可能属于不止⼀个类别，称为混合的
详细参考地址：内容分类 - Web 开发者指南 | MDN
内联元素和块级元素的区别
| 块级元素 | 内联元素 |
|---|---|
| 块元素会在页面中独占一行（自上向下垂直排列） | 行内元素不会独占页面中的一行，只占自身的大小 |
| 可以设置width，height属性 | 行内元素设置width，height属性无效 |
| ⼀般块级元素可以包含行内元素和其他块级元素 | ⼀般内联元素包含内联元素不包含块级元素 |
-
常见块级元素
div、form、h1~h6、hr、p、table、ul、等
-
常见内联元素（行内元素）
a、b、em、i、span、strong等
-
行内块级元素（特点：不换行、能够识别宽高）
button、img、input等
16. HTML5新增标签
HTML5 是 HTML 最新的修订版本，2014年10月由万维网联盟 （W3C） 完成标准制定
在 HTML5 出现之前，我们一般采用 DIV+CSS 布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点， HTML5 新增了很多新的语义化标签
扩展知识
div 容器元素，也是页面中见到的最多的元素
H5新标签
<header></header> 头部 <nav></nav> 导航 <section></section> 定义文档中的节,比如章节、页眉、页脚 <aside></aside> 侧边栏 <footer></footer> 脚部 <article></article> 代表一个独立的、完整的相关内容块,例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等
//老版本div标签（优点是兼容老版本的浏览器（14年之前的浏览器））
<div id="header"></div>
<div id="nav"></div>
<div id="article">
<div id="section"></div>
</div>
<div id="aside"></div>
<div id="footer"></div>
等同于
//H5新标签
<header></header>
<nav></nav>
<article>
<section></section>
</article>
<aside></aside>
<footer></footer>
因为转存失败的原因，文章内容有一些缺失，想要看完整版的同学可以关注一下我主页里上传的html5学习笔记的文档
6214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
