:::info 超文本标记语言，用于修饰文本图片，由html元素构成。
此页笔记是HTML中基础中的基础，务必熟读应用于心。 :::

HTML元素:

内联元素(个体)： :::info 无宽高，不换行占自己位置，padding\margin:左右可用，上下不可用。常用标签：<span><a> :::
行内元素(团体)： :::info 有宽高，独占一行。常用标签：<div><p> :::

路径：

:::info

绝对路径：完整的URL路径
相对路径：相对于当前文件的路径 ::: 常用符号说明

标签	说明	标签	说明
/	根目录	./	当前目录
../	上级目录

字符集：

:::info h5提倡用utf-8字符集，基本想要的都能有，写法：&nbsp；&#12314 ::: 字符集目录：https://www.runoob.com/charsets/ref-html-symbols.html

特殊标签

1.图片及映射：img

<!--一个inline-block标签-->
<!--图片-->
<img src="地址" width="宽" height="高" alt="图片载入失败显示" title="鼠标悬浮显示提示" usemap="#地图名">
<!--图片映射（就是在图片上定义个位置点击能跳转）-->
<map name="地图名">
  <!--shape:"rect:矩形（取左上、右下点）、circle:圆形(取圆心点,半径)、poly：自定义（取各个点）"-->
  <area shape="形状1" coords="形状坐标" href="跳转链接" alt="概述">    
  <area shape="形状2" coords="形状坐标" href="跳转链接" alt="概述">   
</map>

2.表格：table

<table border="边框宽">
  <thead>
    <th>标题1</th>
    <th>标题2</th>
  </thead>
  <tbody>
      <tr>
        <td colspan="横向合并">row 1, cell 1</td>
        <td rowspan="纵向合并">row 1, cell 2</td>
        </tr>
   </tbody>
</table>

3.内联框架：iframe

<iframe src="页面" width="宽" height="高" frameborder="边框"></iframe>

4.列表

<!--无序列表，默认前面是个点-->
<ul>
  <li>列表</li>
</ul>
<!--有序列表，默认前面是个数字排序-->
<ol type="1/a/A..." start="从第几个序号开始"><!--type:1 a A I i-->序号样式
  <li>列表</li>
</ol>
<!--定义列表，前面啥都没有-->
<dl>
    <dt></dt>
  <dd></dd>
</dl>

5.表单：

<!--常用请求方式：-->
<!--get：通过地址携带参数传输，有大小限制2048字节，快，不安全-->
<!--post：通过http协议传输，无大小限制，而且安全-->
<form action="请求地址" 
      method="请求方式"               //常用POST/get
      target="结果打开方式"     //默认当前页面跳转，_blank:新页面跳转
      autocomplete ="自动完成"  //根据用户之前的习惯提示，默认true
      novalidate="true/false"        //类似email类型不进行验证
      >
  <!--1.文字-->
  <label for="绑定元素ID">Male</label>  //点击文字相当于点击绑定组件
  <!--2.type=text:输入框、password:密码、number:数字、radio:单选、checkbox：复选-->
  <input type='类型' 
         //text:文本框、password:密码、number:数字、radio:单选、checkbox：复选、file：文件或image图片、url:地址、submit
         //color:颜色框、date:日期、month：年月、time：时间、datetime-local:时间日期、search:搜索选择、range:区间
         src="图片地址"   //多用于图片按钮
         name="参数名" 
         value="参数值" 
         heigth="高度"
         width="宽度"
         size="容纳字符宽度"
         id="ID" 
         placeholder="提示文字"
         checked               //首次加载时应当被选中
         disabled              //禁用
         max='最大值'          //最大值多用于数字和日期
         min='最小值'       //最小值多用于数字和日期
         step="步数"                //多用于数字和日期
         maxlength="最大长度"   //最大长度
         required="required"   //是否为必填项
         readonly ="readonly"  //只读
         pattern="正则"     //正则验证
         multiple="multiple"   //多个值多用于file
         list="datalist的ID"  //设置多个预定义的值供用户选择
         autofocus=""          //自动聚焦
         autocomplete='off'    //关闭预定义缓存
         >   
  <!--3.文本域-->
  <textarea row="默认行" col="宽度字数"></textarea>
  <!--4.下拉表-->
  <select>
    <optgroup label="名字"><!--组合标签-->
      <option value="">选项1</option>
      <option>选项1</option>
       </optgroup>
    <option>选项1</option>
  </select>
  <!--5.预定义列表-->
  <input type="text" list="url_list">
  <datalist id="url_list">
        <option label="W3Schools" value="http://www.w3schools.com" />
        <option label="Google" value="http://www.google.com" />
        <option label="Microsoft" value="http://www.microsoft.com" />
    </datalist>
  <button>按钮</button><!--点击按钮-->
</form>

兼容性处理：

:::info 在以往年代IE6 7 8 9混乱的时代，前端兼容是最恶心的事，好在现在那个时代已经过去，但是仍有不少银行、政府部门的网页还是仅支持IE8及以下的浏览器，如果遇到了可以用以下办法去做做兼容。 :::

1.特殊的注释：

<!-- [if IE8]>     <![endif]-->         这里面的内容只有在ie8中显示的内容
<!-- [if gt IE8]>     <![endif]-->       大于
<!-- [if gte IE8]>     <![endif]-->      大于等于
<!-- [if lt IE ]>     <![endif]-->        小于
<!-- [if lte IE8]>     <![endif]-->      小于等于
<!-- [if !(IE8)]>     <![endif]-->        IE8以外
<!-- [if (IE8) & (IE7)]-->     <!--[endif]-->        IE8和IE7

2.兼容：

注意IE8及一下版本的浏览器是不支持html5的，实战中一般会用html5shiv.js处理，如果是PC端网页开发建议不管怎么样都把下面这个加上去；

 <!--[if lt IE 9]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
 <![endif]-->

以上是必学的

以下得知道不然别说会H5

新增语义标签：

常用的这几个就够了：

标签	描述	标签	描述
	定义文档内的文章。		定义任务进度。
	定义用户可查看或隐藏的额外细节。		定义页面内容之外的内容。
	定义对话框或窗口。		定义文档中的节。
	定义文档或节的页脚。		定义元素的标题。
	定义文档或节的页眉。		定义自包含内容，比如图示、图表、照片、代码清单等等。
	定义文档的主内容。		定义文档内的导航链接。
	定义重要或强调的内容。		定义日期/时间。

本地存储

就是将一部分的数据直接存储在用户自己电脑上，减轻工作量和提高程序性能，存储大小差不多5M.

sessionStorage比localStorage更严格，都是在相同协议、域名、端口的前提下，必须是同一个窗口

//要判断是否支持本地存储
if(typeof(Storage)!=="unidefined"){
  //localStorage一直存储不删除一直在
  //写法1
  localStorage.setItem('键','值')  //存
  localstorage.getItem('键') //取
  //写法2
  localStorage.键='' //存
  localStorage.键(索引)  //取
  //删除一个
  localStorage.removeItem('键')
  //删除所有
  localStorage.clear()
  //sessionStorage浏览器关闭了就没有，写法就按照上面localStorage写就行了
}else{
  //浏览器不支持本地存储
}

:::tips 以下的内容主要HTML5中新增的功能型应用，相比HTML要更麻烦，此处仅记录功能的说明及应用,很多功能在常规项目开发中应用比较少，除非特定的工作或者项目可能用到，爱好或者想成为大牛必看，咸鱼就酌情学习！
下面配上我学习时找的资料可以参考 :::

画布：Canvas

如名称所言就是构建画布，然后在画布上构建图形，常规项目中过于复杂的图形直接让美工出图，一些简单的图形或者特定的需求可以自己写，画布功能能构建很炫酷的动画效果与特效，除非特定的项目需求或者专门爱好，此处仅作为了解即可。

想要精进一下这方面的技术可以看下面的文章： https://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html

可缩放矢量图：Svg

使用XML定义图形，主要用于2D矢量图的绘制，和Canvas很像更多时画个图形，除非特定的情况不然仅作了解即可。用到的话，可以使用svg.js这个轻量级javascript库

想要精进一下这方面的技术可以看下面的文章： https://www.cnblogs.com/yadiblogs/p/9312210.html

svg.js https://www.cnblogs.com/mcbye/p/svg1.html

数学标记：MathML

就是写数学公式，这个用到比较少，和上面画布和svg一样用到的时候看看

想要精进一下这方面的技术可以看下面的文章： https://wiki.jikexueyuan.com/project/html5/mathml.html

拖放（Drag 和 Drop）

就是模块拖动，如上吧

想要精进一下这方面的技术可以看下面的文章： https://www.cnblogs.com/weiqinl/p/7886049.html

获取地理位置：Geolocation

如上吧，注意这个功能需要获得用户同意才能使用

想要精进一下这方面的技术可以看下面的文章： https://blog.csdn.net/qq443068902/article/details/48136355

Video视频、Audio音频

想要精进一下这方面的技术可以看下面的文章： https://www.jianshu.com/p/3b9d94c0e2b3

数据库：Web SQL

前端连接数据库做增删改查，前端操作数据库及其危险所以基本不大会用

想要精进一下这方面的技术可以看下面的文章： https://www.runoob.com/html/html5-web-sql.html

应用程序存储：

就是把程序缓存到本地，这样就可以离线打开，节省服务器负担，这个还是不完善，需要的话可以使用serviceWorker

多线程：Web workers

JS是单线程的语言，WebWorkers利用处理器多核的特性，又开辟出的一个子进程，子线程完全依赖于主线程子线程不能使用主线程的window\document\parent和Dom节点

postmessage:发送信息
onmessage:接收信息
worker.terminate();//清除进程

想要精进一下这方面的技术可以看下面的文章： http://www.ruanyifeng.com/blog/2018/07/web-worker.html

单向持续的接收服务器信息:SSE-seveice-sent

这个可以理解成服务器主动单向给用户端推送数据，这个需要服务端的配合

想要精进一下这方面的技术可以看下面的文章： https://www.w3school.com.cn/html/html5_serversentevents.asp

双向信息推送:Websecket

例如聊天功能：这个服务端需要安装配置服务pywebsocket

想要精进一下这方面的技术可以看下面的文章： https://www.runoob.com/html/html5-websocket.html

编程常用

Html HTML5笔记