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控制自动换行

html5语法

基本沿用了html基础语法。但更简洁更人性化,主要有以下5点：

!doctype html

字符集设置

meta charset="utf-8"

不允许写的结束符的标签： area、basebr、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr

可以省略结束符的标签： li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th

新增结构化标签 ：

    从div...div/派生而出

(1)header标签 :顾名思义，header标签用于将 HTML 页面的一部分标记为页眉。

(2)section标签 :section标签用于标识页面上的重要内容部分。该标签有点类似于将一本书分成几个章节。

(3)article标签 :article标签标识了 Web 页面中的主要内容。以博客为例，每篇帖子都构成一个重要内容。

(4)aside标签 :aside标签表示标签中包含的内容与页面主要内容相关，但不是该页面的一部分。这有点类似于使用括弧对正文进行注释（就像这样）。括弧中的内容提供关于该元素的一些附加信息。

(5)footer标签 :footer标签将所包含的元素内容标记为文档的页脚。

( 6)nav标签 :nav标签中包含的内容主要用于导航。

示例：

新增媒体标签：

video

audio

embed

input type="checkbox" checked/

写明表示true；否则false

不区分大小写，与xhtml不同

单双引号皆可，有空格时不行。

html5中怎么用空格播放和暂停视频

var isplay = true;//默认是播放的

var video = document.getElementById("myVideo");

document.onkeyup=function(event){

var e = event || window.event || arguments.callee.caller.arguments[0];

if(e e.keyCode==8){ // 按 空格并让它弹起

//要做的事情

if(isplay) {//判断当前播放状态

isplay = false;

video.pause();

}else {

isplay = true;

video.play();

}

};

写HTML代码时，缩进选用一个Tab键还是4个空格？

业内有过缩进选用Tab还是空格的争论。在缩进方面，Tab键和空格这两种方法的特点并不相同。

1、        Tab键与空格缩进的特点

Tab键：在书写代码时会很方便，但是在不同编辑器当中，距离大小有可能不同。在编辑器当中，一个Tab键的长度大小存在一个默认值，这个默认值可以是两个空格长度，也可以是4个，还可以是8个。由于团队开发当中，每个人的编辑器默认情况下可能不一致，从而有可能造成A的代码放到B的编辑器中时，缩进的长度发生变化。

4个空格：在每个编辑器中，空格大小一致，其不足之处在于：代码书写时会比较麻烦，需要按多次空格键。

2、        如何选择缩进方式

其实并不需要纠结这个问题，各个编辑器都提供了“空格”和Tab键的相互转换。因此，完全可以使用Tab键进行书写，在书写完毕之后，将Tab键转换为空格，之后生成最终文件即可。当然，有些公司并不要求使用空格，那开发工程师就更方便了。

最终文件采用哪种方式，需要根据公司要求而定。如果公司没有硬性要求，那么自己的代码一定要保持一致性，不要出现“10个文件中，3个使用的是空格进行缩进，7个使用的是Tab键进行缩进”这种现象。

如图所示，在Sublime编辑器中，可以进行选项卡宽度的设定，也可以实现空格与Tab键的互相转换。

资料来源：《HTML5布局之路》

html空格怎么写

通常情况下，我们用空格键来打出多个空格，而在编写代码时，通过空格键、Tab键以及回车键打出的空格，都会被HTML（超文本标记语言）自动忽略。HTML将这样的键视为空白字符，并显示为单个空白间隔。尽管CSS提供了多种样式的空格和缩进，但是在HTML中也有一些工具可以让你自己定义空格。

1、插入一个非间断空格

一般来说，无论你按多少次空格键，HTML也只会在单词之间显示一个空白间隔。当你需要插入多个空格时，请输入nbsp;或#160;代码。[1] 它们名为“空格占位符”，你输入几个，就能在页面中显示几个空格。之所以称之为非间断空格，是因为这样不会产生换行符。如果你滥用这种空格，浏览器可能无法以整齐易读的方式插入换行符。

2、插入不同宽度的空格

有多种字符实体可以让浏览器显示空格。不同的浏览器在显示方式上可能会有一点不同，但是和nbsp;不同，它们不会影响换行：

ensp; — “en空格”是根据字体排印学的计量单位命名，宽度是两个普通空格的宽度

emsp; — “em空格”大概是四个普通空格的宽度

3、使用非间断空格模拟制表符

生成段落的一种方式就是在第一行前插入几个空格：nbsp;nbsp;nbsp;nbsp;。这个方法只适用于HTML，如果你使用CSS的话，不推荐这一方法（在其它步骤中会介绍别的方法）。如果段落的内容是富文本，请使用“pre”标签。

4、使用CSS生成段落。

CSS的内边距或外边距给浏览器指明了具体的显示格式，所以显示效果的一致性较高。即使你不是很了解CSS，手边也没有说明表，也可以很容易地添加。下面将具体说明如何将整个段落移到右边：[5]

在HTML文档的head/head部分，插入以下命令：

stylep.indent{ padding-left: 1.8em }/style

“p.indent”定义了一个叫“indent”（可以随意命名）的段落（标签为p）。剩下的命令则是给段落左侧添加内边距空格。

返回HTML文档的主体。每当你想添加段落时，在标签中插入以下内容：

p class="indent"/p

要调整缩进的数量，只需要更改CSS命令中的数字“1.8”即可。后面的“em”要保留，它是表示宽度的单位。

分享名称：html5空格,html5空格字符
文章地址：http://ybzwz.com/article/dsggshc.html