HTML基础

最新推荐文章于 2024-02-18 10:50:29 发布

看风zx

最新推荐文章于 2024-02-18 10:50:29 发布

阅读量1.2k

点赞数 17

文章标签： html 前端 java

本文链接：https://blog.csdn.net/m0_62040458/article/details/127836164

版权

HTML基础

一.列表标签

目标：能够使用无序列表、有序列表、自定义列表

1.列表的应用场景

场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等；

特点：按照行的方式，整齐显示内容

种类：无序列表、有序列表、自定义列表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qlTsOYRm-1668339803835)(attachment:1c3247ff29200fd5ed029f744c5853d1)]

2.无序列表

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

标签名说明
ul 表示无序列表的整体，用于包裹li标签
li 表示无序列表的每一项，用于包含每一行的内容
显示特点：列表的每一项前都默认显示圆点标识
注意：
- ul标签中只允许包含li标签
- li标签可以包含任意内容
代码实现：
```
<ul>
<li>Coke</li>
<li>Milk</li>
</ul>
```
- 浏览器显示效果：

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

3.有序列表

场景：在网页中表示一组有顺序之分的列表，如排行榜。
标签组成：
标签名说明
ol 表示有序列表的整体，用于包裹li标签
li 表示有序列表的每一项，用于包含每一行的内容
显示特点：列表的每一项前默认显示序号标识。
注意点：
- ol标签只允许包含li标签
- li标签可以包含任意内容

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

代码实现：

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

浏览器显示效果：

4.自定义列表

场景：在网页的底部导航中通常会使用自定义列表实现
标签组成：
标签名说明
dl 表示自定义列表的整体，用于包裹dt/dd标签
dt 表示自定义列表的主题
dd 表示自定义列表的针对主题的每一项内容
显示特点：
- dd前会默认显示缩进效果
注意点：
- dl标签中只允许包含dt/dd标签
- dt/dd标签可以包含任意内容

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

代码：

<dl>
<dt>帮助</dt>
<dd>- 账户管理</dd>
<dt>服务支持</dt>
<dd>- 售后政策</dd>
</dl>

效果图：

二、表格标签

目标：能够使用表格相关标签和属性，能够实现网页中表格结构的搭建

1.表格的基本标签

场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
基本标签：
标签名说明
table 标签整体，可用于包裹多个tr
tr 表格每行，可用于包裹td
td 表格单元格，可用于包裹内容。
注意点：
- 标签的嵌套关系:table>tr>td

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

代码：

<table>
        <tr>
            <td>name</td>
            <td>score</td>
            <td>comment</td>
        </tr>
        <tr>
            <td>郑吒</td>
            <td>100</td>
            <td>坚毅</td>
        </tr>
    </table>

效果

在这里插入图片描述

2.表格相关属性

场景：设置表格基本效果
常见相关属性：

|属性名|属性值|效果| |:--:|:--:|:--:| |border|数字|边框宽度| |width|数字|表格宽度| |height|数字|表格高度|
注意：
- 实际开发时针对于样式效果推荐使用css设置

代码

  <table border = "1" width = "500" height = "200">
        <tr>
            <td>name</td>
            <td>score</td>
            <td>comment</td>
        </tr>
        <tr>
            <td>郑吒</td>
            <td>100</td>
            <td>坚毅</td>
        </tr>
        <tr>
            <td>Dires</td>
            <td>100</td>
            <td>talent</td>
        </tr>
    </table>

- 效果：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3OnX2BtI-1668339803836)(attachment:1d993be6cd46ca8da0b5a1e5cd9c7f46)]

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

场景：在表格中表示整体大标题和一列小标题

其他标签：

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

注意点：
- captain标签书写在table标签内部
- th标签书写在tr标签内部（用于替换td标签)

代码

<table border = "1"  >
        <caption><b>学生成绩单<b></caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>1000</td>
            <td>good</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>999</td>
            <td>well</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>成绩优秀</td>
            <td>郎才女貌</td>
        </tr>
    </table>

在这里插入图片描述

4.表格的结构标签

结构标签：

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

设置表首样式
功能：表首样式标签,用于定义表格最上端表首的样式，其中可以设置背景颜色、文本对齐方式、文字对齐方式、文字的垂直对齐方式等

语法：

        value1:  水平对齐方式

        color_value:  颜色代码

        value2:  垂直对齐方式

在标签中还可以包含、和标签，而一个表元素只能有一个标签。

设置表主体样式
功能：表主体标签用于定义表格主体的样式

语法：

          value1:  水平对齐方式

          color_value:  颜色代码

           value2:  垂直对齐方式

设置表尾样式
功能: 使用标签用于定义表尾的样式

语法：

          value1:  水平对齐方式

          color_value:  颜色代码

           value2:  垂直对齐方式

5.合并单元格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xSxrlfT8-1668339803836)(attachment:244a58a0d887eb231a5a688e9df6d940)]

rowspan="3"    合并垂直水平方向的单元格
colspan="3"    合并水平方向单元格

# 三、表单标签

表单包含:

表单控件（表单元素）
提示信息
表单域

1、input 控件

单标签

type属性决定了控件的类型

1.文本框：type="text"

2.密码框：type="password"

3.单选框：type="radio" 通过name属性使得同一组控件，只能选择一个

4.复选框：type="checkbox" 也是通过name属性关联一组控件，可进行多选

标签属性checked=“checked”来表示默认选择

按钮组：

button 普通按钮，通过属性 value=" "来设置按钮控件中的显示名称

submit 提交按钮，具有默认名称为提交，可以通过 value进行修改

reset 重置按钮，具有默认名称为重置

image 图像按钮，用一个图像作为按钮

file 文件域，按钮名称为选择文件，不能通过 value进行修改

标签属性value=" "来表示input控件中默认文本值

标签属性maxlength来表示控件允许输入的最多字符数

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--input控件-->
	用户名：<input type="text" value="请输入用户名"/> <br />
	密　码：<input type="password" /> <!--i用全角中文输入空格-->  <br />
	性　别：<input type="radio" name="sex" checked="checked" />女 
			<input type="radio" name="sex" />男 <br />
	爱　好：<input type="checkbox" name="hobby" checked="checked"/>篮球
			<input type="checkbox" name="hobby" checked="checked"/>足球 
			<input type="checkbox" name="hobby"/>绘画
			<input type="checkbox" name="hobby"/>唱歌 <br />
	上传头像：<input type="file" /> <br />
	<hr />
	<input type="image" src="jd_logo.png" /> <br />
	<input type="submit" value="提交表单" />   
	<input type="reset" value="重置表单" />	
</body>
</html>

2、label标签

（1）与标签搭配，可以实现点击提示信息，自动定位焦点到input控件。

1.一个表单控件，直接用<label></label>包裹<input />控件
2.多个表单控件，需要定位到特定某个控件，通过<label>标签属性for=“id名”
和<input>标签属性id=“id名”的格式进行

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--input控件-->
	用户名1：<input type="text" /> <br />
	<!--label标签-->
	<label>用户名2：<input type="text" /> <br /></label>
	<label for="3">
	文本框1：<input type="text" id="1"/> <br />
	文本框2：<input type="text" id="2"/> <br />
	文本框3：<input type="text" id="3"/> <br />
	文本框4：<input type="text" id="4"/> <br />
	</label>
</body>
</html>

演示结果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-smjMLrkZ-1668339803836)(attachment:b74bfcc19fe2ff181e6cd4b691685c20)]

点击‘用户名2’后，鼠标光标会自动定位焦点到后面的文本框。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LUAEKPQP-1668339803837)(attachment:da3b3fc33a6a63cee8f0e8d627933c63)]

3、textarea控件（文本域）

与前面文本框只能输入单行字段不同，元素定义多行输入字段（文本域）。
不能用value属性建立文本域中显示的初始值，多行文本框的默认文字内容写在之间就可以了

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--textarea控件-->
	请输入留言：<br/>
	<textarea  rows="10" cols="30">
正文正文正文正文正文正文正文正文正文正文正文
		
	正文正文正文正文正文正文正文正文正文正文正文
	正文正文正文正文正文  正文正文正文正文正文
	</textarea>
	</label>
</body>
</html>

演示结果如下：

- 注意：在文本域中的文字保留了空格以及换行，并且会自动换行！！
文本域中可以自己键入文本。

演示结果如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--textarea控件-->
	<label>
	请输入留言：<br/>
	<textarea  rows="10" cols="30">请输入留言
	</textarea>
	</label>
</body>
</html>

4、下拉菜单 select

控件

选项1 选项2 选项3 ...

’选项1‘默认会显示在下拉菜单中，如果要修改默认项，通过的标签属性selected="selected"实现。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--select控件-->
	籍贯：
	<select>
	<option>北京</option>
	<option>上海</option>
	<option selected="selected">湖北</option>
</select>
</body>
</html>

演示结果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DZAYtrji-1668339803837)(attachment:ad510abc0053858a0d4073e1aa6259ac)]

5、表单域 form

<form action="xxx.php"(提交的后台) method="GET"/"POST"（提交的方式） name="表单名称">
	<input />
	...
<form>

1.action：定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。通过xxx.php指定了某个服务器脚本来处理被提交表单。
如果省略 action属性，则action 会被设置为当前页面。

2.method 属性规定在提交表单时所用的 HTTP 方法（GET默认方法或 POST）
GET：表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。使用GET时，表单数据在页面地址栏中是可见的。最适合少量数据的提交。浏览器会设定容量限制。
POST：表单正在更新数据，或者包含敏感信息（例如密码）。POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

注意：如果要正确地被提交，每个输入字段必须设置一个 name 属性

五、字符实体

### 1.HTML 中的预留字符必须被替换为字符实体。

在这里插入图片描述

看风zx

关注

17
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

基于https://www.bilibili.com/video/BV1Kg411T7t9?p学习笔记
复制链接

扫一扫

HTML基础

HTML基础

一.列表标签

1.列表的应用场景

2.无序列表

3.有序列表

4.自定义列表

二、表格标签

1.表格的基本标签

2.表格相关属性

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

4.表格的结构标签

5.合并单元格

表单包含:

1、input 控件

2、label标签

3、textarea控件（文本域）

4、下拉菜单 select

5、表单域 form

五、字符实体

“相关推荐”对你有帮助么？