1.HTML
1.1.开发环境搭建
编辑器： vscode、sublime、webstome
浏览器： 谷歌 火狐 360 IE safari
部署环境：阿里云服务器
1.2.介绍
html 超文本标记语言 的缩写
hello.html hello.htm
插件： 1.html css support （htmlcss标签的提醒）
2.open in browser（浏览器中打开）
3.auto rename tag（自动补全标签）
2.HTML结构
<!-- 文档声明 html -->
<!DOCTYPE html>
<!-- html的根元素 -->
<html lang="en">
<!-- 头部内容不会显示在页面中 -->
<head>
<!-- 规定了文档的字符集 编码方式 -->
<meta charset="UTF-8">
<!-- 规定了IE浏览器的兼容 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 规定了响应式 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题 显示在我选项卡当中 -->
<title>第一个html文件</title>
</head>
<!-- body中写想要显示在页面当中的内容 -->
<body>
hello world
</body>
</html>3.HTML语法&标签
3.1.注释
<!-- hello world --> 不会在网页中显示，可以在原码中显示，用来解释说明
3.2.元素
双标签元素：开始标签+结束标签+内容+属性
<div>
<div>
<div>test</div>
</div>
</div>单标签元素：开始标签+属性
<br/>
<hr/> 3.3.属性
写在开始标签当中， 属性由 属性名=“属性值” 引号可以是单引号可以是双引号
核心属性：
id 唯一性
class 可以共用
style 对样式进行设置
title 鼠标悬浮 提示
例如：
<!DOCTYPE html>
<html lang="en">
<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>属性</title>
<style>
#one {
color:darkred
}
#two{
color:blue
}
.box{
background-color: bisque;
}
</style>
</head>
<body>
<div id="one" class="box" style="font-size: 20px;">111111</div>
<div id="two" class="box"title="这是文本2">222222</div>
<img src="" alt="">
<!--创建一个 id为one的div idv#one-->
<!-- <div id="one"></div> -->
<!-- 创建一个 class为box的div div.box -->
<!-- <div class="box"></div> -->
</body>
</html>特有属性：自己特有 别的元素没有
<meta charset="UTF-8">charset 字符集
<img src="" alt=""> src 图片来源 alt 找不到图片时展示的文本
3.4.空白、实体
空格：无论写多少空格 浏览器只会按照一个处理
实体：
例如：
<body>
<div> this is div </div>
<div> this is div </div>
</body>3.5.块级元素
作用：搭建页面的结构（骨架）
特点：1.独占一行
2.默认宽度为父元素的100%，默认高度为0，高度由内容或者子元素决定
3.可以设置宽高
<div style="width: 100px;background-color:aqua;">111111</div>
<!-- <div style="width: 200px;height: 200px;background-color: blue;">222222</div> -->
<div style="background-color: blueviolet;">333333</div>
3.6.行内元素
作用：填充
特点：1.共享一行空间，放不下的话会换行
2.默认宽高由内容决定
3.默认情况下不能设置宽高
无意义的行内元素 
超连接
href: 1> 链接：path 相对路径和绝对路径
2> 锚点：目标id所在位置 #id
3> 发送邮件：可以发送邮件 mailto:邮箱
src 图片来源 alt 没有图片时展示的文本 有自有属性width height
加粗
斜体
强调
3.7.常用标签
例如：
<div style="width: 100px;background-color:aqua;">111111</div>
<!-- <div style="width: 200px;height: 200px;background-color: blue;">222222</div> -->
<div style="background-color: blueviolet;">333333</div>
<p>这是P标签</p>
<h1>标题11</h1>
<h2>标题22</h2>
<h3>标题33</h3>
<h4>标题44</h4>
<h5>标题55</h5>
<h6>标题66</h6>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
<ol>
<li>足球</li>
<li>篮球</li>
<li>乒乓球</li>
</ol>
<dl>
<dt>项目</dt>
<dd>迷你</dd>
<dd>花瓶</dd>
<dt>项目</dt>
<dd>迷你</dd>
<dd>花瓶</dd>
</dl>3.8.语义化标签
语义化：footer header nav address
<footer></footer>
<div></div>
<footer>
<address>公司信息</address>
</footer>4.表格
4.1.表格
作用：来展示数据
table 表格 border边框
width 宽度
cellspacing 单元格与单元格之间的距离
cellpadding设置单元格与内容之间的距离
bgcolor 背景色
thead 表头
tr 行
th 单元格 有默认样式 黑体字
tbody 表体 align 设置文本居中 center left right
tr 行
td 单元格 colspan 跨列数 rowspan 跨行数
<!-- 表格开始 -->
<table border="1" width="70%" cellspacing="0"cellpadding="10px"bgcolor="#eee">
<thead>
<tr>
<th colspan="6"bgcolor="#fdfbn">课表</th>
</tr>
<tr>
<th>星期/节次</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>第一节</td>
</tr>
</tbody>
</table>
4.2.表单
作用：用来收集用户的信息，与后台进行交互
form（lable）
form属性：
antion：后台处理接口，表单提交到的位置
enctype:编码方式
multipart/form-data 如果说表单当中有文件，必须选择这种方式
text/plain 纯文本
swagger查用哪个enctype方式
element组件库
value 默认选项
input 输入框
<input type="text"name="usermane"id="input_username">
