HTML 总结

HTML

简介

HTML(HyperText MarkupLanguage): 超文本标记语言
超文本 : 普通文本指的是只有文字没有图片 ,视频, 音乐,而超文本就有
标记语言 : 由标签构成的语言
- HTML的标签都是预定好的, 如<a> </a> 为超链接
- HTML代码直接在浏览器中运行,由浏览器内核进行解析
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签

HTML5

HTML5 是最新的 HTML 标准。
HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
HTML5 拥有新的语义、图形以及多媒体元素。
- 新的语义元素，比如 <header>, <footer>, <article>, and <section>。
- 新的表单控件，比如数字、日期、时间、日历和滑块。
- 强大的图像支持（借由 <canvas> 和 <svg>）
- 强大的多媒体支持（借由 <video> 和 <audio>）
- 强大的新 API，比如用本地存储取代 cookie。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

<!DOCTYPE html>  <!-- html5文档类型（DOCTYPE）声明 -->
<html>  
<head>
<meta charset="UTF-8">  <!--charset 为字符编码（默认UTF-8）-->
<title>Title of the document</title>  <!-- 文档标题 -->
</head>

<body>
Content of the document......
</body>

</html>

HTML5 标准允许 4 种不同的属性语法。

类型	示例
Empty	<input type="text" value="Bill Gates" disabled>
Unquoted	<input type="text" value=Bill Gates>
Double-quoted	<input type="text" value="Bill Gates">
Single-quoted	<input type="text" value='Bill Gates'>

HTML5 定义了八个新的语义 HTML 元素。所有都是块级元素。

可以把 CSS display 属性设置为 block，以确保老式浏览器中正确的行为：

实例

header, section, footer, aside, nav, main, article, figure {display: block; 
}

HTML 添加自定义标签

您可以通过浏览器 trick 向 HTML 添加任何新元素：

本例向 HTML 添加了一个名为 <myHero> 的新元素，并为其定义 display 样式：

实例

<!DOCTYPE html>
<!-- 声明文档类型为HTML5 -->
<script>document.createElement("myHero")</script>
<!-- 通过脚本动态创建一个名为"myHero"的自定义HTML元素
HTML5 可以不用
它是为了在那些不支持未知元素的自定义样式的旧版本IE浏览器中“激活”这个元素，使得可以为它应用CSS样式。
--><style>myHero {display: block;background-color: #ddd;padding: 50px;font-size: 30px;} </style> <myHero>My First Hero</myHero> <!-- 使用它 -->

已添加的 JavaScript 语句 document.createElement("myHero")，仅适用于 IE。

Shiv

临时替代品或工具。一种用于在旧版浏览器中启用HTML5新元素的JavaScript解决方案。
开发者Sjoerd Visscher创建了一个名为"HTML5 Shiv"的JavaScript库。这个库的工作原理是在DOM解析之前，通过JavaScript动态创建这些新元素，使得旧版浏览器能够识别并应用样式到这些元素上。

<!-- 条件注释 lt是小于 < -->
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

action：指定表单提交时的目标URL（服务器端脚本的地址）。
method：定义提交表单时使用的HTTP方法（通常是GET或POST）。
- GET 方法
  - 数据传输：表单数据附加在URL后面，形成查询字符串（如?name=value&age=30）。由于URL长度限制，GET请求不适合传输大量数据。
  - 缓存：GET请求可以被缓存，这意味着浏览器可以存储请求的结果，加快后续请求的速度。
  - 历史：GET请求保留在浏览器历史记录中，用户可以回退到之前的GET请求。
  - 安全性：由于数据暴露在URL中，GET不适用于传输敏感信息，如密码或个人信息。
  - 数据大小：由于URL长度限制，GET请求的数据大小有限制。
  POST 方法
  - 数据传输：表单数据不会显示在URL中，而是在HTTP请求的主体中。POST可以传输大量数据，没有大小限制。
  - 缓存：POST请求不会被缓存，每次提交都会向服务器发送新请求。
  - 历史：POST请求不会保留在浏览器历史记录中。
  - 安全性：由于数据不在URL中显示，POST比GET更安全，适合传输敏感信息。
  - 数据大小：POST请求可以传输大量数据，没有大小限制（尽管实际大小可能受到服务器配置的限制）。
name：表单的名称，可用于在文档中引用表单。
enctype：定义表单提交时使用的编码类型（如application/x-www-form-urlencoded, multipart/form-data等）。

输入字段：<form>元素内部可以包含多种类型的<input>元素，以及其他表单控件，如<select>, <textarea>, <button>等。

输入类型：<input>元素可以有多种类型，每种类型对应不同的输入控件，例如：

text：单行文本框。
password：密码输入框，输入内容会被隐藏。
submit：提交按钮，用于发送表单数据到服务器。
radio：单选按钮。
checkbox：复选框。
file：文件上传控件。
hidden：隐藏输入字段，对用户不可见。
image：图像作为提交按钮。
reset：重置按钮，用于重置表单中的所有字段到默认值。

表单控件：除了<input>元素，表单还可以包含以下控件：

<select>：下拉选择框。
<textarea>：多行文本输入区域。
<fieldset>：将表单中的相关元素分组。
<legend>：为<fieldset>元素提供标题。

表单验证：HTML5引入了表单验证功能，通过属性如required, pattern, min, max等，可以在客户端进行输入验证。

提交表单：用户填写完表单后，可以通过点击提交按钮或使用快捷键（通常是Ctrl+Enter）来提交表单。

服务器处理：表单提交后，数据会被发送到服务器，服务器端脚本（如PHP, Python, Node.js等）可以处理这些数据。

响应：服务器处理完表单数据后，可以向客户端返回响应，这可能是一个确认消息、重定向到另一个页面，或者显示处理结果。

安全性：表单数据在传输过程中应确保安全，可以通过HTTPS协议来加密数据

路径类型:

绝对路径: 指定了从根目录开始的完整路径，可以是本地磁盘路径（如 D:/xxxx）或完整的网络路径（如 https://xxxx）。
相对路径: 相对于当前文件的位置来查找资源，使用 ./ 表示当前目录，../ 表示上级目录。

css样式

CSS引入方式:

行内样式: 使用元素的 style 属性直接在HTML标签内定义样式，如 <h1 style="color: red;">。
内嵌样式: 使用 <style> 标签在HTML文档的 <head> 部分或 <body> 部分定义样式。
外联样式: 通过 <link> 标签引入外部的CSS文件，如 <link href="styles.css" rel="stylesheet">。

颜色表示:
- 关键字: 使用预定义的颜色关键字，如 red、green。
- RGB表示法: 使用 rgb() 函数指定颜色，如 rgb(255, 0, 0) 表示红色。
- 十六进制: 使用 # 后跟六个十六进制数来表示颜色，如 #ff0000 表示红色。
颜色属性:
- color: 用于设置文本内容的颜色，可以与行内样式、内嵌样式或外联样式一起使用。

CSS选择器:

元素选择器: 通过标签名选择元素，如 p { color: red; } 会选择所有的 <p> 标签。
ID选择器: 通过元素的ID属性选择特定的元素，如 #header { font-size: 20px; } 会选择ID为header的元素。
类选择器: 通过元素的类属性选择多个元素，如 .highlight { background-color: yellow; } 会选择所有具有highlight类的元素。
优先级: 在CSS中，ID选择器的优先级高于类选择器，类选择器的优先级高于元素选择器。此外，内联样式（直接在HTML元素上设置的样式）的优先级高于所有其他选择器。

超链接标签 `<a>`:

<a> 标签用于创建指向其他资源的链接。
href属性: href 属性指定了链接资源的URL，是超链接中必须的属性。
target属性指定了点击链接后资源将在哪里打开。
- _self: 默认值，链接在相同的框架或窗口中打开。
- _blank: 链接在新的窗口或标签页中打开。

CSS属性:

text-decoration: 此属性用于设置文本的装饰效果，如下划线、上划线、线删除等。none 值表示文本没有装饰，看起来像普通文本。

CSS盒子模型:

内容（content）: 盒子模型的核心区域，包含元素的实际内容。
内边距（padding）: 内容与边框之间的空间。
边框（border）: 围绕在内边距之外的一条线，可以设置其样式、宽度和颜色。
外边距（margin）: 边框外的区域，用于控制元素与其他元素之间的空间。

CSS属性:

width: 设置元素的宽度。
height: 设置元素的高度。
border: 设置边框的样式、宽度和颜色。例如：border: 1px solid #000; 表示边框宽度为1像素、样式为实线、颜色为黑色。
padding: 设置内边距。可以指定单个值（应用于所有四个边），或指定多个值（按照上、右、下、左的顺序分别应用于各个边）。
margin: 设置外边距。同样可以指定单个值或多个值。

API

navigator

Navigator：appCodeName 属性 - Web API |MDN的 (mozilla.org)

浏览器提供的一个内置JavaScript对象，它包含有关浏览器的信息，主要用于识别客户端浏览器的功能和提供与浏览器交互的方法。

方法/属性	功能描述	注意事项	版本/兼容性
`navigator.geolocation`	访问地理定位API，获取用户位置信息	需用户授权，HTTPS可能为必须	HTML5, 大多数现代浏览器支持
`navigator.userAgent`	获取用户代理字符串，辨识浏览器类型和版本	用于浏览器检测，但易遭伪装	所有浏览器
`navigator.language`	用户首选语言设置	国际化应用重要参考	所有现代浏览器
`navigator.cookieEnabled`	检测浏览器是否支持启用的cookie	网站功能兼容性检查	所有浏览器
`navigator.onLine`	检查用户是否在线（联网状态）	网络依赖功能辅助判断	大多数浏览器
`getCurrentPosition()`	异步获取当前位置信息	需配合`navigator.geolocation`使用，用户授权前提	HTML5
`watchPosition()`	持续监控位置变化	同`getCurrentPosition`，适合实时位置应用	HTML5
`clearWatch()`	停止位置监控	配合`watchPosition`使用，释放资源	HTML5
`navigator.mediaDevices`	访问媒体设备（如摄像头、麦克风）	需用户授权，适用于音视频应用	新版浏览器
`navigator.hardwareConcurrency`	系统CPU核心数（近似）	用于性能评估，非精确值	部分现代浏览器
`navigator.doNotTrack`	用户反追踪偏好	尊重用户隐私设置	部分浏览器支持

地理定位 (navigator.geolocation)

navigator.geolocation.getCurrentPosition(callback, errorCallback, options):
- callback: 当获取地理位置信息成功时调用的函数，该函数接收一个Position对象作为参数，该对象包含当前位置的详细信息。
- errorCallback: (可选) 当获取地理位置信息失败时调用的函数，该函数接收一个PositionError对象作为参数，该对象包含错误代码和错误消息。
- options: (可选) 一个对象，用于设置获取位置信息的选项，如 timeout、maximumAge 和 enableHighAccuracy。
navigator.geolocation.watchPosition(callback, errorCallback, options):
- callback: 当地理位置信息更新时调用的函数，该函数接收一个Position对象作为参数。
- errorCallback: (可选) 当获取地理位置信息失败时调用的函数，该函数接收一个PositionError对象作为参数。
- options: (可选) 一个对象，用于设置获取位置信息的选项。
navigator.geolocation.clearWatch(watchId):
- watchId: 通过调用watchPosition获得的监视器标识符，用于停止位置监视。
用户隐私和权限：地理定位涉及到用户隐私，大多数浏览器在首次使用此功能时会要求用户授权。用户可以选择允许或拒绝，且可以在浏览器设置中随时更改此权限。
安全限制：出于安全考虑，地理定位API只能在HTTPS环境下工作，或者在localhost上进行开发测试。

实例

<script>function getLocation(){if(navigator.geolocation){  <!-- 判断浏览器是否支持定位 -->navigator.geolocation.getCurrentPosition(showPosition);}else{<!-- 不支持 -->}}function showPosition(position){position.coords.latitude; <!-- 纬度 -->position.corrds.longitude; <!-- 经度 -->}</script>

本地存储

LocalStorage:

提供了一个在浏览器中存储数据的方式，数据没有过期时间，会永久保存直到被明确地清除。
通过JavaScript的window.localStorage对象访问。
只能在同源策略下的页面间共享数据。

示例代码：

// 存储数据
localStorage.setItem('username', 'JohnDoe');

// 读取数据
const username = localStorage.getItem('username');

// 删除单个数据项
localStorage.removeItem('username');

// 清除所有数据
localStorage.clear();

SessionStorage:

类似于LocalStorage，但它为每个浏览器标签页或窗口提供了独立的存储空间。
数据在页面会话期间有效，当标签页或窗口关闭时数据会被清除。
通过JavaScript的window.sessionStorage对象访问。
只能在同源策略下的页面间共享数据。

示例代码：

// 存储数据
sessionStorage.setItem('sessionKey', 'sessionValue');
//或 sessionStoragr.sessionKey = 'sessionValue'; 这样也可以
// 读取数据
const sessionValue = sessionStorage.getItem('sessionKey');

// 删除单个数据项
sessionStorage.removeItem('sessionKey');

// 清除所有数据
sessionStorage.clear();

Cookies:

是服务器发送到客户端浏览器的小块数据。
可以设置过期时间，过期后自动删除。
通常用于存储会话信息，如用户认证状态。
可以通过JavaScript的document.cookie属性访问和操作。

示例代码：

// 设置Cookie
document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2024 12:00:00 UTC; path=/";
/*
username=JohnDoe; 键值对
expires: 到期时间
如果没有指定，Cookie将是一个会话Cookie（session cookie），这意味着它只会存在于浏览器的当前会话中，并且在用户关闭浏览器时会被删除。

path:Cookie有效的服务器路径。
路径设置为根目录（/），意味着Cookie在该域下的所有页面上都是可访问的。
*/


// 读取Cookie
const cookies = document.cookie.split('; ');
const username = cookies.find(cookie => cookie.startsWith('username=')).split('=')[1];

// 删除Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=example.com";

IndexedDB:

是一个低等级的API用于客户端存储大量结构化数据。
支持事务处理和索引，适合复杂查询和大量数据。
通过JavaScript的indexedDB对象访问。

示例代码：

// 打开数据库
const request = indexedDB.open('myDatabase', 1);

// 创建对象存储
request.onupgradeneeded = function(e) {const db = e.target.result;if(!db.objectStoreNames.contains('store')) {db.createObjectStore('store', {keyPath: 'id'});}
};

// 进行数据库操作
request.onsuccess = function(e) {const db = e.target.result;// 执行数据库事务等操作
};

HTML5应用程序缓存

HTML5应用程序缓存(Application Cache），简称AppCache，是一种允许Web应用程序存储资源在用户设备上的机制，使得应用程序即使在没有网络连接的情况下也能运行。AppCache是作为浏览器的一部分实现的，它通过一个清单文件（manifest file）来管理这些资源。

以下是HTML5应用程序缓存的关键点：

清单文件 (manifest):
- 这是一个简单的文本文件，列出了浏览器需要缓存的所有资源（如HTML、CSS、JavaScript文件、图片等）。
- 清单文件通过在HTML文档的<head>部分使用<link>标签引用。
示例：
```
<!DOCTYPE html>
<html>
<head><link rel="manifest" href="app.manifest">
</head>
<body>
</body>
</html>
```
资源缓存:
- 当浏览器第一次加载Web应用程序时，它会根据清单文件下载并缓存所有列出的资源。
离线访问:
- 用户在没有网络连接的情况下访问应用程序时，浏览器将从缓存中提供资源，而不是从网络加载。
更新资源:
- 如果清单文件或其引用的资源发生变化，浏览器将自动下载更新的资源，并在下次访问时使用新版本。
状态变化:
- AppCache有几个状态，包括检查（checking）、下载（downloading）、更新完成（update ready）和空闲（idle）。
- 开发者可以通过监听这些状态的变化来提供用户界面反馈。
离线事件:
- 当应用程序切换到离线模式时，window对象会触发一个offline事件。
API:
- AppCache提供了一些API，如applicationCache，允许开发者检查缓存状态和程序性地进行更新。
兼容性和限制:
- AppCache在不同浏览器中的支持程度不同，且存在一些兼容性问题。
- 由于其复杂性和安全问题，AppCache的使用已经不如以前广泛，并且有逐渐被淘汰的趋势。
替代技术:
- 随着Service Workers的引入，它提供了更强大的离线支持和背景同步功能，许多开发者现在更倾向于使用Service Workers来代替AppCache。
清单文件示例:
- 一个典型的清单文件可能如下所示：
```
CACHE MANIFEST
version 1.0
# 版本号，每次更改清单时都应该增加版本号
# 这样浏览器知道何时需要重新下载文件
CACHE:
/theme.css
/logo.gif
/main.js

NETWORK:    # 不被缓存的文件列表 可以用" * "代替全部,CACHE会被覆盖
login.asp

FALLBACK:   # 无法建立因特网连接，则用 "offline.html" 替代 /html/ 目录中的所有文件：
/html/ /offline.html
```
- CACHE 部分：列出了应用程序加载时需要缓存的所有资源。这些资源将在应用程序第一次加载时被下载并存储在本地。
- NETWORK 部分：列出了那些不应被缓存，需要总是从网络获取的资源。如果需要缓存所有其他资源，可以使用通配符 *，但通常如果使用了 *，则不需要列出特定的资源。
- FALLBACK 部分：定义了当资源无法从网络获取时的替代资源。这通常用于提供离线体验，当用户设备没有网络连接时，可以提供一个备用页面或资源。
- 版本控制：CACHE MANIFEST 文件中的版本号和日期信息用于控制缓存的更新。当这些信息发生变化时，浏览器将重新下载清单文件，并根据新的清单更新缓存。