html标签

时间：2023-10-03 13:36:01 | 来源：网站运营

时间：2023-10-03 13:36:01 来源：网站运营

html标签：

标题标签

标题，是通过h1-h6六个标签分别来对六个级别的标题进行定义的

h1定义最大的标题，h6定义最小的标题

h1-h6标签都是双标签，且是容器级标签

权重高到低 h1-h6 约定俗成一个页面放一个h1

段落标签

段落（paragraph）是通过<p>标签进行定义的

<p>标签是双标签，且为文本级标签，内部只能放值文本，图片、表单元素，或者废弃的<font>标签等

换行标签

<br />(breaking) 标签是html中一个简单的换行符

<br />标签是一个但标签

文本格式化标签

文本格式话标签均为双标签，且为文本级标签，内部只能书写文字

图像标签

图像（image）由<img>标签进行定义

<img>标签是单标签，本身相当于一个特殊的文本

<img>标签的作用是在指定的位置插入一张图片

在html文件，常用的插入图片的类型有： jpg、png、gif

属性：

由于<img>为单标签，所以它只能通过属性进行相关图像设置

<img>常用属性展示：

<img src="xxx.jpg" alt="这是一张微笑照片" title="鼠标悬停时的提示" width="30px" height="30px">

音频标签

音频使用<audio>标签进行定义

<audio>时双标签

同图片一样，需要使用src属性设置音频查找的路径

音频文件支持的格式包括：mp3、ogg、wav

属性：

音频加载后不会自动显示播放的控制条，需要使用controls属性进行设置，属性值也是controls

<audio src="xx.mp3" controls="controls"></audio>

视频标签

视频的设置方法与音频非常类似

视频使用<video>标签进行定义

<video>是双标签

使用src属性设置视频查找的路径

视频文件支持的格式包括：mp4、ogg、webm

属性：

视频也需要使用controls属性设置控制条，属性值也是controls

<video src="xx.mp4" controls="controls"></video>

超级链接标签

在html中使用<a>标签可以创建链接

a全称为anchor，锚的意思

<a>为双标签

作用：在指定的位置添加超级链接，提供用户进行点击和跳转

<a>标签可以实现两种跳转：跨页面跳转、页面内跳转，实现跳转的方式需要用到一些标签属性

属性：

1）href属性：全称hypertext reference，超文本引用，用于规定链接的目标地址

属性值：链接目标的路径地址，可以使用相对路径或网址形式的绝对路径

href属性非常重要，<a>标签想要实现点击跳转，必须设置该属性，拥有这个属性<a>标签在鼠标移上才会显示一个小手指针状态

<a href="https://.....或文件命名">点击我跳转</a>2）target属性：可以定义被链接的文档在何处跳转显示

属性值有两种：

_self：默认值，表示跳转的页面在当前窗口打开，不会打开新的窗口

_blank：空白的，表示跳转的页面在新窗口打开

<a href="https://.....或文件命名" target="_blank">点击我跳转</a>3) title属性：是鼠标悬停时的提示文本，与<img>标签类似

属性值：自定义的文字内容

该属性用于给用户进行提示，该链接的功能是什么，提高用户的体验

<a href="https://.....或文件命名" target="_blank" title="查看源网页">点击我跳转</a>

超级链接---设置锚点标签

1）页面内锚点跳转

这种方式实现的是从某个位置跳转到同页面的另一个位置

制作方法分为两个步骤，分别是设置锚点，添加链接

步骤一：设置锚点

设置锚点，也就是设置跳转目标位置，有两种设置方式

&1：在目标位置找到任意一个标签，给他添加id属性，id的属性值必须是唯一的

id的属性值定义规则：必须以字母开头，后面可以有字母、数字、下划线和横线，区分大小写

<h2 id="mubiao">目标位置</h2>&2：在目标位置添加一个空的<a>标签，只设置一个name属性，name属性的设置方式与id相同，也必须是唯一的

<a name="mubiao"></a>步骤二：添加链接

链接到锚点，在需要点击的位置设置<a>标签，给a的href属性设置属性值为#id属性值或者#加a的name属性值

<a href="#mubiao">点击我跳转</a>2) 跨页面锚点跳转

这种跳转方法综合了跨页面跳转和锚点跳转

制作方法也为两个步骤，分别是设置锚点、添加链接

步骤一：设置锚点

此方式与页面内锚点跳转一致，在目标网页的指定位置设置使用id或name属性

步骤二：添加链接

添加超级链接时href属性需要更改，属性值写为页面的路径#id属性值

<a hefr="new.html#mubiao">点击文本</a>

无序列表标签

无序列表需要两个标签参与，分别时<ul>和<li>

ul：unordered list，表示定义一个无序列表的大结构

li：list item，列表项，定义的时无序列表内的某一项

<ul>和<li>时嵌套关系，快捷键：ul>li

一个列表中可以有任意个列表项，列表项又是一个容器级可以标放其他的标签甚至一组ul li组合

<li>没有顺序之分，可以随意书写位置

<ul> <li></li> <li></li> <li></li> <li></li></ul>

有序列表标签

有序列表的语法与无序列表非常类似，只是在语义上又差异

有序列表由两个标签组成，分别时<ol>和<li>

ol：ordered list，表示定义个有序的列表的大结构

li：list item，定义的时有序列表的每一项，<ol>和<li>时嵌套关系，快捷键：ol>li

<ol>标签内部可以嵌套任意多个<li>标签，<li>标签是一个容器标签，内部可以放任意标签甚至一组<ol><li>标签

有顺序之分，<li>不能随意去书写，会影响位置

<ol> <li></li> <li></li> <li></li> <li></li> </ol>

定义列表标签

自定义列表不仅仅是一列项目，而是项目及其注释的组合

由三个标签组成完整的结构，包含<dl><dt><dd>

dl：definition list，表示定义一个自定义列表的大结构

dt：definition term，表示定义 自定义列表中的一个主题或者术语

dd：definition description，定义解释项，表示描述或解释前面的定义主题

<dl>内部只能嵌套<dt>和<dd>，<dt>与<dd>是同级关系 快捷方式dt+dd

<dt><dd>也是容器级标签，内部可以写任意标签

<dl> <dt>主题</dt> <dd>对主题的解释项</dd></dl>

布局标签

<div>和<span>标签常用作布局工具，我们俗称盒子，后期h5也增加了更多的布局标签

<div>和<span>都是没有具体明确的语义的

布局标签--<div>标签

div：全称division，分割，区域、跨度的意思，俗称大盒子

<div>是双标签，是最经典的容器级标签，内部可以放置任意内容

作用：多用于划分网页区域，进行结构布局，一般将相关的内容使用<div>包裹起来，整体设置大的布局效果

布局标签--<span>标签

span：小区域、小跨度的意思，俗称小盒子

<span>也是双标签，容器级标签

作用：在不改变整体效果的情况下，可以辅助进行局部调整

表格基础

创建一个简单的表格至少有三个标签组成，分别是<table><tr><td>标签

table：表格，定义的是整个的表格大结构

tr：table rows，表格的行，定义的是表格由多行行组成

td：table data, 表格数据，也叫表格单元格，定义的是每一行内部的单元格

三者：的关系：table>tr>td,一个表格中有多个行，每个行中有多个单元格

属性：

<table>标签可以添加border边框属性

属性值：数字，表示像素值

表格的单元格之间 有默认的空隙，会导致双线边框

解决方法：设置标签样式属性style

属性值：border-collapse：collapse；表示边框塌陷

<table border="1" style="border-collapse: collapse;"> <tr> <td>序号</td> <td>姓名</td> <td>班级</td> <td>学号</td> <td>分数</td> </tr> <tr> <td>1</td> <td>张三</td> <td>二班</td> <td>200080807</td> <td>96</td> </tr></table>

表格---表头单元格

如果要绘制表头，使用标签<th>，table head data，表示单元格

在表格中绘制的时候，替换的是<td>的位置

<th>标签中自带默认的css样式效果，文字显示粗体居中

表格---分区标签

<table>内部是直接的子级包含四个分区标签，他们都是双标签

caption：表格的标题，内部书写标题文字

thead：table head，表格的头部，内部嵌套tr>th

tbody：table body，表格的主体，内部嵌套tr>td

tfoot：table foot，表格的页脚，内部嵌套tr>td

四个分区可以选择性的进行组合

注意：不论书写顺序如何颠倒，浏览器中的加载顺序都是自动按照caption、thead、tbody、tfoot执行的

<table> <caption>表格标题</caption> <thead> <tr> <th>头部信息</th> <th>头部信息</th> <th>头部信息</th> <th>头部信息</th> </tr> </thead> <tbody> <tr> <td>表格主体内容</td> <td>表格主体内容</td> <td>表格主体内容</td> <td>表格主体内容</td> </tr> </tbody> <tfoot>表格尾部内容</tfoot></table>

表单的组成

html表单用于搜集不同类型的用户输入，表单元素就是网页中提供用户进行输入或点击的小控件

在html中，一个完整的表单通常由表单域、提示信息和表单空间（也称为表单元素）3个部分构成

功能：

表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用的程序的url地址，以及数据提交到服务器的方法，如果不定义表单域，表单中的数据就无法传送到后台服务器

提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作

表单控件：包含了具体的表单功能项，如单行文本输入框，密码输入框，复选框，提交按钮，重置按钮等

表单域标签

html表单域使用<form>标签进行定义

<form>标签是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放在一个<form>标签之内

<form>标签为双标签，容器级标签

属性：

<form action="xxx.java" method="post/get..." name="区别信息"> 提示信息及表单控件书写位置</form>

input标签

<input>标签是最重要的一个表单元素，如果需要换行可以使用<br />

<input>标签为单标签，本身相当于一个特殊的文本

<input>标签需要通过标签属性实现各种功能

属性：

属性radio设置的时候要要设置name属性，属性值相同，这样才可以达到单选的效果

属性checkbox设置时需要设置name属性，来体现他们是一组的

input标签--文件上传 file

<input>标签的type属性值为file

定义文件上传按钮，可以提供用户选择本地文件进行上传服务器

<input type="file">使用input的multiple属性，可以决定是否可以选择多个文件

<input type="file" multiple="multiple">

文本域<textarea>

文本域使用<textarea>标签定义，制作可以输入多行文本的区域

<textarea>标签为双标签，本身相当于一个特殊的文字

文本域可以设置默认输入的文字，在双标签之间书写默认文字

属性：

<textarea>有两个标签属性，可以设置显示区域大小

rows：行，属性值是数字，数字是几表示文本框显示的最大行数，如果超过了行数，会被隐藏并且出现滚动条

cols：列，属性值是数字，数字是几，表示在出现滚动条之后，每一行显示的最大字节数（一个汉字按2字节计算）

<textarea cols="30" rows="10">默认输入文字</textarea>

下拉菜单标签

下拉菜单需要至少两个标签完成结构：

<select>：选择，表示定义下拉菜单整体结构。

<option>：选项，表示定义下拉菜单的每一项

两个标签都是双标签，文本级标签

关系：select>option, option可以有任意多项

默认选中项：

默认情况下，选中的是第一项

下拉菜单可以通过给<option>标签设置selected属性，属性值为selected，更改默认选中项

<select> <option>杭州</option> <option>杭州</option> <option>杭州</option> <!-- 添加默认选中项 --> <option selected="selected">杭州</option></select>分组管理：

下拉菜单中如果选项变得复杂，可以将<option>进行分组管理

可以使用<optgroup>标签对选项进行分组，<optgroup>是一个双标签

关系：select>optgroup>option

<optgroup>可以设置一个label属性，表示给这一组选项添加一个分组标签名，分组标签<optgroup>是不能被点击选择的

<select> <optgroup label="国内"> <option>杭州</option> <option>杭州</option> <option>杭州</option> </optgroup> <optgroup label="国外"> <option>国外1</option> <option>国外2</option> <option>国外3</option> </optgroup></select>

label标签

所有的表单元素都可以通过绑定其他内容去扩大触发点击范围，这时需要使用一个<label>标签

绑定方法一：

给表单元素设置id属性

然后将需要绑定的其他内容用<label>标签包裹

给<label>标签设置for属性，属性值为绑定的表单元素的id属性值

<input type="checkbox" name="hobby" id="sport"><label for="sport">运动</label>绑定方法二：

如果绑定内容和表单元素写在一起，可以化简绑定写法

直接使用<label>标签将绑定内容与表单元素一起进行嵌套

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

字符实体

具体的字符实体及用法可以参照w3school在线学习

这里给点规则和建议

规则：所有的字符实体和实体编号都是以&开头，以；结尾的

注意：实体名称对大小写敏感

建议1：使用实体名称，好处时名称易于记忆，不过坏处是，浏览器也许并不支持所有实体名称(对实体数字的支持却很好)

建议2：不需要强制记忆所有的字符实体，只需要记忆常用的几个字符实体名称即可，其他可以通过手册进行查询