HTML学习笔记

笔记 > 前端 前端 web HTML
发布时间 :
字数:14.4k 阅读 : 评论:
  1. 一、HTML简介
    1. 1、HTML
  • 结束标签
    1. 2、网页标准格式
    2. 3、发展
  • 二、HTML5标准
  • 三、语法规范
  • 四、概念
    1. 1、标记
    2. 2、元素
    3. 3、标签分类
    4. 4、注释
    5. 5、属性
    6. 6、路径
    7. 7、进制
    8. 8、单位
  • 五、标签
    1. 1、根标签html
    2. 2、头标签head
    3. 3、文档主体标签body
    4. 4、脚本
  • 六、常用标签
    1. 1、标题标签
    2. 2、段落标签
    3. 3、换行
    4. 4、水平线(分割线)
    5. 5、容器
    6. 6、文字标记
    7. 7、超链接
    8. 8、图片标签
    9. 9、列表标记
    10. 9、表格标签
    11. 10、表单
    12. 11、转义字符(字符实体)
    13. 12、框架网页
  • 七、HTML5新增标签
    1. 1、新增语义化标签
    2. 2、列表
    3. 3、表单
    4. 4、进度条
    5. 5、多媒体标签——音视频
  • 八、H5中的DOM操作
    1. 1、获取DOM元素
    2. 2、操作类样式
    3. 3、自定义属性
  • 九、常用API
    1. 1、网络状态改变事件
    2. 2、全屏接口的使用
    3. 3、文件读取API
    4. 4、拖拽接口
    5. 5、地理定位API
    6. 6、通信API
  • 十、web存储
    1. 1、sessionStorage的使用
    2. 2、localStorage的使用
  • 十一、应用程序缓存

    • 一、HTML简介

    1、HTML

    全称为超文本标记语言(Hypetext Markup Language)

    • 其中超文本是相对纯文本来说的，HTML除了纯文本内容(文字、字符)还可以包括图片、音频、视频

    • 负责网页三要素中的结构

    • 使用标签(记)的形式来标识网页中的不同组成部分 <标签名>

      开始标签

      结束标签

    • 超文本标识——超链接

    2、网页标准格式

    一个简单的网页可以只有文本内容，也就是内容只写入纯文本，文件名后缀为.html或.htm，浏览器将会把文本内容自动加到body标签中，基本内容如下

    • <html></html> 根标签 有且只有一个 网页内容写到里面

    • html两个子标签：

      • <head></head> 设置网页头部信息 不会在网页中直接显示 给浏览器看 解析网页

      • <body></body> 网页主体 页面中可见部分写在这

      • head子标签：

        • <title></title>网页标题 将在浏览器标签栏显示

    标签关系——父标签、子标签、兄弟标签、祖先标签、后代标签

    <html>
   <head>
      <title></title>
   </head>
   <body>
     文本内容在这
   </body>
</html>

    3、发展

    • 1993年6月：HTML第一个版本发布
    • 1995年11月：HTML2.0
    • 1997年1月：HTML3.2(W3C推荐)
    • 1999年12月：HTML4.01(W3C推荐)
    • 2000年底：XHTML1.0(W3C推荐)
    • 2014年10月：HTML5(W3C推荐)

    html xml xhtml html5

    二、HTML5标准

    （1）Doctype 使用版本

    声明必须是 HTML 文档的第一行，位于 标签之前。

    声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

    在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

    HTML5 不基于 SGML，所以不需要引用 DTD。

    提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。

    • HTML4

      • 过渡版

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

    • 严格版

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">

    • 框架版

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

    • XHTML

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    • HTML5

      html4.01和xhtml的文档声明这么麻烦，还好我们只要使用HTML5就OK了

      <!DOCTYPE html>

      不写文档声明，有些浏览器会进入怪异模式(解析网页是出现异常)

    （2）一个最基本的HTML5页面

    <!DOCTYPE html>
<html lang="en"> <!-- en英文、zh中文 -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页标题</title>
</head>
<body>
  <h1>网页正文</h1>
</body>
</html>
    • Doctype 文档声明，必须放在html标签前面，且之前不能放置内容，即使是注释
    • html、head、body、title 根标签、头部标签、主体标签、网页标题，html中的lang属性规定元素内容的语言，当然，这个属性其他标签也有
    • meta元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词，这里charset设定的字符集为UTF-8，viewport主要针对移动端

    三、语法规范

    • HTML中不区分大小写，一般使用小写

    • 注释不能嵌套

    • 标签必须结构完整，要么成对出现，要么自结束标签(浏览器尽最大努力正确解析页面，修正不符合语法规范的内容，但是有些情况会修正错)

    • HTML标签可以嵌套，但是不能交叉嵌套

    • 属性必须有值，且值必须加引号(单引号、双引号都可以)

    四、概念

    1、标记

    又称标签，标签注重的是语义化，即什么标签做什么事(比如一个标题那么就用h$包裹)

    2、元素

    一个完整的标签(包含标签括起来的内容)

    3、标签分类

    （1）

    • 单标签：又称自结束标签，例如<img src='../img/1.png' />，推荐在后面的>之前加上/，将标签闭合
    • 双标签：具有开始标签和结束标签，内容写在开始标签和结束标签之间

    （2）

    • 替换
    • 非替换

    （3）

    • 有内容：
    • 空元素：没有闭合的标签，例如后面讲的link、hr、br、img等标签

    （4）(这个需要掌握，一般说HTML标签，就按这个分)

    • 行内元素：b、big、i、small、tt、abbr、acronym、cite、code、dfn、em、kbd、strong、samp、var、a、bbdo、br、img、map、object、q、script、span、sub、sup、button、input、label、select、textarea——只占据它对应标签的边框所包含的空间
    • 块级元素：address、article、aside、audio、blockquote、canvas、dd、div、dl、fieldset、figcaption、figure、footer、form、h1-6、header、hgroup、hr、noscript、ol、output、p、pre、section、table、tfoot、ul、video——独占一行
    • 行内块元素：input、td

    这个是常用的分类(然而MDN中并没有分行块元素)，CSS中还会再提到

    可以看下HTML行内元素、块状元素、行内块状元素的区别标签，HTML元素分类特点

    其中img标签以前一直说的是行块标签，可是现在到浏览器中查看显示的是display: inline，可身为内联元素又可以设置高宽(这不就是行块元素特点嘛)

    4、注释

    HTML文档中的注释使用<!-- -->包裹，写在这里面的内容浏览器能够识别，但是不会在页面中渲染显示出来

    <!-- 
注释内容，不会在页面中显示 好的注释习惯 简单明了
功能：
作者：
日期：
-->

    5、属性

    标签的属性（开始标签中 属性名=”属性值”）

    例如：

    <p align="center" style="font-size: 14px;">文字</p>

    • p就是标签名，这是一个段落标签

    • align、style就是这个标签的属性名

    • 属性名等号后的就是属性值，属性值需要用引号引起来，属性名和属性值一般成对出现(如果属性值为BOOL类型，有些可以省略属性值，只写属性名)

    • lang属性

    • title属性

    6、路径

    绝对路径：相对于根目录

    相对路径：相对于当前资源所在目录的位置

    ../ 上层路径

    ./ 当前路径

    / 下层

    eg：

    • /
      • img
        • picture1.webp
      • css
        • base.css
        • index.css
      • js
        • script.js
      • html
        • blog.html
      • favicon.ico
      • index.html
    • index.html中引用script.js——./js/script.js或者js/script.js
    • index.html中引用favicon.ico——/favicon.ico，一般都是放在根目录，引用的时候使用绝对目录
    • blog.html中引用picture1.webp——../img/picture1.webp

    7、进制

    满几进一

    • 二进制：满二进一，由0、1组成，例如11111110这八位表示2^0^ *0+2^1^ *1+2^2^+2^3^+2^4^+2^5^+2^6^+2^7^，即十进制254
    • 八进制：满八进一，由0~7组成，例如O12表示十进制10(8^0^2+8^1^1)
    • 十进制：满十进一，由0~9组成
    • 十六进制：由0~9、A~F组成，例如oX1e表示十进制30

    8、单位

    • 1，看情况，有的是1=100%，有的1指的是1px
    • % 百分比，相同百分比参照物不同，得到的结果不同
    • px 像素，有物理像素、CSS像素、设备像素
    • vw/vh 1vw等于视口(PC端浏览器可视区域/移动端涉及3个)宽/高度的1%
    • em 1em为一个字体大小
    • rem 根标签的字体大小

    五、标签

    1、根标签html

    一个HTML文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。

    通过lang属性指定整个页面的语言

    <html lang="en">
  ……
</html>

    2、头标签head

    规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。

    • title：网页标题
    <title>网页标题</title>

    • meta： 设置网页元信息（meta-information），比如网页字符集、针对搜索引擎和更新频度的描述和关键词，是一个单标签：

      • 编码

        乱码问题原因：计算机只认识0、1，计算机中保存的内容需要转化为二进制编码来保存，读取内容时需要转换成正确的内容—-编码、解码 编码和解码采用的字符集不同

        常见字符集：ASCII、ISO-8859-1、GBK、GB2312(中文系统的默认编码)、UTF-8(万国码)

        解决：在中文系统的浏览器中，默认的都是GB2312编码，更改编码Unicode，解码 head中告诉浏览采用的编码字符集

        <meta charset=”utf-8”/>  #编写使用的编码、字符集一致

    • 重定向

      <meta http-equiv=”refresh” conternt=”秒数;url=网址” />

    • 网页关键字

      <meta name="keywords" content="关键字内容1,2,3" />

    • 网页描述

      <meta name="description" content="描述" />

      搜索引擎在检索页面时，会同时检索页面中的关键字和描述，但是不会影响页面在搜索引擎中的排名

    • 与移动开发有关

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

    • link：定义文档与外部资源的关系

      属性 
href -- 指定需要加载的资源的地址URI 
media -- 媒体类型
rel -- 指定链接类型,设定是指对象和链接目标的关系,可选值, link还可以用Shortcut Icon等
rev -- 指定链接类型 
type -- 指定所连接文档的MIME类型，css的MIME是type/css,一般使用type="text/css"

      其中rel和href是必须要设置的

      • 引入CSS样式

        <link rel="stylesheet" href="style.css">

    • 引入网页icon图标

      <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

    • 很久以前，网速非常慢，网站主要就是分享文章的，就可以标识文档开始(告知搜索引擎)、文档上一页(浏览器可以回退)、下一页(浏览器可以提前加载此页)

      <link rel="start" type="text/html" href="http://www.dreamdu.com/xhtml/" />
<link rel="prev" type="text/html" href="http://www.dreamdu.com/xhtml/alternate/" />
<link rel="next" type="text/html" href="http://www.dreamdu.com/xhtml/attribute_rel/" />

      如果还想了解lin标签的话，自己可以到html中link的用法去看下

    • style：包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式。

    3、文档主体标签body

    body 元素定义文档的主体。

    body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）

    document.body属性提供了可以轻松访问文档的 body 元素的脚本。

    4、脚本

    • noscript：如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则在 HTML<noscript>元素中定义脚本未被执行时的替代内容。
    • script：HTML <script> 元素用于嵌入或引用可执行脚本。

    六、常用标签

    1、标题标签

    一共有六级 h1 h2 h3 h4 h5 h6

    <h1>这是一级标题</h1>

    不关心显示的大小 注重标签语义 h1最重要，表示网页中的主要内容

    对于搜索引擎来说，h1的重要性仅次于title

    建议只使用h1-h3

    2、段落标签

    <p>这是一个段落</p>

    表示一个段落/自然段，独占一行，两段之间有间隔

    在HTML中，字符之间多个空格当成一个空格解析，换行也当成空格

    <center>需要居中的元素</center>

    3、换行

    <br />

    4、水平线(分割线)

    <hr />

    5、容器

    div表示一个盒子或容器

    span没有特定的语义，通常用于样式的应用

    6、文字标记

    <b>：加粗

    <strong>：强调

    b和strong的区别就在于前者是物理元素,仅表示加粗，后者是逻辑元素，表示强调的意思，<b>是在html中的标签，而在xhtml中只能使用<strong>，后者兼容性更好。

    <i>：斜体，现在主要用于文本图标

    <em>：次级强调

    文字标记 语义
    <blockquote> 长引用
    <q> 短引用
    <abbr> 缩写
    <address> 作者联系信息
    <pre> 预格式化的文本,常用于程序代码
    <code> 定义计算机代码文本。
    <del> 删除的文本
    <sub> 上标
    <sup> 下标

    7、超链接

    a标签可以将包含内容设置为超链接，设置了href属性后点击内容可跳转到相应的页面

    <a href="目标地址" target="_blank">链接</a>

    常用属性：

    • href:

      • url：设置为链接之后可以跳转到该页面 <a href="https://wallleap.cn">wallleap</a>
      • #id：跳转到这个id名处 <h1 id="title"></h1>，如果跳转的地方是一个超链接也可设置name属性，之后点击这个链接<a href="#title">转到title</a>，就能跳转到这个地方，也可以加到链接后：<a href="https://a.c#title">跳转锚点</a>
      • mailto：打开默认邮件应用发送邮件到该邮箱 <a href="mailto:15579576761@163.com">发送邮件</a>，也可以设置好主题、内容：<a href="mailto:15579576761@163.com?subject=Re:wallleap.cn%20某文章&body=发送自wallleap">发送邮件</a>

    • target:

      • _self：默认
      • _blank：设置为内联框架的名称，可以在内联框架中打开页面
      • _top：

    提示：如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性。

    提示：被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。

    提示：请使用 CSS 来设置链接的样式。

    8、图片标签

    <img src="路径" alt="图片描述" width="200px" height="200px" />

    alt：图片不能显示时，对图片描述；搜索引擎根据alt搜索图片

    宽度和高度只设置一个，另一个也会等比例变化，同时指定按照值变化，自适应页面不设置宽高值

    图片格式：

    • JEPG(JPG)支持颜色多，可压缩，不支持透明；

    • GIF支持颜色少，支持简单的透明，支持动态图；

    • PNG支持颜色多，支持复杂的透明；

    • webp提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，

    • base64：当图片很小时(一般小于8kb)，或者需要先加载的图片，可以转为base64

    效果不一致，使用效果好的；效果一致，使用小的。

    9、列表标记

    1）ul、ol、li

    <ol>
  <li>巴西</li>
  <li>阿根廷</li>
  <li>德国</li>
</ol>
    1. 巴西
    2. 阿根廷
    3. 德国
    <ul>
  <li>巴西</li>
  <li>阿根廷</li>
  <li>德国</li>
</ul>
    • 巴西
    • 阿根廷
    • 德国

    2）dl、dt、dd

    <dl>
  <dt>计算机</dt>
  <dd>用来计算的仪器 ... ...</dd>
  <dt>显示器</dt>
  <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

    捕获.JPG

    image-20200810164726876

    ul:无序列表，li子元素显示为默认的黑色圆点，也可通过参数自定义列表的符号，常用于新闻列表展示

    ol:有序列表，可以在列表前增加序号，如1，2，3，4；适用于排行榜；

    dl:自定义列表，可以包括标题及内容，可适合用制作风箱结构；

    9、表格标签

    table:表格，适合于超过两行以上的数据呈现

    一个表格<table>是由每行<tr>组成的，每行是由列<td>组成的。

    所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。（td是嵌套在tr中的）

    <table>下的 <caption>标签、 <thead>标签、<tbody>标签、<tfoot>标签

    • <caption>——表格的标题，一般是table的第一个子元素(零个或一个)
    • <colgroup>——表格列组标签，用来定义表中的一组列表(零个或多个)
    • <thead>——表头，表格的最上面一行(零个或一个)
      • <tr>定义表格中的行
        • <th>定义表格内的表头单元格(列)，此元素内部的文本通常会呈现为粗体。
    • <tbody>——表的主体部分(零个或多个)
      • <tr>行
        • <th>表头列(如果没有<thead>就需要写上，显示在最上方；有<thead>可以tr*3>th+td*2这种形式，位于最左一列)
      • <tr>行
        • <td>列
    • <tfoot>——汇总行(零个或一个)

    注：

    1、如果写了thead、tbody、tfoot这三个部分，代码顺序书写可以随意，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。

    2、当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。

    3、tbody标签是“必须的”(并不是要求一定写)，即使你在代码中并没有写，在浏览器渲染之后tr和td还是会在tbody中

    属性：表格中的属性差不多都是不推荐使用的(可以写样式)，但由于开发的时候写属性更方便一点，因此列出来

    表格<table>的属性：

    • border：边框，单位px。
    • style="border-collapse:collapse;"：单元格的线和表格的边框线合并。
    • width：宽度，单位px。
    • height：高度，单位px。
    • bordercolor：表格的边框颜色。
    • align：表格的水平对齐方式，属性值可以填：left 、right、 center。
      注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）
    • cellpadding：单元格内容到边的距离，单位px。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。
      注意不是单元格内容到四条边的距离，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"(在下面有讲)，那就指的是内容到右边那条线的距离。
    • cellspacing：单元格和单元格之间的距离（外边距），单位px。默认情况下的值为0。
    • bgcolor="#99cc66"：表格的背景颜色。
    • background="路径src/..."：背景图片。
      背景图片的优先级大于背景颜色。
    • bordercolorlight：表格的上、左边框，以及单元格的右、下边框的颜色。
    • bordercolordark：表格的右、下边框，以及单元格的上、左的边框的颜色。
      这两个属性的目的是为了设置3D的效果。
    • dir：公有属性，单元格内容的排列方式(direction)。 可以 取值：ltr：从左到右（left-to-right，默认），rtl：从右到左（right-to-left） 既然说dir是共有属性，如果把这个属性放在任意标签中，那表明这个标签的位置可能会从右开始排列。

    行 <tr>属性：

    • dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left-to-right，默认），rtl：从右到左（right-to-left）
    • bgcolor：设置这一行的单元格的背景色。
      注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
    • height：一行的高度
    • align="center"：一行的内容水平居中显示，取值：left、center、right
    • valign="center"：一行的内容垂直居中，取值：top、middle、bottom

    单元格(列)td/th属性：

    • align：内容的横向对齐方式，属性值可以填：left、center、right
    • valign：内容的纵向对齐方式，属性值可以填：top、middle、bottom
    • width：宽度——绝对值或者相对值(%)
    • height：单元格的高度
    • bgcolor：设置这个单元格的背景色
    • background：设置这个单元格的背景图片

    单元格合并：如果要将两个单元格合并，那肯定就要删掉一个单元格。

    • colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
    • rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上要占据两个单元格的位置。

    下面用几个例子讲解表格(这些代码只是演示上面的知识，开发中千万别这样用/手动狗头)

    例子1：表格由行tr组成，行由列td组成

    <!-- 注：table标签一定要有 -->
<table border="1"> <!-- 为了看的更清楚一点，加上border属性(开发中不推荐)——给表格加上边框 -->
  <tr>
    <td>孙悟空</td><td>未知</td><td>男</td><td>花果山</td>  <!-- 由于代码有点长，这里把td写到一行 -->
  </tr>
  <tr>
    <td>猪八戒</td><td>未知</td><td>男</td><td>高老庄</td>
  </tr>
  <tr>
    <td>沙和尚</td><td>未知</td><td>男</td><td>流沙河</td>
  </tr>
  <tr>
    <td>唐三藏</td><td>23</td><td>男</td><td>东土大唐</td>
  </tr>
  <tr>
    <td>白龙马</td><td>未知</td><td>男</td><td>鹰愁涧</td>
  </tr>
</table>

    image-20200810160009152

    例子2：没有加thead用th来做表头、table部分属性

    <table border="1" width="400" height="200" bordercolor="skyblue" align="center" cellpadding="10px" cellspacing="5" dir="ltr">
  <tr>
    <th>姓名</th><th>年龄</th><th>性别</th><th>地点</th>
  </tr>
  <tr>
    <td>孙悟空</td><td>未知</td><td>男</td><td>花果山</td>
  </tr>
  <tr>
    <td>猪八戒</td><td>未知</td><td>男</td><td>高老庄</td>
  </tr>
  <tr>
    <td>沙和尚</td><td>未知</td><td>男</td><td>流沙河</td>
  </tr>
  <tr>
    <td>唐三藏</td><td>23</td><td>男</td><td>东土大唐</td>
  </tr>
  <tr>
    <td>白龙马</td><td>未知</td><td>男</td><td>鹰愁涧</td>
  </tr>
</table>

    image-20200810161835381

    例子3：有thead且tbody中不设置th、table部分属性+tr属性

    <table border="1" width="500" bordercolor="skyblue" style="border-collapse:collapse;" dir="rtl">
  <thead>
    <tr height="50" valign="bottom">
      <th>姓名</th><th>年龄</th><th>性别</th><th>地点</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>孙悟空</td><td>未知</td><td>男</td><td>花果山</td>
    </tr>
    <tr>
      <td>猪八戒</td><td>未知</td><td>男</td><td>高老庄</td>
    </tr>
    <tr>
      <td>沙和尚</td><td>未知</td><td>男</td><td>流沙河</td>
    </tr>
    <tr>
      <td>唐三藏</td><td>23</td><td>男</td><td>东土大唐</td>
    </tr>
    <tr>
      <td>白龙马</td><td>未知</td><td>男</td><td>鹰愁涧</td>
    </tr>
  </tbody>
  <tfoot>
    <tr align="center">
      <td>取经四人一马组</td><td>以前全都是仙佛来着</td><td>单身汉</td><td>前几集就凑齐了</td> <!-- 汇总行-->
    </tr>
  </tfoot>
</table>

    image-20200810162232527

    例子4：加上其他几个标签，有thead且tbody中设置th、th/td属性

    <table border="1" width="550" bordercolor="skyblue" style="border-collapse:collapse;">
  <caption>取经四人组</caption>
  <colgroup> <!-- 就是把列分组，每组可以加个类名这样的 -->
    <col style="background-color: bisque;">
    <col span="3" style="background-color: rosybrown;">
    <col span="2" style="background-color: silver;">
  </colgroup>
  <thead>
    <tr>
      <th width="100" height="50">物种</th><th>姓名</th><th>年龄</th><th>性别</th><th>地点</th>
    </tr>
  </thead>
  <tfoot>
    <tr align="center">
      <th>说明</th><td>取经四人一马组</td><td>以前全都是仙佛来着</td><td>单身汉</td><td>前几集就凑齐了</td> <!-- 汇总行-->
    </tr>
  </tfoot> <!-- 只要写了这三个，顺序无所谓，仍按照thead->tbody->tfoot -->
  <tbody>
    <tr>
      <th>猴子</th><td>孙悟空</td><td>未知</td><td>男</td><td>花果山</td>
    </tr>
    <tr>
      <th>猪头</th><td>猪八戒</td><td>未知</td><td>男</td><td>高老庄</td>
    </tr>
    <tr>
      <th>河妖？</th><td>沙和尚</td><td>未知</td><td>男</td><td>流沙河</td>
    </tr>
    <tr>
      <th>金蝉</th><td>唐三藏</td><td>23</td><td>男</td><td>东土大唐</td>
    </tr>
    <tr>
      <th>白龙</th><td>白龙马</td><td>未知</td><td>男</td><td>鹰愁涧</td>
    </tr>
  </tbody>
</table>

    image-20200810163541447

    例子5：单元格合并

    <table bgcolor="#ccc" border="1" width="550" bordercolor="red" style="border-collapse:collapse;">
  <tbody>
    <tr bgcolor="yellow">
      <th>姓名</th><th>年龄</th><th>性别</th><th>地点</th><th>前世工作地点</th>
    </tr>
    <tr>
      <td>孙悟空</td><td rowspan="3">未知</td><td rowspan="5">男</td><td>花果山</td><td bgcolor="yellowgreen" rowspan="3">天庭</td>
    </tr>
    <tr>
      <td>猪八戒</td><td>高老庄</td>
    </tr>
    <tr>
      <td>沙和尚</td><td>流沙河</td>
    </tr>
    <tr>
      <td>唐三藏</td><td>23</td><td>东土大唐</td><td>雷音寺</td>
    </tr>
    <tr>
      <td>白龙马</td><td>未知</td><td>鹰愁涧</td><td>西海</td>
    </tr>
    <tr>
      <td colspan="5" align="center">西天取经</td>
    </tr>
  </tbody>
</table>

    image-20200810164636116

    表格布局：还是在很久以前，表格用来做页面布局，还没学到CSS，提下这个概念，知道有这个东东就行。

    10、表单

    1）表单标记

    <form action="表单提交的处理程序地址" method="表单提交方式(post/get)" name="表单名称"></form>

    form元素将所有的表单包含起来，也相应于表单的作用域。

    get和post提交方式的区别：get请求把表单的数据显式地放在URL中，并且对长度和数据值编码有所限制；post请求把表单数据放在HTTP请求体中，没有长度限制。

    2）文本框

    <input type="text" name="控件名称" value="文本框输入值" placeholder="提示信息" disabled readonly required auotfocus />

    3）密码框

    <input type="password" name="控件名称" placeholder="提示信息"/>

    4）单选按钮：同一组单选按钮使用同一命名

    <input type="radio" name="控件名称" value="控件值" checked />

    5）复选按钮

    <input type="checkbox" name="控件名称" value="控件值" checked />

    6）下拉列表

    <select name="控件名称" multiple="multiple" size="数值">    <option value="控件值" selected>选项</option></select>

    7）多行文本框

    <textarea name="控件名称" cols="列数" rows="行数"></textarea>

    8）隐藏控件

    <input type="hidden" name="控件名称" value="控件值" />

    9）普通按钮

    <input type="button" value="按钮文字" /><button type="button">按钮文字</button>

    10）发送按钮

    <input type="submit" value="按钮文字" /><button type="submit">按钮文字</button>

    11）重置按钮

    <input type="reset" value="按钮文字"><button type="reset">按钮文字</button>

    表单实例：

    <form action="" method="post">
  <fieldset>
    <legend>表单演示</legend>
    <p> <label for="username">姓名：</label><input type="text" name="username" id="username" placeholder="请输入姓名"
        required="required" /> </p>
    <p> <label for="pwd">密码：</label><input type="password" name="pwd" id="pwd" placeholder="请输入密码" /> </p>
    <p> 性别： <label><input type="radio" name="sex" value="1" checked="checked" />男</label> <label><input type="radio"
          name="sex" value="0" />女</label> </p>
    <p> 爱好： <label><input type="checkbox" name="basketball" value="basketball" />篮球</label> <label><input
          type="checkbox" name="football" value="football" />足球</label> </p>
    <p> <label for="bloodtype">血型：</label> <select name="bloodtype" id="bloodtype">
        <option value="A">A型</option>
        <option value="B">B型</option>
        <option value="AB">AB型</option>
        <option value="O">O型</option>
      </select> </p>
    <p> <label for="intro">介绍</label> <textarea name="intro" cols="30" rows="3" id="intro"></textarea> </p> <input
      type="submit" value="提交按钮" /> <input type="reset" value="重置按钮" /> <input type="button" value="自定义按钮" />
  </fieldset>
</form>

    11、转义字符(字符实体)

    &实体名字;

    < &lt;

    > &gt;

    空格 &nbsp;

    版权&copy;

    浏览器解析到实体时，会自动将其转换为相应字符。

    特殊字符 描述 字符的代码
    空格符 &nbsp;
    < 小于号 &lt;
    > 大于号 &gt;
    & 和号 &amp;
    ￥ 人民币 &yen;
    © 版权 &copy;
    ® 注册商标 &reg;
    ° 摄氏度 &deg;
    ± 正负号 &plusmn;
    × 乘号 &times;
    ÷ 除号 &divide;
    ² 平方2（上标2） &sup2
    ³ 立方3（上标3） &sup3

    12、框架网页

    框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面，框架集可以同时引入多个页面，而内联框架只能引入一个。在H5标准中，推荐使用框架集，而不使用内联框架。

    将浏览器窗口分解为多个小窗口，每个小窗口均可以显示各自的网页

    <frameset rows="" cols="">：框架网页集，rows为横向分隔，cols为纵向分隔，值可以是具体数值也可以是百分比，这两属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小。注意frameset标记是和body标记同级的标记，不能将frameset标记包含在body标记中，否则将无法看到框架网页的效果。

    <frame name="" scr="" />：指定每一个小窗口的名称和链接的网页，窗口的名称可以用于超级链接的target属性。

    frameset中也可以再嵌套frameset

    水平分隔两个窗口，每个窗口各占50%

    可引入一个外部的页面

    <iframe src=”路径” width=”” heigh=”” name=”名称”></iframe>

    frameset和iframe一样，它里面的内容都不会被搜索引擎所检索，所以如果搜索引擎检索到的页面是一个框架页的话，它是不能去判断里边的内容的.

    内嵌框架<iframe>：可以在一个浏览器窗口种同时显式多个页面文档

    在现实开发中，不推荐使用，使用框架集意味着页面中不能有自己的内容，只能引入其他的页面，而我们每单独加载一个页面，浏览器都需要重新发送一次请求，引入几个页面就需要发送几次请求，用户的体验比较差，如果非得用建议使用frameset而不是iframe

    <frameset rows=”20%, *,30%”>
  <frame src="header.html" />
  <frameset cols="20%,40%,40%">
    <frame src="body1.html">
    <frame src="body2.html">
    <frame src="body3.html">
  </frameset>
  <frame src="footer.html">
</frameset>

    七、HTML5新增标签

    1、新增语义化标签

    以前布局，我们基本用div来做，但是div对于搜索引擎来说，是没有语义的。

    image-20200810172730433

    标签名 作用
    header 表示页眉
    nav 表示导航
    article 文章
    section 章节
    main 文档主要内容
    aside 侧边栏
    hgroup 头/标题组
    footer 文档或页的页脚

    image-20200810174704025

    <header>header</header>
<nav>nav</nav>
<main>
  main
  <article>
    article
    <section>section</section>
  </article>
  <aside>aside</aside>
</main>
<footer>footer</footer>

    兼容性解决：

    • IE9：行级元素在设置宽度的时候是失效的（需要将这些标签转换为块级元素）
    header, nav, main, article, section, aside, footer{
  display: block;
}

    • IE8：完全不支持语义标签(不支持HTML5)

      • 方法一：手动创建标签
      <script>
  /* 手动创建标签：默认的标签的类型都是行级元素 */
  document.createElement("header")
  document.createElement("nav")
  document.createElement("main")
  document.createElement("article")
  document.createElement("aside")
  document.createElement("footer")
</script>

    • 方法二：引入第三方插件html5shiv.min.js

      <script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>

    2、列表

    HTML5中，对ol、dl进行了改良

    • ol：添加了start、reversed属性
      • start：可以指定列表编号从多少开始
      • reversed：列表反向排序
    <ol start="3">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ol>
<ol start=9 reversed>
  <li>列表值1</li>
  <li>列表值2</li>
  <li>列表值3</li>
  <li>列表值4</li>
  <li>列表值5</li>
</ol>

    • dl：重新定义，dl标签包含多个带名字列表项；每一项包含至少一条带名字的dt元素，用来表示术语；dt后紧跟一个或多个dd元素，用来表示定义。在一个元素内不允许有相同名字的dt元素，不允许有重复的术语。

      • 可以用于解释术语
      <dl>
  <dt><dfn>RSS</dfn></dt>
  <dd>RSS也叫聚合RSS，是在线共享内容的一种简易方式(也叫聚合内容)……</dd>
  <dt><dfn>博客</dfn></dt>
  <dd>博客，又译为网络日志，部落格或部落阁等，是一种通常由个人管理……</dd>
</dl>

    • 可以表示辅助信息

      <dl>
<dt>作者</dt>
<dd>xxx</dd>
<dt>出版社</dt>
<dd>xxx出版社</dd>
<dt>类别</dt>
<dd>文学</dd>
</dl>

    3、表单

    (1) 表单新增的type属性

    • email提供了默认的电子邮箱的完整验证，要求必须包含@符号，同时必须包含服务器名称，如果不能满足验证，则会阻止当前的数据提交(submit)
    邮箱：<input type="email">
    • tel并不是用来实现验证，它的本质目的是为了能够在移动端打开数字键盘，意味着限制了用户只能输入数字。
    电话：<input type="tel">
    • url 验证只能输入合法的网址，必须包含http://
    网址：<input type="url">
    • number 只能输入数字(包含小数点)，不能输入其他的字符
      • max：最大值，min：最小值，value：默认值
    数量：<input type="number">
<input type="number" value="60" min="0" max="100">
    • search 可以提供更人性化的输入体验
    搜索框：<input type="search">
    • range 范围
    范围：<input type="range" min="0" max="100" value="50">
    • color颜色
    颜色：<input type="color">
    • 日期时间相关
    时间：<input type="time"> <!-- 时分秒 -->
日期：<input type="date"> <!-- 年月日 -->
日期时间：<input type="datetime"> <!-- 目前大多数浏览器都不支持，只有Safari -->
日期时间：<input type="datetime-local"> <!-- 日期和时间 -->
月份：<input type="month">
星期：<input type="week">

    (2) 表单新增的其他属性

    • placeholder 提示文本，提示占位

    • autofocus 自动获取焦点

    • autocomplete：自动完成 on off

      必须成功提交过：提交过才会记录

      当前添加autocomplete的元素必须有name属性

    • required 必须输入，如果没有输入则会阻止当前数据提交

    • pattern：正则表达式验证

    • multiple 可以选择多个文件，在email中，设置multiple属性之后可以输入多个邮箱地址，以逗号分隔

    • form 指定表单id，会随着该表单一起提交

    <form action="" id="myFrm">
  用户名：<input type="text" name="username" placeholder="请输入用户名" autofocus autocomplete="on">
  手机号：<input type="tel" required pattern="^(\+86)?1\d{10)$">
  文件：<input type="file" name="photo" multiple>
  邮箱：<input type="email" multiple>
  <input type="submit" value="提交">
</form>
地址：<input type="text" name="address" form="myFrm">

    (3) 新增表单元素

    • datalist创建选项列表
    • option创建选择，属性：value具体的值，label提示信息，辅助值

    注意：

    • 需要在input中加入list属性，值为datalist的id名

    • datalist在不同浏览器下表现不同，很少使用

    • option可以是单标签，也可以是双标签

    • 当input的类型为url时，option的value必须带http前缀

    选择：<input type="text" list="selectors">
<datalist id="selectors">
  <option value="HTML" label="结构" />
  <option value="CSS" label="表现"></option>
  <option value="JavaScript" label="行为"></option>
</datalist>
网址：<input type="url" list="urls">
<datalist id="urls">
  <option value="https://www.baidu.com" label="百度" />
  <option value="http://www.sohu.com" label="搜狐"></option>
  <option value="http://www.163.com" label="网易"></option>
</datalist>

    image-20200810190152657

    <form action="">
  用户名：<input type="text" name="username" ><br>
  密码：<input type="password" name="pwd" ><br>
  加密：<keygen></keygen><br>
  <input type="submit" value="提交">
</form>

<!-- 显示输出信息：只能显示不能修改
1、语义性更强
2、值需要你去设置，不能自动计算
-->
<output>总金额：￥100.00</output>

    (4) 新增的表单事件

    • oninput：监听当前指定元素内容的改变，只要内容改变(添加内容/删除内容)就会触发这个事件（鼠标粘贴的也能触发）

    对比：onkeyup：键盘弹起的时候触发，每一个键的弹起都会触发一次

    • oninvalid：当验证不通过时触发
    <form action="">
  用户名：<input type="text" name="username" id="username">
  电话：<input type="tel" name="phone" pattern="^1\d{10}$" id="phone">
  <input type="submit" value="提交">
</form>
<script>
  document.getElementById('username').oninput = function(){
    console.log(this.value);
  }
  document.getElementById('phone').oninvalid = function(){
    // 设置默认的提示信息
    this.setCustomValidity('请输入合法的11位手机号')
  }
</script>

    4、进度条

    • progress
      • max：最大值
      • value：当前进度值
    • meter度量器——衡量当前进度值
      • high：规定的较高的值
      • low：规定的较低的值
      • max：最大值
      • min：最小值
      • value：当前度量值
    <progress max="100" value="50"></progress>
<meter max="100" min="0" high="80" low="40" value="10"></meter>
<meter max="100" min="0" high="80" low="40" value="50"></meter>
<meter max="100" min="0" high="80" low="40" value="90"></meter>

    5、多媒体标签——音视频

    embed：直接插入视频文件，本质调用本机上已经安装的软件，有兼容性

    flash插件：安装flash，学习flash增加使用成本，苹果设备不支持flash

    新增：

    • audio：音频
      • src: 播放的音频文件的路径
      • controls: 音频播放器的控制面板
      • autoplay: 自动播放
      • loop: 循环
    <audio src="../mp3/a.mp3" controls autoplay loop></audio>

    • video：视频

      • src: 播放的视频文件的路径

      • controls: 视频播放器的控制面板

      • autoplay: 自动播放

      • loop: 循环

      • width: 宽度

      • height: 高度 设置宽高时，一般只会设置其一，使其等比缩放，如果同时设置宽度和高度，视频并不会真的调整到该大小，除非设置的刚好是等比例的

      • poster: 当视频还没有完全下载，或者用户还没有点击播放前的默认显示的封面，默认显示的是当前视频文件的第一幅画面

    <video src="../medeas/1.mp4" width="800" controls poster="../imgs/1.png" autoplay></video>

    因为不同浏览器支持的音视频文件的格式不一样，因此需要考虑到浏览器是否支持，可以准备多个格式的视频文件，让浏览器自动选择：source

    <video controls>
  <source src="../medias/1.flv" type="video/flv">
  <source src="../medias/1.mp4" type="video/mp4">
    您的浏览器不支持视频播放，请更换浏览器！
</video>

    image-20200810191653266

    image-20200810191740565

    image-20200810191752979

    文件API、拖放API

    八、H5中的DOM操作

    1、获取DOM元素

    query：查询 selector：选择器

    • document.querySelector()只能获取单个元素，如果获取的元素不止一个，那么只会返回满足条件的第一个元素

    • document.querySelectorAll()获取满足条件的所有元素——数组

    2、操作类样式

    classList当前元素的所有样式列表——数组

    • .add为元素添加指定类名，一次只能添加一个

    • .remove为元素溢出指定名称的类样式，一次只能移除一个

    • .toggle切换元素的样式，如果元素之前没有指定名称的样式则添加，如果有则移除

    • .contains判断元素是否包含指定名称的样式，返回true/false

    document.querySelector(‘li’).classList.add(‘red’)
document.querySelectorAll(‘li’)[1].classList.remove(‘blue’)
document.querySelectorAll(‘li’)[2].classList.toggle(‘green’)
console.log(document.querySelectorAll(‘li’)[2].classList.contains(‘green’))
console.log(document.querySelectorAll(‘li’)[2].classList.item(0))

    以前：

    document.querySelector(‘li’).className=‘red underline’

    3、自定义属性

    定义：

    • data-开头

    • data-后必须至少有一个字符，多个单词使用-连接

    • 建议小写、无特殊符号、非纯数字

    // 定义 data-单词-单词
<p data-test-a='AreYouOK'>test</p>
<script>
window.onload = function(){
  var p = document.querySelector('p')
  // 获取自定义属性值
  var value = p.dataset['testA'] // 将data-后面的单词使用camel命名法连接
  console.log(value);
}
</script>

    九、常用API

    1、网络状态改变事件

    • ononline: 网络连通的时候触发这个事件

    • onoffline: 网络断开时触发

    // window.ononline = function () {}
window.addEventListener("online", function(){
  // 操作
  alert('网络连通了~')
})
// window.onoffline = function(){}
window.addEventListener("offline", function(){
  // 操作
  alert('网络断开了~')
})

    2、全屏接口的使用

    • requireFullscreen(): 开启全屏显示

    不同浏览器需要添加不同的前缀：Chrome: webkit fireFox: moz ie: ms opera: o

    • cancelFullScreen(): 退出全屏显示 只能使用document来实现

    • fullscreenElement: 是否是全屏状态 只能使用document来实现

    <div>
  <img src="" alt="">
  <input type="button" id="full" value="全屏">
  <input type="button" id="cancelFull" value="退出全屏">
  <input type="button" id="isFull" value="是否全屏">
</div>
<script>
window.onload = function(){
  var div = document.querySelector('div')
  document.querySelector('#full').onclick = function(){
    if(div.requestFullscreen){
      div.requestFullscreen()
    }else if(div.webkitRequestFullscreen){
      div.webkitRequestFullscreen()
    }else if(div.mozRequestFullscreen){
      div.mozRequestFullscreen()
    }else if(div.msRequestFullscreen){
      div.msRequestFullscreen()
    }else if(div.oRequestFullscreen){
      div.oRequestFullscreen()
    }
  }
  document.querySelector('#cancelFull').onclick = function(){
    if(document.cancelFullScreen){
      document.cancelFullScreen()
    }else if(document.webkitCancelFullScreen){
      document.webkitCancelFullScreen()
    }else if(document.mozCancelFullScreen){
      document.mozCancelFullScreen()
    }else if(document.msCancelFullScreen){
      document.msCancelFullScreen()
    }else if(document.oCancelFullScreen){
      document.oCancelFullScreen()
    }
  }
  document.querySelector('#isFull').onclick = function(){
    if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement || document.msFullscreenElement){
      alert('true')
    }else{
      alert('false')
    }
  }
}
</script>

    3、文件读取API

    FileReader：读取文件内容

    • readAsText(): 读取文本文件(可以使用Txt打开的文件)，返回文本字符串，默认编码是UTF-8

    • readAsBinaryString(): 读取任意类型的文件。返回二进制字符串，这个方法不是用来读取文件展示给用户的，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储

    • readAsDataURL(): 没有返回值，参数是文件

    读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL。DataURL是一种将文件(这个文件一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案，将资源转换为base64编码的字符串形式，并且将这些内容直接存储在url中à优化网站的加载速度和执行效率

    <!-- 展示图片，src：指定路径(资源定位--url)，src请求得是外部文件，一般是服务器资源，意味着它需要向服务器发送请求，它占用服务器资源 -->
<img src="../imgs/1.jpg" alt="">
    • abort(): 中断读取

    FileReader提供一个完整的事件模型，用来捕获读取文件时的状态

    • onabort: 读取文件中断时触发

    • onerror: 读取错误时触发

    • onload: 文件读取成功完成时触发

    • onloadend: 读取完成时触发，无论成功还是失败

    • onloadstart: 开始读取时触发

    • onprogress: 读取文件过程中持续触发

    <!-- 实时预览图片 
及时：onchange()
预览：readAsDataURL()
-->
<form action="">
  文件；<input type="file" name="myFile" id="myFile" onchange="getFileContent();"><br>
  <input type="submit">
</form>
<img src="" alt="">
<script>
  function getFileContent(){
    var reader = new FileReader()
    var file = document.getElementById('myFile').files[0]
    reader.readAsDataURL(file)
    reader.onload = function(){
      // console.log(reader.result);
      document.querySelector('img').src = reader.result
    }
  }
</script>

    4、拖拽接口

    为元素添加属性：draggable=”true”，图片和超链接默认就能拖拽

    拖拽事件：

    • (被)拖拽元素

      • ondrag: 拖动整个过程都会调用
      • ondragstart: 当拖动开始时调用
      • ondragleave: 当鼠标离开拖拽元素时调用
      • ondragend: 当拖拽结束时调用

    • 目标元素

      • ondragenter: 当拖拽元素进入时调用
      • ondragover: 当停留在目标元素上时调用
      • ondrop: 当在目标元素上松开鼠标时调用 浏览器默认会阻止这个事件，我们必须在ondragover中阻止浏览器的默认行为
      • ondragleave: 当鼠标离开目标元素时调用
    <style>
    .box1,.box2{
      width: 200px;
      height: 200px;
      background-color: #ddd;
      border: 1px solid red;
      float: left;
      margin-left: 30px;
    }
    #pe{
      width: 100%;
      background-color: orange;
    }
  </style>
<div class="box1">
  <p id="pe" draggable="true">拖动我啊</p>
</div>
<div class="box2"></div>
<script>
var p = document.querySelector('#pe')
var box2 = document.querySelector('.box2')
var box1 = document.querySelector('.box1')
p.ondragstart = function(){
  console.log('p ondragstart')

}
p.ondragend = function(){
  console.log('p ondragend')
}
p.ondragleave = function(){
  // console.log('p ondragleave')
}
p.ondrag = function(){
  // console.log('p ondrag')
}

box2.ondragenter = function(){
  console.log('box2 ondragenter')
}
box2.ondragover = function(e){
  // console.log('box2 ondragover')
  // 阻止浏览器默认行为，使ondrop事件能被触发
  e.preventDefault()
}
box2.ondrop = function(){
  // console.log('box2 ondrop')
  box2.appendChild(p)
}
box2.ondragleave = function(){
  console.log('box2 ondragleave')
}

box1.ondragover = function(e){
  // 阻止浏览器默认行为，使ondrop事件能被触发
  e.preventDefault()
}
box1.ondrop = function(){
  box1.appendChild(p)
}
</script>

改进：利用事件捕获
<div class="box1">
  <p id="pe" draggable="true">拖动我啊</p>
  <p id="p2" draggable="true">拖动我啊</p>
</div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4" draggable="true"></div>
<script>
// var obj = null // 被拖拽元素，全局变量不安全
document.ondragstart = function(e){
  /* 通过事件捕获来获取当前被拖拽的子元素 */
  // console.log(e.target);
  e.target.style.opacity = 0.5
  e.target.parentNode.style.borderWidth = '5px'
  // obj = e.target
  /*
    通过dataTransfer来实现数据的存储与获取
  * setData(format, data)
  ** 数据类型:text/html  text/uri-list
  ** 数据:一般来说是字符串值
  */
  e.dataTransfer.setData('text/html', e.target.id)
}
document.ondragend = function(e){
  e.target.style.opacity = 1
  e.target.parentNode.style.borderWidth = '1px'
}
document.ondragleave = function(e){
}
document.ondrag = function(e){
}

document.ondragenter = function(e){
  console.log(e.target);

}
document.ondragover = function(e){
  // 阻止浏览器默认行为，使ondrop事件能被触发
  e.preventDefault()
}
document.ondrop = function(e){
  // e.target.appendChild(obj)
  /*
   通过e.dataTransfer.setData存储的数据，只能在drop事件中获取

  */
  var id = e.dataTransfer.getData('text/html')
  console.log(id);
  e.target.appendChild(document.getElementById(id))
}
document.ondragleave = function(e){
}
</script>

    5、地理定位API

    image-20200810193305180

    示例：

    <div class="map"></div>
<script>
var map = document.querySelector('.map')
function getLocation(){
  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(showPosition, showError, {})
  }else{
    map.innerHTML = "Geolocation is not supported by this browser"
  }
}
function showPosition(position){
  map.innerHTML = 'Latitude:' + position.coords.latitude + "<br />Logitude:" + position.coords.longitude
}
function showError(error){
  ……
}
getLocation()
</script>

    百度地图API：http://lbsyun.baidu.com/jsdemo.htm#a1_2

    6、通信API

    Web Sockets是H5提供的在Web应用程序中客户端与服务器端之间进行的非HTTP的通信机制。

    • 建立与服务器之间的通信连接
    var webSocket = new WebSocket("ws://localhost:9000/socket")

    调用的是WebSocket对应，参数url必须以ws或wss开头

    • 发送数据
    webSocket.send("data")
    • 监听
    // 通过获取onmessage事件句柄来接收服务器传过来的数据
webSocket.onmessage = function(event){
  var data = event.data
  ...
}
// 通过获取onopen事件句柄来监听socket的打开事件
webSocket.onopen = function(event){
  // 开始通信时的处理
}
// 通过获取onclose事件句柄来监听socket的关闭事件
webSocket.onclose = function(event){
  // 通信结束时的处理
}
    • 关闭socket
    webSocket.close()

    可以通过读取readyState的属性值来获取WebSocket对象的状态，主要有：

    • CONNECTING（0），表示正在连接
    • OPEN（1），表示已建立连接
    • CLOSING（2），表示正在关闭连接
    • CLOSED（2），表示已关闭连接

    十、web存储

    1、sessionStorage的使用

    可以存储数据到本地，存储的容量5MB左右。这个数据本质是存储在当前页面的内存中；它的生命周期为关闭当前页面，关闭页面，数据会自动清除；

    • setItem(key, value): 存储数据，以键值对方式存储

    • getItem(key): 获取数据，通过指定名称的key获取对应的value值，如果找不到对应名称的key，那么就会获取null

    • removeItem(key): 删除数据，通过指定名称key删除对应的值，如果key值错误，不会报错，也不会删除数据

    • clear(): 清空所有存储的内容

    <input type="text" id="username"><br>
<input type="button" value="设置数据" id="setData">
<input type="button" value="获取数据" id="getData">
<input type="button" value="删除数据" id="removeData">
<script type="text/javascript">
  document.querySelector('#setData').onclick = function(){
    var name = document.querySelector('#username').value
    // 存储数据
    window.sessionStorage.setItem("username", name)
  }
  document.querySelector('#getData').onclick = function(){
    // 获取数据
    var name = window.sessionStorage.getItem('username')
    alert(name)
  }
  document.querySelector('#removeData').onclick = function(){
    // 删除数据
    window.sessionStorage.removeItem('username')
  }
</script>

    调试器查看

    image-20200810193553627

    2、localStorage的使用

    存储的内容大概20MB；不同浏览器不能共享数据，但是在同一浏览器的不同窗口中可以共享数据；永久生效，它的数据是存储在硬盘上，并不会随着页面或者浏览器的关闭而清除

    • setItem(key, value): 存储数据，以键值对方式存储

    • getItem(key): 获取数据，通过指定名称的key获取对应的value值，如果找不到对应名称的key，那么就会获取null

    • removeItem(key): 删除数据，通过指定名称key删除对应的值，如果key值错误，不会报错，也不会删除数据

    • clear(): 清空所有存储的内容

    <input type="text" id="username"><br>
<input type="button" value="设置数据" id="setData">
<input type="button" value="获取数据" id="getData">
<input type="button" value="删除数据" id="removeData">
<script type="text/javascript">
  document.querySelector('#setData').onclick = function(){
    var name = document.querySelector('#username').value
    // 存储数据
    window.localStorage.setItem("username", name)
  }
  document.querySelector('#getData').onclick = function(){
    // 获取数据
    var name = window.localStorage.getItem('username')
    alert(name)
  }
  document.querySelector('#removeData').onclick = function(){
    // 删除数据
    window.localStorage.removeItem('username')
  }
</script>

    十一、应用程序缓存

    概念：使用HTML5，通过创建cache manifest文件，可以轻松地创建web应用的离线版本

    优势：

    • 可配置需要缓存的资源

    • 网络无连接应用仍可用

    • 本地读取缓存资源，提升访问速度，增强用户体验

    • 减少请求，缓解服务器负担

    Cache Manifest基础：

    • 如需启用应用程序缓存，要在文档的html标签中包含manifest属性：
    <!DOCTYPE html>
<html  manifest="demo.appcache">
  ……
</html>

    manifest=”应用程序缓存清单文件的路径”

    • 每个指定了manifest的页面在用户对其访问时都会被缓存，如果未指定manifest属性，则页面不会被缓存(除非在manifest文件中直接指定了该页面)

    • Manifest文件的建议个文件扩展名为appcache，这个文件的本质是一个文本文件

    • 注意：manifest文件需要配置正确的MIME-type，即”text/cache-manifest”，必须在web服务器上进行配置

    demo.appcache：

    CACHE MANIFEST
# 注释 上面必须是当前文件的第一句

# 需要缓存的文件清单列表
CACHE:
./imgs/1.jpg
./imgs/2.jpg

# 配置每一次都需要重新从服务器获取的文件清单列表
NETWORK:
./imgs/3.jpg

# 配置如果文件无法获取则使用指定的文件进行替代
FALLBACK:
./imgs/4.jpg ./imgs/loader.gif

# /代表所有文件

    最后，列出一下已弃用的标签

    image-20200810171332092

    H5中还有两个知识点需要单独学习的：

    Web Worker 使用教程

    学习HTML5 Canvas这一篇文章就够了

    扩展文章

    HTML 元素参考

    html中link的用法

    html5新标签总结

    HTML5 新元素

    赏

    文章标题:HTML学习笔记

    文章字数:14.4k

    本文作者:Luwang

    发布时间:2020-03-27, 17:33:14

    最后更新:2024-01-11, 16:41:20

    原始链接:https://wallleap.cn/2020/03/27/html/

    版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

    ×

    喜欢就点赞,疼爱就打赏