devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

2022黑马程序员-前端学习第一阶段（Day02-HTML基础）_黑马前端考试题

作者：笔触狂放9 | 2024-02-22 06:27:15

赞

踩

黑马前端考试题

HTML基础-Day02 学习笔记打卡

学习视频B站：黑马程序员-前端学习（第一阶段）

HTML基础

列表标签（无序列表、有序列表、自定义列表）

列表的应用场景

场景： 在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等
特点： 按照行的方式，整齐显示内容
种类： 无序列表、有序列表、自定义列表
无序列表
有序列表
自定义列表

无序列表

无序列表
场景： 在网页中表示一组无顺序之分的列表，如：新闻列表。
标签组成：

标签名说明
ul表示无序列表的整体，用于包裹li标签
li表示无序列表的每一项，用于包含每一行的内容

显示特点：
• 列表的每一项前默认显示圆点标识
注意点：
• ul标签中只允许包含li标签
• li标签可以包含任意内容

有序列表

有序列表

场景： 在网页中表示一组有顺序之分的列表，如：排行榜。
标签组成：

标签名说明
ol表示有序列表的整体，用于包裹li标签
li表示有序列表的每一项，用于包含每一行的内容

显示特点：
• 列表的每一项前默认显示序号标识
注意点：
• ol标签中只允许包含li标签
• li标签可以包含任意内容

自定义列表

自定义列表

场景： 在网页的底部导航中通常会使用自定义列表实现。
标签组成：

标签名说明
dl表示自定义列表的整体，用于包裹dt/dd标签
dt表示自定义列表的主题
dd表示自定义列表针对主题的每一项内容

显示特点：
• dd前会默认显示缩进效果
注意点：
• dl标签中只允许包含dt/dd标签
• dt/dd标签可以包含任意内

表格标签

表格基本标签

1.表格基本标签:table> tr >td
表格的基本标签

表格相关属性

表格相关属性

属性名属性值效果
border数字边框宽度
width数字表格宽度
height数字表格高度

注意点：
实际开发时针对于样式效果推荐用CSS设置

表格标题和表头单元格标签

2.表格标题和表头单元格标签：table > caption + tr > th

标签名名称说明
caption表格大标题表示表格整体大标题，默认在表格顶部居中位置显示
th表格单元格表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

注意点：
• caption标签书写在table标签内部
• th标签书写在tr标签内部（用于替换td标签）
表格相关标签和属性

表格的结构标签（了解）

3.表格结构标签：table > thead > tr > td

标签名名称
thead表格头部
tbody表格主体
tfoot表格底部

表格结构标签

合并单元格

思路

效果图：合并单元格

步骤
  1. 明确合并哪几个单元格
  2. 通过左上原则，确定保留谁删除谁
    • 上下合并→只保留最上的，删除其他
    • 左右合并→只保留最左的，删除其他
  3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
属性名属性值说明
rowspan合并单元格的个数跨行合并，将多行的单元垂直合并
colspan合并单元格的个数跨列合并，将多列的单元水平合并
<!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>Document</title>
</head>
<body>
    <table  border="1" align="center"  >
        <caption>学生成绩单</caption>

        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>100分</td>
                <td>真棒，第一名</td>  
            </tr>
            <tr>
                <td>李四</td>
                <td>80分</td>
                <td>真棒，第二名</td>  
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>郎才女貌</td>
                <td>真棒，相亲成功</td>  
            </tr>
        </tfoot>
    </table>
    <table  border="1" align="center"  >
        <caption>学生成绩单</caption>

        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td rowspan = "2">100分</td>
                <td>真棒，第一名</td>  
            </tr>
            <tr>
                <td>李四</td>
                <td>真棒，第二名</td>  
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>郎才女貌</td>
                <td>真棒，相亲成功</td>  
            </tr>
        </tfoot>
    </table>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70

效果图：
效果图

表单标签

input系列标签的基本介绍

标签名: input
• input标签可以通过type属性值的不同，展示不同效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/6acc2aa2fbd04c2a9fdec100f3553d3e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAc2FrdXJh5qyj5oKg,size_10,color_FFFFFF,t_70,g_se,x_16)

  • 1
  • 2

type属性值：

标签名type属性值说明
inputtext文本框，用于输入单行文本
inputpassword密码框，用于输入密码
inputradio单选框，用于多选一
inputcheckbox多选框，用于多选多
inputfile文本选择，用于之后上传文件
inputsubmit提交按钮，用于提交
inputreset重置按钮，用于重置
inputbutton普通按钮，默认无功能，之后配合js添加功能
文本框 text && password

属性：text
属性: password

属性名说明
placeholder占位符。提示用户输入内容的文本
账号:<input type="text" name="" id="" placeholder="请输入你的账号：">
    <br>
    <br>
    密码:<input type="passwd" name="" id="" placeholder="请输入你的密码：">

  • 1
  • 2
  • 3
  • 4

placeholder

（拓展）value属性和name属性作用介绍

value和name后端功能功能上的作用

单选框（radio）
属性名说明
name分组。有相同那么属性值的单选框为一组，一组中同时只能有一个被选中
checked默认选中

注意点：
• name属性对于单选框有分组功能
• 有相同name属性值的单选框为一组，一组中只能同时有一个被选中

复选框（checkbox）
属性名说明
checked默认选中
文件选择 （file）
属性名说明
multiple多文件选择
按钮（button）

type属性值：

标签名type属性值说明
inputsubmit提交按钮，点击后提交数据给后端服务器
inputreset重置按钮，点击后恢复表单默认值
inputbutton普通按钮，默认无功能，之后配合js添加功能

注意点：
• 如果需要实现以上按钮功能，需要配合form标签使用
• form使用方法：用form标签把表单标签一起包裹起来即可
总体概括

button按钮标签

button属性值与input相同

标签名type属性值说明
buttonsubmit提交按钮，点击后提交数据给后端服务器
buttonreset重置按钮，点击后恢复表单默认值
buttonbutton普通按钮，默认无功能，之后配合js添加功能

在这里插入图片描述

注意点：
• 谷歌浏览器 中button默认是提交按钮
• button标签是 双标签 ，更便于包裹其他内容：文字、图片等

select下拉菜单标签

场景： 在网页中提供多个选择项的下拉菜单表单控件
标签组成：
• select标签：下拉菜单的整体
• option标签：下拉菜单的每一项
常见属性：
• selected：下拉菜单的默认选中
代码示例：

  数字<select name="" id="">
        <option value="">123</option>
        <option value="">123</option>
        <option value="">123</option>
        <option value="">123</option>
        <option value="">123</option>
    </select>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

select

textarea文本域标签

场景： 在网页中提供可输入多行文本的表单控件
text area

标签名： textarea
常见属性：
• cols：规定了文本域内可见宽度
• rows：规定了文本域内可见行数
注意点：
• 右下角可以拖拽改变大小
• 实际开发时针对于样式效果推荐用CSS设

label标签

场景： 常用于绑定内容与表单标签的关系
标签名： label
使用方法①：

  1. 使用label标签把内容（如：文本）包裹起来
  2. 在表单标签上添加id属性
  3. 在label标签的for属性中设置对应的id属性值
    使用方法②：
  4. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
  5. 需要把label标签的for属性删除即可
    示例代码：
爱好

    <!-- 方法一： -->
    <input type="checkbox" id="one">
    <label for="one">敲代码</label>
    <!-- 方法二： -->
    <label>
        <input type="checkbox">熬夜
    </label>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

代码效果

语义化标签

没有语义的布局标签

场景： 实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
div标签： 一行只显示一个（独占一行）
span标签： 一行可以显示多个

有语义的布局标签（了解）

场景： 在HTML5新版本中，推出了一些有语义的布局标签供开发者使用
标签：

标签名语义
header网页头部
nav网页导航
footer网页底部
aside网页侧边栏
section网页区块
article网页文章

有语义的标签
注意点：
• 以上标签显示特点和div一致，但是比div多了不同的语义

字符实体

HTML中的空格合并现象

场景： 如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格
HTML空格合并现象

常见字符实体

场景： 在网页中展示特殊符号效果时，需要使用字符实体替代
结构： &英文；
常见字符实体

显示结果描述实体名称
空格&nbsp;
<小于号&lt;
>大于号&gt;
&和号&amp;
"引号&quot;
’撇号&apos;(IE不支持）
¢分(cent)&cent;
£镑(pound)&pound;
¥元(yen)&yen;
€欧元(euro)&euro;
§小节&sect;
©版权（copyright）&copy;

综合案例代码示例

<!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>Document</title>
</head>
<body>
    <table border="1" width="500" height="300">
            <caption>优秀学生信息表格</caption>
            <tr>
                <Th>年纪</Th>
                <Th>姓名</Th>
                <Th>学号</Th>
                <Th>班级</Th>
            </tr>
            <tr>
                <td rowspan="2">高三</td>
                <td>迪丽热巴</td>
                <td>110</td>
                <td>三年二班</td>
            </tr>
            <tr>
                
                <td>古力娜扎</td>
                <td>111</td>
                <td>三年一班</td>
            </tr>
            <tr>
                <th>评语</th>
                <th colspan="3">你们很优秀</th>
            </tr>
    </table>
    <h1>青春不常在，抓紧谈恋爱</h1>
    <hr>
    <form action="">
        昵称：<input type="text" placeholder="请输入昵称">
        <br>
        <br>
        性别:<label><input type="radio" name="sex" checked>男</label>
        <label><input type="radio" name="sex">女</label>
        <br>
        <br>
        所在城市:&nbsp;<select>
            <option value="北京">北京</option>
            <option value="广州">广州</option>
            <option value="上海" selected>上海</option>
        </select>
        <br>
        <br>
        婚姻状态: 
        <label for=""><input type="radio" name="mery" checked>未婚</label>
        <label for=""><input type="radio" name="mery">已婚</label>
        <label for=""><input type="radio" name="mery">保密</label>
        <br>
        <br>
        喜欢的类型:
        <label for=""><checkbox >可爱</checkbox></label>
        <label for=""><checkbox >性感</checkbox></label>
        <label for=""><checkbox >御姐</checkbox></label>
        <label for=""><checkbox >小鲜肉</checkbox></label>
        <label for=""><checkbox >大叔</checkbox></label>
        <br>
        <br>
        个人介绍:
        <textarea name="" id="" cols="50" rows="10" placeholder="个人介绍："></textarea>
        <br>
        <br>
        <h2>我承诺</h2>
        <ul>
            <li>年满十八岁、单身</li>
            <li>抱着严肃的态度</li>
            <li>真诚寻找另一半</li>
        </ul>
        <label><input type="checkbox">我同意所有条款</label>
        <br>
        <br>
        <input type="submit" value="免费注册"></button>
        <button type="reset" >重置</button>
    </form>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/128894
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号