HTML基础-CSDN博客

本文链接：https://blog.csdn.net/qq_74342020/article/details/137352252

一个完整的html文件的格式如下：

1.HTML注释

格式：

在vs code里面可以用快捷键 CTRL + /来注释

2.HTML标签

2.1排版标签

标签结构： <开始标签 >包裹的内容</ 结束标签>

例如：

<h1> 标题</h1>

结构说明：

标签常由<，>，/英文单词或者字母组成。并把标签中<>包括起来的英文单词或字母称为标签名。
常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容。
少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容，例如 <hr>，<br>

2.1.1标题标签

h系列标签

<h1>1级标题</h1>

<h2>2级标题</h2>

<h3>3级标题</h3>

<h4>4级标题</h4>

<h5>5级标题</h5>

<h6>6级标题</h6>

特点：

文字都加粗
文字都变大，并且从h1——>h6文字逐渐减小

结果：

2.1.2段落标签

格式：

<p>段落内容</p>

特点：

段落之间存在间隙
独占一行

2.1.3换行标签

强制让文字换行

格式：

<br>

特点：

单标签
让文字强制换行

2.1.4水平分割线

分割不同主内容的水平线

格式：

<hr>

特点：

单标签
在页面中显示一条水平线

2.2文本格式化标签

需要让文字加粗，下划线，倾斜，~~删除线~~等效果

标签	说明
strong	加粗
ins	下划线
em	倾斜
del	删除线

第一种

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线

第二种

以上两种都可以实现同样的效果。

2.3媒体标签

2.3.1图片标签

在网页中显示图片

格式：

<img 属性名1= " 属性值" 属性名2="属性值" ...>

特点：

单标签
img标签需要展示对应的效果，需要借助标签的属性进行设置！

属性注意：

标签的属性写在开始标签內部
标签上可以同时存在多个属性
属性之间用空格隔开
标签名与属性之间必须以空格隔开
属性之间没有顺序之分

属性：

src ，目标图片的路径，相对路径和绝对路径都可以，建议用相对路径。
alt ，替换文本，（当图片加载失败时，才会显示alt的文本，图片加载成功时，不会显示alt的文本）
title ，提示文本（鼠标悬停时，才显示的文本），不仅可以用于图片标签，还可以用于其他标签
weight和height ,宽度和高度（数字），如果只设置两个中的一个，另一个会等比例缩放（图片不会变形），同时设置两个时，如果设置不当，图片会变形

路径

Linux 基础命令-CSDN博客

2.3.2音频标签

在页面中插入音频

格式：

<audio src="值" 属性 ...> </audio>

常见属性：

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

注意：

音频标签目前只支持三种格式：MP3、WAV 和 OGG

2.3.3视频标签

在页面中插入视频

格式：

<video src="值" 属性 ...></video>

属性

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需配合muted实现静音播放）
loop	循环播放

注意：

视频标签目前只支持三种格式：MP4、WebM 和 OGG

2.4.链接标签

点击之后，从一个页面跳转到另一个页面

格式：

<a href="跳转地址">超链接</a>

属性：

target ，目标网页的打开方式

target取值	效果
_self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

特点：

双标签，內部可以包裹内容
如果需要a标签点击之后去指定内容，则需要设置a标签的href属性
如果不知道去哪，可以让href="#",表示一个空链接

3.列表标签

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

3.1无序列表

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

标签组成：

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

显示特点：

列表的每一项前默认显示圆点标识

注意：

ul标签中只允许包含li标签
li标签可以包含任意内容

例如：

<ul>

<li>榴莲</li>

<li>火龙果</li>

<li>香蕉</li>

<li>苹果</li>

</ul>

结果

3.2有序列表

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

标签组成：

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

显示特点：

列表的每一项前默认显示序号标识

注意：

ol标签中只允许包含li标签
li标签可以包含任意内容

3.3自定义列表

在网页的底部导航中通常会使用自定义列表实现。

标签组成：

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

显示特点：

dd前会默认显示缩进效果

注意点：

dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任意内容

例如：

<dl>

<dt>帮助中心</dt>

<dd>售后维修</dd>

<dd>人工客服</dd>

</dl>

4.表格标签

在网页中以行+列的单元格的方式整齐展示数据，如：学生成绩表

4.1表格基本标签：

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

嵌套关系：table >tr >td

例如：

<table >

<tr>

<td>fjabkjfbk</td>

<td>fjabsdffk</td>

<td>fjsdfswbk</td>

</tr>

<tr>

<td>fjabkjfbk</td>

<td>fjabsdffk</td>

<td>fjsdfswbk</td>

</tr>

</table>

4.2表格相关属性（写在table的开始标签之后）

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

注意点：

实际开发时针对于样式效果推荐用css设置

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

其他标签：

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

注意：

caption标签写在table标签內部
th标签书写在tr标签内部（用于替换td标签）

<table >

<caption>dafg</caption>

<tr>

<td>fdsakh</td>

<td>fyitfk</td>

<td>fjfjfj</td>

</tr>

<tr>

<td>afsssa</td>

<td>ffaafk</td>

<td>fswbsk</td>

</tr>

</table>

4.4表格的结构标签

结构标签：

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

注意：

表格结构标签內部用于包裹tr标签
表格的结构标签可以省略

4.5合并单元格

将水平或者垂直多个单元格合并成一个单元格

合并单元格步骤：

1.明确合并哪几个单元格

2.通过左上原则，确定保留谁，删除谁

· 上下合并——>只保留最上，删除其他

· 左右合并——>只保留最左，删除其他

3.给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

属性名	属性值	效果
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多列的单元格水平合并

注意：

只有一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead，tbody，tfoot）

5.表单标签

5.1input系列标签

在网页中显示收集用户信息的表单效果，如：登录页、注册页

标签名：input

input标签可以通过type属性值的不同，展示不同的效果

type属性值

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

例如：

<input type="text">

type属性值为text,后面还可以加属性（placeholder）提示用户输入内容

<input type="text" placeholder="请输入">

type属性值为radio

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

<input type="radio" name="sex">男 <input type="radio" name="sex">女

type属性值为file

属性名	说明
multiple	多文件选择

<input type="file" multiple>

选择文件时按住ctrl键

input系列标签—按钮

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

注意：

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

<form action="">

<input type="submit">

<input type="reset">

<input type="button" value="s">

</form>

value值表示按钮上显示的字

5.2button按钮标签

type属性值：

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

注意：

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

5.3select下拉菜单标签

在网页中提供多个选择项的下拉菜单表单控件

标签组成：

select标签：下拉菜单的整体
option标签：下拉菜单的每一项

常见属性：

selected：下拉菜单的默认选中

例如：

<select>

<option>北京</option>

<option>上海</option>

<option>广州</option>

<option selected>深圳</option>

</select>

5.4textarea文本域标签

在网页中提供可输入多行文本的表单控件

标签名：textarea

常见属性：

cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数

注意：

右下角可以拖拽改变大小
实际开发时推荐用CSS设置

5.5lable标签

用于绑定内容与表单标签的关系

使用方法1：

使用lable标签把内容包裹起来
在表单标签上添加id属性
在lable标签的for属性中设置对应的id值

使用方法2：

直接使用lable标签把内容和表单标签一起包裹起来
需要把lable标签的for属性删除即可

<input type="radio" name="sex" id="nan"><label for="nan">男</label>



<label><input type="radio" name="sex">女</label>

6.语义化标签

没有语义的布局标签-div和span

div标签：一行只显示一个（独占一行）

span标签：一行可以显示多个

7.字符实体

在网页中展示特殊符号效果时，需要使用字符实体代替

结构：&英文；

常见字符实体：

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分（cent）	¢	¢
£	镑（pound）	£	£
¥	元（yen）	¥	¥
€	欧元（euro）	€	€
§	小节	§	§
©	版权（copyright）	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷