HTML 学习笔记
HTML，超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
批注：一种数据传输格式，安全，易用，稳定。其解析由浏览器来完成。
HelloWorld
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
HTML基础
标签：
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据。
<meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
基础标签
<!-- -->
<!-- 标题 -->
<h1>这是一个标题。</h1>
<!-- 段落 -->
<p>这是一个段落 </p>
<!-- 水平线 -->
<hr>
<!-- 换行 -->
<br>
<!-- 超链接 -->
<a href="url" target="_blank" rel="noopener noreferrer">链接文本</a> <!-- target="_blank"在新标签页显示 --> <!-- rel用于指定当前文档与被链接文档的关系。 -->
文本标签格式化
<b> <!-- 定义粗体文本 -->
<em> <!-- 定义着重文字 -->
<i> <!-- 定义斜体字 -->
<small> <!-- 定义小号字 -->
<strong> <!-- 定义加重语气 -->
<sub> <!-- 定义下标字 -->
<sup> <!-- 定义上标字 -->
<ins> <!-- 定义插入字 -->
<del> <!-- 定义删除字 -->
"计算机输出" 标签
<code> <!-- 定义计算机代码 -->
<kbd> <!-- 定义键盘码 -->
<samp> <!-- 定义计算机代码样本 -->
<var> <!-- 定义变量 -->
<pre> <!-- 定义预格式文本 -->
引文, 引用, 及标签定义
<abbr> <!-- 定义缩写 -->
<address> <!-- 定义地址 -->
<bdo> <!-- 定义文字方向 -->
<blockquote> <!-- 定义长的引用 -->
<q> <!-- 定义短的引用语 -->
<cite> <!-- 定义引用、引证 -->
<dfn> <!-- 定义一个定义项目。 -->
head
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
title 标题
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时，显示在收藏夹中的标题
- 显示在搜索引擎结果页面的标题
base
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
link
定义了文档与外部资源之间的关系。
批注：没懂，大概是引用外部资源的意思吧。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
style
样式
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
meta
meta标签描述了一些基本的元数据。元数据也不显示在页面上，但会被浏览器解析。通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
script
用于加载脚本文件，如： JavaScript。
CSS
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。
CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用"style" 属性
- 内部样式表 -在HTML文档头部
<head>区域使用<style>元素 来包含CSS - 外部引用 - 使用外部 CSS 文件
内联样式
<p style="color:blue;margin-left:20px;">这是一个段落。</p>
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
图片
<img src="url" alt="some_text" width="304" height="228">
src 指 "source"。alt，当图片无法显示时会显示alt中的文本。
表格
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
tr是行，td是列。
其他属性：
<table> <!-- 定义表格 -->
<th> <!-- 定义表格的表头 -->
<tr> <!-- 定义表格的行 -->
<td> <!-- 定义表格单元 -->
<caption> <!-- 定义表格标题 -->
<colgroup> <!-- 定义表格列的组 -->
<col> <!-- 定义用于表格列的属性 -->
<thead> <!-- 定义表格的页眉 -->
<tbody> <!-- 定义表格的主体 -->
<tfoot> <!-- 定义表格的页脚 -->
列表
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项使用数字来标记。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
区块
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>
div
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
块级 (block-level)
div 元素是用于分组 HTML 元素的块级元素。
下面的例子使用五个 div 元素来创建多列布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
</div>
</body>
</html>
float:left 横向布局，默认为纵向布局。
span
<span> 元素是内联元素，可用作文本的容器.<span> 元素也没有特定的含义。
内联元素(inline)
表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>
<form> <!-- 定义供用户输入的表单 -->
<input> <!-- 定义输入域 -->
<textarea> <!-- 定义文本域 (一个多行的输入控件) -->
<label> <!-- 定义了 <input> 元素的标签，一般为输入标题 -->
<fieldset> <!-- 定义了一组相关的表单元素，并使用外框包含起来 -->
<legend> <!-- 定义了 <fieldset> 元素的标题 -->
<select> <!-- 定义了下拉选项列表 -->
<optgroup> <!-- 定义选项组 -->
<option> <!-- 定义下拉列表中的选项 -->
<button> <!-- 定义一个点击按钮 -->
<datalist>New <!-- 指定一个预先定义的输入控件选项列表 -->
<keygen>New <!-- 定义了表单的密钥对生成器字段 -->
<output>New <!-- 定义一个计算结果 -->
框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
iframe语法:
<iframe src="URL" width="200" height="200"></iframe>
frameborder="0" 可以移除边框。
颜色
颜色值由十六进制来表示红、绿、蓝（RGB）。
每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。
十六进制值的写法为 # 号后跟三个或六个十六进制字符。
三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。
RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。
设置背景颜色：
<p style="background-color:rgb(255,255,0)">
通过 rbg 值设置背景颜色
</p>
脚本
<script> 标签用于定义客户端脚本，比如 JavaScript。
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
<script>
document.write("Hello World!");
</script>
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
HTML5
已移除的元素
以下的 HTML 4.01 元素在HTML5中已经被删除:
<acronym><applet><basefont><big><center><dir><font><frame><frameset><noframes><strike><tt>
新的语义和结构元素
<article> <!-- 定义页面独立的内容区域。 -->
<aside> <!-- 定义页面的侧边栏内容。 -->
<bdi> <!-- 允许您设置一段文本，使其脱离其父元素的文本方向设置。 -->
<command> <!-- 定义命令按钮，比如单选按钮、复选框或按钮 -->
<details> <!-- 用于描述文档或文档某个部分的细节 -->
<dialog> <!-- 定义对话框，比如提示框 -->
<summary> <!-- 标签包含 --> details 元素的标题
<figure> <!-- 规定独立的流内容（图像、图表、照片、代码等等）。 -->
<figcaption> <!-- 定义 <figure> 元素的标题 -->
<footer> <!-- 定义 section 或 document 的页脚。 -->
<header> <!-- 定义了文档的头部区域 -->
<mark> <!-- 定义带有记号的文本。 -->
<meter> <!-- 定义度量衡。仅用于已知最大和最小值的度量。 -->
<nav> <!-- 定义导航链接的部分。 -->
<progress> <!-- 定义任何类型的任务的进度。 -->
<ruby> <!-- 定义 ruby 注释（中文注音或字符）。 -->
<rt> <!-- 定义字符（中文注音或字符）的解释或发音。 -->
<rp> <!-- 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 -->
<section> <!-- 定义文档中的节（section、区段）。 -->
<time> <!-- 定义日期或时间。 -->
<wbr> <!-- 规定在文本中的何处适合添加换行符。 -->
Canvas
<canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。
创建画布
一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
使用 JavaScript 来绘制图像
canvas 的左上角坐标为 (0,0).
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//画矩形
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75); //画矩形
//画路径
ctx.moveTo(0,0); //移动坐标
ctx.lineTo(200,100); //画线
ctx.stroke(); //画出路径
//画文本
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
//画图片
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
更多参考：https://www.runoob.com/tags/ref-canvas.html
嵌入SVG
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
MathML
HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>...</math> 。
MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>
</body>
</html>
拖放
TODO.
地理定位
使用 getCurrentPosition() 方法来获得用户的位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
x.innerHTML="该浏览器不支持获取地理位置。";
}
}
function showPosition(position)
{
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
</script>
</body>
</html>
Video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
Audio
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
Input 类型
color,date,datetime,datetime-local,email,month,number,range,search,tel,time,url,week
color
颜色盘。
<form action="demo-form.php">
选择你喜欢的颜色: <input type="color" name="favcolor"><br>
<input type="submit">
</form>
date
date 类型允许你从一个日期选择器选择一个日期。
生日: <input type="date" name="bday">
datetime
datetime 类型允许你选择一个日期（UTC 时间）。
<input type="datetime" name="bdaytime">
datetime-local
datetime-local 类型允许你选择一个日期和时间 (无时区).
<input type="datetime-local" name="bdaytime">
E-mail: <input type="email" name="email">
其余输入类型参考 https://www.runoob.com/html/html5-form-input-types.html
表单元素
datalist
<datalist> 元素规定输入域的选项列表。
批注：多合一。
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
keygen
<keygen> 元素的作用是提供一种验证用户的可靠方法。
<keygen> 标签规定用于表单的密钥对生成器字段。
<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
output
<output> 元素用于不同类型的输出，比如计算或脚本输出：
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
Web 存储
使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
localStorage 和 sessionStorage
客户端存储数据的两个对象为：
- localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
- sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
} else {
// 抱歉! 不支持 web 存储。
}
localStorage 对象
localStorage存储的数据永久保存。
localStorage.sitename="菜鸟教程";
document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;
实例解析：
使用 key="sitename" 和 value="菜鸟教程" 创建一个 localStorage 键/值对。
检索键值为"sitename" 的值然后将数据插入 id="result"的元素中。
不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
- 保存数据：localStorage.setItem(key,value);
- 读取数据：localStorage.getItem(key);
- 删除单个数据：localStorage.removeItem(key);
- 删除所有数据：localStorage.clear();
- 得到某个索引的key：localStorage.key(index);
//保存数据
function save(){
var siteurl = document.getElementById("siteurl").value;
var sitename = document.getElementById("sitename").value;
localStorage.setItem(sitename, siteurl);
alert("添加成功");
}
//查找数据
function find(){
var search_site = document.getElementById("search_site").value;
var sitename = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
find_result.innerHTML = search_site + "的网址是：" + sitename;
}
sessionStorage 对象
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
Web SQL
Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。
//打开数据库
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
//查询，创建，插入
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
msg = '<p>数据表已创建，且插入了两条数据。</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>查询记录条数: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#status').innerHTML += msg;
}
}, null);
});
