03_HTML常用标签

最新推荐文章于 2024-09-14 12:37:34 发布

wang笨

最新推荐文章于 2024-09-14 12:37:34 发布

阅读量539

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_48194439/article/details/122350397

版权

HTML常用标签

注释

作用：

在源代码中添加描述性信息，便于我们阅读代码
对HTML纠错也有很大帮助，通过注释某一行代码来检索错误位置
暂时注释掉目前不用的代码以便于后期恢复

标题标签h

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

标签级别

标题标签是容器级标签，标题标签之间不能互相嵌套，上一级标题与下一级标题之间通过同级关系书写。

权重

h1标签权重最高

段落标签p

段落是通过p标签进行定义的。
p标签是文本级标签，内部只能放置文本、图片、表单元素。

换行标签br

是HTML中最简单的换行符
是一个单标签

文本格式化

标签	描述
b	定义粗体文字（bold）
big	定义大号子
em	定义着重文字，自带斜体效果（emphasis）
i	定义斜体字（italic）
small	定义小字号
strong	定义加重语气，自带粗体效果
sub	定义下标（subscript）
sup	定义上标（superscript）
ins	定义插入字，自带下划线效果（insert）
del	定义删除字，自带删除线（delete）
s	不赞成使用，使用del代替，strike的简化
strike	不赞成使用，使用del代替
u	定义下划线，不赞成使用，使用css中的样式代替，underline

图像标签img

常用属性展示：

属性名	描述
src	表示图片的位置
width	表示图片的宽度
height	表示图片的高度
border	边框属性，设置边框的厚度
title	设置提示文本
alt	设置图片加载失败时的替换文字

音频标签

双标签
和图像标签一样，需要用src属性设置音频查找路径
音频文件支持的格式：.mp3、.ogg、.wav
controls属性：音频加载后不会自动显示播放器的控制条，需要使用controls属性设置，controls=“controls”

视频标签video

双标签
使用src属性设置查找路径
视频文件支持格式：.mp4、.ogg、.webm
controls属性：视频播放器的控制条，controls=“controls”

超链接标签a

双标签
a全程anchor,锚的意思
作用：点击跳转
两种跳转方式：跨页面跳转、页面内跳转
href属性
- 超文本引用，用于规定链接的目标地址
- 属性值：连接的目标地址。可以使用相对路径或网络形式的绝对路径
- 只有设置了href属性a标签才能实现跳转，鼠标移入才会显示小手
target属性
- 使用target属性，可以定义链接在何处跳转显示
- 属性有两种
  - _self:默认值，表示跳转页面在当前页面显示
  - _blank:空白的，表示跳转页面在新窗口打开
title属性
- 设置鼠标悬停时的提示文字,与img标签类似
- 属性值:自定义的文字内容
- 提示用户该链接功能,提高用户体验

锚点跳转

页面内锚点跳转

功能:从网页的某个位置跳转到同网页的另外一个位置
步骤:
- 设置锚点
  - 设置跳转目标位置,有两种方法:
    1. 在目标位置找到任意标签,添加id属性
      
      id属性必须是唯一的,必须以字母开头,后边可以有字母.数字.下划线和横线,区分大小写
    2. 在目标位置添加一个空的标签,只设置一个name属性,name属性与id相同,必须是唯一的.
- 添加链接
  - 链接到锚点,在需要点击的位置设置标签,给a标签的href属性设置值为==#id属性值或者#a的name属性值==

<a href="#hello">点击跳转到hello</a> 
<a href="#hi">点击跳转到hi</a>
<h1 id="hello">这里是hello</h1>
<a name="hi"></a>
<p>这里是hi</p>

跨页面锚点跳转

综合了跨页面跳转和锚点跳转
步骤:
1. 设置锚点,在目标网页指定位置为标签设置id属性或为标签设置name属性
2. 链接到锚点,添加超链接时href属性需要更改,属性值写为页面路径#id
```
<a href="index.html#text">跨页面跳转至此</a>
```

列表

无序列表
- 两个标签参与ul和li
  - ul:unordered list,表示定义一个无序列表的大结构
  - li:list item,列表项,定义无序列表的每一项
```
<ul>和<li>是嵌套关系
```
- 注意事项
  - ```
  <ul>内部只能嵌套<li>,<li>标签不能脱离<ul>单独书写
```
- 标签是一个经典容器,内部可以放置任意内容,甚至可以放置一个无序列表ul>li
- 无序列表
- 之间没有先后顺序,他们的重要程度相同
- 无序列表的作用是搭建列表结构,样式有css负责
有序列表
- 两个标签参与
  1. 和
  - ol:ordered list,表示一个有序列表的大结构
  - li:list item,定义有序列表的每一项
  - ```
  <ol>和<li>是嵌套关系
```
- ```
<ol>标签内部可以有任意多个<li>
```
- 注意事项
  - ```
  <ol>标签内部只能嵌套<li>,<li>也不能脱离<ol>单独使用
```
- li是一个经典容器,内部可以放任意内容,甚至可以放ol>li
- 有序列表的li有先后顺序之分
- 有序列表的作用只是搭建有序的列表结构,样式由css负责
定义列表
- 定义列表是项目及其注释的组合
- 由三个标签组成完整的结构,包含dl 、dt和dd
  - dl:definition list,表示自定义列表的大结构
  - dt:definition term,表示自定义列表中的一个主题或者术语
  - dd:definition description,定义解释项,表示描述或解释前面的定义主题
- ```
<dl>内部只嵌套<dt>和<dd>,<dt>与<dd>是同级关系
```
```
<dl>
<dt>主题</dt>
<dd>解释项</dd>
</dl>
```
- 注意事项
  - ```
  <dl>内部只能嵌套<dt>和<dd>,<dt>与<dd>不能脱离<dl>单独书写
```
- ```
<dl>内部可以存放多个<dt>和<dd>,每个<dd>解释说明离他最近的一个<dt>
```
  - dt和dd标签也是容器级标签,内部可以放置任意内容
  - 定义列表的缩进有css负责,标签只负责搭建语义结构
  - 最好每个dl只跟一组dt和dd,便于后期管理

布局标签

div标签

div:全称dicsion,分割、区域、跨度的意思。俗称“大盒子”
div是双标签，最经典的容器级标签，内部可以放置任意内容
作用：多用于划分网页区域，进行结构布局。一般将相关的内容用div包裹起来，整体设置布局样式

span标签

span:小区域，小跨度的意思。俗称小盒子。
span也是双标签，容器级标签。
作用：在不改变整体的情况下，可以辅助进行局部调整。

表格

表格至少有三个标签组成，分别是table、tr、td标签。
- table:表格，定义整个表格大结构。
- tr:table rows,表格的行，定义表格由多少行组成
- td:table data,表格的数据，定义每一行内部的单元格
三者的关系：table>tr>td.一个表格中有多个行，一个表格中有多个行，每个行中有多个单元格

表头单元格th

<table>
    <tr>
        <th>头部1</th>
        <th>头部2</th>
        <th>头部3</th>
    </tr>
    <tr>
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td></td>
    </tr>
</table>

合并单元格

单元格属性
- 表格的单元格可以进行合并，通过th和td的两个属性可以以及逆行合并。
- rowspan:跨行合并。上下的合并
- colspam:跨列合并。左右的合并
- 属性值：数字，数字是表示跨几行或跨几列合并
制作技巧
- 先列出所有行tr,以最小单元格为标准
- 在添加每一行的td或th单元格
- 划分单元格所在的行，顶边对齐的属于同一行
- 将所有的行列写完后，在查看那个单元格有跨行或跨列，属性值的个数要参考最小的单元格

表格分区

一个完整的表格分为：表格标题、表格头部、表格主体、表格页脚
分区标签
- table内部最直接的子集包含四个分区标签，他们都是双标签
  
  caption:表格的标题，内部书写标题文字
  
  thead:table head,表格的头部。内部嵌套tr>th
  
  tbody:table body,表格的主题。内部嵌套tr>td
  
  tfoot:table foot,表格的页脚。内部嵌套tr>td
- 四个分区可以选择性的进行组合
- 注意：无论如何颠倒顺序，浏览器中的加载顺序都会按照caption、thead、tbody、tfoot执行。
制作技巧
1. 先书写大分区标签结构
2. 填充每个分区的内部内容
3. 如果有合并单元格内容，进行单元格合并

表单

功能：收集用户输入的信息

表单的组成

HTML表单用于搜集不同类型的用户输入，表单元素就是网页中提供用户进行输入或者点击的小控件
在HTML中，一个完整的表单通常由表单域、提示信息和表单控件（也称为表单元素）3个部分组成。

功能

表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

表单域标签form

HTML表单域使用form标签进行定义
form标签是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放在一个form标签之内
form标签为双标签，容器级标签

表单域标签属性

form标签通过对应属性规定提交数据的方法和提交位置

属性名属性值描述
action url 指定接收并处理表单数据的服务器程序的url地址
method get/post 用于设置表单的数据的提交方式
name 自定义名称规定表单名称

属性名	属性值	描述
action	url	指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单的数据的提交方式
name	自定义名称	规定表单名称

input标签

单标签，相当于一个特殊的文本
可以通过属性实现各种功能

input标签常用属性

属性名	属性值	描述
type	text	单行文本输入框
type	password	密码输入框
type	radio	单选框
type	checkbox	复选框
type	button	普通按钮
type	reset	重置按钮
type	submit	提交按钮
type	image	图像形式的按钮
type	file	上传文件按钮
type	hidden	定义隐藏的输入字段
name	自定义	定义控件名称
value	自定义	顶控件的默认文本值
size	数字	定义控件的宽度
checked	checked	定义复选框控件默认被选中
maxlength	数字	定义允许输入的最多字符

input标签四种形式的按钮

type	名称	特点
button	普通按钮	没有任何特殊功能
reset	重置按钮	将同一个中填写的表单内容清空，恢复成默认
submit	提交按钮	将填写数据提交到指定的后台服务器，并重置清空中填写的信息
image	图片按钮	默认与提交按钮效果相同，使用的图片需要利用src属性进行路径查找

<form method="get">
    用户名：<input type="text" value="admin"><br>
    密码：<input type="password"><br>
    性别：<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女 <br>
    爱好：<input type="checkbox" checked="checked">健身
    <input type="checkbox">摄影
    <input type="checkbox">代码 <br>
    <input type="button" value="普通按钮">
    <input type="reset" value="重置按钮">
    <input type="submit" value="提交按钮">
    <input type="image" src="images/btn.png" value="图片按钮">
</form>

文件上传 file

input标签的type属性值为file
定义文件上传按钮，可以提供用户选择本地文件进行上传服务器
```
<input type="file">
```
使用input的multiple属性，可以决定是否可以选择多个文件
```
<input type="file" multiple="multiple" /
```

文本域textarea

文本域使用textarea标签定义，制作可以输入多行文本的区域
textarea标签为双标签，本身相当于一个特殊的文字
文本域在双标签内设置默认文字
textarea属性
- 两个标签属性，可以设置显示区域的大小
  - rows:行，属性值是数字，数字表示显示的最大行数，如果超过了行数，会被隐藏并且出现滚动条
  - cols:列，属性值是数字，表示在出现混动条之后每一行显示的最大字节数（一个汉字按两个字节算）
```
<textarea cols="30" rows="10">你好</textarea>   //显示10行，每行15个字
```

下拉菜单

下拉菜单至少需要两个标签完成结构
- select:选择，表示定义下拉菜单的整体结构
- option：选项，表示下拉菜单的每一项
  - 默认选中项：默认选中第一项
  - 更改默认选项：为option标签设置selected属性，属性值为selected
两个标签都是双标签，文本及标签
关系：select>option,option可以有任意多项

分组管理

可以使用optgroup标签对选项进行分组，optgroup是一个双标签
关系：select>optgroup>option

optgroup可以设置一个label属性，给一组选项添加分组标签名，分组标签不能被点击

<select>
        <optgroup label="人">
            <option>小明</option>
            <option>小红</option>
            <option>小花</option>
        </optgroup>
        <optgroup label="动物">
            <option>小狗</option>
            <option>小猫</option>
            <option>小松鼠</option>
        </optgroup>
    </select>

label标签

所有表单元素都可以通过绑定其他内容去扩大出发点击范围
使用进行绑定后，当鼠标点击内的提示内容时，浏览器会自动将焦点转移到和标签相关的表单控件上。

两种绑定方式

性别：
<!--方法一-->
    <input type="radio" name="sex" checked="checked" id="man"> <label for="man"> 男</label>  //此方法适合距离较远的绑定
<!--方法二-->
    <label><input type="radio" name="sex">女</label>   //此方法适合距离近的绑定