HTML
简单HTML页面结构示例/HTML速查
<!--一个简单的HTML文档结构示例-->
<!DOCTYPE html>
<html>
<head>
<base href="https://www.myhtml.com/myhtml.html" target="_blank">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
<!--为搜索引擎定义关键词-->
<meta name="keywords" content="HTML, CSS, JS">
<!--为网页定义描述内容-->
<meta name="description" content="前端开发基础——HTML">
<!--定义网页作者-->
<meta name="author" content="ZKS、执">
<!--声明网页字符-->
<meta charset="utf-8">
<title>前端开发基础——HTML</title>
</head>
<body>
<!--区块------------------------------------------------------------>
<div id="mydiv" class="start" style="width:500px">块级元素</div>
<span>内联元素</span>
<!--基本标签-------------------------------------------------------->
<h1>最大标题</h1>
<h6>最小标题</h6>
<p>文档内容<br>换行不分段</p>
<!--链接、图片------------------------------------------------------>
<a href="url" target="_blank">链接文本、图片等</a>
<img src="url" alt="可替换文本（浏览器无法载入图片时显示）" width="100" height="100">
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>
<!--表格------------------------------------------------------------>
<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>第一行第一个表格数据</td>
<td>第一行第二个表格数据</td>
</tr>
<tr>
<td>第二行第一个表格数据</td>
<td>第二行第二个表格数据</td>
</tr>
</table>
</body>
<!--列表------------------------------------------------------------>
<ul>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
</ol>
<dl>
<dt>自定义列表项1</dt>
<dd>自定义列表项1的描述</dd>
<dt>自定义列表项2</dt>
<dd>自定义列表项2的描述</dd>
</dl>
<!--表单------------------------------------------------------------>
<form name="input" action="myhtml.html" method="get">
<!--文本域-->
Username: <input type="text" name="username">
<!--密码字段-->
Password: <input type="password" name="password">
<!--单选按钮-->
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
<!--复选框-->
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
<!--下拉列表-->
<select name="cars">
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
</select>
<!--提交按钮（提交到form的action属性定义的文件中）-->
<input type="submit" value="Submit">
</form>
<!--脚本------------------------------------------------------------>
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，您的浏览器不支持JavaScript!</noscript>
</html>
HTML文本格式化
- 文本格式化标签
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本 |
| <em> | 定义着重文字 |
| <i> | 定义斜体字 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
| <sub> | 定义下标字 |
| <sup> | 定义上标字 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
- “计算机输出”标签
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码 |
| <kbd> | 定义键盘码 |
| <samp> | 定义计算机代码样本 |
| <var> | 定义变量 |
| <pre> | 定义预格式文本 |
- 引文、引用及标签定义
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写 |
| <address> | 定义地址 |
| <bdo> | 定义文字方向 |
| <blockquote> | 定义长的引用 |
| <q> | 定义短的引用语 |
| <cite> | 定义引用、引证 |
| <dfn> | 定义一个定义项目 |
HTML头部
| 标签 | 描述 |
|---|---|
| <head> | 定义了文档的信息 |
| <title> | 定义了文档的标题 |
| <base> | 定义了页面链接标签的默认链接地址 |
| <link> | 定义了一个文档和外部资源之间的关系 |
| <meta> | 定义了HTML文档中的元数据 |
| <script> | 定义了客户端的脚本文件 |
| <style> | 定义了HTML文档的样式文件 |
HTML表格
| 标签 | 描述 |
|---|---|
| <table> | 定义表格 |
| <th> | 定义表格的表头 |
| <tr> | 定义表格的行 |
| <td> | 定义表格单元 |
| <caption> | 定义表格标题 |
| <colgroup> | 定义表格列的组 |
| <col> | 定义用于表格列的属性 |
| <thead> | 定义表格的页眉 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
HTML表单
| 标签 | 描述 |
|---|---|
| <form> | 定义供用户输入的表单 |
| <input> | 定义输入域 |
| <textarea> | 定义文本域 (一个多行的输入控件) |
| <label> | 定义了<input>元素的标签，一般为输入标题 |
| <fieldset> | 定义了一组相关的表单元素，并使用外框包含起来 |
| <legend> | 定义了<fieldset>元素的标题 |
| <select> | 定义了下拉选项列表 |
| <optgroup> | 定义选项组 |
| <option> | 定义下拉列表中的选项 |
| <button> | 定义一个点击按钮 |
| <datalist> | (HTML5新增)指定一个预先定义的输入控件选项列表 |
| <keygen> | (HTML5新增)定义了表单的密钥对生成器字段 |
| <output> | (HTML5新增)定义一个计算结果 |
HTML5
语义化
HTML5的语义化指的是合理正确地使用语义化的标签来创建页面结构，从标签名上即可直观地知道这个标签的作用，而不是滥用div。
- 语义化的优点
① 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
② 有利于搜索引擎优化（SEO），搜索引擎根据标签来确定上下文和各个关键字的权重。
③ 方便其他设备（如屏幕阅读器）解析，根据语义渲染网页。
④ 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。 - 语义化标签
| 标签 | 描述 |
|---|---|
| <header> | 定义头部区域 |
| <nav> | 定义导航链接区域 |
| <main> | 定义文档主要内容 |
| <article> | 定义独立的文章、博客等内容区域 |
| <session> | 定义节、区段 |
| <aside> | 定义侧边栏或嵌入内容 |
| <footer> | 定义节或页面的页脚 |
（图源：https://www.runoob.com/html/html5-semantic-elements.html）
新元素标签
- <canvas>新元素
| 标签 | 描述 |
|---|---|
| <canvas> | 标签定义图形，比如图表和其他图像。该标签基于JavaScript的绘图API |
- 新多媒体元素
| 标签 | 描述 |
|---|---|
| <audio> | 定义音频内容 |
| <video> | 定义视频（video或者movie） |
| <source> | 定义多媒体资源<video>和<audio> |
| <embed> | 定义嵌入的内容，比如插件 |
| <track> | 为诸如<video>和<audio>元素之类的媒介规定外部文本轨道 |
- 新表单元素
| 标签 | 描述 |
|---|---|
| <datalist> | 定义选项列表。请与input元素配合使用该元素，来定义input可能的值 |
| <keygen> | 规定用于表单的密钥对生成器字段 |
| <output> | 定义不同类型的输出，比如脚本的输出 |
- 新的语义和结构元素
| 标签 | 描述 |
|---|---|
| <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> | 规定在文本中的何处适合添加换行符 |
已移除的元素标签
<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<strike>、<tt>
webStorage
HTML5 web存储，一个比cookie更好的本地存储方式。
早些时候，本地存储使用的是cookie。但是Web存储需要更加的安全与快速，这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据，而不影响网站的性能。数据以键/值对存在，web网页的数据只允许该网页访问使用。存储内容大小一般支持5MB左右（不同浏览器可能还不一样）。
客户端存储数据的两个对象为：
- localStorage——用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
- sessionStorage——用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后将会删除这些数据。
相关API：
- xxxxxStorage.setItem(‘key’, ‘value’);
该方法接受一个键和值作为参数，会把键值添加到存储中，如果键名存在，则更新其对应的值。 - xxxxxStorage.getItem(‘key’);
该方法接受一个键名作为参数，返回键名对应的值。如果key对应的value获取不到，那么返回值是null。 - xxxxxStorage.removeItem(‘key’);
该方法接受一个键名作为参数，并把该键名从存储中删除。 - xxxxxStorage.clear();
该方法会清空存储中的所有数据。
作为辨析，附上非HTML5新增的cookie和session
- cookie保存在浏览器端。只能以文本的方式保存字符串类型。如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie；如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。单个cookie保存的数据不能超过4KB。
| 字段 | 说明 |
|---|---|
| name | 设置cookie的名称。 |
| value | 设置cookie的值。 |
| domain | 设置可以访问该cookie的域名。顶级域名只能设置domain为顶级域名，只能获取domain为顶级域名的cookie；非顶级域名可以设置domain为顶级域名或其本身，可以获取domain为顶级域名或其本身的cookie。 |
| path | 设置可以访问该cookie的页面路径。 |
| expires/Max-Age | 设置cookie的超时时间。默认值为session，即cookie和session一起失效；若设置为时间，则到达该时间后cookie失效。 |
| size | 设置cookie的大小。 |
| http | 设置cookie的httponly属性。若为true，则只有在http请求头中会带有此cookie的信息，而不能通过document.cookie来访问此cookie。 |
| secure | 设置是否只能通过https来传递此条cookie。 |
| SameSite (Chrome 51新增) | 用来防止CSRF攻击和用户追踪（第三方恶意获取cookie），限制第三方cookie，从而减少安全风险。可以设置如下三个值： Strict：严格，完全禁止第三方获取cookie，跨站点时，任何情况下都不会发送cookie；只有当前网页的URL与请求目标一致，才会带上cookie。 Lax：防范跨站，大多数情况下禁止获取cookie，除非导航到目标网址的GET请求（链接、预加载、GET表单）。 None：没有限制。必须同时设置secure属性（cookie只能通过 https协议发送），否则无效。 |
- session保存在服务器端。通过类似于Hashtable的数据结构来保存，能支持任何类型的对象（session中可含有多个对象）。当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该sessionid返回对应的session对象；如果没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。session大小没有限制。
应用场景
- cookie
① 记录下次自动登录或者记住密码。
② 保存上次登录的时间等信息。
③ 保存上次查看的页面。
④ 浏览计数。 - session
① 保存用户登录信息。
② 将某些数据放入session中，供同一用户的不同页面使用。
缺点
- cookie
① 大小受限。
② 用户可以操作（禁用）cookie，使功能受限。
③ 安全性较低。
④ 有些状态不可能保存在客户端，即不能使用cookie来存储。
⑤ 每次访问都要传送cookie给服务器，浪费带宽。 - session
① session保存的东西越多，就越占用服务器内存。
② 依赖于cookie（sessionid保存在cookie中），如果禁用cookie，则要使用URL重写，不安全。
③ 创建session变量有很大的随意性，可随时调用，所以过度使用session变量将会导致代码不可读而且不好维护。
660
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
