HTML简介，VScode快捷键
1.生成浏览器文件.html的快捷方式
!+回车
2.vscode 常用快捷键
。
：Shift+Alt+A
。代码格式化：Shift+Alt+F
。向上或者向下移动一行：Alt+Up 或Alt+down
。快速复制一行：Shift+Alt+Down或Shift+Alt+Up
。快速查找：Ctrl+F
。快速替换：Ctrl+H
3.IDE（集成开发环境）与浏览器
<!DOCTYPE html> 不是html标签
H5文档类型说明 作用：告诉浏览器按当前标准解析代码
H5不区分大小写，双标记的结束标签可以省略，单标签的/可以省略
浏览器的模式：混杂模式（没有文档类型说明）
标准模式（有文档类型说明）
4.html基本骨架
html标签：定义HTML文档
head标签：用于定义文档的头部，文档的头部表述了文档的属性和信息
body标签：定义文档的主题
title标签:1.定义文档的标题
2.显示浏览器的窗口或状态栏上
3.是head标签中唯一必须要求包含的东西。
4.有利于SEO优化。
seo是指搜索引擎优化的英文缩写。通过对网站内容的调整，满足搜索引擎的排名需求
meta标签：表述一个HTML网页文档的属性，关键词等。例如：<meta charset="UTF-8">
5.标题标签
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h1>最大的标题，<h6>最小的标题默认水平居左，加粗
在标签中添加属性：align= "left|center|right"默认居左
生成h1~h6的快捷键:h$*6
6.标签之段落、换行、水平线
段落<p>
换行<br>
水平线<hr>
3.水平线<hr>:
<hr color="red" width="500px" size="5px" align="">
属性： color：颜色
width:宽度
size：高度
align：对齐方式
7.标签之图片
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/IhB6Hhm1o7dQsr4mO25gvkoEE6YqoMnaLBTeT8KicgxaWkNAibwTx51n4elIDMVTMZUEa2GL7tULibfGtUo5eErmw/640?wx_fmt=jpeg&random=0.5891869949857644&wxfrom=5&wx_lazy=1&wx_co=1"
alt="房屋" width="300px" height="300px" title="漂亮的房屋">
属性：src：路径
alt：图像的代替文本
width:宽度
height：高度（一般不使用）
title：鼠标悬停提示
8.标签之图片路径详解
绝对路径：<img src="E:/study/exercise/img/640.jfif" alt="房屋" width="300px" >通过盘符
相对路径：子级关系：/
父级关系：../
同级关系：./(可省略)
网络路径：
9.标签之文本
| 标签 | 描述 |
|---|---|
<em> | 定义着重文字 |
<b> | 定义粗体文本 |
<strong> | 定义加重语气 |
<del> | 定义删除字 |
<span> | 元素没有特定含义 |
<i> | 定义斜体字 |
提示：文本标签一般表示文本词汇，一般可以嵌套在<p>标签里
10.列表标签之有序列表
<ol type="a">
<li>水1</li>
<li>水2</li>
<li>水3</li>
</ol>
type属性
<ol>的属性type拥有的选项
1 表示列表项目用数字标号（1，2，3…）
a 表示列表项目用小写字母标号 （a，b，c…）
A 表示列表项目用大写字母标号（A，B，C…）
i 表示列表项目用小写罗马数字标号（i，ii，iii…）
I 表示列表项目用大写罗马数字标号（I，II，III…）
有序列表可以嵌套
<ol type="a">
<li>水1</li>
<li>水2
<ol>
<li>1</li>
<li>1</li>
<li>1</li>
</ol>
</li>
<li>水3</li>
</ol>
11.列表标签之无序列表
<ul type="square">
<li>水果</li>
<li>菜</li>
</ul>
<ul>的属性type拥有的选项
disc默认实心圆
circle空心圆
square 小方块
none 不显示
无序列表也可以嵌套
快捷键ul>li*3
12.标签之表格
表格标签
表格：<table>
行：<tr>
列：<td>
<table border="1" width="400px" height="200px" >
<tr>
<td>文本信息</td>
<td>文本信息</td>
</tr>
<tr>
<td>文本信息</td>
<td>文本信息</td>
</tr>
</table>
快捷键table>tr*2>td*2{文本信息}
<table>属性：
border：表格边框
width:宽度
height：高度
13.标签之表格单元格合并
水平合并：colspan
垂直合并：rowspan
<body>
<p>合并1和4</p>
<p>合并5和6</p>
<p>合并7,8,9</p>
<table border="1" width="400px" height="200px" >
<tr>
<td rowspan="2">文本信息1</td>
<td>文本信息2</td>
<td>文本信息3</td>
</tr>
<tr>
<td colspan="2">文本信息5</td>
</tr>
<tr>
<td colspan="3">文本信息7</td>
</tr>
</table>
</body>
14.Form表单
让网页具有交互性
由容器和控件组成，一个表单应该包含用户填写信息的输入框和按钮等。这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件
<form action="url" method="get" name="myform"></form>
属性说明：
action：服务器地址
name：表单名称
method中get和post的区别
1.数据提交方式，get把提交的数据url可以看到，post看不到。
2. get一般用来提交小量数据，post用来提交大量数据。
表单元素：
一个完整的表单包含三个基本组成部分：表单标签，表单域，表单按钮
<form action="" method="get" name="myform">
<input type="text">
<input type="submit">
<button>提交</button>
</form>
文本框：<input type="text">
密码框：<input type="password">
提交框：<input type="submit" value="替换文本">
15块元素和行内元素（内联元素）
两者的区别：
| 块级元素 | 内联元素 |
|---|---|
| 在页面中独占一行（自上而下垂直排列） | 不独占一行，只占自身大小 |
| 可以设置width，height属性 | 设置width，height属性无效 |
| 一般块级元素可以包含行内元素和其他块级元素 | 一般包含内联元素，不包含块级元素 |
常见块级元素：
div、form、h1~h6、hr、p、table、ul等。
常见内联元素（行内元素）：
a、b、em、i、span、strong等。
行内块级元素：
button、img、input等。
16. HTML5新增标签
补充：<div>:容器元素
传统布局：
<div id="header"></div>
<div id="nav"></div>
<div id="article">
<div id="section"></div>
</div>
<div id="silder"></div>
<div id="footer"></div>
新布局方式：
<header></header> //头部
<nav></nav>//导航
<article>//代表一个独立的、完整的相关内容块，例如一篇完整的论坛内容块，一篇博客文章
<section></section>//定义文档中的节，比如章节，页眉，页脚
</article>
<aside></aside>//侧边栏
<footer></footer>//脚部
