html 基础标签

这篇博客详细介绍了HTML的基础标签,包括注释、DOCTYPE声明、超链接<a>、图像映射<area>、文本格式化标签如<b>、<i>、<u>、<s>等,以及表格相关标签如<table>、<tr>、<th>、<td>。还提到了HTML5中新增的标签,如<section>、<article>、<aside>、<audio>等,以及如何使用这些标签来增强网页内容的表现力和结构化。
摘要由CSDN通过智能技术生成
<!-- -->标签
单标签,注释标签
注释内容写在标签内



<!DOCTYPE>标签
单标签,声明标签
声明标签必须位于文档的第一行,告诉浏览器文档类型
生命标签对大小写不敏感
不同的html页面有不同的声明方式,但必须有声明标签



<a></a>标签
对标签,超链接标签
从一张页面链接到另一张,或从一张页面的一个区域链接到另一个区域
最重要的属性:href:指明链接的地址。
未被访问的链接,带下划线,且是蓝色
已被访问的链接,带下划线,且是紫色
活动链接,带下划线,且是红色
--------------------------------------
提示:如果不使用 href 属性,则不可以使用如下属性:download, hreflang, media, rel, target 以及 type 属性。
提示:被链接页面通常显示在当前浏览器窗口中,除非您规定了另一个目标(target 属性)。
提示:请使用 CSS 来设置链接的样式
--------------------------------------
在 HTML 4.01 中,<a> 标签可以是超链接或锚。
在 HTML5 中,<a> 标签始终是超链接,但是如果未设置 href 属性,则只是超链接的占位符。
--------------------------------------
charset char_encoding HTML5 中不支持。规定被链接文档的字符集。
coords coordinates HTML5 中不支持。规定链接的坐标。
download filename 规定被下载的超链接目标。
href URL 规定链接指向的页面的 URL。
hreflang language_code 规定被链接文档的语言。
media media_query 规定被链接文档是为何种媒介/设备优化的。
name section_name HTML5 中不支持。规定锚的名称。
rel text 规定当前文档与被链接文档之间的关系。
rev text HTML5 中不支持。规定被链接文档与当前文档之间的关系。

shape HTML5 中不支持。规定链接的形状。
default
rect
circle
poly

target 规定在何处打开链接文档。
_blank
_parent
_self
_top
framename

type MIME type 规定被链接文档的的 MIME 类型。
---------------------------------------------------------------------
<a>标签支持html中的全局属性和事件属性



<abbr></abbr>标签
对标签,指示标签
对缩写,关键文本,链接标记,配合title属性达到解释说明的作用
<abbr> 标签最初是在 HTML 4.0 中引入的,表示它所包含的文本是一个更长的单词或短语的缩写形式。
配合css样式,凸显被标记的内容



<acroym></acroym>标签
对标签,指示标签
HTML5 中不支持 <acronym> 标签。请使用 <abbr> 标签代替。
效果相同



<adddress></address>标签
对标签,作者/拥有者标识标签
一般附带有联系方式,或介绍
如果 <address> 元素位于 <body> 元素内,则它表示文档联系信息。
如果 <address> 元素位于 <article> 元素内,则它表示文章的联系信息。
<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行
-------------------------------------------------------------------------------
提示:<address> 标签不应该用于描述通讯地址,除非它是联系信息的一部分。
提示:<address> 元素通常连同其他信息被包含在 <footer> 元素中。
--------------------------------------------------------------------------------
HTML 4.01 不支持 <article> 标签,因此在 HTML 4.01 中,<address> 标签始终定义文档作者/拥有者的联系信息。



<area/>标签
单标签,映射区域标签
<area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像)
area 元素总是嵌套在 <map> 标签中。
注释:<img> 标签中的 usemap 属性与 map 元素 name 属性相关联,创建图像与映射之间的联系。
<img> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性(由浏览器决定)
所以我们需要同时向 <map> 添加 id 和 name 两个属性。
------------------------------------------------------
在 HTML 中,<area> 没有结束标签。
在 XHTML 中,<area> 必须正确地关闭。
-------------------------------------------------------
必须属性:alt:定义此区域的替换文本
可选属性:
coords 坐标值 定义可点击区域(对鼠标敏感的区域)的坐标。
href URL 定义此区域的目标 URL。
nohref nohref 从图像映射排除某个区域。
shape 定义区域的形状。
default
rect
circ
poly
target 规定在何处打开 href 属性指定的目标 URL。
_blank
_parent
_self
_top



<article></artical>标签
对标签,自包含文本标签
标签规定独立的自包含内容
一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。
<article> 元素的潜在来源:
论坛帖子
报纸文章
博客条目
用户评论
<article> 标签是 HTML 5 中的新标签。



<aside></aside>标签
对标签,附加内容标签
<aside> 标签定义其所处内容之外的内容,内容应该与附近的内容相关。
提示:<aside> 的内容可用作文章的侧栏。
<aside> 标签是 HTML 5 的新标签。



<audio></audio>标签
对标签,音频标签
<audio> 标签定义声音,比如音乐或其他音频流。
<audio> 标签是 HTML 5 的新标签。
提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。
-------------------------------------------------------------------
属性:
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
muted muted 规定视频输出应该被静音。
preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
src url 要播放的音频的 URL。



<br/>标签
单标签,换行标签
可选属性:clean:本流在内联表格或图像的下一行继续输出



<b></b>标签
对标签,粗体文本标签
<b> 标签规定粗体文本。



<base/>标签
单标签,基准地址标签
<base> 标签为页面上的所有链接规定默认基准地址或默认目标。
使用 <base> 标签,浏览器随后将不再使用当前文档的 URL
而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。
(可以理解为设置一个默认路径,其他地址都在这个默认路径前提下进行相对地址访问)
在 HTML 中,<base> 标签没有结束标签;在 XHTML 中,<base> 标签必须被正确地关闭。
<base> 标签必须位于 head 元素内部
------------------------------------------
必须属性:href:规定相对应页面链接的url链接地址
可选属性:target :在何处打开页面中所有的链接。
_blank
_parent
_self
_top
framename



<basefont/>标签
单标签,默认字体及颜色标签
只有IE支持,不推荐使用



<bdi></bdi>标签
对标签,隔离标签
<bdi> 标签是 HTML5 中的新标签。
<bdi> 标签允许您设置一段文本,使其脱离其父元素的文本方向设置。
在发布用户评论或其他您无法完全控制的内容时,该标签很有用。
----------------------------------------------------------------
dir 可选。规定 <bdi> 元素内的文本的文本方向。默认值:auto。
ltr
rtl
auto
-----------------------------------------------
目前只有 Firefox 和 Chrome 支持 <bdi> 标签。



<bdo></bdo>标签
对标签,文本方向标签
bdo 元素可覆盖默认的文本方向。
属性:
ir 定义文字的方向
ltr
rtl



<big></big>标签
对标签,大号文本标签
<big>标签之间的文字时,其字体比周围的文字要大一号。
但是,如果文字已经是最大号字体,这个 <big> 标签将不起任何作用



<blockquote></blockquote>标签
对标签,引用块标签
<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,
经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。
也就是说,块引用拥有它们自己的空间。
可选属性:
cite URL 规定引用的来源。
现在所有浏览器不支持cite这个属性



<body></body>标签
对标签,文档内容标签
定义文档的主体,包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)
body元素的呈现属性都被不赞成使用



<button></button>标签
对标签,按钮标签
在 button 元素内部,您可以放置内容,比如文本或图像。
---------------------------------------------------------------------
<button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。
<button> 与 </button> 标签之间的所有内容都是按钮的内容,
其中包括任何可接受的正文内容,比如文本或多媒体内容。
例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。
----------------------------------------------------------------------
唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。
请始终为按钮规定 type 属性。
Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。
------------------------------------------------------------------------
HTML 5 中的新属性:autofocus, form, formaction, formenctype, formmethod, formnovalidate 以及 formtarget。
注释:如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的按钮值。
请使用 input 元素在 HTML 表单中创建按钮。
-------------------------------------------------------------------------
HTML5 中的新属性。
autofocus autofocus 规定当页面加载时按钮应当自动地获得焦点。
disabled disabled 规定应该禁用该按钮。
form form_name 规定按钮属于一个或多个表单。
formaction url 覆盖 form 元素的 action 属性。注释:该属性与 type="submit" 配合使用。
formenctype 见注释 覆盖 form 元素的 enctype 属性。注释:该属性与 type="submit" 配合使用。
formmethod 覆盖 form 元素的 method 属性。注释:该属性与 type="submit" 配合使用。
get
post
formnovalidate formnovalidate 覆盖 form 元素的 novalidate 属性。 注释:该属性与 type="submit" 配合使用。
formtarget 覆盖 form 元素的 target 属性。注释:该属性与 type="submit" 配合使用。
_blank
_self
_parent
_top
framename
name button_name 规定按钮的名称。
type 规定按钮的类型。
button
reset
submit
value text 规定按钮的初始值。可由脚本进行修改。
-------------------------------------------------------------------------------------
注释:formenctype 属性可能的值:
application/x-www-form-urlencoded
multipart/form-data
text/plain



<canvas></canvas>标签
对标签,自定义图形标签
<canvas> 标签定义图形,比如图表和其他图像。
<canvas> 标签只是图形容器,您必须使用javaScript脚本来绘制图形。
<canvas> 标签是 HTML 5 中的新标签。
属性:
height:设置高度 width:设置宽度
----------------------------------------------------------------------
<canvas> 标记和 SVG 以及 VML 之间的差异
<canvas> 标记和 SVG 以及 VML 之间的一个重要的不同是
<canvas> 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。
这两种方式在功能上是等同的,任何一种都可以用另一种来模拟。
从表面上看,它们很不相同,可是,每一种都有强项和弱点。
例如,SVG 绘图很容易编辑,只要从其描述中移除元素就行。
要从同一图形的一个 <canvas> 标记中移除元素,往往需要擦掉绘图重新绘制它。
------------------------------------------------------------------------------------
如何使用 <canvas> 标记绘图
大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上,
而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。
Canvas API 也使用了路径的表示法。
但是,路径由一系列的方法调用来定义,而不是描述为字母和数字的字符串,
比如调用 beginPath() 和 arc() 方法。
一旦定义了路径,其他的方法,如 fill(),都是对此路径操作。
绘图环境的各种属性,比如 fillStyle,说明了这些操作如何使用。
-----------------------------------------------------------------------------------
注释:Canvas API 非常紧凑的一个原因是它没有对绘制文本提供任何支持。
要把文本加入到一个 <canvas> 图形,必须要么自己绘制它再用位图图像合并它,
或者在 <canvas> 上方使用 CSS 定位来覆盖 HTML 文本。



<caption></caption>标签
对标签,表格标题标签
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。
通常这个标题会被居中于表格之上。
可选属性:align 不赞成使用。请使用样式取而代之,规定标题的对齐方式。
left
right
top
bottom



<center></center>标签
对标签,文本水平居中标签
不推荐使用,居中等样式推荐使用CSS 样式



<cite></cite>标签
对标签,文本引用标签
<cite> 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
按照惯例,引用的文本将以斜体显示。
用 <cite> 标签把指向其他文档的引用分离出来,
尤其是分离那些传统媒体中的文档,如书籍、杂志、期刊,等等。
如果引用的这些文档有联机版本,还应该把引用包括在一个 <a> 标签中,从而把一个超链接指向该联机版本。
<cite> 标签还有一个隐藏的功能:
它可以使你或者其他人从文档中自动摘录参考书目。
我们可以很容易地想象一个浏览器,它能够自动整理引用表格,并把它们作为脚注或者独立的文档来显示。
<cite> 标签的语义已经远远超过了改变它所包含的文本外观的作用;
它使浏览器能够以各种实用的方式来向用户表达文档的内容。
----------------------------------------------------------
一系列特殊文本操作标签,如果只追求样式改变,推荐使用级联样式列表
<em> 把文本定义为强调的内容。
<strong> 把文本定义为语气更强的强调的内容。
<dfn> 定义一个定义项目。
<code> 定义计算机代码文本。
<samp> 定义样本文本。
<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<cite> 定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。



<col/>标签
单标签,表格列属性标签
<col> 标签为表格中一个或多个列定义属性值。
如需对全部列应用样式,<col> 标签很有用,这样就不需要对各个单元和各行重复应用样式了。
您只能在 table 或 colgroup 元素中使用 <col> 标签。
--------------------------------------------------------------
提示:请为 <col> 标签添加 class 属性。这样就可以使用 CSS 来负责对齐方式、宽度和颜色等等。
提示:如果您希望在 colgroup 内部为每个列规定不同的属性值时,请使用此元素。
如果没有 col 元素,列会从 colgroup 那里继承所有的属性值。
注释:col 元素是仅包含属性的空元素。如需创建列,您就必须在 tr 元素内部规定 td 元素。
---------------------------------------------------------------
可选属性:
align 规定与 col 元素相关的内容的水平对齐方式。
right
left
center
justify
char
char character 规定根据哪个字符来对齐与 col 元素相关的内容。
charoff number 规定第一个对齐字符的偏移量。
span number 规定 col 元素应该横跨的列数。
valign 定义与 col 元素相关的内容的垂直对齐方式。
top
middle
bottom
baseline
width 规定 col 元素的宽度。
pixels
%
relative_length



<colgroup><
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值