HTML标签汇总（基础样式/节、元信息和编程部分）
<html>
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
</html>
👇运行结果👇
style标签用于为HTML文档定义样式信息<style>位于<head>部分内style元素内type是必须的，而“text/css”也是唯一内容- 链接外部样式表应该使用
<link>标签
必需的属性
| 属性 | 值 | 描述 |
|---|
type | text/css | 规定样式表的MIME类型 |
可选属性
| 属性 | 值 | 描述 |
|---|
media | screen——计算机屏幕（默认）
tty——电传打字机以及类似送的使用等宽字符网络的媒体
tv——电视机类型设备（低分辨率，有限的滚动能力）
projection——放映机
handheld——手持设备（小屏幕，有限带宽）
print——打印预览模式/打印界面
braille——盲人电子法反馈设备
aural——语言合成器
all——适用于所有设备 | 为样式表规定不同的媒介类型 |
<div>
<div>可定义文档中的分区或节（division/section）<div>标签可以把文档分隔为独立的，不同的部分。它可以用作严格的组织工具，并且不用使用任何格式与其关联，所以为提高效率应该使用id或class来标记 <div>class用于元素组（类似的元素，或者可以理解为某一类元素）。而id用于单独的唯一元素<div>是一个块级元素，也就是说，浏览器通常会在div元素前后放置一个换行符。
<span>
<span>标签被用来组合文档中的行内元素<span>没有固定的格式表达，只有在使用样式的时候才会发生视觉上的变化，所以和<div>一样应该使用id或class来标记
html
<p class="tip"><span>提示：</span>注意出门戴口罩！</p>
css
p.tip span {
font-weight:bold;
color:#ff9955;
}
👇运行结果👇
<section>
<section>标签定义文档的节（section、区段）。比如章节，页眉，页脚或文档中的其他部分。
<header>
<footer>
<footer>标签定义文档或节的页脚<footer>元素应当含有其包含元素的信息，比如文档的作者、版权信息、使用条款、联系信息恩等- 一个文档中可以使用多个
<footer>元素 <footer>元素内的联系信息应该位于<address>标签中。
<article>
<article>标签规定文章。要求应有其自身的意义。
<aside>
<aside>标签定义其所所处内容之外的内容。比如文章的侧边栏
<dialog>
| 属性 | 值 | 描述 |
|---|
open | open | 规定<dialog>元素是活动的，用户可与之交互 |
<details>
<summary>我有一个秘密</summary>
<p>就不告诉你，略略略~</p>
</details>
👇运行结果👇
点击👉
<details>标签用于描述文档或某个部分的细节<details>标签应该与<summary>标签配合使用。标题是可见的，当用户点击标题时，会显示细节。<summary>标签应该是<detalis>的第一个子元素
details
| 属性 | 值 | 描述 |
|---|
open | open | 定义details是否可见 |
<head>
<head>标签用于定义文档的头部，它是所有头部元素的容器。<head>中的元素可以引用脚本，指示浏览器在哪里找到样式表，提供元信息等等- 绝大多数的文档头部包含的数据都不会真正作为内容展示给读者
- 可以在head部分使用的标签：
<base>、<link>、<meta>、<script>、<style>以及<title>。 <title>定义文档的标题，它是head部分中唯一必需的元素。
| 属性 | 值 | 描述 |
|---|
profile | URL | 一个有空格分隔的URL列表，这些URL中包含有关页面的元数据信息。 |
profile属性的更多信息
- 文档的头部经常会包含一些
<meta> 标签，用来告诉浏览器关于文档的附加信息。
<meta>
<meta>元素可提供有关页面的元信息，比如针对搜索引擎和更新频率的描述和关键词<meta>标签位于文档的头部，不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。
必需的元素
| 属性 | 值 | 描述 |
|---|
content | some_text | 定义与 http-equiv 或 name 属性相关的元信息
content属性始终要和name属性或http-equiv属性一起使用 |
可选的属性
| 属性 | 值 | 描述 |
|---|
http-equiv | content-type
expires
refresh
set-cookie | 把content属性关联到HTTP头部 |
name | author
description
keywords
generator
revised
others | 把content属性关联到一个名称 |
scheme | some_text | 定义用于翻译context属性值的格式 |
<base>
<base>标签为页面上的所有链接规定默认地址或默认目标。- 通常情况下，浏览器会使用当前文档的URL中提取相应的元素来填写相对URL中的空白。
<base> 标签必须位于 head 元素内部。
必需的元素
| 属性 | 值 | 描述 |
|---|
href | URL | 规定页面中所有相对链接的基准URL |
target | _blank——在新窗口中打开
_self——默认。在相同的窗口打开
_parent——在父框架中打开
_top——在整个窗口中打开
framenane——在指定的框架中打开 | 规定在何处打开页面中所有的链接 |
<basefont>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>
👇运行结果👇
<script>标签用于定义客户端脚本，比如JavaScript<script>元素可以包含脚本语句，也可以通过src属性指向外部脚本文件- 假如此元素内部的代码没有位于某个函数中，那么这些代码会在页面被加载时被立即执行。
<frameset>标签之后的脚本会被忽略。
必需的属性
| 属性 | 值 | 描述 |
|---|
type | MIME-type | 指示脚本的MIME类型 |
可选属性
| 属性 | 值 | 描述 |
|---|
async | async | 规定异步执行脚本（仅适用于外部脚本） |
charset | charset | 规定外部脚本文件中使用的字符编码 |
defer | defer | 规定是否对脚本执行延迟，直到页面加载为止
(先加载，再执行脚本) |
lauguage | script | 规定脚本语言
不建议使用，用type代替它 |
src | URL | 规定外部脚本文件的URL |
xml:space | preserve | 规定是否保留代码的空白 |
<noscript>
- 如果浏览器支持脚本，那么它不会显示出noscript元素中的文本
<applet>
- 虽然有些浏览器仍然支持
<applet>标签，但是需要额外的插件和安装过程才能起作用。所以不建议使用。请用<object>标签代替。
<object>
- 定义一个嵌入的对象。请使用此元素向XHTML页面添加多媒体。此元素允许规定插入HTML文档中的对象的数据和参数以及可用来显示和操作数据的代码。
<object>标签用于包含对象，比如图像，音频，视频，Java applets，ActiveX，PDF以及Flash。- 当object未执行时会执行
<object>和</object>之间的代码，通过这种方式，我们可以嵌套多个object元素。 - 不要对图像使用
<object>标签，应使用<img>标签。
| 属性 | 值 | 描述 |
|---|
align | left
right
top
bottom | 定义围绕该对象文本的对齐方式 |
archive | URL | 由空格分隔的指向文件的URL列表，这些档案文件包含了与对象相关的资源 |
border | pixels | 定义对象周围的边框 |
classid | class ID | 指定浏览器中包含的对象的位置，通常是一个Java类
<classid>的值是对象的绝对或相对的URL。如果提供codebase属性的话，相对URL是相对于<codebase>属性指定的URL而言的。 |
codebase | URL | 该属性值是一个URL，这个URL指向的目录包含了<classid>属性所引用的对象。
codebase URL 会覆盖文档的基本URL单不会永久替代它。如果不使用<codebase>属性，这个基本URL就是默认值。 |
codetype | MIME_type | 通过<classid>属性所引用的代码的MIME类型 |
data | URL | 指定供对象处理的数据文件的URL
该属性类似与<img>标签的src属性 |
declare | declare | 用来定义一个对象，但同时防止浏览器进行下载和处理。 |
form | form_id | 规定对象所属的表单 |
height | pixels | 定义对象的高度 |
width | pixels | 定义对象的宽度 |
hspace | pixels | 定义对象周围水平方向的空白 |
vspace | pixels | 定义对象垂直方向的空白 |
name | unique_name | 为对象定义唯一名称 |
standby | text | 定义当对象正在加载时所显示的文本 |
type | MIME_type | 定义被规定在data属性中指定的文件中出现的数据的MIME类型 |
usemap | URL | 规定与对象一同使用的客户端图像映射的URL |
<param>
<para>元素允许您为插入XHTML文档的对象规定run-time设置，也就是说，此标签可为包含它的<object>标签或者<applet>标签提供参数
必需的属性
| 属性 | 值 | 描述 |
|---|
name | unique_name | 定义参数的名称 |
可选的属性
| 属性 | 值 | 描述 |
|---|
type | MIME_type | 规定参数的MIME类型 |
value | value | 规定参数的值 |
valuetype | data
ref
object | 规定值的MIME类型 |
<embed>
| 属性 | 值 | 描述 |
|---|
height | pixels | 设置嵌入内容的高度 |
width | pixels | 设置嵌入内容的宽度 |
src | URL | 嵌入内容的URL |
type | type | 嵌入内容的类型 |
915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
