HTML元素基础讲解常用html元素归纳总结

myzbx 2024-12-22 19:44 35 浏览

HTML元素的基本结构

HTML元素通常由开始标签、内容和结束标签组成。基本结构如下：

<标签名>内容</标签名>

例如，一个段落元素：

<p>这是一个段落。</p>

常见的HTML元素

文档结构元素

<!DOCTYPE html>: 声明文档类型，告知浏览器使用HTML5标准。
<html>: 根元素，包含整个HTML文档。
<head>: 包含文档的元数据（如标题、样式、脚本等）。
<title>: 定义文档的标题，显示在浏览器标签上。
<body>: 包含网页的可见内容。
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
</body>
</html>

文本内容元素

<h1>至<h6>: 标题元素，<h1>为最高级别，<h6>为最低级别。
<p>: 段落元素，用于定义文本段落。
<br>: 换行元素，不需要结束标签。
<hr>: 水平线元素，用于分隔内容。
<h1>这是主标题</h1>
<p>这是一个段落。</p>
<br>
<hr>

列表元素

<ul>: 无序列表，使用圆点标记。
<ol>: 有序列表，使用数字标记。
<li>: 列表项，必须在<ul>或<ol>内使用。
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>

链接和图像元素

<a>: 超链接元素，使用href属性指定链接地址。
<img>: 图像元素，使用src属性指定图像路径，alt属性提供替代文本。
<a href="https://www.example.com">访问示例网站</a>
<img src="image.jpg" alt="示例图像">
?

表格元素

<table>: 表格元素。
<tr>: 表格行元素。
<td>: 表格单元格元素。
<th>: 表头单元格元素。
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</table>

表单元素

<form>: 表单元素，用于收集用户输入。
<input>: 输入元素，类型通过type属性指定（如text, password, submit等）。
<label>: 标签元素，关联输入元素。
<textarea>: 多行文本输入元素。
<form action="/submit" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<input type="submit" value="提交">
</form>

HTML 表单属性

上一篇：HTML表单search、tel和color高级元素的使用
下一篇：HTML序章(学习目的、对象、基本概念)——零基础自学网页制作

HTML元素基础讲解常用html元素归纳总结

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

comfyui安装MimicMotion扩展，AI跳舞动作模仿

HTML元素基础讲解 常用html元素归纳总结

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

comfyui安装MimicMotion扩展，AI跳舞动作模仿

HTML元素基础讲解常用html元素归纳总结