html标签汇总

最新推荐文章于 2024-12-07 17:27:31 发布

子月吾生

最新推荐文章于 2024-12-07 17:27:31 发布

阅读量243

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Sunday97/article/details/81506395

本文详细介绍了HTML中的各种标签，包括元信息标签、标题标签、段落标签、换行符、预格式化文本、字体样式标签、水平线、图像、超链接、表格、表单元素等，覆盖了网页布局和交互的基本要素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html标签

1.meta
提供有关网页的信息，作用→在html文件中模拟http的响应头报文，是实现元数据的主要标记。
语法：

<meta http-equiv="value" content="value">
<meta name="value" content="value">

即http-equiv 属性可用来代替meta 标签中的 name 属性

功能：
 @定义字符集

<meta http-equiv=“content-type” content=“text/html;charset=value”>

 @设定自动更新

<meta http-equiv=“refresh” content=“value”>

 @设定跳转url

<meta http-equiv=refersh" content="3; url=http://网址">

 @设定禁用缓存

<meta http-equiv=“cache-control” content=“no-cache”>

 @设定有效期限

<meta http-equiv=“expires” content=“value”>
<meta http-equiv=“expires” content=“星期，日 月 年 时 分 秒”>

2.  <h></h>
H1 到 H6 标签用于指定不同级别的标题，结果是能够自动换行，
字体会逐级变小，每级之间会有一个行间距
<Font color=“颜色” size=“大小” face＝“字体”>

**3.<p>段落标签</p>**
用于标记段落，结果是能够自动换行，每段之间会有一个行间距

**4.<br>强制换行符**

**5.<pre>...</pre>**
用于显示具有预先定义格式的文本

**6.<b>加粗标签</b>**


**7.<i>斜体标签</i>**

8.<u>加下划线标签</u>**

**9.<sub>下标标签</sub>**
         例如 H<SUB>2</SUB>O

结果为：H₂O

**10.<sup>上标标签</sup>**
         例如 3<SUP>2</SUP>

结果为： 3²

11.<hr> 
用于在页面上绘制水平线
例如<hr noshade size = 5 align = center width = 50%>

结果为：

12.<img>插入图像
例如<img align=center src=Animal.jpg>

13.<a>超级链接</a>

例如:可以用成锚链接进而跳转到页面某处
<a href=dog.team>请点击此处</a>

14.<table border= 2 >表格标签

<caption align=top>学员档案信息</caption> //表格标题标签

 <TR> //行标签
   <TD colspan=2>姓名</TD> //列标签，可用th代替
   <TD rowspan=2>性别</TD>
</TR>
</table>

说明:
<TABLE>代表表格的开始,COLSPAN=“n” 属性表示跨多少列 
ROWSPAN=“n” 属性表示跨多少行

<table border="2px">
    <caption>IT课程报名人数</caption>
    <tr>
        <td>前端开发</td>
        <td>Java开发</td>
        <td>运维工程师</td>
    </tr>
    <tr>
        <td>10人</td>
        <td>5人</td>
        <td>7人</td>
    </tr>
</table>

显示结果为：
表格图片

15.<FORM action=“http://www.sohu.com” method=“post”>表单标签

说明：action指定提交后由服务器上哪个处理程序处理 
post指定向服务器提交的方法:一般为post或get方法, post方法比较安全

表单语法：
 <FORM action=“?”  method=“?” > 

 例如： 
 文本框 <INPUT type＝“text”  name＝“？” value＝“女生” 
  maxlength=“？">

显示结果为：
文本框

16.密码框 <INPUT type＝“password”  name＝“？” value＝“” >
例如:
  请输入六位密码:<input type="password" name="?" value="******">

密码框

17.文本域 <textarea name=“？” cols=“？” rows=“？”>
  </textarea >

 18.单选按钮<INPUT TYPE=radio NAME=”？”  VALUE=”？”>
例如：
<input class="c" type="radio" name="" value="1">男
<input class="c" type="radio" name="" value="1">女

显示结果为：
这里写图片描述

19.复选框<input type="Checkbox" name="？" value="？">

20.下拉菜单：
<SELECT NAME ="？">
<OPTION >选项1</OPTION>
<OPTION>选项2</OPTION>
<OPTION>...</OPTION>
</select>
例如：
<select>
    <option selected>水果</option>
    <option>蔬菜</option>
</select>

显示结果为：
这里写图片描述

21.提交按钮：
<INPUT type="Submit" value="提交" name="?">
例如：
<input type="submit" name="?" value="请提交">

显示结果为：
这里写图片描述

 22.<INPUT type="reset" value="重置" name="?">

23.<div>块级容器标签</div>
可以包含图片、标题、段落、文字等

24.<span>行级容器标签</span>
不可以包含图片、标题、段落等，只能包含文字内容

**CSS样式：**

@行内样式
<p style=“color:#FF00FF; font-family:隶书; font-  
         weight:bold; font-size:24px">  行内样式</p>

@内嵌样式——html选择器
<STYLE TYPE="text/css" >    
 P
 {
  font-size:20px;
  color:blue;
  text-align:center
 }
</STYLE>

@内嵌样式——Class类选择器
定义格式：
.类名
{
  …样式规则;
} 

@内嵌样式——ID选择器
定义格式：
＃ID名
{
  …样式规则;
} 

@外部样式——LINK（链接）标签 
语法：
<HEAD>
<LINK   rel = “stylesheet”    type = ”text/css”  href = ”样式表文件.css” >
</HEAD>

外部样式——@import导入 
语法：
<HEAD>
<STYLE type="text/css">
@import  "样式表文件.css";
</STYLE>
</HEAD>