致自己：HTML学习笔记二

最新推荐文章于 2024-07-25 22:24:14 发布

菜鸟自学编程

最新推荐文章于 2024-07-25 22:24:14 发布

阅读量357

点赞数

文章标签： html 学习前端

本文链接：https://blog.csdn.net/sinat_42285508/article/details/123389812

版权

一、列表标签

1、无序列表

1、使用场景：在网页中表示一组无顺序之分的列表，比如新闻列表。

2、标签组成：

标签名	说明
ul	表示无序列表的整体，用于包裹li标签，只能包含li标签
li	表示无序列表的列表项，包含每一项内容，可以包含任意内容

3、ul标签的type属性值：

属性值	说明
disc	默认值，实心圆点
circle	空心圆点
square	正方形

4、代码示例：

<!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>无序列表</title>
</head>
<body>
    <ul type="disc">
        <li>实心圆点</li>
        <li>实心圆点</li>
        <li>实心圆点</li>
        <li>实心圆点</li>
    </ul>
    <ul><!-- 默认值为disc -->
        <li>实心圆点</li>
        <li>实心圆点</li>
        <li>实心圆点</li>
        <li>实心圆点</li>
    </ul>
    <ul type="circle">
        <li>空心圆点</li>
        <li>空心圆点</li>
        <li>空心圆点</li>
        <li>空心圆点</li>
    </ul>
    <ul type="square">
        <li>正方形</li>
        <li>正方形</li>
        <li>正方形</li>
        <li>正方形</li>
    </ul>
</body>
</html>

2、有序列表

1、使用场景：在页面中有序的显示一组列表，比如排行榜

2、标签组成：

标签名	说明
ol	表示有序列表的整体，用于包裹li标签，只能包含li标签
li	表示有序列表的每一项，用于包含每一项内容，可以包含任意内容

3、ol标签的type属性值：

属性值	说明
1	默认值，阿拉伯数字1…
i	小写罗马数字i…
I	大写罗马数字I…
a	小写英文字母a…
A	大写英文字母A…

4、代码示例：

<!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>有序列表</title>
</head>
<body>
    <ol type="1">
        <li>有序列表数字</li>
        <li>有序列表数字</li>
        <li>有序列表数字</li>
        <li>有序列表数字</li>
    </ol>
    <ol><!-- 默认值为数字 -->
        <li>有序列表数字</li>
        <li>有序列表数字</li>
        <li>有序列表数字</li>
        <li>有序列表数字</li>
    </ol>
    <ol type="i">
        <li>小写罗马数字</li>
        <li>小写罗马数字</li>
        <li>小写罗马数字</li>
        <li>小写罗马数字</li>
    </ol>
    <ol type="I">
        <li>大写罗马数字</li>
        <li>大写罗马数字</li>
        <li>大写罗马数字</li>
        <li>大写罗马数字</li>
    </ol>
    <ol type="a">
        <li>小写英文字母</li>
        <li>小写英文字母</li>
        <li>小写英文字母</li>
        <li>小写英文字母</li>
    </ol>
    <ol type="A">
        <li>大写英文字母</li>
        <li>大写英文字母</li>
        <li>大写英文字母</li>
        <li>大写英文字母</li>
    </ol>
</body>
</html>

3、自定义列表

1、使用场景：通常使用在网页底部的导航中

2、标签组成：

标签名	说明
dl	自定义标签的整体，用于包裹dt、dd标签，只能包含dt、dd标签
dt	自定义列表的主题，可以包含任意内容
dd	自定义列表针对主题的每一项内容，可以包含任意内容

3、代码示例：

<!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>自定义列表</title>
</head>
<body>
    <dl>
        <dt>前端学习技术</dt>
        <dd>HTML</dd>
        <dd>CSS</dd>
        <dd>JavaScript</dd>
    </dl>
</body>
</html>

二、表格标签

1、使用场景：在网页中以行列的单元格方式整齐的显示数据，比如学生成绩

2、基本标签：

标签名	说明
table	表格整体，用于包裹多个tr标签
tr	表示表格的行，包裹td标签
td	表示表格的单元格，包裹内容

3、表格的相关属性：

属性名	属性值	说明
border	数字+px	边框宽度
width	数字+px	表格宽度
height	数字+px	表格高度

4、表格标题和表头单元格标签：

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

5、表格的结构标签：用于包裹tr标签，可以省略

标签名	说明
thead	表示表格的头部
tbody	表示表格的主体
tfoot	表示表格的底部

6、合并单元格：

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并，删除下一行多余的单元格
colspan	合并单元格的个数	跨列合并，删除本行多余的单元格

4、代码示例：

<!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>表格标签</title>
</head>
<body>
    <table border="1px" width="500px" height="300px">
        <caption><h2>学生成绩单</h2></caption>
        <thead>
            <tr><th>姓名</th>
                <th>性别</th>
                <th>科目</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">张三</td>
                <td rowspan="2">男</td>
                <td>语文</td>
                <td>98</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>99</td>
            </tr>
            <tr>
                <td rowspan="2">李四</td>
                <td rowspan="2">女</td>
                <td>语文</td>
                <td>99</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>98</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">评语</td>
                <td colspan="2">你们都很棒，加油学习</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

三、表单标签

1、input标签

1、使用场景：多用于在网页中手机用户信息，比如登陆页、注册页

2、标签名：input，通过指定不同的type属性值来展示不同的效果

3、type属性值：

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

4、name和value属性：

value属性：用户输入的内容，提交之后会发送给后端服务器
name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义
后端接收到数据的格式是：name的属性值 = value的属性值

5、text：文本框

在网页中输入单行文本的表单控件
常用属性：placeholder，占位符，提示用户输入内容

6、password：密码框

在网页中输入密码的表单控件
常用属性：placeholder，占位符，提示用户输入内容

7、radio：单选框

1.在网页中显示多选一的控件

2.常用属性：

属性名	说明
name	分组，当相同的name属性值的单选框为一组时，一组中只能选中一个
checked	添加此属性表示默认被选中

8、checkbox：复选框

1.在网页中显示多选多的表单控件

2.常用属性：

属性名	说明
checked	添加此属性表示默认选中

9、file：文件选择

1.在网页中显示文件选择的表单控件

2.常用属性：

属性名	说明
multiple	表示多文件选择

10、按钮

1.在网页中显示不同功能的按钮

2.type属性值：

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

3.注意：要实现以上按钮的功能，必须将表单标签使用form标签一起包裹起来

2、button标签

1、使用场景：在网页中显示用户点击的按钮

2、标签名：button

3、type属性值：同input的按钮标签系列

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

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

3、select标签

1、使用场景：在网页中提供多个选择项的下拉菜单表单控件

2、标签组成：

标签名	说明
select	下拉菜单的整体，包裹option标签
option	下拉菜单的每一项

3、常见属性：selected，添加此属性表示默认选中

4、textarea标签

1、使用场景：在网页中提供可供输入多行文本的表单控件

2、标签名：textarea

3、属性值：

属性值	说明
cols	设置文本域的可见宽度
rows	设置文本域的可见行数

5、label标签

1、使用场景：用于绑定内容与表单标签之间的关系

2、标签名：label

3、使用方法1：

使用label标签将内容（比如文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值

4、使用方法2：

直接使用label标签将内容（比如文本）和表单标签一起包裹起来
将label标签的for属性删除掉

6、综合案例

<!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>表单标签</title>
</head>
<body>
    <!-- 为了实现submit、reset标签的功能 -->
    <form>
        昵称：<input type="text" placeholder="请输入你的昵称" />
        <br>
        性别：
        <label><input type="radio" name="sex" />男</label>
        <input type="radio" name="sex" id="nv"><label for="nv">女</label>
        <br>
        心仪对象：<input type="password" placeholder="默认保密" />
        <br>
        所在城市：
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <!-- 默认选中深圳 -->
            <option selected>深圳</option>
        </select>
        <br>
        喜欢的类型：
        <label><input type="checkbox" checked />可爱</label>
        <label><input type="checkbox" />漂亮</label>
        <input type="checkbox" id="nice"><label for="nice">甜美</label>
        <br>
        个人介绍：
        <textarea cols="30" rows="10"></textarea>
        <br>
        上传资料图片：
        <input type="file" multiple />
        <br>
        <input type="submit" value="免费注册" />
        <br>
        <button type="reset">重置</button>
    </form>
</table>
</body>
</html>

四、语义化标签

1、div标签：无语义，独占一行

2、span标签：无语义，一行可以显示多个

3、有语义的标签：

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

五、符实体

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

致自己：每天坚持总结一点点，每天进步一点点，希望自己坚持下去，祝福每一个奋斗者都能收获满满，加油！

菜鸟自学编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
致自己：HTML学习笔记二

一、列表标签1、无序列表1、使用场景：在网页中表示一组无顺序之分的列表，比如新闻列表。2、标签组成：标签名说明ul表示无序列表的整体，用于包裹li标签，只能包含li标签li表示无序列表的列表项，包含每一项内容，可以包含任意内容3、ul标签的type属性值：属性值说明disc默认值，实心圆点circle空心圆点square正方形4、代码示例：<!DOCTYPE html><html lang="en
复制链接

扫一扫