简介
- 超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
- 实例
```html
<!DOCTYPE html> //声明为HTML5文档，此不区分大小写
//页面根元素
//定义网页编码格式为utf-8。
我的第一个标题
//大标题
我的第一个段落。
//段落
3. html实例：www.runoob.com/html/html-examples.html html参考手册：[http://www.runoob.com/tags/html-reference.html](http://www.runoob.com/tags/html-reference.html)<a name="rPok4"></a># 元素1. 开始标签常被称为**起始标签（opening tag）**，结束标签常称为**闭合标签（closing tag）。**| 开始标签 * | 元素内容 | 结束标签 * || :--- | :--- | :--- || <p> | 这是一个段落 | </p> || <a href="default.htm"> | 这是一个链接 | </a> || <br> | 换行 | |2. 一个完整的HTML文件，应该至少包含html元素，body元素，以及里面的内容。2. **空元素**没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。<br />注意：<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。<a name="3teTw"></a># 属性1. 双引号是最常用的，不过使用单引号也没有问题。但比如属性值本身就含有双引号，那么必须使用单引号。1. 属性和属性值对大小写不敏感，但推荐使用小写。1. 属性参考手册| 属性 | 描述 || :--- | :--- || class | 为html元素定义一个或多个类名（classname），可以填写多个class属性<br /> || id | 定义元素的唯一id，只能写一个，多写无效 || style | 规定元素的行内样式（inline style） || title | 描述了元素的额外信息 (作为工具条使用) |<a name="W85Kt"></a># 标题&段落1. 标题（Heading）是通过 <h1> - <h6> 标签进行定义的。确保将 HTML 标题标签只用于标题，不要仅仅是为了生成粗体或大号的文本而使用标题。1. <hr> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。1. <br /> 元素是一个空的 HTML 元素，可以换行。1. 需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。<a name="qDFv0"></a># 文本格式化1. HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：**粗体** or _斜体。_**通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。**然而，这些标签的含义是不同的：<b> 与<i> 定义粗体或斜体文本。<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。```html<!--粗体/斜体/下标/上标--><p><b><sub>今天</sub></b><strong>你要</strong><i>嫁给</i><em><sup>我</sup></em></p><!--小号字/插入字/删除字--><p>有的人活着， <small>他已经死了；</small> <ins>有的人死了，</ins> <del>他还活着。</del> <code>class</code></p>
链接
- 链接文本
- target属性，可以定义被链接的文档在何处显示，如当前页面/新标签页面。
id属性可用于创建在一个HTML文档书签标记。
头部
元素
在 元素中可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为:
, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。<br />(1) <title> 标签定义HTML文档的标题<br />(2)<base>标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接(定义本页面的相对目录路径)<br />(3) <meta>元素来描述HTML文档的描述，关键词，作者，字符集等。<br />(4) <link> 标签定义了文档与外部资源之间的关系，该标签通常用于链接到样式表<br />(5)<style> 标签定义了HTML文档的样式文件引用地址，在<style> 元素中也可以直接添加样式来渲染 HTML 文档</p>
<pre><code class="lang-html"><head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
</code></pre>
<ol>
<li><Title>元素</li></ol>
<p><title> 标签定义了不同文档的标题。</p>
<ul>
<li>定义了浏览器工具栏的标题</li><li>当网页添加到收藏夹时，显示在收藏夹中的标题</li><li>显示在搜索引擎结果页面的标题</li></ul>
<ol>
<li><meta> 标签</li></ol>
<p>（1）<meta>标签提供了元数据，元数据也不显示在页面上，但会被浏览器解析。META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。<meta> 一般放置于 <head> 区域。<br />（2）实例<br />为搜索引擎定义关键词:<br /><meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"><br />为网页定义描述内容:<br /><meta name="description" content="免费 Web & 编程 教程"><br />定义网页作者:<br /><meta name="author" content="Runoob"><br />每30秒钟刷新当前页面:<br /><meta http-equiv="refresh" content="30">
<a name="Xx0XP"></a></p>
<h1 id="61ltd4"><a name="61ltd4" class="reference-link"></a><span class="header-link octicon octicon-link"></span>CSS</h1><ol>
<li>CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。</li><li>background-color（背景颜色）、font-family（字体）、color（字体色）、font-size(字体大小)</li><li>字体对齐test-align</li><li><p>使用方式</p>
<ol>
<li>内联样式- 在HTML元素中使用”style” 属性，如<p style="color:blue;margin-left:20px;">这是一个段落。</p></li><li>内部样式表 -在HTML文档头部区域使用，如<pre><code class="lang-html"><head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
</code></pre>
c. 外部样式表- 使用外部 CSS<strong> 文件</strong>，如<pre><code class="lang-html"><head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
</code></pre>
<a name="1LESX"></a><h1 id="60jh74"><a name="60jh74" class="reference-link"></a><span class="header-link octicon octicon-link"></span>图像</h1>1、<img src="url" alt="some_text"><br />url指存储图像的位置，alt 属性用来为图像定义一串预备的可替换的文本。<br />2、设置图像映射<br /><img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"><br /> <br /><map name="planetmap"><br /> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"><br /> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"><br /> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"><br /></map>
<a name="lglJW"></a><h1 id="4o3ehu"><a name="4o3ehu" class="reference-link"></a><span class="header-link octicon octicon-link"></span>表格</h1></li></ol>
</li><li><p>表格由 <table>标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。</p>
<pre><code class="lang-html"><h4>一行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2020/png/2979410/1606805255993-23222fa5-9674-48cd-9d4c-66773c0218d7.png#align=left&display=inline&height=76&margin=%5Bobject%20Object%5D&name=image.png&originHeight=176&originWidth=296&size=5779&status=done&style=none&width=127" alt="image.png"></p>
</li><li><p><strong>表格表头</strong></p>
</li></ol>
<p>表格的表头使用 <strong><th></strong> 标签进行定义。</p>
<pre><code class="lang-html"><table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<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>
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2020/png/2979410/1606805393233-f4b2a546-cdfc-4fcc-bb9f-d4bd79984106.png#align=left&display=inline&height=149&margin=%5Bobject%20Object%5D&name=image.png&originHeight=297&originWidth=470&size=15887&status=done&style=none&width=235" alt="image.png"></p>
<ol>
<li>定义跨行rowspan或跨列colspan的表格单元格
```html
<h4>单元格跨两格:</h4><table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
</li></ol>
<p><h4>单元格跨两列:</h4></p>
<p><table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr><a rel="nofollow" href="https://blog.csdn.net/weixin_39595195?spm=1010.2135.3001.5113">https://blog.csdn.net/weixin_39595195?spm=1010.2135.3001.5113</a>
<td>555 77 855</td>
</tr>
</table></p>
<pre><code><br />
4. **单元格间距**cellspacing
```html
<h4>单元格间距="10":</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</code></pre><p><img src="https://cdn.nlark.com/yuque/0/2020/png/2979410/1606805855996-26ed98a1-2d1a-4e3f-aeaf-9b40e0eaf470.png#align=left&display=inline&height=146&margin=%5Bobject%20Object%5D&name=image.png&originHeight=291&originWidth=311&size=13079&status=done&style=none&width=155.5" alt="image.png"></p>
<ol>
<li><p><strong>单元格边距</strong>cellpadding</p>
<pre><code class="lang-html"><h4>有单元格边距:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2020/png/2979410/1606805928684-7d85f47a-3358-4f78-a11b-8e065ee88486.png#align=left&display=inline&height=159&margin=%5Bobject%20Object%5D&name=image.png&originHeight=318&originWidth=342&size=14171&status=done&style=none&width=171" alt="image.png">
<a name="HSSpy"></a></p>
<h1 id="17xzbk"><a name="17xzbk" class="reference-link"></a><span class="header-link octicon octicon-link"></span>列表</h1></li><li><p><strong>无序列表</strong></p>
</li></ol>
<p>无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用 <ul> 标签</p>
<pre><code class="lang-html"><h4>无序列表:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2020/png/2979410/1606806261199-91e5dfe3-6afc-474e-8ca5-28d3160c91b4.png#align=left&display=inline&height=125&margin=%5Bobject%20Object%5D&name=image.png&originHeight=251&originWidth=224&size=8856&status=done&style=none&width=112" alt="image.png"></p>
<ol>
<li><strong>有序列表</strong></li></ol>
<p>可以在标签里面使用type属性来进行标号的选择。</p>
<pre><code class="lang-html"><h4>有序列表:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2020/png/2979410/1606806244716-37a19361-ce80-43f3-a214-d7bc4aee2816.png#align=left&display=inline&height=215&margin=%5Bobject%20Object%5D&name=image.png&originHeight=429&originWidth=235&size=16719&status=done&style=none&width=117.5" alt="image.png"></p>
<ol>
<li><strong>自定义列表</strong></li></ol>
<p>自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以<strong> <dl> </strong>标签开始。每个自定义列表项以<strong> <dt></strong> 开始。每个自定义列表项的定义以<strong> <dd> </strong>开始。</p>
<pre><code class="lang-html"><h4>自定义列表:</h4>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2020/png/2979410/1606806372989-05bcbd2f-9031-47d5-9a50-06b4d2006081.png#align=left&display=inline&height=150&margin=%5Bobject%20Object%5D&name=image.png&originHeight=300&originWidth=418&size=16848&status=done&style=none&width=209" alt="image.png">
<a name="EFtJd"></a></p>
<h1 id="cqfiql"><a name="cqfiql" class="reference-link"></a><span class="header-link octicon octicon-link"></span>div/span区块<br /></h1><ol>
<li>块级元素：在浏览器显示时，通常会以新行来开始（和结束）。实例: <h1>, <p>, <ul>, <table></li><li>内联元素：在显示时通常不会以新行开始。实例: <b>, <td>, <a>, <img></li><li><div>
</li></ol>
<p><div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见用途是文档布局。</p>
<ol>
<li><span></li></ol>
<p><span> 元素是内联元素，可用作文本的容器。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
<a name="aDlGK"></a></p>
<h1 id="22r467"><a name="22r467" class="reference-link"></a><span class="header-link octicon octicon-link"></span>表单</h1><ol>
<li>表单</li></ol>
<p>表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。<br />表单使用表单标签<strong> <form> </strong>来设置：</p>
<pre><code class="lang-html"><form>
input 元素
</form>
</code></pre>
<ol>
<li>表单输入元素</li></ol>
<p>多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。<br />（1）<strong>文本域</strong><br />文本域通过<input type="text"> 标签来设定。</p>
<pre><code class="lang-html"><form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
</code></pre>
<p>文本框</p>
<pre><code class="lang-html"><textarea rows="10" cols="30">
我是一个文本框。
</textarea>
</code></pre>
<p>placeholder是一个带背景文字的文本框<br /><input type="text" placeholder="请输入账号"><br /><img src="https://cdn.nlark.com/yuque/0/2020/png/2979410/1606808705478-0eda8f5b-3296-470c-8f63-75858057f17b.png#align=left&display=inline&height=43&margin=%5Bobject%20Object%5D&name=image.png&originHeight=43&originWidth=195&size=2693&status=done&style=none&width=195" alt="image.png"><br />（2）<strong>密码字段</strong><br />密码字段通过标签<input type="password"> 来定义。</p>
<pre><code class="lang-html"><form>
Password: <input type="password" name="pwd">
</form>
</code></pre>
<p>（3）<strong>单选按钮</strong><br /><input type="radio"> 标签定义了表单单选框选项。设置name属性相同则为分组单选。</p>
<pre><code class="lang-html"><form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
</code></pre>
<p>（4）<strong>复选框</strong><br /><input type="checkbox"> 定义了复选框，用户需要从若干给定的选择中选取一个或若干选项。</p>
<pre><code class="lang-html"><form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
</code></pre>
<p>（5）<strong>提交按钮</strong><br /><input type="submit"> 定义了提交按钮。当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。</p>
<pre><code class="lang-html"><form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
</code></pre>
<p>假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到”html_form_action.php” 的页面。该页面将显示出输入的结果。<br />（6）<strong>按钮</strong><br /><strong>普通按钮不具备提交form的效果。</strong></p>
<pre><code class="lang-html"><form action="">
<input type="button" value="Hello world!">
</form>
<button type="submit">登陆</button> //这种方式可以
</code></pre>
<p>（7）<strong>下拉列表</strong><br /><select> <option>…</option> </select></p>
<pre><code class="lang-html"><form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</code></pre>
<p>（8）<strong>重置按钮</strong><br /><input type="reset"> 重置按钮可以把输入框的改动复原。
<a name="Uwq6K"></a></p>
<h1 id="tszuk"><a name="tszuk" class="reference-link"></a><span class="header-link octicon octicon-link"></span>框架</h1><ol>
<li>通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。</li><li>Iframe - 设置高度与宽度</li></ol>
<p>属性默认以像素为单位</p>
<pre><code class="lang-html"><iframe src="test.html" width="100%" height="300"></iframe>
</code></pre>
<ol>
<li><p>Iframe - 移除边框 frameborder=”0”</p>
<pre><code class="lang-html"><!--Iframe移除边框-->
<iframe src="test.html" frameborder="0"></iframe>
</code></pre>
</li><li><p>Iframe来显示目标链接页面</p>
<pre><code class="lang-html"><iframe src="ListDemo.html" name="iframe_a"></iframe>
<a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a>
</code></pre>
<p>因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。
<a name="IfwJF"></a></p>
<h1 id="9evurz"><a name="9evurz" class="reference-link"></a><span class="header-link octicon octicon-link"></span>脚本</h1></li><li><p><strong><script></strong></p>
</li></ol>
<p><script> 标签用于定义客户端脚本，<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。</p>
<ol>
<li><strong><noscript></strong></li></ol>
<p><noscript> 标签提供无法使用脚本时的替代内容（只有在浏览器不支持脚本或者禁用脚本时），<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
<a name="Bxbns"></a></p>
<h1 id="aiexaj"><a name="aiexaj" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5新特性</h1><ol>
<li>canvas 元素/ SVG：可用于绘画</li><li>video 和 audio 元素：用于媒介回放</li><li>Input类型增多，比如color、date、time等</li><li>新增语义元素：header、nav、section、footer等</li><li>Web存储：localStorage 和 sessionStorage </li><li>Web SQL：openDatabase、transaction、executeSql</li><li>web worker 是运行在后台的 JavaScript，不会影响页面的性能。</li><li>WebSocket：允许服务端主动向客户端推送数据</li></ol>
