HTML元素基础讲解

大手子唐可可

已于 2024-07-31 16:19:48 修改

阅读量427

点赞数 3

分类专栏： html教程文章标签： html 前端

于 2024-07-31 13:56:03 首次发布

本文链接：https://blog.csdn.net/xiaowei0016/article/details/140821059

版权

3 篇文章 0 订阅

订阅专栏

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

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

例如，一个段落元素：

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

文档结构元素
- <!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>
        <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>
```