html5标记,html的标记

html5常用标记总结

一、文本标签

1.1 标题标记：hn align=”对齐方式”标题文本/hn

注意：

1.标题准备了h1----h6的标题，按照字号依次递减(块级元素)

2.align表示对齐方式，其值为left,center,right

1.2 字体标记：font face=”字体名称” size=”字号” color=”字体颜色” 文字/font

注意：中文网页以黑体，宋体，3号字的效果显示

1.3 段落标记：p align=”对齐方式” 段落内容/p

注意：p可以作为单标记或双标记：

单标记：段落与上文产生一个空行的间距。

双标记：段落与上下文之间产生一个空行的间距

1.4 换行标记：

注意：br /表示换行，多次换行多次使用br /

1.5 预格式化标记：pre...../pre

注意：预格式化标记可将空格、制表符、回车符等忽略

1.6 转义字符：转义字符让特殊字符显示出来。

语法：实体名称;

二、列表标记

2.1 无序列表

ul type=”列表项的标签符”

li项目一/li

li项目二/li

li项目三/li

......

/ul

注意： type表示了项目符号：

disc(默认) 实心圆

circle：空心圆

square：实心方块

2.2 有序列表：

ol type=”列表项的标记符” start=”起始值”

li项目一/li

li项目二/li

li项目三/li

......

/ol

注意：1. 1:1,2,3,.......

a:a,b,c,d,e.......

A:A,B,C,D,E.......

i:i,ii,iii,iv......

I:I,II,III,IV......

2.start表示起始值,从第几个数开始计算

2.3 嵌套排列

ol type="1"

lih/li

lit/li

ul type="disc"

lim/li

lil/li

/ul

li5/li

/ol

2.4 分割线标记：hr align=”对齐方式” size=”水平线高度” width=”水平线宽度”

color=”水平线颜色”

三、超链接标记

3.1 文本链接：a href=”目标URL” target=”目标窗口”指针文本/a

注意： 1.href表示文本链接的目标资源的URL

绝对地址和相对地址

绝对地址：在任何情况下都可以找到的地址（例如：网址）

相对地址：必须知道当前所在，才能找到（../表示上一级目录，/表示下级目录）例子：../img/baidu.jpg 表示在当前位置的上一层目录下的img文件夹中的baidu.jpg 文件。

3.2 图片标记：img src=”图片文件路径” alt=”提示文本” height=”图片高度” width=”图片宽度”/

3.3 多媒体标记

3.3.1 滚动字幕标记：marquee可以实现文字或图片的跑马灯效果

marquee..../marquee

marquee的属性：

behavior 指定了跑马灯的效果：scroll(滚动)、slide(滑动)、alternate(交替)

bgcolor:跑马灯的背景颜色

direction:跑马灯的移动方向，left（左）、right(右)、up(上)、down(下)

scrolldelay:每次移动的延迟时间，单位毫秒

loop:跑马灯运行次数，-1表示无限循环

height、width

hspace:左右空白宽度

vspace:上下空白宽度

3.3.2 嵌入音乐文件

audio src=”文件地址” 提示文字/audio

3.3.3 嵌入视频文件

video src=”视频文件地址” controls=”controls”提示文字/video

四、表格

4.1 表格基本语法：

table

tr

......

td单元格内容/td

......

/tr

/table

注意：

table:声明一个表格对象

tr:声明一行

td:声明一个单元格

4.2 表格的基本属性

1.align 对齐方式：left、center、right

2.border:表格边框

3.bordercolor:边框颜色

4.bgcolor:表格背景颜色

5.background:背景图片

6.height、width

4.3 单元格合并

1.rowspan:所跨的行数

2.colspan:所跨的列数

五、表单

5.1 表单标签：form action=”URL” method=”get|post” target=”...”/form

注意：form：该标记中包含的数据将被提交到服务器或者电子邮件中

action:指定服务器端处理提交表单信息的程序是什么。URL地址或电子邮件地址

method:get/post:数据传输到服务器的传递方法

target:服务器返回文档结果的显示位置：_blank:在新的浏览器窗口中打开

_self:在当前浏览器中显示

5.2 表单标记

5.2.1 input标签：input type=”类型” name=”服务器 获取用户输入信息的名字” value=”初始值”

注意：1.type类型（输入类型）:

1. text:单行文本框

2. password:密码输入框

3. radio:单选按钮 checked表示默认

4. checkbox:复选框 checked表示默认

5. submit:提交按钮

6. reset:重置按钮

7. button:普通按钮

2.maxlength：输入的最大长度

5.2.2 select标签

select name=”” size=”” multiple

option value=”选项1” 选项1

.......

option value=”选项n” 选项n

/select

注意：name:服务器 获取用户输入信息的名字

value ：初始值

option：下拉框的内容

multiple:多选，若没有multiple则是单选

selected:表示默认选项

size:表示长度

5.2.3 textarea 标签：textarea name=”...” cols=”...” rows=”...” wrap=”off/virtual/physical”

/textarea

注意: name：多行文本框的名称

cols：一行可容纳的字符数

rows：表示可显示额的行数

wrap:virtual和phycal控制自动换行

相关问答

Q1: html5常用标记及用法？

HTML5 新增结构元素分为主体结构元素和非主体结构元素

1.主体结构元素包括 article、section、nav、aside、time

2.非主体结构元素包括 header、hgroup、footer、address

一、主体结构元素

article

article 标签，从语义化上看为文档、页面，其用法如下：

通常是一篇文章、一个页面、一个独立完整的内容模块

一般会带个标题，并放在 header 标签中

article 元素可以互相嵌套

使用频率极高，强调独立性，多注意下与 header 标签的使用。

代码如下:

article

header

h1是我标签/h1

/header

p我是段落/p

article

div我的内容/div

/article

/article

section

section 标签，从语义化上看为部分，其用法如下：

用于页面内容的独立分块，往往是文章的一段

通常由内容和标题组成，没有标题的内容不推荐使用 section

使用频率低，强调分段分块。

注：《HTML5与CSS3权威指南》这本书中说明：一个容器需要被定义样式或者脚本定义行为时，推荐用div而非section，不要将section用作设置样式的容器。

代码如下:

section

h1水果/h1

article

h2苹果/h2

div苹果是撒？/div

/article

article

h2桔子/h2

div桔子是撒？/div

/article

/section

!-- article可以看成是一种特殊种类的section元素,它比section更强调独立性 --

article

h1中国人物/h1

p三国、两晋、南北朝/p

section

h2三国/h3

p猛将猛将猛将猛将/p

/section

section

h2两晋/h3

p猛将猛将猛将猛将/p

/section

/article

nav

nav 标签，从语义化上看为导航，其用法如下：

通常作为页面导航的链接组

侧边栏导航

使用频率高。

代码如下:

nav

ul

lia href=""菜单1/a/li

lia href=""菜单2/a/li

lia href=""菜单3/a/li

/ul

/nav

aside

aside 标签，从语义化上看为在旁边、侧边，其用法如下：

在 article 标签中使用时，作为主要内容的附属信息部分，如有关的参考资料、名词解释等。

在 article 标签外使用时，作为页面或者站点全局的附属信息部分，如侧边栏、博客的友情链接部分、广告区域等。

使用频率低。

代码如下:

!-- 在article标签外使用时 --

article

h1马云是谁/h1

p马云，男，1964年10月15日出生于浙江省杭州市，中国著名企业家，阿里巴巴集团、淘宝网、支付宝创始人........../p

aside

h1参考资料/h1

p百度网、维基百科.../p

/aside

/article/p p!-- 在article标签内使用时 --

aside

nav

ul

lia href=""老赵的博客/a/li

lia href=""鬼哥的博客/a/li

lia href=""彪叔的博客/a/li

/ul

/nav

/aside

time

time 标签，从语义化上看为时间，其用法如下：

代表 24 小时中的某个时刻或某个日期

表示时刻时允许带时间差

可定义很多格式的日期和时间

使用频率低。

代码如下:

time datetime="2013-3-6"2014年3月6日/time

!-- datetime属性中日期与时间之间要用“T” 文字分隔，“T”表示时间 --

time datetime="2013-3-6T20:00"2014年3月6日20:00/time

!-- 时间加上“Z”表示给机器编码时使用UTC标准时间 --

time datetime="2013-3-6T20:00Z"2014年3月6日20:00/time

二、非主体结构元素

header

header 标签，从语义化上看为文档的页眉，其用法如下：

一种具有引导和导航作用的结构元素

通常放置在整个页面或者页面内的一个内容区块的标题

一个网页内并没有限制 header 标签的个数

使用频率极高，比较容易理解。

代码如下:

header

h1我是大头/h1

/header

article

header

h1我是脖子/h1

/header

p我是身体/p

/article

hgroup

hgroup 标签，从语义化上看为标题组，其用法如下：

作为 header 标签的子元素

一个内容模块中包括了主标题和至少一个子标题才使用 hgroup

通常会将 h1~h6 元素进行分组

使用频率高。

代码如下:

article

header

hgrounp

h1我是刘备/h1

h2我是关羽/h2

h3我是张飞/h3

/hgrounp

/header

p吕布惊呆了/p

/article

footer

footer 标签，从语义化上看为文档的脚注，其用法如下：

一个内容块区的脚注

通常内容为联系信息、相关阅读、版权信息等

使用频率高，比较容易理解。

代码如下:

article

p吕布惊呆了/p

footer

ul

li关于三国/li

li地图信息/li

li游戏攻略/li

/ul

/footer

/article

address

address 标签，从语义化上看为地址，其用法如下：

用于文档中呈现的联系信息

通常内容为作者、网站链接、电子邮箱、地址、电话号码等

使用频率低。

代码如下:

address

a href=""作者：张三丰/a

a href=""地址：武当山/a

a href=""联系方式：1247/a

/address

Q2: html5新增标签有哪些

html5新增标签如下：

1、结构性标记结构性标记主要用来对页面结构进行划分，就像在设计网页时将页面分为导航、内容部分、页脚等，确保HTML文档的完整性。

2、多媒体标记多媒体标记主要解决了以往通过Flash等进行视频的一些展示，新增的标记使HTML功能变得更加强大了。

3、表单标记表单标记主要用于功能性的内容表达，会有一定的内容和数据的关联。

html5的意义及应用。

在HTML页面中，带有“ ”符号的元素被称为HTML标签，如上面提到的 HTML、head、body都是HTML标签。所谓标签就是放在“ ” 标签符中表示某个功能的编码命令，称为HTML标签。

该语法中“标签名”表示该标签的作用开始，一般称为“开始标签（start tag）”，“/标签名” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。