岩石教程

html标签大全

2024-07-14 15:16:11 176
html标签大全及对应属性

基本结构标签

<html>

  • 描述：定义HTML文档的根元素。
  • 常用属性：
属性描述示例值
lang指定文档的语言"en"

<head>

  • 描述：包含文档的元数据（如标题、样式、链接等）。
  • 常用属性：无常用属性。

<title>

  • 描述：定义文档的标题，在浏览器标题栏中显示。
  • 常用属性：无常用属性。

<body>

  • 描述：定义文档的主体内容。
  • 常用属性：
属性描述示例值
onload当文档加载完成时触发的脚本onload="init()"
onunload当文档卸载时触发的脚本onunload="cleanup()"

文本格式化标签

<h1> - <h6>

  • 描述：定义标题，<h1> 为最高级标题，<h6> 为最低级标题。
  • 常用属性：无常用属性。

<p>

  • 描述：定义段落。
  • 常用属性：无常用属性。

<br>

  • 描述：插入换行符。
  • 常用属性：无常用属性。

<hr>

  • 描述：插入水平线。
  • 常用属性：无常用属性。

<strong>

  • 描述：加粗文本。
  • 常用属性：无常用属性。

<em>

  • 描述：斜体文本。
  • 常用属性：无常用属性。

<small>

  • 描述：定义小号文本。
  • 常用属性：无常用属性。

<blockquote>

  • 描述：定义块引用。
  • 常用属性：
属性描述示例值
cite引用的来源URL"http://example.com"

<cite>

  • 描述：引用或引用标题。
  • 常用属性：无常用属性。

<code>

  • 描述：定义计算机代码文本。
  • 常用属性：无常用属性。

链接与媒体标签

<a>

  • 描述：定义超链接。
  • 常用属性：
属性描述示例值
href链接目标URL"http://example.com"
target链接打开方式"_blank"
rel定义与链接目标的关系"noopener"

<img>

  • 描述：嵌入图像。
  • 常用属性：
属性描述示例值
src图像来源URL"image.jpg"
alt替代文本"描述图像内容"
width图像宽度"600"
height图像高度"400"

<video>

  • 描述：嵌入视频。
  • 常用属性：
属性描述示例值
src视频来源URL"video.mp4"
controls显示控制（播放、暂停等）"controls"
autoplay自动播放视频"autoplay"
loop循环播放视频"loop"
muted静音播放视频"muted"
poster视频加载前显示的图像"poster.jpg"

<audio>

  • 描述：嵌入音频。
  • 常用属性：
属性描述示例值
src音频来源URL"audio.mp3"
controls显示控制（播放、暂停等）"controls"
autoplay自动播放音频"autoplay"
loop循环播放音频"loop"
muted静音播放音频"muted"

<source>

  • 描述：指定多媒体资源（如视频或音频）。
  • 常用属性：
属性描述示例值
src资源来源URL"media.mp4"
type资源的MIME类型"video/mp4"

<track>

  • 描述：定义视频和音频的文本轨道。
  • 常用属性：
属性描述示例值
kind轨道类型"subtitles"
src轨道文件来源URL"subtitles.vtt"
srclang轨道语言"en"
label轨道标签"English Subtitles"

<iframe>

  • 描述：嵌入另一个HTML页面。
  • 常用属性：
属性描述示例值
src嵌入页面的URL"http://example.com"
width框架宽度"600"
height框架高度"400"
frameborder框架边框"0"
allow允许的功能"fullscreen; autoplay"

列表标签

<ul>

  • 描述：定义无序列表。
  • 常用属性：无常用属性。

<ol>

  • 描述：定义有序列表。
  • 常用属性：
属性描述示例值
type列表标记的类型"1", "A", "a", "I", "i"
start列表开始序号"1"
reversed列表逆序显示"reversed"

<li>

  • 描述：定义列表项。
  • 常用属性：
属性描述示例值
value列表项的值（仅适用于 <ol> 内）"1"

<dl>

  • 描述：定义定义列表。
  • 常用属性：无常用属性。

<dt>

  • 描述：定义定义列表中的项目。
  • 常用属性：无常用属性。

<dd>

  • 描述：定义定义列表中项目的描述。
  • 常用属性：无常用属性。

表格标签

<table>

  • 描述：定义表格。
  • 常用属性：无常用属性。

<tr>

  • 描述：定义表格行。
  • 常用属性：无常用属性。

<th>

  • 描述：定义表格头单元格。
  • 常用属性：
属性描述示例值
colspan跨越列数"2"
rowspan跨越行数"2"
scope关联表头与数据单元"col", "row", "colgroup", "rowgroup"

<td>

  • 描述：定义表格数据单元格。
  • 常用属性：
属性描述示例值
colspan跨越列数"2"
rowspan跨越行数"2"

<caption>

  • 描述：定义表格标题。
  • 常用属性：无常用属性。

<thead>

  • 描述：定义表格头部。
  • 常用属性：无常用属性。

<tbody>

  • 描述：定义表格主体。
  • 常用属性：无常用属性。

<tfoot>

  • 描述：定义表格尾部。
  • 常用属性：无常用属性。

表单标签

<form>

  • 描述：定义表单。
  • 常用属性：
属性描述示例值
action表单提交的URL"submit.php"
method提交表单的方法"get", "post"
enctype表单数据编码方式"application/x-www-form-urlencoded", "multipart/form-data", "text/plain"

<input>

  • 描述：定义输入控件。
  • 常用属性：
属性描述示例值
type输入类型"text", "password", "email"
name控件的名称"username"
value控件的初始值"John Doe"
placeholder占位符文本"Enter your name"
required是否为必填字段"required"
readonly是否只读"readonly"
disabled是否禁用"disabled"
maxlength输入的最大长度"50"
minlength输入的最小长度"10"
pattern输入的正则表达式"[A-Za-z]{3}"

<textarea>

  • 描述：定义多行文本输入控件。
  • 常用属性：
属性描述示例值
name控件的名称"comments"
rows可见行数"4"
cols可见列数"50"
placeholder占位符文本"Enter your comments"
required是否为必填字段"required"
readonly是否只读"readonly"
disabled是否禁用"disabled"
maxlength输入的最大长度"500"
minlength输入的最小长度"50"

<button>

  • 描述：定义按钮（可点击）。
  • 常用属性：
属性描述示例值
type按钮的类型"button", "submit", "reset"
name按钮的名称"submitButton"
value按钮的值"Submit"
disabled是否禁用"disabled"

<select>

  • 描述：定义下拉列表。
  • 常用属性：
属性描述示例值
name控件的名称"options"
multiple是否允许多选"multiple"
size显示选项的数量"4"
disabled是否禁用"disabled"

<option>

  • 描述：定义下拉列表中的选项。
  • 常用属性：
属性描述示例值
value选项的值"option1"
selected是否选中"selected"
disabled是否禁用"disabled"

<label>

  • 描述：定义控件的标签。
  • 常用属性：
属性描述示例值
for关联的控件的ID"username"

<fieldset>

  • 描述：定义表单中相关元素的分组。
  • 常用属性：无常用属性。

<legend>

  • 描述：定义<fieldset>的标题。
  • 常用属性：无常用属性。

语义标签

<header>

  • 描述：定义文档或节的页眉。
  • 常用属性：无常用属性。

<footer>

  • 描述：定义文档或节的页脚。
  • 常用属性：无常用属性。

<nav>

  • 描述：定义导航链接的部分。
  • 常用属性：无常用属性。

<article>

  • 描述：定义独立的内容。
  • 常用属性：无常用属性。

<section>

  • 描述：定义文档中的节。
  • 常用属性：无常用属性。

<aside>

  • 描述：定义与内容有关的侧边栏。
  • 常用属性：无常用属性。

<main>

  • 描述：定义文档的主要内容。
  • 常用属性：无常用属性。

<figure>

  • 描述：定义图像的分组。
  • 常用属性：无常用属性。

<figcaption>

  • 描述：定义<figure>的标题。
  • 常用属性：无常用属性。

脚本与样式标签

<script>

  • 描述：定义客户端脚本。
  • 常用属性：
属性描述示例值
src外部脚本文件的URL"script.js"
async异步执行脚本"async"
defer延迟执行脚本"defer"
type脚本语言类型"text/javascript"
charset外部脚本文件的字符编码"UTF-8"

<style>

  • 描述：定义文档的样式信息。
  • 常用属性：
属性描述示例值
type样式语言类型"text/css"
media适用的媒体类型"screen", "print"

<link>

  • 描述：定义文档与外部资源的关系。
  • 常用属性：
属性描述示例值
rel定义与链接目标的关系"stylesheet"
href外部资源的URL"styles.css"
type外部资源的MIME类型"text/css"
media适用的媒体类型"screen", "print"

元数据标签

<meta>

  • 描述：定义文档的元数据。
  • 常用属性：
属性描述示例值
charset文档字符编码"UTF-8"
name元数据名称"description", "keywords"
content元数据内容"This is a description."
http-equivHTTP头信息"refresh", "content-type"