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

原创已于 2022-01-30 14:04:17 修改 · 1.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #html5

于 2022-01-30 11:58:03 首次发布

黑马程序员前端学习专栏收录该内容

11 篇文章

订阅专栏

本文档详细介绍了HTML的基础知识，包括列表标签（无序列表、有序列表、自定义列表）、表格标签及其属性、表单标签等内容，并提供了丰富的示例代码。

学习视频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	表格底部

表格结构标签

合并单元格

思路

效果图： 合并单元格

步骤

明确合并哪几个单元格
通过左上原则，确定保留谁删除谁
• 上下合并→只保留最上的，删除其他
• 左右合并→只保留最左的，删除其他
给保留的单元格设置：跨行合并（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>

效果图：

表单标签

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)

type属性值：

标签名	type属性值	说明
input	text	文本框，用于输入单行文本
input	password	密码框，用于输入密码
input	radio	单选框，用于多选一
input	checkbox	多选框，用于多选多
input	file	文本选择，用于之后上传文件
input	submit	提交按钮，用于提交
input	reset	重置按钮，用于重置
input	button	普通按钮，默认无功能，之后配合js添加功能

文本框 text && password

属性：text
属性: password

属性名	说明
placeholder	占位符。提示用户输入内容的文本

账号:<input type="text" name="" id="" placeholder="请输入你的账号：">
    <br>
    <br>
    密码:<input type="passwd" name="" id="" placeholder="请输入你的密码：">

placeholder

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

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

单选框（radio）

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

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

复选框（checkbox）

属性名	说明
checked	默认选中

文件选择（file）

属性名	说明
multiple	多文件选择

按钮（button）

type属性值：

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

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

button按钮标签

button属性值与input相同

标签名	type属性值	说明
button	submit	提交按钮，点击后提交数据给后端服务器
button	reset	重置按钮，点击后恢复表单默认值
button	button	普通按钮，默认无功能，之后配合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>

select

textarea文本域标签

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

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

label标签

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

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

爱好

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

代码效果

语义化标签

没有语义的布局标签

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

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

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

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

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

字符实体

HTML中的空格合并现象

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

常见字符实体

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

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

综合案例代码示例

<!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>