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>