编程技术

Document

HTML元素详解

  1. HTML基本结构元素

    • <html>：这是HTML文档的根元素，所有其他HTML元素都必须包含在<html>标签内部。它告诉浏览器这是一个HTML文档。一个典型的HTML文档通常有以下结构：
    <html>
    <head>...</head>
    <body>...</body>
</html>
    • <head>：这个元素包含了文档的元数据，如文档标题、样式表引用、脚本引用等。例如，<title>元素用于定义网页的标题，这个标题会显示在浏览器的标题栏中。
    <head>
    <title>我的网页</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>
    • <body>：它包含了网页中所有可见的内容，如文本、图像、链接、表单等。这是用户在浏览器中实际看到的部分。

  2. 文本相关元素

    • <p>（段落）：用于定义段落。浏览器会自动在段落之间添加一些垂直间距。例如：
    <p>这是第一段文字。</p>
<p>这是第二段文字。</p>
    • <h1> - <h6>（标题）：用于定义不同级别的标题，<h1>是最高级别，<h6>是最低级别。标题通常用于划分文档的结构，并且在搜索引擎优化（SEO）中也很重要。例如：
    <h1>主标题</h1>
<h2>副标题1</h2>
<h3>副标题1.1</h3>
    • <span>和<div>：<span>是一个内联元素，通常用于对一小段文本或内联元素进行样式设置或脚本操作。<div>是一个块级元素，用于划分页面的区域，通常用于布局。例如：
    <div style="background - color: lightgray;">
    <p>这是一个在<div>元素中的段落。</p>
    <span style="color: red;">这是一个红色的<span>元素。</span>
</div>

  3. 链接相关元素

    • <a>（锚点/链接）：用于创建超链接，可以链接到其他网页、同一网页的其他部分、文件下载等。例如，链接到外部网页：
    <a href="https://www.example.com">访问示例网站</a>
    • 链接到同一网页的其他部分（通过设置id属性）：
    <a href="#section - 2">跳转到第二部分</a>
<h2 id="section - 2">第二部分内容</h2>

  4. 图像相关元素

    • <img>：用于在网页中插入图像。它有一些重要的属性，如src（指定图像的源文件路径）、alt（当图像无法显示时的替代文本，对于无障碍访问很重要）。例如：
    <img src="image.jpg" alt="这是一张美丽的风景图">

  5. 列表相关元素

    • <ul>（无序列表）和<ol>（有序列表）：<ul>用于创建无顺序要求的项目列表，通常会用项目符号（如圆点）来显示项目。<ol>用于创建有顺序要求的项目列表，会自动添加序号。它们都包含<li>（列表项）元素。例如：
    • 无序列表：
    <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>
    • 有序列表：
    <ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

  6. 表格相关元素

    • <table>（表格）、<tr>（行）、<td>（单元格）和<th>（表头单元格）：用于创建表格。例如：
    <table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
    </tr>
</table>

  7. 表单相关元素

    • <form>（表单）：用于创建一个表单，用于用户输入数据并提交给服务器。它可以包含各种表单控件，如<input>、<textarea>、<select>等。例如：
    <form action="submit.php" method="post">
    <input type="text" name="username" placeholder="请输入用户名">
    <input type="password" name="password" placeholder="请输入密码">
    <input type="submit" value="提交">
</form>
    • <input>：这是一个非常灵活的表单元素，可以根据type属性创建不同类型的输入框，如文本框（type="text"）、密码框（type="password"）、单选按钮（type="radio"）、复选框（type="checkbox"）等。
    • <textarea>：用于创建一个多行文本输入区域，例如用于用户输入评论等。
    • <select>和<option>：用于创建下拉菜单，<select>定义下拉菜单，<option>定义菜单中的选项。例如：
    <select name="city">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="广州">广州</option>
</select>