HTML基础介绍
HTML（HyperText Markup Language）是用于创建网页的标准标记语言。HTML描述了网页的结构，由一系列元素组成，这些元素告诉浏览器如何显示内容。
HTML文档结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>HTML标签
HTML标签通常成对出现，如 <p> 和 </p>。开始标签包含元素名称，结束标签包含元素名称前加斜杠。
有些HTML标签是自闭合的，不需要结束标签，如 <br>、<img>、<input> 等。
HTML属性
HTML属性提供了关于HTML元素的额外信息，它们总是在开始标签中指定。属性通常以名称/值对的形式出现，如 name="value"。
<a href="https://www.example.com" target="_blank">访问示例网站</a>
<img src="image.jpg" alt="描述性文本" width="300" height="200">全局属性：可以在任何HTML元素上使用的属性，如 id、class、style、title 等。
局部属性：只能在特定元素上使用的属性，如 href 只能在 <a> 元素上使用，src 只能在 <img> 元素上使用。
HTML注释
HTML注释用于在代码中添加注释，这些注释不会在浏览器中显示，但对于代码的可读性和维护非常重要。
<!-- 这是一个HTML注释 -->
<p>这是一个段落。</p>
<!--
这是一个多行注释
可以跨越多行
-->HTML实体
HTML实体用于显示特殊字符，如小于号（<）、大于号（>）、引号（"）等，这些字符在HTML中有特殊含义。
<p>5 < 10</p>
<p>10 > 5</p>
<p>He said, "Hello!"</p> 常用的HTML实体：
- < - 小于号（<）
- > - 大于号（>）
- & - 和号（&）
- " - 双引号（"）
- ' - 单引号（'）
- - 非-breaking空格
文本格式化
HTML提供了多种标签来格式化文本：
| 标签 | 描述 |
|---|---|
| <b> | 粗体文本 |
| <i> | 斜体文本 |
| <u> | 下划线文本 |
| <strong> | 强调文本（通常显示为粗体） |
| <em> | 强调文本（通常显示为斜体） |
| <small> | 小号文本 |
| <mark> | 标记文本 |
| <del> | 删除线文本 |
| <ins> | 插入线文本 |
链接和图像
链接
使用 <a> 标签创建链接：
<a href="https://www.example.com">访问示例网站</a>图像
使用 <img> 标签插入图像：
<img src="image.jpg" alt="描述性文本" width="300" height="200">列表和表格
列表
HTML支持三种类型的列表：
- 无序列表（ul）：使用项目符号标记
- 有序列表（ol）：使用数字标记
- 定义列表（dl）：包含术语和定义
<!-- 无序列表 -->
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>表格
使用 <table> 标签创建表格：
<table border="1">
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>表单和输入
HTML表单用于收集用户输入。表单元素包括输入字段、复选框、单选按钮、提交按钮等。
基本表单结构
<form action="/submit" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email">
<br>
<input type="submit" value="提交">
</form>常用输入类型
| 类型 | 描述 |
|---|---|
| text | 文本输入框 |
| password | 密码输入框 |
| 电子邮件输入框 | |
| number | 数字输入框 |
| date | 日期选择器 |
| checkbox | 复选框 |
| radio | 单选按钮 |
| file | 文件上传 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| button | 普通按钮 |
高级表单元素
HTML5引入了许多高级表单元素，使表单功能更加强大和用户友好。
<!-- 数据列表 -->
<label for="browser">选择浏览器：</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist>
<!-- 输出元素 -->
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">
+ <input type="number" id="b" value="50">
= <output name="result" for="a b">100</output>
</form>
<!-- 进度条 -->
<progress value="70" max="100">70%</progress>
<!-- 度量衡 -->
<meter value="0.6" min="0" max="1" low="0.2" high="0.8" optimum="0.5">60%</meter>HTML表单验证
HTML5提供了内置的表单验证功能，可以在客户端验证用户输入，减少服务器端验证的负担。
<form action="/submit" method="post">
<!-- 必填字段 -->
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<br>
<!-- 电子邮件验证 -->
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<br>
<!-- 数字范围验证 -->
<label for="age">年龄：</label>
<input type="number" id="age" name="age" min="18" max="100" required>
<br>
<!-- 模式验证（正则表达式） -->
<label for="phone">电话：</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="XXX-XXX-XXXX" required>
<br>
<!-- 长度验证 -->
<label for="password">密码：</label>
<input type="password" id="password" name="password" minlength="8" maxlength="20" required>
<br>
<input type="submit" value="提交">
</form>验证属性：
required：字段必填min/max：数字或日期的最小值/最大值minlength/maxlength：文本长度的最小值/最大值pattern：使用正则表达式验证输入type：输入类型验证（如email、url等）
HTML与CSS、JavaScript的交互
HTML是网页的结构，CSS是样式，JavaScript是行为，三者结合才能创建功能完整的现代网页。
HTML与CSS的交互
CSS通过选择器选中HTML元素并应用样式。
<!-- 内联样式 -->
<p style="color: red; font-size: 18px;">这是一个红色的段落。</p>
<!-- 内部样式表 -->
<style>
.blue-text {
color: blue;
font-weight: bold;
}
</style>
<p class="blue-text">这是一个蓝色的段落。</p>
<!-- 外部样式表 -->
<link rel="stylesheet" href="style.css">HTML与JavaScript的交互
JavaScript可以操作HTML元素，改变其内容、样式和行为。
<!-- 内联脚本 -->
<button onclick="alert('Hello World!')">点击我</button>
<!-- 内部脚本 -->
<script>
function changeText() {
document.getElementById('demo').innerHTML = '文本已更改！';
}
</script>
<p id="demo">原始文本</p>
<button onclick="changeText()">更改文本</button>
<!-- 外部脚本 -->
<script src="script.js"></script>DOM操作
DOM（文档对象模型）是HTML和XML文档的编程接口，JavaScript通过DOM操作HTML元素。
<script>
// 获取元素
var element = document.getElementById('myElement');
var elements = document.getElementsByClassName('myClass');
var elements = document.getElementsByTagName('p');
var element = document.querySelector('.mySelector');
var elements = document.querySelectorAll('.mySelector');
// 修改元素内容
element.innerHTML = '新内容';
// 修改元素属性
element.setAttribute('class', 'newClass');
// 修改元素样式
element.style.color = 'red';
element.style.fontSize = '16px';
// 添加/删除元素
var newElement = document.createElement('div');
newElement.innerHTML = '新元素';
document.body.appendChild(newElement);
// 添加事件监听器
element.addEventListener('click', function() {
alert('元素被点击！');
});
</script>语义化标签
HTML5引入了一系列语义化标签，这些标签描述了其包含内容的类型，有助于提高代码的可读性和SEO。
常用语义化标签
| 标签 | 描述 |
|---|---|
| <header> | 页面或区块的头部 |
| <nav> | 导航链接区域 |
| <main> | 页面的主要内容 |
| <section> | 文档中的区块 |
| <article> | 独立的内容区块 |
| <aside> | 侧边栏或附加内容 |
| <footer> | 页面或区块的底部 |
| <figure> | 独立的媒体内容 |
| <figcaption> | 媒体内容的标题 |
| <mark> | 标记的文本 |
| <time> | 日期或时间 |
多媒体元素
HTML5提供了内置的多媒体元素，用于在网页中嵌入音频和视频。
音频元素
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
您的浏览器不支持音频元素。
</audio>视频元素
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
您的浏览器不支持视频元素。
</video>内联框架
使用 <iframe> 标签可以在当前网页中嵌入另一个网页。
基本语法
<iframe src="https://www.example.com" width="600" height="400" title="示例网站"></iframe>常用属性
- src：要嵌入的网页URL
- width：框架宽度
- height：框架高度
- title：框架标题（无障碍访问）
- frameborder：是否显示边框（0为不显示）
- allowfullscreen：是否允许全屏
元数据和SEO
元数据是描述其他数据的数据，在HTML中使用 <meta> 标签定义。元数据对于SEO（搜索引擎优化）非常重要。
常用元标签
<!-- 字符集 -->
<meta charset="UTF-8">
<!-- 视口设置（响应式设计） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 页面描述（SEO） -->
<meta name="description" content="这是一个HTML教程网站">
<!-- 关键词（SEO） -->
<meta name="keywords" content="HTML,教程,学习">
<!-- 作者 -->
<meta name="author" content="作者名称">
<!-- 刷新页面 -->
<meta http-equiv="refresh" content="30">HTML5新特性
HTML5引入了许多新特性，使网页开发更加丰富和强大。
主要新特性
- 语义化标签（如header、nav、main、section等）
- 多媒体元素（audio、video）
- Canvas绘图
- SVG矢量图形
- 表单增强（新的输入类型和属性）
- Web存储（localStorage、sessionStorage）
- 地理定位
- 拖放功能
- Web Workers
- 服务器发送事件
- WebSocket
Canvas和SVG
HTML5提供了两种绘图技术：Canvas和SVG。
Canvas
Canvas使用JavaScript在网页上绘制图形，适合像素级操作和动画。
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>SVG
SVG是一种基于XML的矢量图形格式，适合图形和图表。
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>Web存储
HTML5提供了两种在客户端存储数据的方式：localStorage和sessionStorage。
localStorage
localStorage用于长期存储数据，数据不会过期，直到被手动删除。
<script>
// 存储数据
localStorage.setItem("username", "张三");
// 读取数据
var user = localStorage.getItem("username");
// 删除数据
localStorage.removeItem("username");
// 清空所有数据
localStorage.clear();
</script>sessionStorage
sessionStorage用于存储会话期间的数据，当浏览器关闭时数据会被删除。
<script>
// 存储数据
sessionStorage.setItem("username", "李四");
// 读取数据
var user = sessionStorage.getItem("username");
// 删除数据
sessionStorage.removeItem("username");
// 清空所有数据
sessionStorage.clear();
</script>地理定位
HTML5的地理定位API允许网页获取用户的地理位置信息（需要用户授权）。
<script>
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("您的浏览器不支持地理定位");
}
function showPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert("纬度: " + latitude + "，经度: " + longitude);
}
</script>拖放功能
HTML5提供了原生的拖放API，使元素可以被拖动和放置。
<!-- 可拖动的元素 -->
<div draggable="true" ondragstart="drag(event)" id="drag1">拖动我</div>
<!-- 放置区域 -->
<div ondrop="drop(event)" ondragover="allowDrop(event)" id="drop1">放置到这里</div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>Web Workers
Web Workers允许在后台线程中运行JavaScript，避免阻塞主线程。
<!-- 主线程 -->
<script>
var worker = new Worker("worker.js");
// 发送消息给Worker
worker.postMessage("Hello Worker");
// 接收Worker的消息
worker.onmessage = function(event) {
console.log("收到Worker的消息: " + event.data);
};
</script>
<!-- worker.js -->
<script>
// 接收主线程的消息
onmessage = function(event) {
console.log("收到主线程的消息: " + event.data);
// 发送消息给主线程
postMessage("Hello Main Thread");
};
</script>服务器发送事件
服务器发送事件（SSE）允许服务器向客户端推送数据，而不需要客户端频繁请求。
<!-- 客户端 -->
<script>
var source = new EventSource("server.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
</script>
<div id="result"></div>WebSocket
WebSocket提供了一种在单个TCP连接上进行全双工通信的协议，允许服务器和客户端之间实时交换数据。
基本用法
<script>
// 创建WebSocket连接
var ws = new WebSocket("ws://echo.websocket.org");
// 连接打开时
ws.onopen = function() {
console.log("WebSocket连接已打开");
// 发送消息
ws.send("Hello WebSocket!");
};
// 接收消息时
ws.onmessage = function(event) {
console.log("收到消息: " + event.data);
};
// 连接关闭时
ws.onclose = function() {
console.log("WebSocket连接已关闭");
};
// 发生错误时
ws.onerror = function(error) {
console.error("WebSocket错误: " + error);
};
</script>WebSocket与HTTP的区别
- WebSocket是全双工的，HTTP是半双工的
- WebSocket连接一旦建立，服务器和客户端可以随时发送数据
- WebSocket使用单一TCP连接，减少了连接开销
- WebSocket支持实时通信，适合聊天应用、游戏等
Web Components
Web Components是一套允许开发者创建可重用自定义元素的API，这些元素可以在HTML中像原生元素一样使用。
基本概念
- Custom Elements：允许定义自定义HTML元素
- Shadow DOM：允许将封装的样式和结构附加到元素上
- HTML Templates：允许定义可重用的HTML片段
- HTML Imports：允许导入HTML文档（已被ES模块取代）
创建自定义元素
<script>
// 定义自定义元素
class MyElement extends HTMLElement {
constructor() {
super();
// 创建shadow DOM
const shadow = this.attachShadow({mode: 'open'});
// 创建元素
const div = document.createElement('div');
div.textContent = '这是一个自定义元素';
// 创建样式
const style = document.createElement('style');
style.textContent = `
div {
color: blue;
font-size: 18px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
`;
// 将元素添加到shadow DOM
shadow.appendChild(style);
shadow.appendChild(div);
}
}
// 注册自定义元素
customElements.define('my-element', MyElement);
</script>
<!-- 使用自定义元素 -->
<my-element></my-element>HTML Accessibility（无障碍）
HTML无障碍是指创建对所有人（包括残障人士）都可访问的网页，无论他们使用什么设备或技术。
无障碍最佳实践
- 使用语义化标签：正确使用header、nav、main、section、article、footer等语义化标签
- 提供替代文本：为图片添加alt属性，为视频提供字幕
- 使用ARIA属性：为复杂组件添加适当的ARIA角色和属性
- 确保键盘可访问性：所有功能都可以通过键盘操作
- 提供足够的颜色对比度：确保文本与背景的对比度足够高
- 使用清晰的导航结构：提供一致的导航体验
- 添加跳过导航链接：允许用户直接跳转到主要内容
ARIA属性示例
<!-- 导航菜单 -->
<nav aria-label="主导航">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<!-- 警告框 -->
<div role="alert" aria-live="polite">
您有一条新消息
</div>
<!-- 进度条 -->
<div role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
70%
</div>