【前端基础之HTML(标题标签、段落标签、换行标签、文本格式化标签、盒子标签、图像标签、路径、链接标签、列表标签、表格、表单)】

本文介绍了HTML的基础标签，包括标题、段落、换行、文本格式化、盒子、图像、路径、链接、列表、表格和表单的使用。通过学习这些标签，可以掌握网页的基本构建元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常用标签

标题标签：

<h1>一级标题</h1>
...
<h6>六级标题</h6>

段落标签：

<p>段落</p>

换行标签：

换行<br/>

文本格式化标签：
在这里插入图片描述
盒子标签：

图像标签：

路径：
相对路径

绝对路径：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
链接标签：

<a>标签用于定义超链接，即从一个页面链接到另一个页面。

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
<!--href用于指定链接目标的url地址
target用于指定链接页面的打开方式，_self为默认值,_blank为在新窗口中打开-->

锚点链接：点击链接可以快速定位到页面中的某个位置
在连接文本的href属性中，设置属性值为“#名字”的形式
找到目标位置标签，里面添加一个id属性=刚才的名字
如：

<a href="#two">第2集</a>
<h3 id="two">第2集介绍</h3>

列表标签：在这里插入图片描述
表格基本语法：
表头：<th>.....</th>
表单：

表单标签：
<label>标签用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将焦点转到或者选择对应的元素上：

<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>

<select>表单元素，在页面中，如果有多个选项让用户选择，并且想要节约空间时，可以使用<select>标签控件定义下表：

<select>
<option>选项1</option>
<option>选项2</option>
<option selected="selected">选项3</option> <!--默认选项-->
...
</select>

<textarea>表单元素吧：当用户输入内容较多的情况下，就不能使用文本框表单了，可以使用<textarea>标签，在表单元素中，<textarea>标签是用于定义多行文本输入的控件，常见于留言板、评论。

<textarea rows="3" cols="20">
文本内容
</textarea>
<!--cols="每行中的字符数",rows="显示的行数"-->

小案例：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>世纪佳缘，你在我也在</title>
</head>
<body>
<h4>青春不常在，抓紧谈恋爱</h4>
<table width="500">
   <!--第一行-->
    <tr>
        <td>性别</td>
        <td>
            <input type="radio" name="sex" value="sex" id="nan"><label for="nan">男</label>
            <input type="radio" name="sex" value="sex" id="nv"> <label for="nv">女</label>
        </td>
    </tr>
    <!--第二行-->
    <tr>
        <td>生日</td>
        <td>
            <select>
                <option>--请选择年份--</option>
                <option>1995</option>
                <option>1996</option>
                <option>1997</option>
                <option>1998</option>
                <option>1999</option>
                <option>2000</option>
                <option>2001</option>
                <option>2002</option>
                <option>2003</option>
                <option>2004</option>
                <option>2005</option>
            </select>
            <select>
                <option>--请选择月份--</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
            </select>
            <select>
                <option>--请选择日--</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
            </select>
        </td>
    </tr>
    <!--第三行-->
    <tr>
        <td>所在地区</td>
        <td><input type="text" value="河南"></td>
    </tr>
    <!--第四行-->
    <tr>
        <td>婚姻状况</td>
        <td>
            <input type="radio" name="marry" checked="checked">未婚
            <input type="radio" name="marry">已婚
            <input type="radio" name="marry">离异
        </td>
    </tr>
    <!--第五行-->
    <tr>
        <td>学历</td>
        <td><input type="text" value="学历"></td>
    </tr>
    <!--第六行-->
    <tr>
        <td>喜欢的类型</td>
        <td>
            <input type="checkbox" name="type" id="wu">妩媚的
            <input type="checkbox" name="type" id="ke">可爱的
            <input type="checkbox" name="type" id="xiao">小鲜肉
            <input type="checkbox" name="type" id="lao">老腊肉
            <input type="checkbox" name="type" id="all">都喜欢
        </td>
    </tr>
    <!--第七行-->
    <tr>
        <td>自我介绍</td>
        <td>
            <textarea rows="3" cols="10">自我介绍</textarea>
        </td>
    </tr>
    <!--第八行-->
    <tr>
        <td></td>
        <td><input type="submit" value="免费注册"></td>
    </tr>
    <!--第九行-->
    <tr>
        <td></td>
        <td>
            <input type="checkbox" checked="checked">   我同意注册条款和会员加入标准
        </td>
    </tr>
    <!--第十行-->
    <tr>
        <td></td>
        <td>
            <a href="#">我是会员，立即登录</a>
        </td>
    </tr>
    <!--第十一行-->
    <tr>
        <td></td>
        <td>
            <h5>我承诺</h5>
            <ul>
                <li>年满18岁、单身</li>
                <li>抱着严肃的态度</li>
                <li>真诚寻找另一半</li>
            </ul>
        </td>
    </tr>
</table>
</body>
</html>