HTML简介
HTML文档结构
HTML文档的基本结构包括文档类型声明、根元素、头部元素和主体元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
1. <!DOCTYPE html>：文档类型声明
这是HTML5的文档类型声明，告知浏览器使用HTML5标准来解析文档。
2. <html>标签：根元素
所有的HTML内容都应包含在<html>标签内。lang属性定义文档的语言。
3. <head>标签：头部元素
包含页面的元数据，如字符集、页面标题、样式表、脚本等。
<meta charset="UTF-8">：定义文档的字符编码为UTF-8。<meta name="viewport" content="width=device-width, initial-scale=1.0">：确保页面在不同设备上有良好的显示效果。<title>：定义网页标题，显示在浏览器的标签页或窗口标题栏中。<link rel="stylesheet" href="styles.css">：链接到外部样式表。
4. <body>标签：主体元素
包含网页的可见内容，如文本、图像、视频、链接等。
常用HTML标签和属性
标题标签
标题标签用于定义文档的标题，从<h1>到<h6>，依次为六级标题。
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
段落标签
段落使用<p>标签，每个段落会自动在前后添加上下间距。
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
链接标签
超链接使用<a>标签，href属性定义链接目标，可以是网页、文件、电子邮件地址等。
<a href="https://www.example.com">访问示例网站</a>
<a href="mailto:example@example.com">发送邮件</a>
<a href="#section1">跳转到页面内的某个部分</a>
图像标签
图像使用<img>标签，src属性定义图像路径，alt属性提供图像的替代文本。
<img src="image.jpg" alt="描述图像内容">
列表标签
有序列表使用<ol>标签，无序列表使用<ul>标签，列表项使用<li>标签。
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
表格标签
表格使用<table>标签，行使用<tr>标签，表头使用<th>标签，单元格使用<td>标签。
<table border="1">
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</tbody>
</table>
表单标签
表单用于用户输入数据并提交到服务器。<form>标签定义表单，<input>、<textarea>、<button>等标签用于获取用户输入。
<form action="/submit" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<label for="email">电子邮件：</label>
<input type="email" id="email" name="email">
<label for="message">留言：</label>
<textarea id="message" name="message"></textarea>
<button type="submit">提交</button>
</form>
HTML属性
HTML标签可以包含属性，用于提供额外的信息。常见属性包括：
id：元素的唯一标识符，用于JavaScript或CSS选择。class：元素的类名，可用于CSS样式和JavaScript选择。style：内联样式，定义元素的具体样式。src：资源路径（如图像、脚本）。href：链接目标。alt：替代文本（用于图像）。
<p id="uniqueID" class="text-class" style="color: blue;">这是一个段落。</p>
<a href="https://www.example.com" target="_blank">访问示例网站</a>
<img src="image.jpg" alt="描述图像内容">
HTML语义化标签
语义化标签提供更明确的内容定义，使页面结构更清晰，利于搜索引擎优化和无障碍访问。
<header>：定义文档或部分的头部。<nav>：定义导航链接部分。<section>：定义文档的一个区域或节。<article>：定义独立的内容块。<aside>：定义内容之外的部分，通常用于侧边栏。<footer>：定义文档或部分的尾部。
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
</section>
<aside>
<p>侧边栏内容...</p>
</aside>
<footer>
<p>页脚内容...</p>
</footer>
高级HTML特性
多媒体元素
HTML5引入了许多新元素来处理多媒体内容，如音频和视频。
<video controls>
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持视频标签。
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
您的浏览器不支持音频标签。
</audio>
内联框架
内联框架（<iframe>）用于在网页中嵌入其他HTML页面。
<iframe src="https://www.example.com" width="600" height="400"></iframe>
表单增强
HTML5增加了一些新的表单输入类型，如email、url、number、range等，以及属性placeholder、required等来增强用户体验。
<form action="/submit" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" placeholder="请输入姓名" required>
<label for="email">电子邮件：</label>
<input type="email" id="email" name="email" placeholder="请输入电子邮件" required>
<label for="website">个人网站：</label>
<input type="url" id="website" name="website" placeholder="请输入网站URL">
<label for="age">年龄：</label>
<input type="number" id="age" name="age" min="1" max="100">
<label for="range">满意度：</label>
<input type="range" id="range" name="range" min="0" max="10">
<button type="submit">提交</button>
</form>
使用CSS和JavaScript
HTML本身主要用于内容的结构化，通过CSS（层叠样式表）和JavaScript可以实现页面的样式和交互功能。
CSS示例
CSS用于设置HTML元素的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS示例</title>
<link
rel="stylesheet" href="styles.css">
<style>
body {
font-family: Arial, sans-serif;
}
.header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 1em;
}
.content {
padding: 2em;
}
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
position: fixed;
width: 100%;
bottom: 0;
}
</style>
</head>
<body>
<div class="header">网站头部</div>
<div class="content">这是内容部分。</div>
<div class="footer">网站尾部</div>
</body>
</html>
JavaScript示例
JavaScript用于添加交互功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript示例</title>
<script>
function showAlert() {
alert('按钮被点击了！');
}
</script>
</head>
<body>
<button onclick="showAlert()">点击我</button>
</body>
</html>
