2021-04-20
HTM页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WindJS (ESRI) Leaflet Demo</title>
<link rel="stylesheet" href="demo.css" />
<style>
</style>
</head>
<body>
<div id="map"></div>
<script src="demo.js"></script>
<script>
</script>
</body>
</html>
<!DOCTYPE html>
<!--文档类型-->
<!--用来告知 Web 浏览器页面使用了哪种 HTML 版本。-->
<!DOCTYPE html>
<!--HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。-->
<!--<!DOCTYPE html> 是 HTML5 中唯一的 doctype，也被视作将网页 "升级" 到 HTML5 的第一步。-->
--- --- ---
常见的 DOCTYPE 声明
<!--HTML 5-->
<!DOCTYPE html>
<!--HTML 4.01 Strict
这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--HTML 4.01 Transitional
这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--HTML 4.01 Frameset
这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<!--语言类型；zh-CN：简体中文-->
<!--简体中文（中国） zh-cn
繁体中文（台湾地区） zh-tw
繁体中文（香港） zh-hk
英文 zh-en
-->
<html lang="zh-CN">
另一种写法
<!--简体中文（中国） zh-cmn-Hans
繁体中文 zh-cmn-Hant
-->
<head>
<!--网页头部-->
<head>
<meta>
<!--meta标签必须永远位于 head 元素内部,在最上面-->
<!--元数据（Metadata）是数据的数据信息。-->
<!--<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。 META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。 元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。-->
---------------------------------------------
必需的属性
content 定义与 http-equiv 或 name 属性相关的元信息
可选的属性
charset 定义文档的字符编码。[NEW H5]
http-equiv 把 content 属性关联到 HTTP 头部。
name 把 content 属性关联到一个名称。
---------------------------------------------
SEO优化
<!--定义文档关键词，用于搜索引擎：-->
<!--keywords：关键字；当前文档的关键字-->
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<!--定义web页面描述：-->
<meta name="description" content="Free Web tutorials on HTML and CSS">
<!--定义页面作者：-->
<meta name="author" content="Hege Refsnes">
<!--定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。-->
<!--
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。
-->
<meta name="robots" content="index,follow">
<!--每30秒刷新页面：-->
<!--"refresh"应该慎重使用，因为它会使得页面不受用户控制-->
<meta http-equiv="refresh" content="30">
---------------------------------------------
移动设备[参考1]
<!--对viewport进行控制：-->
<!--viewport:视口，移动设备上的设置；initial：初始化；maximum：最大；scalable：有缩放的能力-->
<!--作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。-->
<!--不然会出现横向滚动条。-->
<!--meta viewport 有6个属性
width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 -->
ios 设备
<!--指定页面为 Web App;启动全屏模式 伪装app，离线应用。-->
<!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!--添加到主屏后的标题-->
<meta name="apple-mobile-web-app-title" content="标题">
<!--忽略数字自动识别为电话号码-->
<meta content="telephone=no" name="format-detection" />
<!--忽略识别邮箱-->
<meta content="email=no" name="format-detection" />
iOS 6+ Safari[参考2]
<!--添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner。-->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
---------------------------------------------
网页相关[参考4][参考3]
<!--说明文档的编码的方式，防止乱码，meta；元数据、元信息；charset：字符集-->
<meta charset="utf-8">[NEW H5]
<!--国内浏览器很多都是双内核（webkit和Trident），基于Webkit的内核用于常用网站的高速浏览，基于IE的内核主要用于部分网银、政府、办公系统等网站的正常使用。
而添加meta标签的网站可以控制浏览器选择何种内核渲染。-->
<!--IE=edge：W10推荐的浏览器-->
<!--Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 <meta> 标签加入到页面中：-->
<!--优先使用 IE 最新版本和 Chrome-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--360 使用Google Chrome Frame，360 浏览器就会在读取到这个标签后，立即切换对应的极速核。 另外为了保险起见再加入上面那条，这样写可以达到的效果是如果安装了 Google Chrome Frame，则使用 GCF 来渲染页面，如果没有安装 GCF，则使用最高版本的 IE 内核进行渲染。-->
<meta name="renderer" content="webkit">
<!--百度禁止转码-->
<!--通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加-->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>
<!--网页的标题，很重要，可吸引点击量，不要随意写，要紧扣网页内容，吸引人-->
<!--如果遗漏了 <title> 标签，文档作为 HTML 是无效的。-->
<title>
<link>
<!--link:连接、关系；relative:关系；stylesheet：样式表；href：hypertext reference:链接 关联一个外部样式表文件-->
<link rel="stylesheet" href="index.css">
<!--在标题栏显示log；icon：图标；rel：relative:关系，相对；href:超链接-->
<!--sizes 规定被链接资源的尺寸。仅适用于 rel="icon"。-->[NEW H5]
<link rel="icon" href="1.ico" type="image/x-icon" sizes="16x16" >
<body>
<!--文档的主体-->
<body>
<style>
<!--media 规定目前资源是为何种媒介/设备优化的。
scoped[NEW H5] 如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。
type 规定样式表的 MIME 类型。(默认值为 "text/css",指示内容是标准的 CSS)
-->
<!--定义 HTML 文档的样式信息。-->
<style>
<script>
<!--async[NEW H5] 规定异步执行脚本（仅适用于外部脚本）。
charset 规定在脚本中使用的字符编码（仅适用于外部脚本）。
defer 规定当页面已完成加载后，才会执行脚本（仅适用于外部脚本）。
src 规定外部脚本文件的 URL。
type 规定脚本的 MIME 类型。(默认值是 "text/javascript")
-->
<!--如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本
-->
<!--用于定义客户端脚本，比如 JavaScript。-->
<!--既可包含脚本语句，也可以通过 "src" 属性指向外部脚本文件。-->
<!--如果使用 "src" 属性，则 <script> 元素必须是空的。-->
<script>
<!--用来定义在脚本未被执行时的替代内容（文本）。-->
<noscript>
<base>
<!--href 规定页面中所有相对链接的基准 URL。
target _blank|_self|_parent|_top|framename
-->
<!--为页面上的所有的相对链接规定默认 URL 或默认目标。-->
<!--在一个文档中，最多能使用一个 <base> 元素。<base> 标签必须位于 <head> 元素内部第一个元素的位置。-->
<!--如果使用了 <base> 标签，则必须具备 href 属性或者 target 属性或者两个属性都具备。-->
<base href="http://www.runoob.com/images/" target="_blank">
<!--<img src="logo.png" > - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
<a href="//www.runoob.com/">runoob.com</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。-->
标签
普通标签
<!--一个分隔区块或者一个区域部分。-->
<div>
<!--p:paragraph：段落;-->
<p>
<!--对文档中的行内元素进行组合。-->
<span>
<!--一个章节的内容放到一个section中，进行内容分块 section：区域-->
<section>
<!--max 规定任务总共需要多少工作。
value 规定已经完成多少任务。
-->
<!--progress：进度，进度条;-->[NEW H5]
<progress value="22" max="100"></progress>
<!--canvas:画布；html5新标签-->[NEW H5]
<!--标签只是图形容器，您必须使用脚本来绘制图形。-->
<canvas id="canvas" width="600px" height="600px"></canvas>
a标签
<!--链接的默认外观如下：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
-->
<!--href 绝对 URL - 指向另一个站点（比如 href="http://www.example.com/index.htm"）
相对 URL - 指向站点内的某个文件（href="index.htm"）
锚 URL - 指向页面中的锚（href="#top"）
target _blank|_self|_parent|_top|framename
download[NEW H5] 指定下载链接
type[NEW H5] 规定目标文档的 MIME 类型。
-->
<!--页面跳转：1、给想要定位的标签添加id值；2、链接的href填写#id；-->
<section id="html5">
<a href="#html5">HTML5</a>
<!--当a的href中只有#,默认是跳到网页的的上方-->
<a href="#">关于我</a>
<!--target="_blark" 新窗口里打开页面-->
<a href="http://www.baidu.com" target="_blark">百度</a>
img标签
<!--alt 规定图像的替代文本。
src 规定显示图像的 URL。
title 在鼠标在移动到元素上的文本提示。
-->
<!--img：image 图片；src:source来源；alt：alternative,备选项-->
<img src="5.jpg" alt="aa" title="风景">
<!--允许我们在不同的设备上显示不同的图片，一般用于响应式。-->[NEW H5]
<!--每个 <source> 元素匹配不同的设备并引用不同的图像源，如果没有匹配的，就选择 <img> 元素的 src 属性中的 url。-->
<picture>
<source media="(min-width: 650px)" srcset="demo1.jpg">
<source media="(min-width: 465px)" srcset="demo2.jpg">
<img src="img_girl.jpg">
</picture>
<!--<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。-->
<!--<area> 定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。-->
<!--始终嵌套在 <map> 标签内部。-->
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
文本标签
<!--根据 HTML 5 的规范，<b> 标签应该做为最后的选择，只有在没有其他标记比较合适时才使用它。
HTML 5 规范声明：标题应该用 <h1> - <h6> 标签表示，被强调的文本应该用 <em> 标签表示，重要的文本应该用 <strong> 标签表示，被标记的或者高亮显示的文本应该用 <mark> 标签表示。-->
<!--加粗 bold：加粗-->
<!--font-weight: bold; 加粗，没有特殊意义-->
<strong>加粗文本，带有强调的含义，定义重要的文本。</strong>
<b>加粗文本，强调的含义较弱</b>
<!--斜体 italic:斜体-->
<!--font-style: italic; 实现，没有特殊意义-->
<em>斜体文本，带有强调的含义，标识内容的重要性</em>
<i>斜体文本，强调的含义较弱</i>
<!--下划线 underline：下划线-->
<!--text-decoration: underline; 实现，没有特殊意义-->
<ins>下划线，有插入含义，标识新增的内容</ins>
<u>下划线，没有特殊含义，只是添加下划线</u>
<!--删除线 line:线；through：穿过；删除线-->
<!--text-decoration: line-through; 实现，没有特殊意义-->
<del>删除线，有删除的含义，标识已经删除的内容</del>
<s>删除线，删除含义较弱</s>
<big>让文本比常规的字体大一号</big>[NO H5]
<small>定义小型文本（和旁注）</small>
<!-- 自带黄色背景的文字 高亮-->
<mark> [NO H5]
<cite> 定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。</cite>
<dfn> （一个定义项目）
<article><!--H5语义化标签，文章-->[NEW H5]
<header><!--文章头部-->[NEW H5]
<header lang="en"><!--英文的头部-->
<!--main：主要的；也是块元素，语义化标签，用来包含内容的主要部分-->[NEW H5]
<main>
<footer><!--文章尾部-->[NEW H5]
<address><!--address是块元素，是作者的名字电话地址等信息 ，strong不是块元素 -->
<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。
<aside><!--aside:侧边-->[NEW H5]
<!--当标题有多个层级（副标题）时，<hgroup> 元素被用来对一系列 <h1> - <h6> 元素进行分组。-->[NEW H5]
<hgroup>
<!--被用来定义 HTML 标题。-->
<h1> - <h6>
<!--id:identifier 标识符-->
<!--标题-->
<h1>这是一个标题</h1>
<!--上下标-->
<sup>上标</sup>
<sub>下标</sub>
<!--q:引用内容；cite：引用的来源，例如：书籍，期刊-->
<q>引用内容</q>
<q>引用的内容<q>引用的嵌套</q></q>
<q>自定义的引用<q>引用的嵌套</q></q >
<!--quote:引用-->
<!--自定义的引用符号，默认是" ' ' ",可通过quotes修改符号样式
q{ quotes: "『" "』" "「" "」"; }
-->
<!--cite: 引用；默认样式是斜体，如果想采用别的样式，用css样式 font-style: normal; 实现-->
<span><q>知之者不如乐之者</q>,这句话来自<cite>论语</cite>。</span>
<!--cite前后加上符号
cite:before{ content: "《"; }
cite:after{ content: "》"; }
-->
<!--dfn：define:定义;默认是斜体-->
<dfn>
<!--figture：图形、插图-->[NEW H5]
<figure>
<!--figcaption：标题、字幕-->[NEW H5]
<figcaption>插图的标题</figcaption>
<!--lang；language：语言；en:英语-->
<figcaption lang="en">fengjing</figcaption>
<!--code:代码；code标签中放想要展示的代码； 为了保证代码的格式，会和pre一起写-->
<code>
<!--pre:预设格式的文本：空格、换行 会起作用， 但是<>不能使用，要把pre中的<>替换成> >-->
<pre> <html> </pre>
<!--abbr:缩写; abstract：摘要； -->
<p class="abstract">据<cite>中国数字阅读白皮书</cite>的大数据显示，基于<abbr title="HyperText MarkUp Language 5">HTML5</abbr>的移动阅读 Web App，</p>
<!-- keywords:关键字;-->
<p class="keywords">Web；Native App；Web App；阅读</p>
<!-- index:索引-->
<p class="index">TP303.2</p>
<em> 呈现为被强调的文本。
<strong> 定义重要的文本。
<dfn> 定义一个定义项目。
<code> 定义计算机代码文本。
<samp> 定义样本文本。
<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<ruby>定义 ruby 注释（中文注音或字符）。
<ruby>
汉 <rp>(</rp><rt>Han</rt><rp>)</rp>
字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>
<!-- 可定义预格式化的文本。-->
<!-- 被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。-->
<!-- 一个常见应用就是用来表示计算机的源代码。-->
<pre>
<!-- 用来表示一个缩写词或者首字母缩略词，如"WWW"或者"NATO"。-->
<abbr title="World Health Organization">WHO</abbr>
<!--是 bidi 隔离（Bi-directional Isolation）。-->[NEW H5]
<bdi>
<!--dir 必需。规定 <bdo> 元素内的文本方向。
ltr：left to right ，即从左到右。
rtl：right to left ，即从右到左。
-->
<!--用来覆盖默认的文本方向。-->[NEW H5]
<bdo dir="rtl">该段落文字从右到左显示。</bdo>
<!--cite 规定引用的来源。
-->
<!--blockquote元素中一般嵌套p元素，用于标记被引用的文本，这些引用文本并不是直接位于blockquote元素中。
如果引文来自在线资源（包括自己网站中的其他地方），那么可以在<blockquote>标签的cite（引用）属性中指明原始来源的URL。
通常浏览器会把blockquote元素呈现为一段左右两侧缩进(40px)的文本。-->
<!--定义摘自另一个源的块引用。-->
<blockquote>
<!--标签定义导航链接的部分。-->
<!--nav:导航--> <!--host:主机-->
<nav>
不常用标签
<!--(Word Break Opportunity) 标签规定在文本中的何处适合添加换行符。-->[NEW H5]
<wbr>
<!--为媒体元素（比如 <audio> and <video>）规定外部文本轨道。-->[NEW H5]
<track>
<!--定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。-->[NEW H5]
<time>
<!--open 规定 details 是否可见。
-->
<!-- 规定了用户可见的或者隐藏的需求的补充细节。-->
<!-- <summary> 标签为 <details> 元素定义一个可见的标题。 当用户点击标题时会显示出详细信息。-->
<!-- 只有 Chrome 和 Safari 6 支持 details 标签。-->[NEW H5]
<details open>
<summary>可见的标题</summary>
<p> 看不到的部分，点击标题才能看到</p>
</details>
<!-- 作为计算结果输出显示(比如执行脚本的输出)。-->[NEW H5]
<output>
<!-- 定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。-->
<object width="400" height="400" data="helloworld.swf" >
<param name="BorderStyle" value="1" />
</object>
<!-- open 规定 dialog 元素是有效的，用户可以与它进行交互。
-->
<!-- 标签定义一个对话框、确认框或窗口。-->
<!-- 目前只有 Chrome 和 Safari 6 支持 dialog 标签。-->
<dialog open>
其他
内联样式
<!--内嵌样式：style标签中 添加样式 -->
<!--样式的优先级：就近原则-->
<!--内联样式-->
<body style="background-color: lightblue;">
路径
<!-- ../: 上一级目录
./: 当前目录
-->
<img src="../0.jpg" alt="嘻嘻">
<img src="../resource/6.jpg" alt="xixi">
折线
<!--hr:horizonal role,横向分割线-->
<hr>
换行
<!--br:break:换行，打断-->
<br>
空格
<!--在html中，换行空格会被忽略；保持html结构整洁、易读，便于后期维护-->
<!--实体：可以采用实体名称，实体编号去显示-->
<!-- 键盘敲打的空格，无论多少，页面只会保留一个-->
<!--英文状态下的空格；no break space:不换行的空格-->
<!--添加中文空格，不换行空格-->
　
<!--也是一种空格表示，但是空格会比较大-->
 
特殊符号
<!--小于号 lt：less than小于-->
< <
<!--大于号 gt:greater than大于-->
> >
<!-- ♥ ♠ ♦ © 版权-->
♥ ♠ ♦ ©
<!--十六进制：表示数字是0-9，a-f;逢16进1；任何文字都可以用编码表示-->
<!--我喜欢你-->
我喜欢你
列表
无序列表
<!--无序列表:ul：unordered list-->
<ul>
<!--li:列表中每一项-->
<li>
有序列表
<!--reversed[NEW H5] 规定列表顺序为降序 (9, 8, 7...)，而不是升序 (1, 2, 3...)。(只有 Chrome 和 Safari 6 支持)
start 规定有序列表中第一个列表项目的开始值。
type 规定列表的类型。(不赞成使用)
-->
<!--有序列表 ol:order list-->
<ol>
自定义列表
<!--自定义列表-->
<dl>
<!--自定义列表项的标题-->
<dt>
<!--自定义列表项的详细说明-->
<!--标签内，您能放置段落、换行、图片、链接、列表等等。-->
<dd>
表格
<!--<table> 标签定义 HTML 表格
一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。
<tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。
更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。-->
<table>
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
</table>
<table>
<caption>h5四期课程表</caption>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<!--border 规定表格单元周围是否显示边框。
-->
<!--table:表格；-->
<table border="1">
<!--表格的标题-->
<!--每个表格定义一个标题。-->
<caption>h5四期课程表</caption>
<!--thead, tbody, 和 tfoot 元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。-->
<!--<thead> 元素应该与 <tbody> 和 <tfoot> 元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。-->
<!--thead：表头; 表头默认加粗居中-->
<thead>
<tfoot> <!--放在<thead>之后，<tbody>之前。-->
<tbody>
<!--span 定义了 <colgroup> 元素应该横跨的列数。
-->
<!--用于对表格中的列进行组合，以便对其进行格式化。-->
<!--向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。-->
<colgroup span="2" style="background-color:red"></colgroup>
<!--要为 <colgroup> 内的列定义不同的属性，请在 <colgroup> 标签内使用 <col> 标签。-->
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<!--定义 HTML 表格中的行。-->
<tr>
<!--colspan 定义单元格应该横跨的列数。
rowspan 定义单元格应该横跨的行数。
-->
<!--rowspan合并行: row:行; span：跨度; 设置这个单元格占几格-->
<!--colspan合并列: col:column:列; span：跨度; 设置占了几列 -->
<!--表头单元格。-->
<!--元素中的文本通常呈现为粗体并且居中。-->
<th>xx</th>
<!--标准单元格。-->
<!--元素中的文本通常是普通的左对齐文本。-->
<td>xx</td>
表单
<!--form:表单；块级元素-->
<!--action 动作，表单提交的网址
method 规定用于发送 form-data 的 HTTP 方法(get,post)
name 规定表单的名称
autocomplete 规定是否启用表单的自动完成功能(on,off) [NEW H5]
novalidate 规定提交表单时不进行验证 [NEW H5]
enctype 规定在发送表单数据之前如何对其进行编码。
-->
<!--enctype 属性可能的值：
application/x-www-form-urlencoded
默认。在发送前对所有字符进行编码。将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值。
multipart/form-data
不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
text/plain
将空格转换为 "+" 符号，但不编码特殊字符。
-->
<form action="#" novalidate>
表单提交
<!--默认sumit 必须在form表单内部，才能提交-->
<!--当sumit在form表单外部 ，添加form属性 取值与 form表单的id 取值一致，也能提交。
也可以通过添加 formaction， formtarget，formmethod 修改提交的一些设置
-->
<form action="#" id="text">
<input type="submit" value="在外边提交信息" form="text" formtarget="">
label
<!--label:标签，用于做简单说明，可显示文字，行元素; for:说明这个标签是为谁添加的--for="id" ，id为account的标签添加说明，当点击label时，会把标签放在输入框上-->
<label for="account"></label>
<input type="text" id="account" placeholder="请输入账号">
input
<!--input:输入操作；是行内块; -->
<!--
placeholder[NEW H5] 占位符，起到提示作用。（该提示会在输入字段为空时显示，并会在字段获得焦点时消失。）
required[NEW H5] 说明这个输入框必填，不能为空;
pattern 格式要求，值是正则表达式
正则表达式 regex express 判断一个字符串是否满足你的需求
[0-9]{2,10} 匹配中括号中的字符，必须填数字，最少2位，最多10位
\u4e00-\u9fa5：是中文的unicode编码范围
适用于以下 <input> 类型：text, search, url, telephone, email 以及 password 。
type 输入数据的类型,button,checkbox,color,date,datetime,email,file,hidden,image,month,number,password,radio,range,reset,search,submit,tel,text,time,url,week,datetime-local
autocomplete[NEW H5] 是否允许浏览器记录之前的内容，自动输入；off:不允许；on:允许
autofocus[NEW H5] 规定输入字段在页面加载时是否获得焦点（不适用于 type="hidden"）
name 规定 input 元素的名称。(只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。)
value 为 input 元素设定值。
disabled 规定应该禁用的 <input> 元素。(被禁用的 input 元素是无法使用和无法点击的。表单中被禁用的 <input> 元素不会被提交。)
-->
<!--对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
注释：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。
注释：value 属性无法与 <input type="file"> 一同使用。
-->
<!--普通文本框添加 autocomplete="off"，
密码输入框添加 autocomplete="new-password"。
-->
<!--maxlength 规定输入字段的最大长度，以字符个数计。
readonly 规定输入字段为只读。
size 可见的字符数。
-->
<!--maxlength，readonly 适用于 type="text" type="password"-->
<!--文本-->
<input type="text" placeholder="请输入用户名" required pattern="[0-9]{2,10}" autocomplete="on">
<!--密码-->
<input type="password" placeholder="请输入密码">
<!--checked 规定此 input 元素首次加载时应当被默认选中。
-->
<!--checked 只适用于 type="checkbox" type="radio" -->
<!--单选框，name要相同;value:值，这个选项的取值; -->
<input type="radio" name="xx" value="xx" checked >
<!--多选框-->
<input type="checkbox" name="readBook" checked>
<!--max[NEW h5] 规定输入字段所允许的最大值。
min[NEW h5] 规定输入字段所允许的最小值。
step[NEW h5] 规定输入字段的合法数字间隔（假如 step="3"，则合法数字应该是 -3、0、3、6，以此类推）。
-->
<!--适用于以下 <input> 类型：number, range, date, datetime, datetime-local, month, time 以及 week。-->
<!--数字 max:最大;min:最小;step：步,按上下修改数字时,出现数字的间隔-->
<input type="number" max="number|date" min="number|date" step="5" name="name">
<!--日期选择器 Date picker (date,month,week,time,datetime,datetime-local)火狐不支持-->
<input type="date" name="date">
<!--range:范围-->
<input type="range" max="100" min="0" step="2">
<!--颜色 得到一个16进制的rgb值 -->
<input type="color" name="color">
<!--邮箱 提交时,会进行判断，如果输入不是邮箱，会提示错误-->
<input type="email" name="email">
<!--网址-->
<input type="url" placeholder="请输入网址" name="url">
<!--搜索框-->
<input type="search" placeholder="请输入搜索关键字" name="search">
<!--width [NEW h5] 规定 image input 的宽度
height[NEW h5] 规定 image input 的高度
src 规定作为提交按钮显示的图像的 URL
alt 为用户由于某些原因（比如网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器）无法查看图像时提供了替代文本
-->
<!--width，height，src，alt 只适用于 type="image"-->
<!--为图片指定高度和宽度是一个好习惯。如果设置了这些属性，当页面加载时会为图片预留需要的空间。而如果没有这些属性，则浏览器就无法了解图像的尺寸，也就无法为其预留合适的空间。-->
<!--即使 alt 属性不是必需的属性，但是当输入类型为 image 时，仍然应该设置该属性。如果不使用该属性，就有可能对文本浏览器或非可视的浏览器造成使用障碍。-->
<input type="image" src="img_submit.gif" alt="Submit" width="pixels/%" height="pixels/%"/>
<!--accept 支持的文件格式
multiple[NEW h5] 规定输入字段可选择多个值。
-->
<!--如果不限制图像的格式，可以写为：accept="image/*"-->
<!--accept 只适用于 type="file"-->
<!--请避免使用该属性。应该在服务器端验证文件上传。-->
<input type="file" name="photo" accept="audio/*|video/*|image/*|MIME_type" multiple="multiple">
<!--formaction[NEW H5] 覆盖 form 元素的 action 属性。
formenctype[NEW H5] 覆盖 form 元素的 enctype 属性。(（仅适用于 method="post" 的表单）)
formmethod[NEW H5] 覆盖 form 元素的 method 属性。
formtarget[NEW H5] 覆盖 form 元素的 target 属性。
formnovalidate[NEW H5] 覆盖 form 元素的 novalidate 属性。
-->
<!--formaction，formenctype，formmethod适用于 type="submit" 以及 type="image"-->
<!--formnovalidate 适用于 type="submit"-->
<!--input：登录按钮，一般在form表单中使用input标签作为登录按钮-->
<!--button：按钮；普通按钮-->
<input type="button" value="登录">
<!--submit：提交，提交填写的表单信息-->
<!--填写的信息想要提交，对应的标签中必须要有name属性；因为提交的时候，格式是 name=value -->
<input type="submit" value="提交">
<!--reset：重置，清空填写的表单信息；-->
<input type="reset" value="重置">
<!--autofocus、form、formaction、formenctype、formmethod、formnovalidate 以及 formtarget。-->[NEW H5]
<!--其他地方，可以直接使用button标签，type有三个值：button,submit,reset；button的内容随意-->
<button type=""></button>
<!--list[NEW H5] 引用数据列表，其中包含输入字段的预定义选项。
-->
<!--input 与 datalist 联合使用,可以选择或输入; input 中 list属性的取值 是 datalist标签的id值-->
<!--用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。简单来说，像一个下拉框，给了一些输入建议-->[NEW H5]
<!--IE9（更早 IE 版本），Safari 不支持-->
<input type="text" list="course" placeholder="选择或输入你选的课程" name="text">
<datalist id="course ">
<option value="HTML5">html5</option>
</datalist>
其他
下拉列表
<select>
<!--autofocus[NEW H5] 规定在页面加载时下拉列表自动获得焦点。
disabled 当该属性为 true 时，会禁用下拉列表。
form 下拉列表超出了表单元素,但仍是表单的一部分。
size 规定下拉列表中可见选项的数目。（默认值是 1。如果使用了 multiple 属性，默认值是 4。）
multiple 当该属性为 true 时，可选择多个选项。（不太好使）
（对于 windows：按住 Ctrl 按钮来选择多个选项
对于 Mac：按住 command 按钮来选择多个选项）
name 规定下拉列表的名称。（用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据。）
-->
<option>
<!--disabled 当该属性为 true 时，会禁用下拉列表。
selected 规定选项（在首次显示在列表中时）表现为选中状态。
label 规定更短版本的选项。
value 规定在表单被提交时被发送到服务器的值。
-->
<!--<option> 标签中的内容作为 <select> 或者<datalist> 一个元素使用。
开始标签 <option> 与结束标签 </option> 之间的内容是浏览器显示在下拉列表中的内容，而 value 属性中的值是表单提交时被发送到服务器的值。
注意：如果没有规定 value 属性，选项的值将设置为 <option> 标签中的内容。
-->
<optgroup>
<!--disabled 规定禁用该选项组。
label 为选项组规定描述。
-->
<!--select:选择;option:选项-->
<select name="birthday-year" id="year">
<option value="1985">1985</option>
</select>
下拉菜单：多项分类的下拉列表
<!--optgroup：选项组；lable:给这个选项组起名-->
<select name="animate">
<optgroup label="进入动画">
<option value="inFromLeft">左进</option>
</optgroup>
<optgroup label="出去动画">
<option value="outFromLeft">左出</option>
</optgroup>
</select>
文本区域
<!--autofocus[NEW H5] 规定当页面加载时，文本区域自动获得焦点。
disabled 规定禁用文本区域。
form[NEW H5] 超出了表单元素,但仍是表单的一部分。
placeholder[NEW H5] 规定一个简短的提示，它描述了文本区域的期望值。
maxlength[NEW H5] 规定文本区域的最大长度（以字符计）。
readonly 规定文本区域为只读。
required[NEW H5] 规定一个文本区域是必需的/必须填写（以提交表单）。
name 为文本区域规定名称。（用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据。）
cols 规定文本区域的可见宽度。（默认值是 20）
rows 规定文本区域的可见高度，以行数计。（默认值是 2）
-->
<!--文本区域,默认可以缩放；字数过多会自动出现纵向滚动条-->
<!--area ：区域；introduce：区域；clumn：列；row:行-->
<textarea name="introduce" id="" cols="30" rows="10"></textarea>
区域设置
<!--disabled[NEW H5] 规定该组中的相关表单元素应该被禁用。
form[NEW H5] 超出了表单元素,但仍是表单的一部分。
name[NEW H5] 规定 fieldset 的名称。
-->
<!--区域设置--会在相关表单元素周围绘制边框; legend：刻印文字、传奇；会显示在边界线上-->
<!--<legend> 标签为 <fieldset> 元素定义标题。-->
<fieldset>
<legend>请选择专业技能</legend>
<input type="text">
<input type="text">
</fieldset>
多媒体
video [NEW H5]
视频
<!-- controls 显示控制栏
autoplay 设置自动播放,谷歌有点问题,火狐没问题
loop 设置循环播放
muted 可以做到在谷歌中自动播放,但是视频的音频输出为静音
src 要播放的视频的 URL。
width 设置视频播放器的宽度。
height 设置视频播放器的高度。
poster 规定视频正在下载时显示的图像，直到用户点击播放按钮。
-->
<!-- 支持三种视频格式：MP4、WebM、Ogg。-->
<video src="code/多媒体标签/trailer.mp4" width="320" height="240" controls autoplay loop></video>
☞ 多媒体标签在网页中的兼容效果方式
<!-- Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。-->
<!-- 如果A浏览器支持第一个,那就直接播放第一个
如果B浏览器支持第二个,遇到第一个标签的时候不会执行,遇到第二个可以支持的,才播放 -->
<!-- 可以在 <video> 和 </video> 标签之间放置文本内容，这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。 -->
<video>
<source src="trailer.mp4">
<source src="trailer.ogg">
<source src="trailer.WebM">
您的浏览器不支持 video 标签。
</video>
audio [NEW H5]
音频
<!-- controls 显示控制栏
autoplay 设置自动播放,谷歌有点问题,火狐没问题
loop 设置循环播放
muted 音频输出为静音
src 要播放的视频的 URL。
-->
<!-- 支持三种视频格式：MP3、Wav、Ogg。-->
<audio src="audio/music.mp3" autoplay loop></audio>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
1026
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
