HTML基础（3）

S0NeT

已于 2024-07-14 21:30:58 修改

阅读量1.6k

点赞数 32

分类专栏： HTML 前端网路安全基础入门文章标签： html 前端

于 2024-07-12 19:55:53 首次发布

本文链接：https://blog.csdn.net/qq_52957703/article/details/140360956

版权

网路安全基础入门同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

前端

8 篇文章 0 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

10.列表

定义：布局内容排列整齐的区域。

分类：无序列表，有序列表，定义列表

1.无序列表：

ul是无序列表，li是列表条目，ul嵌套li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>列表条目1</li>
        <li>列表条目2</li>
        <li>列表条目3</li>
    </ul>
</body>
</html>

注：ul标签里只能包裹li标签，li标签里可以写任何东西

2.有序列表

ol嵌套li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 有序类别 -->
    <ol>
        <li>首先</li>
        <li>其次</li>
        <li>最后</li>
    </ol>
</body>
</html>

注：同样ol标签里只能包裹li标签，li标签里可以写任何东西

3.定义列表

dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述或者详情

具体看代码理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  
    <!-- 定义列表 -->
     <dl>
        <dt>标题1</dt>
        <dd>小标题1</dd>
        <dd>小标题2</dd>
        <dt>标题2</dt>
        <dd>小标题3</dd>
        <dd>小标题4</dd>
     </dl>

</body>
</html>

可能现在看起来很奇怪，但是后边学习css后就能达到以下效果：

11.表格

1.基本标签

table嵌套tr，tr嵌套td或者th

table是表格，tr是行，th是表头单元格，td是内容单元格

注：可使用border属性添加边框

直接看代码理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>专业</th>
        </tr>
        <tr>
            <td>sonet</td>
            <td>男</td>
            <td>18</td>
            <td>网络安全</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>男</td>
            <td>20</td>
            <td>计算机科学技术</td>
        </tr>
        <tr>
            <td>小美</td>
            <td>女</td>
            <td>18</td>
            <td>电子信息技术</td>
        </tr>
    </table>
</body>
</html>

2.结构标签(了解）

实际使用中通常省略！！

作用：用表格结构标签把内容划分区域，让表格结构更清晰，词义更清晰（对前端而言的，人眼看不出）。

thead：表格头部，表格头部内容

tbody：表格主体，主要内容区域

tfoot：表格底部，汇总信息区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <thead>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>sonet</td>
            <td>10</td>
            <td>12</td>
            <td>12</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>100</td>
            <td>97</td>
            <td>100</td>
       
        <tr>
            <td>小美</td>
            <td>98</td>
            <td>99</td>
            <td>100</td>
        </tr>
        </tbody>
        
        <tfoot>
        <tr>
            <td>最高分</td>
            <td>100</td>
            <td>99</td>
            <td>100</td>
        </tr>
        </tfoot>
    </table>
</body>
</html>

3.合并单元格

作用：顾名思义，来合并单元格。

操作内容：首先要保留最左（跨列合并）或者最上（跨行合并）的单元格，然后添加属性colspan（跨列合并）或者rowspan（跨行合并）。

注：colspan或者rowspan后参数写合并单元格个数。

看代码理解：

跨行合并（roespan）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>100</td>
            <td>97</td>
            <td rowspan="2">100</td>
        <tr>
            <td>小美</td>
            <td>98</td>
            <td>99</td>
            <!-- <td>100</td> -->
        </tr>
        <tr>
            <td>最高分</td>
            <td>100</td>
            <td>99</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>

跨列合并（colspan）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>100</td>
            <td>97</td>
            <td >100</td>
        <tr>
            <td>小美</td>
            <td>98</td>
            <td>99</td>
            <td>100</td>
        </tr>
        <tr>
            <td>班级总分</td>
            <td colspan="3">594</td>
            <!-- <td>99</td>
            <td>100</td> -->
        </tr>
    </table>
</body>
</html>

12.表单

1.input基本使用

类似于登录、注册或者搜索等都是表单

作用：收集信息

通过input标签加type属性来实现各种表单

type属性值：text 文本框

password 密码框

radio 单选框

checkbox 多选框

file 上传文件

等等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    文本框<input type="text">
    <br>
    密码框<input type="password">
    <br>
    单选框<input type="radio">
    <br>
    多选框<input type="checkbox">
    <br>
    文件<input type="file">
</body>
</html>

2.input占位文本

placegolder属性

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    文本框<input type="text" placeholder="请输入文字">
  
</body>
</html>

3.单选框radio

属性：name 控件分组，同组只能选一个（单选）

checked 默认选中

例如，男女只能选一个，且默认选中男

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    性别：
    <input type="radio" name="gender" checked>男
    <input type="radio" name="gender">女
</body>
</html>

4.上传文件file

添加mutiple属性可实现多文件上传

    <input type="file" multiple>

5.多选框checkbox

默认选中checked属性

 <input type="checkbox" checked>

6.下拉菜单select

selet嵌套option，select是下拉菜单，option是里边的选项

看代码，其他属性是和后台交互的暂时不用管，selected属性是默认选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    城市：
    <select name="" id="">
        <option value="" selected>北京</option>
        <option value="">上海</option>
        <option value="">广州</option>
        <option value="">天津</option>
    </select>
</body>
</html>

7.文本域textarea

 <textarea name="" id="">请输入文字</textarea>

8.lable标签

作用：label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（增大表单控件的点击范围）。

两种写法，代码体会

第一种写法，这时候第一个“男”，点击文字也能被选中。（注意id相同即可联动）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="radio" name="gender" id="1"><label for="1">男</label>
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
</body>
</html>

第二种写法，直接包裹住，下边“女”就是这种写法，效果和第一种一样，点击文字也可选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="radio" name="gender" id="1"><label for="1">男</label>
    <input type="radio" name="gender">男
    <label><input type="radio" name="gender">女</label>
</body>
</html>

注：除了radio，其他表单控件也都能使用label哦^-^

9.按钮button

type加属性，submit提交按钮，点击后可以提交数据到后台（省略type，功能也是提交）。reset重置按钮，点击后表单控件恢复默认值。button普通按钮，无功能，一般配合JavaScript使用。

注：<form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息（form的action属性加发送表单的地址）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <form action="">
        <button type="submit">按钮</button>
        <button type="reset">按钮</button>
        <button type="button">按钮</button>
    </form>
</body>
</html>

13.无语义布局标签

div和span，顾名思义其没有语义，只是负责划分区域，摆放内容。

div独占一行俗称大盒子，span不换行俗称小盒子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>div</div>
    <div>div</div>
    <span>span</span>
    <span>span</span>
</body>
</html>

所以他们和<p>的区别在哪里呢？

1.p标签的语义是段落。div和span没有语义。

2.div用于布局框架，一般布局均使用div标签布局,其是一个非常灵活的容器,它可以包含各种类型的内容，包括其他块级元素和行内元素。而<p>只是段落标签，多用于文章布局。

3.<div> 标签通常配合 class 或 id 属性使用，以便在 CSS 或 JavaScript 中引用。<p>属性已经不使用了，使用CSS来调整。

14.字符实体

意思比如<p>会被解析成段落标签，但当我们真的需要展示一个<p>时怎么办呢？常用字符实体有

  ————>空格

<————>“<”

p>————>“>”

等等

看代码理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    123&nbsp;&lt;p&gt;&nbsp;456
</body>
</html>