基础知识了解：
（1）HTML：超文本笔记语言
作用：实现页面基本内容结构化和系统化。将数据（静态的或者非静态的）进 行易于用户交互行为的基本布局
（2）Css：层叠样式表
作用：对HTML页面进行系统化和易于管理的样式渲染
（3）JavaScript：浏览器脚本语言
作用：实现基于客户端（浏览器）流程化控制的脚本设计
（4）Vue：一个js框架，可以提高开发效率；双向数据绑定
（5）Bootstrap(样式框架，可以实现快速布局)、element_ui（vue的框架）
（6）其他常用框架，如react等
环境搭建：
不需要特殊搭建环境，可以选择一个合适的开发工具
常用开发工具：HbuilderX、vscode、webstrom
HTML常用标记：
Html标记可以总体分为两种类型：
（1）单标记 <标记名称 属性1=“属性值” 属性2=“属性值”/> （2）双标记
<标记名称 属性1=“属性值” 属性2=“属性值”>
<子标记>（可选）
</标记名称>
常用标记：
<!DOCTYPE html>
文本类型，默认是html5，也可以根据需要选择其他版本
<html>
所有标签的父标记，文档根标记
<head>
html文档环境的配置信息，以及外部资源的引入
<meta charset="utf-8">
制定编码字符集为utf-8
<title>测试</title>
指定标签页名字
<body>
文档内容（界面结构信息）
超链接
<a>
可以根据href属性指定页面跳转地址；
使用target属性可以指定打开连接的目的地，self为默认值，表示在当前页面打开，可以指定值为blank 在其他页面开发连接
Title：文本提示（不是超链接特有的属性，绝大多数可视化标记都可以使用）
<a href="http://www.baidu.com" target="_blank" title="百度">百度一下</a>
换行符
<br />
贯穿线
<hr color="red"/>
可以使用color属性改变颜色
图片
<img src="img/pig.jpg" width="500px" height="500px" alt="图片走失了"/>
Src：指定要显示的图片地址，可以是本地资源，也可以是万维网上的地址
Width：设置图片的横向宽度；可以为固定像素，或百分比
Height：设置图片的纵向高度
Alt：当src路径指定的资源不可用或失效使们用于在页面进行的提示文本
地图
用法：在map中指定区域，在img进行引用，使用usemap属性引入map的name属性值进行使用 属性讲解：
shape值为rect：则显示一个方形，根据coords指定的坐标（11,11,50,50），前两个为矩形左上角的坐标，后两个为右下角的坐标，两点形成对角线产生矩形范围；
shape值为circle：则显示一个环形，根据coords指定的坐标，前两个为圆心坐标，第三个为半径长度。以此产生的圆形范围。
shape值为poly：则显示一个多边形，根据coords指定的坐标，坐标成对出现，每两个值定义一个坐标点，最后一组最标点自动与第一组的坐标点闭合，产生多边形。
<img src="img/pig.jpg" width="500px" height="500px" alt="图片走失了" usemap="#mymap"/>
<map name='mymap'>
<area shape="circle" coords="100,100,100" href="http://www<!-- .baidu.com" />
<area shape="rect" coords="200,200,400,400" href="http://www.baidu.com" />
<area shape="poly" coords="50,50,100,80,100,150" href="http://www.baidu.com" />
</map>
排版：
标题
<h1></h1>...................................<h6></h6>
从h1到h6字号递减，单独成行
段落
<p>
自动换行，自成一行，但不保留文本格式
<pre>
自动换行，保留文本默认排版布局以及段落行列间距
空格符
 
将可控个空格符搭配使用，一个空格占位大小大约为空格符的二分之一的大小
≥大于等于
≤小于等于
>大于
<小于
×x(乘号)
列表
有序列表
-
<li>白日依山尽</li>
<li>黄河入海流</li>
<li>欲穷千里目</li>
<li>更上一层楼</li>
</ol>
无序列表
可以通过style属性改变列表前面的显示；如：list-style: none；为去掉列表前面的黑点
-
<li>白日依山尽</li>
<li>黄河入海流</li>
<li>欲穷千里目</li>
<li>更上一层楼</li>
</ul>
修改文字样式：
Font标签：改变字体样式
size属性：改变字体大小，数字越小则字越小
Color：改变字体的前景色
Face：改变字体（文字字体设置是否起作用，在于客户端（浏览器）所在的主机环境是否有该字体）
<font size="7" color="red" face="汉仪青云简">
Html标签讲解
</font>
<b>123</b>
标签：粗体，只是在视觉效果上加粗
<strong>你好</strong>
不只是视觉上的加粗，还会重声朗读
<i>123</i>
斜体，只是在视觉效果上改变
<em>123</em>
斜体，不只是视觉上的改变，还会重声朗读
<u>123</u>
下划线
<del>原价8800</del>
贯穿线
<big>你好</big>
字体放大
<small>你好</small>
字体缩小
<s>你好</s>
贯穿线
<h1 align="center">你好</h1>
使用align属性，指定属性值为center使字体居中
<center>你好</center>
字体居中
表单组件：
表单本身作为一种范围标记进行使用，默认情况下没有任何样式，但上下自动换行
<form>
常用属性：
Action：表示数据需要提交的目的地
Method：表示数据传输方法，默认为get方式（使用地址栏传输），可以设置为post（加密传输）
Get和post的区别？
get为轻量级传输，消耗资源相对较少，但安全性低（走地址栏）；因走地址栏，但地址栏传送数据量有限（1024个字节）
Post方法资源消耗相对较多，但安全性更好（不走地址栏）
<form action="http://www.baidu.com" method="get">
作用：在表单中用于收集用户信息的可编辑可选择组件。如：文本框、单选钮、复选钮等；
文本框
<input type="text" placeholder="请输入" value="tom" name="username"/>
常用属性：
placeholder属性用于文本提示
Value：给文本框一个默认值，在输入后，输入的内容是什么，value的值就为什么
Name：为组件定义标识
required="required"：加上该属性则表示该字段不能为空，提交时进行自动校验
readonly="readonly"：为只读，不可编辑，但是可以传送数据
disabled="disabled"：为禁用，不可编辑，也不可传值
:<input type="text" value="readonly" name="name1" readonly="readonly"/>
<input type="text" value="disabled" name="name2" disabled="disabled"/>
密码框
<input type="password" placeholder="请输入"/>
<input type="radio">:单选钮,在使用单选钮的时候，一样的name属性下面的标签视为一组，几个选项之中只能选择一个，选择哪个，value为哪个；
checked="checked"属性：默认选中的选项
Eg:
<input type="radio" name="sex" checked="checked"/>男 <input type="radio" name="sex" />女
在input标签外嵌套一个label标签，在点击文字的时候也可以选择
Lable：可以实现指定组件的定位设置，既可以通过点击lable让特定组件获得焦点
<label>
<input type="radio" name="sex" />女
</label>
复选钮
<input type="checkbox" />
<input type="checkbox" name="intre" value="1" checked="checked"/>琴
<input type="checkbox" name="intre" value="2"/>棋
<input type="checkbox" name="intre" value="3"/>书
<input type="checkbox" name="intre" value="4"/>画
下拉菜单
使用<select><option>标签组合使用；
<optgroup>用于下拉分组使用；
默认选中使用 selected="selected" 属性
禁止选择可以使用 disabled="disabled"属性来实现
<select name="star">
<option selected="selected" disabled="disabled">请选择</option>
<optgroup label="风向星座">
<option value="1">天秤座</option>
<option value="2" >双子座</option>
<option value="3">水瓶座</option>
</optgroup>
<optgroup label="水象星座">
<option value="4">巨蟹座</option>
<option value="5">白羊座</option>
<option value="6">摩羯座</option>
</optgroup>
<optgroup label="火象星座">
<option value="7">双子座</option>
<option value="8">处女座</option>
<option value="9">双鱼座</option>
</optgroup>
<optgroup label="北方星座">
<option value="10">金牛座</option>
<option value="11">射手座</option>
<option value="12">狮子座</option>
</optgroup>
</select>
下来选择可以选择多个属性可以在select标签后加上multiple="multiple"属性，即可按住ctrl建实现选中多个选择。
<select name="star" multiple="multiple">
文本域
<textarea>
标签；可以通过rows和cols属性控制文本域显示的大小
<textarea name="introduction" rows="20" cols="60"></textarea>
日历组件
<input type="date">：日期
<input type="datetime">：日期时间（兼容性不是很好）
<input type="datetime-local" />日期时间
<input type="time" />时间
其中，1和3的兼容性最好
可编辑选项列表：
下拉菜单课选择也可以手动输入，会自动根据输入进行筛选
<option>aaaaa</option>
<option>aabbcc</option>
<option>abc</option>
</datalist>
带标题的边框：
<fieldset>
<legend align="left">
个人资料
</legend>
姓名：<input type="text" />
</fieldset>
文本选择器：
<input type="file" />
专项文本输入：email、number等
<input type="email"/>
只能输入邮箱格式的文字，在提交时自动校验
<input type="number" max="60" min="18" step="2" />
输入数字格式的内容，可以通过min、max、等属性进行限制；期中min表示可输入的最小值；max表示
可输入的最大值，会在提交时的时候自动进行校验。step表示增长步长，默认值为1；
Html表单组件：按钮
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
重置只有在表单（form）内部才起作用，恢复到默认项
从H5开始，推荐使用button来进行设置；
button在from中默认为提交按钮；
可以通过type属性进行功能选择：如submit、button、reset；
Button为双标记，可以在button标记的内部放置一个img标签
隐藏域
<input type="hidden" name="hide" value="111"/>
页面上不显示，不可编辑，但是可以作为容器传输数据
HTML5音频、视频
音频播放：
第一种使用方式：<audio src="mp3/en-《嚣张》超品MP3单曲.mp3" controls="controls">、
第二种使用方式：可以使用source子标签指定音频资源，可以指定多个，当第一个文件失效，会顺序播放第二个文件
常用属性：controls="controls"显示控制台
autoplay="autoplay" 自动播放；chrome 66以上的版本为了避免多媒体标签产生随机噪音，规定了不为静音的标签不能自动播放，需手动触发开始播放，标签定义为静音(muted: true)才可以自动播放；
<audio controls="controls" muted autoplay="autoplay">
<source src=mp3/en-《嚣张》超品MP3单曲1.mp3></source>
<source src="mp3/爱河%20-%20神马乐团.mp3"></source>
</audio>
视频播放
使用video标签，用法和audio标签的用法一致；
Eg：<video src="mp4/hard.mp4" controls="controls"></video>
HTML常用的布局方式
Table布局（表格布局）
层布局（div）
框架布局（frame）
表格布局
使用table标签进行表格方式布局
常用属性：
border：表示边框
Width：表示表格整体宽度
Height：表示占整个表格的高度
Cellspacing：单元格之间的距离默认有间隙，设置该属性，让单元格之间的间隙为0，取消间隙
align="center"：居中显示
Bordercolor：指定边框的颜色
内部可以直接使用tr、td代表行列进行表格布局；还可以嵌套子标签thead、tbody、tfoot等
Thead表示：表头（标题）
在thead中，仍然使用tr组织“行”；th是标题行中的“列”；默认加粗并居中
tbody表示：表体（内容）
Tfoot表示：表尾（注脚）
在tbody和tfoot中，使用tr表示行，使用td表示列，默认不加粗，靠左显示
Caption：在表格中给表格添加标题，放在表头前，标题会居中显示
<table border="1" width="600px" height="300px" cellspacing="0">
<caption>学生信息统计表</caption>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>学号</th>
<th>住址</th>
<th>联系方式</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tfoot>
</table>
单元格合并：
Rowspan：可以实现“行合并”
Colspan：可以实现“列合并”
合并时将多余的单元格删掉，合并顺序自上而下，从左到右，合并时们不能跨thead、tbody、tfoot
补充：
可以在table里设置整个表格的行高/列宽
也可以单独设置行高，若不设置整体的行高列宽，默认内容够用即可，设置了整体的行高列表，再单独设置某一行的行高，剩下的行的行高均分整体行高剩余的高度，由于行是依附列的存在，没有列，就不存在行，所以，不能单独设置某一行的宽度，可以设置列的宽度。
层布局
“层”泛指页面上任意可以独立存在的双标记，按照设计需要对其进行位置的设置
常用标记：div，没有默认样式，独立成行，是一个块状元素，具有阻塞的性质
优点：独立性，单独成行，在页面布局中，table也可以进行布局，但是table布局在加载页面加载时，会将所有的td加载出来之后在一起显示，体验感较差，而用div，因div具有独立性，会单独加载呈现
Div为三维布局，立体感更好
Span也可以用于层布局，以列的方式呈现，但不能改变列宽，想让内容一起显示就使用table，互补影响的话就使用div
框架布局：
作用：使多个页面内容在同一浏览器（选项卡）中同时显示，并可以根据需要分割，布局。
常用标记：
Framset：不能和body同时出现，、
Framset标签的作用，使当前页面进行其他页面内容的显示设置，页面本身的body标签失效；有body无框架，有框架无body；
常用属性：rows对多个页面进行“行”布局
Cols对多个页面进行“列”布局
<frameset rows="30%,*" frameborder="0">
-----使用rows属性，页面上下显示，第一个页面占30%，第二个占剩下的。可以使用cols进行左右布局
<frame src="page1.html" />
<frameset cols="30%,*">
--------framset内部可以嵌套使用framset标签，添加后，此页面为上，左右布局
<frame src="page2.html"/>
<frame name="showarea" />
</frameset>
</frameset>
可以设置属性frameborder=“0”，当布设置此属性时，边框课件，可调节，设置之后，边框不可见，且不能调节
也可以设置
frame 的name属性可以作为a（超链接）或form表单的target值来使用。
<a href="table局部.html" target="showarea">医生信息管理</a>
Frame中如上面例子所示
可以通过scrolling="no"属性将frame中的滚动条取消
<frame src="page2.html" scrolling="no"/>
iframe标签页可以用于框架布局，可以写在body中
<body>
<iframe src="page1.html" height="100px" width="500px"></iframe>
<iframe src="page2.html" height="200px"></iframe>
</body>
