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]-->
标签
因为标签太多请访问官方文档
HTML 标签参考手册 - 功能排序 (w3school.com.cn)https://www.w3school.com.cn/tags/html_ref_byfunc.asp
表格标签 <table>
<table>
标签用于定义HTML文档中的表格。
行标签 <tr>
:
-
<tr>
标签定义表格中的行。每个<tr>
元素代表表格中的一行。
表头单元格标签 <th>
:
-
<th>
标签用于表示表格的表头单元格。 -
默认情况下,表头单元格的内容会加粗并居中显示,但这些样式可以通过CSS进行自定义。
普通单元格标签 <td>
:
-
<td>
标签表示表格中的普通单元格。 -
普通单元格中的内容默认不会加粗和居中,样式同样可以通过CSS进行调整。
<from>表单
定义:<form>
元素定义了一个表单,用户可以在表单中输入数据,这些数据可以被提交到服务器。
属性:
-
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 文件中的版本号和日期信息用于控制缓存的更新。当这些信息发生变化时,浏览器将重新下载清单文件,并根据新的清单更新缓存。
-