HTML 基础知识
HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。它通过标签(tags)定义网页的结构和内容,如文本、图片、链接等。HTML 文档由一系列嵌套的标签组成,浏览器解析这些标签并渲染成可视化的网页。
基本结构
一个典型的 HTML 文档结构如下:
html
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- 网页内容 -->
</body>
</html>
<!DOCTYPE html>声明文档类型为 HTML5。<html>是根元素,包含整个网页内容。<head>包含元数据,如标题、字符集、视口设置等。<body>包含网页的可见内容。
常用标签
-
文本标签:
<h1>到<h6>:标题标签,数字越小字号越大。<p>:段落标签。<a>:超链接标签,通过href属性指定链接地址。<strong>和<em>:分别表示加粗和斜体文本。
-
列表标签:
<ul>:无序列表。<ol>:有序列表。<li>:列表项。
-
多媒体标签:
<img>:图片标签,通过src属性指定图片路径。<audio>和<video>:分别用于嵌入音频和视频。
-
表单标签:
<form>:表单容器。<input>:输入框,类型由type属性指定(如text、password、submit等)。<textarea>:多行文本输入框。<button>:按钮。
语义化标签
HTML5 引入了语义化标签,使代码更易读且对搜索引擎更友好:
<header>:页眉或区块标题。<nav>:导航栏。<section>:文档的独立区块。<article>:独立的内容块(如文章)。<footer>:页脚或区块结尾。
属性
HTML 标签可以通过属性提供额外信息或功能。常见属性包括:
id:唯一标识符。class:为元素指定一个或多个类名。style:内联 CSS 样式。src和href:分别指定资源路径和超链接地址。
注释
HTML 注释用于添加说明或临时禁用代码:
html
<!-- 这是注释内容 -->
示例代码
以下是一个简单的 HTML 页面示例:
html
<!DOCTYPE html>
<html>
<head>
<title>示例页面</title>
</head>
<body>
<header>
<h1>欢迎来到我的网站</h1>
</header>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
</ul>
</nav>
<section>
<p>这是一个示例段落。</p>
</section>
</body>
</html>
注意事项
- 确保标签正确嵌套和闭合。
- 使用语义化标签提升可读性和 SEO 效果。
- 避免过度依赖内联样式,推荐使用外部 CSS 文件。