Vs code 软件是一款微软公司推出的免费的轻量级编辑器。
Ctrl+放大视图
Ctrl-减小视图
Shift+alt+方向键 向上、下复制一行
Emmet语法快速生成html结构语法
！+tab形成骨架
标签+ tab 形成标签 div+tab
父子级关系，可以用> ul>li
兄弟级关系+ div+p+tab
生成个标签* div*6+tab
.nav <div class=”nav”></div>
#banner<div id=”banner”></div>
(默认生成div标签)
p.one <p class=”one”></p>
span#gay<span id=”gay”></span>
如果标签内想写内容可以用{}表示
.demo$*6 生成类名有序（$自增符号,从1开始排序）
网页是网站中的一页，网页是html文档文件，网站通过一定规则，使用html等制作的用于展示特定内容的相关网页的集合，通过浏览器显示。网页是网站基本元素。因为html中的多媒体内容超越了文本限制，所以html被称为超文本标记语言。
Html语言是描述网页的语言
常用浏览器
谷歌浏览器，火狐浏览器，IE浏览器…
浏览器内核作用是渲染引擎，读取网页内容，计算显示方式。
- Web标准是国际万维网（W3C）联盟制定。浏览器内核不同，计算显示页面有差异，所以需要标准。
- Web标准
HTML 结构 网页元素
CSS 表现 外观样式
JS 交互 交互效果，行为动作
Html语法
单标签 双标签
标签关系： 包含关系 并列关系
<html lang="en">//根标签
<head>//头部
<meta charset="UTF-8">//万国编码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>//文档显示主题
</head>
<body></body>//文档内容
</html>
<!DOCTYPE html>//文档类型说明，一般在html标签之前
Html常用标签
标签的语义就是标签的含义
（1）标题标签
<h1>-</h1>…
<h6>-</h6>
重要性依次递减，加了标题标签的文字会加大加粗，一个标题独占一行。
（2）段落标签
<p></P>
文本在一个段落中会根据浏览器窗口界面大小自动换行，段落之间有间隙，一个段落独占一行。
（3）强制换行标签
<br>是单标签，只是简单地开始新的一行。
（4）文本格式化标签（突出重要性，比普通文字更加重要）
加粗
<strong></strong>
<b></b>
倾斜
<em></em>
<i></i>
删除线
<del></del><s></s>
下划线
<ins></ins><u></u>
（5）div和span标签，没有语义，只是一个盒子，用来装内容，用来布局再好不过。
Div一行只能放一个，大盒子；span一行只能放多个，小盒子。
（6）图像标签
<img src=”图像url”/> src是图像标签的必须属性，用于指定图像文件的路径。（必须属性）
图形标签其他属性：
| alt |
替换文本（图片无法显示） |
| title |
提示文本（鼠标在图片上时候） |
| width |
宽度 |
| height |
高度 |
| border |
图像边框 |
（7）路径
相对路径（图像与html文件关系）
同一级路径 直接写名字
下一级路径 /
上一级路径 ../
绝对路径:指的是目录下的绝对位置，直接到达目标位置，长从盘符开始的路径。
（8）超链接标签
<a href=”跳转目标” target=”目标窗口弹出方式”>
Href为必要属性
Target的属性值有2种：_self当前页面打开（默认）；_blank新窗口打开
链接的分类
I 外部链接
<a href="http://地址">123</a>
II内部部链接(内部网页之间相互链接)
<a href="1.html">内部链接</a>
III 空链接
<a href="#">空链接</a>
IV下载链接
当Href里面地址是一个文件/压缩包，点击链接会自动下载这个文件。
V 网页元素链接 网页中各种元素，文本，图像，音频，视频都可以都可以添加超链接。
VI锚点链接（点击链接可以快速定位到页面对应位置）
<a href="#oo">锚点链接</a>
<p id="00">锚点链接</p>
（9）注释
快捷键ctrl+/
<!-- -->
（10）特殊字符
| 空格 |
|
| 大于号> |
> |
| 小于号< |
< |
（11）表格标签
表格标签用于布局，展示数据
<table>
<tr>
<th>123</th>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</table>
Th标签是表头单元格标签，突出重要性。
表格属性
| align |
Left,center,right（对齐方式）指的是表格位置 |
| border |
边框（默认为无） |
| cellpadding |
单元格边沿与内容之间空白，默认1px |
| cellspacing |
单元格之间空白（默认2px） |
| width |
宽度 |
| height |
高度 |
表格结构标签
表格头部thead区域
表格主体tbody区域
可折叠标签使得结构简单明确
合并单元格（合并以后删除多余单元格）
| 跨行合并 |
Rowspan=”合并单元个数”(垂直方向) |
| 跨列合并 |
Colspan=” 合并单元个数” (水平方向) |
（12）列表标签
| 无序列表 |
| 有序列表 |
| 自定义列表 |
li是列表项目
无序列表
<ul>
<li></li>
</ul>
ul中只能有li，li中可以放任何标签。
无序列表会带有自己的样式。
有序列表
<ol>
<li></li>
</ol>
ol中只能有li，li中可以放任何标签。
有序列表会带有自己的样式。
自定义列表：对术语/名词进行解释，定义列表项前无任何项目符号。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dd>名词1解释3</dd>
</dl>
dl中只能有dt,dd，dt,dd中可以放任何标签, dt,dd个数无限制，常常是一个dt对应多个dd。
（13）表单标签
表单的目的是为了收集信息。
表单的组成：表单域，表单控件也被称为表单元素（方框、按钮），提示信息（文字信息）
I表单域是包含一个表单元素的区域，实现用户信息收集和传递。
form会把它范围内的表单元素提交给服务器
<form action="url地址" method="提交方式" name="表单域名称"></form>
II表单元素
（1）Input输入表单元素 单标签
Input用于收集用户信息
<input type="属性值">
Type是必须属性
Type常用属性值
| text |
文本框（20字符） |
| password |
定义密码字段 |
| radio |
定义单选按钮 |
| checkbox |
定义复选框 |
| button |
定义单击按钮，不提交信息，用于和JS一起做某事 |
| submit |
提交按钮（默认显示“提交”，可通过value更改） |
| reset |
重置按钮默认显示“重置”，可通过value更改） |
| File |
上传文件 |
Input其他属性，name
同组的Radio和checkbox必须用相同的名字。
相同名字Radio是为了实现多选一
Input其他属性，value（规定Input元素的值）
规定框内默认显示文字/点击按钮把值送给后台
（value主要是后台人员使用）
Input其他属性，checked 主要针对单选按钮，复选框；页面打开时的默认选项。
Checked=“checked”
Input其他属性，maxlength规定输入字段中字符最大长度。
Label标签为Input定义标注标签
Label可以绑定一个表单元素，当点击<label>标签文本内容时候，浏览器会自动转到对应光标上。（for中的内容和id中内容相同）
<input type="radio" id="sex1" name="sex"><label for="sex1">男</label>
<input type="radio" id="sex2" name="sex"><label for="sex2">女</label>
（2）Select 下拉表单元素 多个选项让用户选择，节约页面空间<select name="" id=""> <opition></opition> <opition></opition> <opition></opition> </select>
在opition中定义selected=”selected”,设置默认选择项
（3）Textarea文本域元素
书写大量文字
<textarea name="" id="" cols="30" rows="10"></textarea>
Rows 行数
Cols 每行字符数