html基本元素
HTML 基础概念
HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。它通过标签(如 <p>
、<div>
)定义网页的结构和内容,浏览器通过解析HTML标签渲染页面。
核心标签与结构
一个基本的HTML文档结构如下:
<!DOCTYPE html>
<html>
<head><title>页面标题</title>
</head>
<body><h1>主标题</h1><p>段落内容</p>
</body>
</html>
<!DOCTYPE html>
声明文档类型为HTML5。<html>
是根元素,包含整个页面内容。<head>
存放元数据(如标题、CSS链接)。<body>
包含可见的页面内容(文本、图片等)。
常用标签示例
-
文本标签:
<h1>
到<h6>
定义标题层级。<p>
定义段落。<a href="url">链接</a>
创建超链接。
-
多媒体标签:
<img src="image.jpg" alt="描述">
插入图片。<video>
和<audio>
嵌入视频或音频。
-
布局标签:
<div>
块级容器,用于分组内容。<span>
行内容器,用于样式化部分文本。
表单与交互
表单通过 <form>
标签实现用户输入:
<form action="/submit" method="post"><input type="text" name="username" placeholder="用户名"> <input type="password" name="password"> <button type="submit">提交</button>
</form>
action
指定表单数据提交的URL。method
定义HTTP请求方法(GET/POST)。input
类型包括文本、密码、复选框等。
HTML5 新特性
- 语义化标签:
<header>
、<footer>
、<article>
等提升代码可读性。 - 本地存储:
localStorage
和sessionStorage
实现客户端数据存储。 - Canvas 与 SVG:
支持动态图形绘制和矢量图渲染。
验证与调试
- 使用 W3C Validator 检查HTML语法错误。
- 浏览器开发者工具(F12)可实时调试页面元素。
学习资源推荐
- 官方文档:MDN Web Docs 的 HTML 指南。
- 实践平台:CodePen 或 JSFiddle 在线编辑HTML代码。