TML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除;新的技术webworker, websocket, Geolocation.
新增标签
1、<article> 标记定义一篇文章
2、<header> 标记定义一个页面或一个区域的头部
3、<nav> 标记定义导航链接
4、<section> 标记定义一个区域
5、<aside> 标记定义页面内容部分的侧边栏
6、<hgroup> 标记定义文件中一个区块的相关信息
7、<figure> 标记定义一组媒体内容以及它们的标题
8、<figcaption> 标签定义 figure 元素的标题。
9、<footer> 标记定义一个页面或一个区域的底部
10、<dialog> 标记定义一个对话框(会话框)类似微信
11、<video> 标记定义一个视频
12、<audio> 标记定义音频内容
13、<source> 标记定义媒体资源
14、<canvas> 标记定义画布
15、<menu> 右键菜单
16、<meter> 范围条
17、<progress> 进度条
18、<datalist> 为input标记定义一个下拉列表,配合option
表单类型:
1、email 邮箱地址
2、url URL地址
3、date,time,month,week,datetime,datetime-local 日期类型
4、number 数字(max min step)
5、range 范围滑块(max min step)
6、search 搜索输入框
7、tel 电话号码输入框
8、color 颜色拾取器
表单属性
1、placeholder 输入框默认内容
2、required 必填内容(必须加name)
3、pattern 正则验证(必须加name)
4、autofocus 自动聚焦
5、autocomplete 自动完成(autocomplete="on/off")
6、novalidate 不验证此表单(form属性)
7、multiple 多个值上传
移除的元素:
纯表现的元素:basefont,big,center,font, s,strike,tt,u;
对可用性产生负面影响的元素:frame,frameset,noframes;
支持HTML5新标签:
IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式。
当然也可以直接使用成熟的框架、比如html5shiv,地址:https://cdn.bootcss.com/html5shiv/r29/html5.min.js。
作网页时,经常需要设置页面的基本信息,如页面的标题、作者、和其他文档的关系等。为此HTML提供了一系列的标签,这些标签通常都写在head标签内,因此被称为头部相关标签。本节将具体介绍常用的头部标签。
1.设置页面标题标签<title>
<title>标签用于定义HTML页面的标题,即给网页取一个名字,该标签必须位于<head>标签之内。一个HTML文档只能包含一对<title></title>标签,<title></title>之间的内容将显示在浏览器窗口的标题栏中。例如将页面标题设置为“轻松学习HTML5”,具体代码如下:
<title>轻松学习HTML5</title>
上述代码对应的页面标题效果如图1所示。
图 1设置页面标题标签<title>
2.定义页面元信息标签<meta />
<meta />标签用于定义页面的元信息(元信息不会显示在页面中),可重复出现在<head>头部标签中。在HTML中,<meta />标签是一个单标签,本身不包含任何内容,仅仅表示网页的相关信息。通过<meta />标签的两组属性,可以定义页面的相关参数。例如为搜索引擎提供网页的关键字、作者姓名、内容描述,以及定义网页的刷新时间等。下面介绍<meta />标签常用的几组设置,具体如下。
1)<meta name="名称" content="值" />
在<meta />标签中使用name和content属性可以为搜索引擎提供信息,其中name属性用于提供搜索内容的名称,content属性提供对应的搜索内容值,具体应用如下。
●设置网页关键字,例如某图片网站的关键字设置:
<meta name="keywords" content="千图网,免费素材下载,千图网免费素材图库,矢量图,矢量图库,图片素材,网页素材,免费素材,PS素材,网站素材,设计模板,设计素材, 网页模板免费下载,千图,素材中国,素材,免费设计,图片" />
其中name属性的值为keywords,用于定义搜索内容名称为网页关键字,content属性的值用于定义关键字的具体内容,多个关键字内容之间可以用“,”分隔。
●设置网页描述,例如某图片网站的描述信息设置:
<meta name="description" content="专注免费设计素材下载的网站!提供矢量图素材,矢量背景图片,矢量图库,还有psd素材,PS素材,设计模板,设计素材,PPT素材,以及网页素材,网站素材,网页图标免费下载" />
其中name属性的值为description,用于定义搜索内容名称为网页描述,content属性的值用于定义描述的具体内容。需要注意的是网页描述的文字不必过多,能够描述清晰即可。
●设置网页作者,例如可以为网站增加作者信息:
<meta name="author" content="网络部" />
其中name属性的值为author,用于定义搜索内容名称为网页作者,content属性的值用于定义具体的作者信息。
2)<meta http-equiv="名称" content="值" / >
在<meta />标签中使用http-equiv和content属性可以设置服务器发送给浏览器的HTTP头部信息,为浏览器显示该页面提供相关的参数标准。其中,http-equiv属性提供参数类型,content属性提供对应的参数值。默认会发送<meta http-equiv="Content-Type" content="text/html" / >,通知浏览器发送的文件类型是HTML。具体应用如下:
●设置字符集,例如某图片官网字符集的设置:
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
其中http-equiv属性的值为Content-Type,content属性的值为text/html和charset=gbk,两个属性值中间用“;”隔开。这段代码用于说明当前文档类型为HTML,字符集为gbk(中文编码)。目前最常用的国际化字符集编码格式是utf-8,常用的国内中文字符集编码格式主要是gbk和gb2312。当用户使用的字符集编码不匹配当前浏览器时,网页内容就会出现乱码。
值得一提的是,在HTML5中,简化了字符集的写法,变为如下所示代码。
<meta charset="utf-8">
●设置页面自动刷新与跳转,例如定义某个页面10秒后跳转至百度:
<meta http-equiv="refresh" content="10; url=https://www.baidu.com/" />
其中http-equiv属性的值为refresh,content属性的值为数值和url地址,中间用“;”隔开,用于指定在特定的时间后跳转至目标页面,该时间默认以秒为单位。
果想开发一个网站,除了要精通后端开发语言(如:php)外,还要精通HTML代码。那么,什么是HTML呢?HTML是一种超文本标记语言,它包含有众多的标签,我们可以通过这些标签,把不同的internet资源(如:文字、图片、视频、音频、表单等等)整合在一个统一的文档中,这就形成了我们可以看得见的网页。那么,HTML都有哪些常用的标签呢?
html5文档类型声明:<!doctype html>
html4文档类型声明:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这个标签是html最外层的标签,所有其它的HTML标签都要放在这个标签的内部。
<html>
<head></head>
<body></body>
</html>
在HTML标签中,有的标签是成双成对的,如:<html></html>(如下图);而有的标签是单个的,如:<hr>横线标签。
head头部有以下几种常用标签:
meta:主要提供有关页面的元信息。
link:用来定义文档与外部资源的关系,最常用的是调用CSS样式文件。
title:页面标题的标签。
script:用来调用JS文件或JS代码。当然,script标签也可以在body主体中使用。
1、块级标签。
块级标签的特性是:独自占有一行;标签的高与宽、边距可以修改;没有设置宽与高时,默认继承父标签。例如:
<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
前端页面显示的效果如下图:
常用的块级标签有:div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。
2、内联标签。
内联标签与块级标签不同,它不能独自占有一行,会与其它内联标签在同一样展示;内联标签的高与宽、上下边距是不能修改的,它里面的文字或图片有多高,它就是多高。例如如下代码:
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>
CSS样式代码跟块级标签的例子是一样的,而显示的效果就不一样了,宽与高、上下边距没有效果。如下图:
常用的内联标签有:span、a、b、strong、i、em 。
3、内联块级标签。
内联块级标签,既有一些内联标签的特性,也有一些块级标签的特点:它不能独自占有一行,但是可以修改它的宽度和高度。例如下面这段代码:
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">
CSS样式代码跟块级标签的那个例子仍然是一样的,图片的宽和高、上下边距修改成功,而2个图片不能独自占有一行,而是在同一行。如下图:
常用的内联块级标签有:img、input、textarea。
4、区域标签。
所谓区域标签,就是主要用来划分布局页面区域的。如:头部、主体内容、侧边栏、底部。这样划分的好处是:让页面布局更加清晰明了。
常用的区域标签有:header(头部)、footer(底部)、nav(导航)、aside(侧边栏)、section(主体)、article(独立内容)。
5、表单标签。
这个表单标签我们也是会经常用到的,如:登录网站的时候、提交数据的时候。如下图的评论表单:
?表单常用的标签有:form、input、select、option、textarea 。
以上就是我们开发网页时,会常用到的HTML标签。当然,HTML标签远不止这些,尤其是html5出来后,新增了许多的新标签。但是,有些标签在我们开发中很少用到,所以,这里就没有做相应的介绍。
*请认真填写需求信息,我们会在24小时内与您取得联系。