HTML（3） - 悦读

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>

14.总结

HTML基础暂时学习到这里，后续遇到不会的在进行学习和补充，这样效率可能高一些。接下来了解一下css的基础内容，如果有学习路线上的建议或者同样对网络安全感兴趣的小伙伴可以交流一下哦^-^.