夜猫子的知识栈 夜猫子的知识栈
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《Web Api》
    • 《ES6教程》
    • 《Vue》
    • 《React》
    • 《TypeScript》
    • 《Git》
    • 《Uniapp》
    • 小程序笔记
    • 《Electron》
    • JS设计模式总结
  • 《前端架构》

    • 《微前端》
    • 《权限控制》
    • monorepo
  • 全栈项目

    • 任务管理日历
    • 无代码平台
    • 图书管理系统
  • HTML
  • CSS
  • Nodejs
  • Midway
  • Nest
  • MySql
  • 其他
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • Ajax
  • Vite
  • Vitest
  • Nuxt
  • UI库文章
  • Docker
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

夜猫子

前端练习生
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《Web Api》
    • 《ES6教程》
    • 《Vue》
    • 《React》
    • 《TypeScript》
    • 《Git》
    • 《Uniapp》
    • 小程序笔记
    • 《Electron》
    • JS设计模式总结
  • 《前端架构》

    • 《微前端》
    • 《权限控制》
    • monorepo
  • 全栈项目

    • 任务管理日历
    • 无代码平台
    • 图书管理系统
  • HTML
  • CSS
  • Nodejs
  • Midway
  • Nest
  • MySql
  • 其他
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • Ajax
  • Vite
  • Vitest
  • Nuxt
  • UI库文章
  • Docker
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • HTML

    • html5
    • html常用代码
    • html常用标签
      • 单闭合标签
      • 字体效果
      • 区断标记
      • 链接
      • 图像/音乐
      • 表格
      • 分割窗口
    • 常用meta整理
  • CSS

  • 页面
  • HTML
夜猫子
2022-06-26
目录

html常用标签

# HTML常用标签

注:HTML 标签对大小写不敏感,但推荐使用小写!

HTML 标签一般是成对出现的,由开始标签如<h1>,左边标签一般叫开始标签,右边</h1>叫结束标签,有始有终,除了一些个别是单闭合标签的,下面列举 HTML 单闭合标签。

# 单闭合标签

标签 功能
<br /> 插入一个换行简单的换行符
<hr /> 定义水平线
<area /> 定义图像映射内部的区域
<base /> 定义页面中所有链接的默认地址或默认目标
<img /> 定义图像
<input /> 定义输入控件
<link /> 定义文档与外部资源的关系
<meta /> 定义关于 HTML 文档的元信息
<basefont /> **不建议使用。**定义页面中文本的默认字体、颜色或尺寸
<param /> 定义对象的参数
<col /> 定义表格中一个或多个列的属性值
<frame /> 定义框架集的窗口或框架
<embed /> 定义外部交互内容或插件

# 字体效果

标签 功能
<h1></h1> 标题字(最大)
<h6></h6> 标题字(最小)
<b></b> 粗体字
<strong></strong> 粗体字(强调)
<i></i> 斜体字
<em></em> 斜体字(强调)
<dfn></dfn> 斜体字(表示定义)
<u></u> 底线
<ins></ins> 底线(表示插入文字)
<strike></strike> 横线
<s></s> 删除线
<del></del> 删除线(表示删除)
<kbd></kbd> 键盘文字
<tt></tt> 打字体
<xmp></xmp> 固定宽度字体(在文件中空白、换行、定位功能有效)
<plaintext></plaintext> 固定宽度字体(不执行标记符号)
<listing></listing> 固定宽度小字体
<font color=00ff00></font> 字体颜色
<font size=1></font> 最小字体
<font style =font-size:100 px></font> 无限增大

# 区断标记

标签 功能
<hr> 水平线
<hr size=9> 水平线(设定大小)
<hr width=80%> 水平线(设定宽度)
<hr color=ff0000> 水平线(设定颜色)
<br> (换行)
<nobr>...</nobr> 水域(不换行)
<p>...</p> 水域(段落)
<center>...</center> 置中

# 链接

标签 功能
<base href=地址> (预设好连结路径)
<a href=地址></a> 外部连结
<a href=地址 target=_blank></a> 外部连结(另开新窗口)
<a href=地址 target=_top></a> 外部连结(全窗口连结)
<a href=地址 target=页框名></a> 外部连结(在指定页框连结)

# 图像/音乐

标签 功能
<img src=图片地址> 贴图
<img src=图片地址 width=180> 设定图片宽度
<img src=图片地址 height=30> 设定图片高度
<img src=图片地址 alt=提示文字> 设定图片提示文字
<img src=图片地址 border=1> 设定图片边框
<bgsound src=MID音乐文件地址> 背景音乐设定

# 表格

标签 功能
<table align=left>...</table> 表格位置,置左
<table align=center>...</table> 表格位置,置中
<table background=图片路径>...</table> 背景图片的URL=就是路径网址
<table border=边框大小>...</table> 设定表格边框大小(使用数字)
<table bgcolor=颜色码>...</table> 设定表格的背景颜色
<table borderclor=颜色码>...</table> 设定表格边框的颜色
<table borderclordark=颜色码>...</table> 设定表格暗边框的颜色
<table borderclorlight=颜色码>...</table> 设定表格亮边框的颜色
<table cellpadding=参数>...</table> 指定内容与网格线之间的间距(使用数字)
<table cellspacing=参数>...</table> 指定网格线与网格线之间的距离(使用数字)
<table cols=参数>...</table> 指定表格的栏数
<table frame=参数>...</table> 设定表格外框线的显示方式
<table width=宽度>...</table> 指定表格的宽度大小(使用数字)
<table height=高度>...</table> 指定表格的高度大小(使用数字)
<td colspan=参数>...</td> 指定储存格合并栏的栏数(使用数字)
<td rowspan=参数>...</td> 指定储存格合并列的列数(使用数字)

# 分割窗口

标签 功能
<frameset cols="20%,* "> 左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整
<frameset rows="20%,* "> 上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整
<frameset cols="20%,* "> 分割左右两个框架
<frameset cols="20%,*,20% "> 分割左中右三个框架
<frameset rows="20%,*,20% "> 分割上中下三个框架
<! - - ... - -> 批注
<a href target> 指定超级链接的分割窗口
<a href=#锚的名称> 指定锚名称的超级链接
<a href> 指定超级链接
<a name=锚的名称> 被连结点的名称
<address>....</address> 用来显示电子邮箱地址
<b>...</b> 粗体字
<base target> 指定超级链接的分割窗口
<basefont size> 更改预设字形大小
<bgsound src> 加入背景音乐
<big> 显示大字体
<blink> 闪烁的文字
<body text link vlink> 设定文字颜色
<body> 显示本文
<br> 换行
<caption align> 设定表格标题位置
<caption>...</caption> 为表格加上标题
<center> 向中对齐
<cite>...<cite> 用于引经据典的文字
<code>...</code> 用于列出一段程序代码
<comment>...</comment> 加上批注
<dd> 设定定义列表的项目解说
<dfn>...</dfn> 显示"定义 "文字
<dir>...</dir> 列表文字卷标
<dl>...</dl> 设定定义列表的卷标
<dt> 设定定义列表的项目
<em> 强调之用
<font face> 任意指定所用的字形
<font size> 设定字体大小
<form action> 设定户动式窗体的处理方式
<form method> 设定户动式窗体之资料传送方式
<frame marginheight> 设定窗口的上下边界
<frame marginwidth> 设定窗口的左右边界
<frame name> 为分割窗口命名
<frame noresize> 锁住分割窗口的大小
<frame scrolling> 设定分割窗口的滚动条
<frame src> 将 HTML 文件加入窗口
<frameset cols> 将窗口分割成左右的子窗口
<frameset rows> 将窗口分割成上下的子窗口
<frameset>...</frameset> 划分分割窗口
<h1>~<h6> 设定文字大小
<head>...</head> 标示文件信息
<hr> 加上分网格线
<html>...</html> 文件的开始与结束
<i>...</i> 斜体字
<img align> 调整图形影像的位置
<img alt> 为你的图形影像加注
<img dynsrc loop> 加入影片
<img height width> 插入图片并预设图形大小
<img hspace> 插入图片并预设图形的左右边界
<img lowsrc> 预载图片功能
<img src border> 设定图片边界
<img src> 插入图片
<img vspace> 插入图片并预设图形的上下边界
<input type name value> 在窗体中加入输入字段
<isindex> 定义查询用窗体
<kbd>...</kbd> 表示使用者输入文字
<li type>...</li> 列表的项目 ( 可指定符号 )
<marquee> 跑马灯效果
<menu>...</menu> 条列文字卷标
<meta name="refresh " content url> 自动更新文件内容
<multiple> 可同时选择多项的列表栏
<noframe> 定义不出现分割窗口的文字
<ol>...</ol> 有序号的列表
<option> 定义窗体中列表栏的项目
<p align> 设定对齐方向
<p>...</p> 分段
<person>...</person> 显示人名
<pre> 使用原有排列
<samp>...</samp> 用于引用字
<select>...</select> 在窗体中定义列表栏
<small> 显示小字体
<strike> 文字加横线
<strong> 用于加强语气
<sub>...</sup> 下标字
<sup>...</sup> 上标字
<table border=n> 调整表格的宽线高度
<table cellpadding> 调整数据域位之边界
<table cellspacing> 调整表格线的宽度
<table height> 调整表格的高度
<table width> 调整表格的宽度
<table>...</table> 产生表格的卷标
<td align> 调整表格字段之左右对齐
<td bgcolor> 设定表格字段之背景颜色
<td colspan rowspan> 表格字段的合并
<td nowrap> 设定表格字段不换行
<td valign> 调整表格字段之上下对齐
<td width> 调整表格字段宽度
<td>...</td> 定义表格的数据域位
<textarea name rows cols> 窗体中加入多少列的文字输入栏
<textarea wrap> 决定文字输入栏是自动否换行
<th>...</th> 定义表格的标头字段
<title>...</title> 文件标题
<tr>...</tr> 定义表格美一行
<tt>...</tt> 打字机字体
<u>...</u> 文字加底线
<ul type>...</ul> 无序号的列表 ( 可指定符号 )
<var>...</var> 用于显示变量
编辑 (opens new window)
上次更新: 2023/7/11 18:57:41
html常用代码
常用meta整理

← html常用代码 常用meta整理→

最近更新
01
IoC 解决了什么痛点问题?
03-10
02
如何调试 Nest 项目
03-10
03
Provider注入对象
03-10
更多文章>
Copyright © 2019-2025 Study | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式