HTML的各种标签

HTML的各种标签

一、排版标签

1.1单标签

换行标签：<br>
特点：强制文字换行。

水平线标签：<hr>
特点：在页面中显示一条水平线

1.2双标签

标题标签：<h1></h1>~<h6></h6>；
特点：从一级到六级标签逐渐减小，重要程度减小，文字都有加粗，独占一行

段落标签：<p></p>;
特点： 段落之间存在间隙，段落独占一行。

二、文本格式化标签

加粗标签：<b></b>；<strong></strong>
下划线标签：<u></u>；<ins></ins>
倾斜标签：<i></i>；<em></em>
删除线标签：<s></s>；<del></del>
注：<strong></strong>;<ins></ins>;<em></em>;<del></del>强调语义更强烈

三、媒体标签

单标签

图片标签：

<img src="" alt="" >
标签属性：
1、 标签的属性写在开始标签内部
2、标签上可以同时存在多个属性
3、属性之间以空格隔开
4、标签名与属性之间必须以空格隔开
5、属性之间没有顺序之分                                                                                                                各属性作用：
src="写入要显示的图片的名称"
alt="当图片加载失败时显示的替换文本"
title="当鼠标悬停时，显示的文本"
widt="设置图片的宽度（数字）"
height="设置图片的高度（数字）"
即src="荷花.jpg" slt="这是一支荷花" title="当鼠标悬停时显示“荷花”"
当只设置width或height中的一个，另一个未进行设置的会进行自动等比缩放此时图片不会发生形变
当二者都进行设置时，若比例设置不当，图片可能变形

src引用规则

绝对路径引用和相对路径引用
绝对引用：从根目录开始填写所引用的图片路径（使用较少，理解即可）
即D:\Program Files\image\01.jpg
相对路径：从当前html文件为基准对上一级文件夹同级别文件夹以及下一级文件夹进行引用
上一级文件夹： ../文件名
同级别文件夹： ./文件名 或 直接写文件名
下一级文件夹： 文件夹名/文件名
这三种可以任意组合例如：上一级文件夹中同级别文件夹中的图片 ../image/图片.jpg

双标签

音频标签:

<audio src="音频文件名" controls autoplay loop></audio>
controls：显示播放的控件（暂停/播放 按钮）
autoplay：让音频自动播放（一些浏览器并不支持）
loop：循环播放
注：目前仅支持MP3、wav、ogg等格式

视频标签
<video src="音频文件名" controls autoplay loop></video>
各属性与音频属性使用方式相同
注：谷歌浏览器可以让视频自动播放，但需要加muted使视频静音

链接标签

<a href="目标地址" target="">目标</a>
目标地址：替换成想要跳转的目标地址
目标：给目标起个名称
例如：
<a href="./number1.html">number1</a> 跳往本地number1
<a href="https://www.baidu.com">百度</a> 跳转往百度
target="-self"(默认赋值)=target=""  在当前窗口跳转，覆盖原有网页。
target="_blank" 在新窗口中跳转，保留原网页原网页
 

四、表格标签

无序列表

 <ul>
     <li></li>
 </ul>
 ul标签中只允许包含li标签，用于表示有有序列表的整体。
 li标签可以包含任意内容，用于表示无序序列的每一项，用于包含每一行的内容。

 有序列表

 <ol>
 <li></li>
 </ol>
 ol标签中只允许包含li标签，用于表示有有序列表的整体。
 li标签可以包含任意内容，用于表示有序序列的每一项，用于包含每一行的内容。

自定义列表

<dl>
   <dt></dt>
   <dd></dd>
</dl>
di 表示自定义列表的整体，用于包裹dt/dd标签。（只允许包含dt/dd标签）
dt 表示自定义列表的主题
dd 表表示自定义的主题的每一项内容（默认显示缩进效果）

表格标签

<table>
    <tr>
        <td></td>
    </tr>
</table>
table 表示表格整体，用于包裹多个tr。
tr 表示每行，可用于包裹tb
td 表格单元格，填写内容
嵌套关系 table> tr>td
注：默认表格无边框，可用borderborder="边框大小"设置边框，width 、height设置表格大小。
实际编程过程中一般用css设置边框

表格大标题

caption 表示表格大标题，默认在表格整体顶部居中位置显示（在table内部）

表头单元格

th 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示（用于替换td标签）

合并单元格：

rowspan 跨行合并，将多行单元格垂直合并
colspan 跨列合并，并多列的单元格水平合并
注：
只有同一标签结构的单元格才可合并，并不能跨结构标签合并.合并按照左上原则合并。

五、表单标签

input系列标签

用于在网页中显示收集用户的表单效果，如登陆页面、注册页面等。可以通过不同属性值展示不同效果。

<form action="后台地址">  （from表单域，包裹所有input属性）
text：文本框，用于输入单行文本
placeholder：占位符。提示用户输入内容的文本。
password：密码框，用于输入密码
radio：单选框，用于多选一（需要配合name组使用，相同组的选项只能选择一项）
checkbox：多选框，用于多选多
file：文件选择，用于之后上传文件（配合multiple可以实现同时上传多个文件）
submit：提交按钮，用于提交数据给后台
reset：重置按钮，用于重置恢复默认值
button：普通按钮，无默认功能，之后可以配合js添加功能（button也可以作为一个单独的标签使用）
</form>

button按钮

配合不同属性，展现不同功能（双标签）
submit：提交按钮，用于提交数据给后台
reset：重置按钮，用于重置恢复默认值
button：普通按钮，无默认功能，之后可以配合js添加功能

下拉菜单标签

    <select>
        <option></option>
    </select>
select标签，是下拉菜单的整体。
option标签，是下拉菜单一项

文本域标签

<textarea></textarea>

clos：规定文本域内可见宽度
rows：规定文本域内可见行数
注：在实际开发中针对样式效果推荐使用css设置

lable标签

常用于绑定内容于表单标签的关系
方法一（复杂）
使用label标签把内容裹起来，在表单上添加id属性值，在label标签的for属性中设置对应的id属性值
方法二（简单）
直接使用label标签把内容和表单一起包裹起来，需要把label标签的for属性删除即可。
例：法一<input type="radio" name="sex" id="1"><label for="1">男</label>
    法二<label><input type="radio" name="sex">女</label>

六、语义标签

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

字符实体

由于网页不认识多个空格，想要显示多个空格时需要用字符实体代替。
&nbsp：空格
&lt：小于号
&gt：大于号
&amp：和号
&quot：引号
&apos:撇号 '
&cent：分号 ¢
&pound： 镑 £
&yen：元 ¥
&euro：欧元 €
&sect：小节 § 
&copy：版权 ©        不用背诵，用到时查找即可，只需背诵空格