HTML,即超文本标记语言,是构建网页的基础。了解和掌握HTML标签和属性对于网页开发至关重要。以下是一个快速掌握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>
<!-- 网页内容 -->
</body>
</html>
<html> 标签
- 用于定义整个HTML文档的根元素。
<head> 标签
- 包含关于文档的元信息,如字符编码、viewport、文档标题等。
<title> 标签
- 定义文档的标题,显示在浏览器标签页上。
<body> 标签
- 包含可见的页面内容。
文本内容
<h1> 到 <h6> 标签
- 用于定义标题,
<h1>为最高级别,<h6>为最低级别。
<p> 标签
- 定义段落。
<a> 标签
- 用于创建链接,属性
href指定链接的URL。
<a href="http://www.example.com" title="链接文本">点击这里</a>
<br> 标签
- 用于换行。
<strong> 和 <em> 标签
<strong>用于强调内容(加粗),<em>用于强调内容(斜体)。
分区和节
<div> 标签
- 用于页面内容的一个区域。
<section> 标签
- 用于定义文档中的一个章节。
<article> 标签
- 用于代表页面中的一个独立内容区块,如一篇文章。
<nav> 标签
- 用于定义导航链接。
图像和多媒体
<img> 标签
- 用于在网页中嵌入图像,属性
src指定图像的URL。
<img src="image.jpg" alt="替代文本">
<audio> 和 <video> 标签
- 分别用于嵌入音频和视频。
<audio src="audio.mp3" controls></audio>
<video src="video.mp4" controls></video>
表格和列表
<table>、<tr>、<td> 标签
<table>:创建表格。<tr>:定义表格行。<td>:定义表格单元格。
<table>
<tr>
<td>单元格内容1</td>
<td>单元格内容2</td>
</tr>
</table>
<ul>、<ol>、<li> 标签
<ul>:创建无序列表。<ol>:创建有序列表。<li>:定义列表项。
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
表单
<form> 标签
- 创建一个表单。
<form action="submit.php" method="post">
<!-- 表单内容 -->
</form>
<input>、<button>、<label> 标签
<input>:用于输入字段。<button>:创建一个按钮。<label>:定义输入字段的标签。
<input type="text" name="username" placeholder="用户名">
<button type="submit">提交</button>
<label for="username">用户名:</label>
属性速查
以下是一些常见的HTML属性:
class:用于添加CSS样式。id:为元素分配唯一的标识符。style:用于添加内联CSS样式。alt:图像的替代文本。type:定义输入字段的类型(如text、email、password等)。name:元素的名称,常用于表单提交。
通过这个速查表,你将能够快速了解HTML中常见元素和属性的基本用法。记住,实践是学习的关键,不断练习和尝试,你会越来越熟练地构建网页。祝你网页开发之旅顺利!
