HTML学习笔记之HTML功能元素

紫玫瑰ABU

已于 2023-10-20 21:21:45 修改

阅读量133

点赞数

文章标签：前端笔记学习

于 2023-10-19 21:21:50 首次发布

本文链接：https://blog.csdn.net/weixin_52540797/article/details/133932798

版权

1、列表标签

列表是网页中最常用的一种数据排列方式。

html列表又分为3种类型：无序列表、有序列表以及定义列表。

1.1 无序列表

给一组数据添加列表语义，且这一组数据的排列没有顺序之分。

无序列表的语法

    <ul type="square">
        <li>无序列表项1
            <ul type="">
                <li>无序子列表项1</li>
                <li>无序子列表项2</li>
            </ul>
        </li>
        <li>无序列表项2</li>
        <li>无序列表项3</li>
    </ul>

无序列表样式

<ul type="disc"></ul>
disc(默认值) 实心圆
circle 空心圆
square 实心方块

1.2 有序列表

给一组数据添加列表语义，且这一组数据的排列具有顺序之分。

有序列表的语法

    <ol type="a">
        <li>有序列表项1
            <ol type="i">
                <li>有序子列表项1</li>
                <li>有序子列表项2</li>
            </ol>
        </li>
        <li>有序列表项2</li>
        <li>有序列表项3</li>
    </ol>

有序列表样式

<ol type="A"></ol>
1   默认值。数字有序列表。
a   按字母顺序排列的有序列表(小写)。
A   按字母顺序排列的有序列表(大写)。
i   罗马字母(小写)。
I   罗马字母(大写)。

1.3 定义列表

最外层的标签为 <dl></dl> , 一级标签为 <dt></dt> , 二级标签为 <dd></dd>

定义列表语法

    <dl>
        <dt>山西</dt>
        <dd>太原</dd>
        <dd>临汾</dd>

        <dt>山东</dt>
        <dd>菏泽</dd>
        <dd>枣庄</dd>
    </dl>

dt是英文definition title的缩写, 所以dt的含义就是用来定义列表中的标题
dd是英文definition description的缩写, 所以dd的含义就是用来定义标题对应的描述的

2、表格标签

表格标签一个table就是一个表格，表格标签用来给一堆数据添加表格语义

表格标签语法

<table width="300px" height="200px"  border="1" cellpadding="5" cellspacing="0" align="center">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr align="right" valign="top">
            <td width="150px">张三</td>
            <td align="center">18</td>
            <td valign="bottom">男</td>
        </tr>
        <tr align="left" valign="bottom">
            <td>李四</td>
            <td>19</td>
            <td>男</td>
        </tr>
    </table>

表格属性：border   表格变宽的厚度默认为0

width   宽

height   高

        align   表格在浏览器水平方向对齐方式 left（默认值） center right

        cellspacing   单元格与单元格之间距离外边距

cellpadding   单元格和单元格内容之间的距离内边距

bgcolor   背景色

background   背景图片

tr属性： align 一整行单元格内容在单元格对齐方式 left（默认） right center

valign 一整行单元格在垂直方向对齐方式 top middle bottom

td属性 align 当前单元格内容在单元格对齐方式 left（默认） right center

valign 当前单元格内容在垂直方向对齐方式 top middle bottom

注意：表头单元格使用th属性，自带加粗居中效果

2.1 细线表格

<table border="1" bgcolor="black" cellspacing="1px">
        <tr bgcolor="white">
            <td>序号</td>
            <td>名称</td>
            <td>地址</td>
        </tr>
        <tr bgcolor="white">
            <td>1</td>
            <td>山西</td>
            <td>临汾市xxx</td>
        </tr>
</table>

1.给table标签设置bgcolor="black"，cellspacing = "1px"

2.给tr标签设置bgcolor="white"

2.2 完整的表格结构

<table border="1">
        <caption>个人信息表</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>terry</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>larry</td>
                <td>20</td>
                <td>女</td>
            </tr>
        </tbody>
        <tfoot></tfoot>
</table>

     caption作用: 指定表格的标题
     thead作用: 指定表格的表头信息
     tbody作用: 指定表格的主体信息
     tfoot作用: 指定表格的附加信息

注意：如果我们没有添加tbody，系统将为我们自动添加

2.3 表格的跨行与跨列

<table border="1" cellspacing="0px" cellpadding="10px">
        <caption>跨行与跨列合并</caption>
            <tr>
                <td colspan="2">1</td>
                <!-- <td>2</td> -->
                <td colspan="2" rowspan="3">3</td>
                <!-- <td>4</td> -->
            </tr>
            <tr>
                <td>11</td>
                <td rowspan="2">12</td>
                <!-- <td>13</td>
                <td>14</td> -->
            </tr>
            <tr>
                <td>21</td>
                <!-- <td>22</td> -->
                <!-- <td>23</td>
                <td>24</td> -->
            </tr>
</table>

跨行合并 rowspan='number' 合并number个单元格

跨行合并 colspan='number' 合并number个单元格

注意：每次进行跨行或者跨列合并时，都要将所要合并的单元格进行删除或者注释，表格才能恢复正常的效果

3、form表单

表单用来收集用户信息

<!-- 所有的表单元素都要写在表单标签中  action属性就是表单提交的服务器地址-->
<form action="#">
        用户名：<input type="text" readonly name="username" value="默认值">
        密码：<input type="password" name=""><br>
        性别：
        <!-- label 点击文字可以使表单元素聚焦
            1.将表单元素直接使用label标签包裹
            2.label for属性和表单元素的id属性属性值一样 将文字写在label中
        -->
        <label>
            男：<input type="radio" name="gender" value="男">
        </label>
        <label for="female">女：</label>
            <input type="radio" checked name="gender" value="女" id="female"><br>
        爱好:
        游泳<input type="checkbox" name="hobbies" value="swimming">
        篮球<input type="checkbox" name="hobbies" value="basketball">
        足球<input checked type="checkbox" name="hobbies" value="football"><br>
        <!-- 下拉框 select 选项使用option 将所有的下拉选项全部展开 
            使用optgroup    
        -->
        城市：
        <select name="city" multiple>
            <optgroup label="一线城市">
                <option value="北京">北京</option>
                <option value="上海" selected>上海</option>
                <option value="广州">广州</option>
            </optgroup>
            <optgroup label="二线城市" disabled>
                <option value="太原">太原</option>
                <option value="苏州">苏州</option>
                <option value="昆明">昆明</option>
            </optgroup>
        </select><br>
        描述：
        <textarea name="" id="" cols="30" rows="10"></textarea><br>
        <input type="image" width="200px" src="../Day01/音视频/SpongeBob.jpg" alt=""><br>
        <input type="file"><br>
        <input type="button" value="点击"><br>
        <input type="reset" value="重置">
        <input type="submit" value="提交">
    </form>

补充：get和post请求区别？

1.get请求携带参数是携带在地址栏上的,以?形式拼接属性名=属性值&属性名=属性值。
2.post请求携带参数是携带在请求体中。
3.get请求安全性比较差,post请求安全性比较好。
4.get是浏览器支持的请求,可以被浏览器缓存;post请求是浏览器不支持请求，不会被浏览器缓存。
5.get携带参数有长度限制的，post可以携带大量的数据。