行业分类
广州前端培训 常见的HTML5技巧和实际应用(上)
日期:2016-10-20 10:43  点击:171
 前端开发这个行业发展飞速,特别是即将普遍的HTML5,蓝鸥广州html5开发培训机构本文将整理HTML5的基本使用。对于HTML5的新增属性,已经在前面讲过了,欢迎回归。

 

1,新DOCTYPE

还在使用那个讨厌的的标准doctype?试试下面这个

<DOCTYPE HTML >

 

2. <figure>标签(图元素)

<figure>

<img src="path/to/image" alt="about image">

<figcaption>

<h6>This is an image of something interesting. </h6>

</figcaption>

</figure>

 

3. small重新定义

不久前,我使用了<small>标签来创建与logo相关的副标题。但是在HTML5中重新定义了<small>标签,使之更能表现语义化,在<small>的字号都会变小,想想如果这个标签用于网站的底部的版权信息还是个不错的做法。

 

4. 去掉了javascriptCSS标签的type属性

HTML5中,不再需要type属性了,因为这显得有点多余,去掉之后可以让代码更为简洁。

<link href="path/to/stylesheet.css">

<script src="path/to/script.js"></script>

 

5. 是否使用双引号

<h6 id="someId"> Start the reactor.  </h6>

 

6. 使网页内容可以编辑

<h6 contenteditable="true">Break mechanical cab <span>driver</span></h6>

 

7. 电子邮件输入框

HMTL5中新增了一个输入框的电子邮件属性,可以检测输入的内容是否符合电子邮件的书写格式,功能越来越强大了吧,在HTML5之前只能依靠JS来检测。虽然内置的表单验证功能很快就会成为现实,但这个属性很多浏览器都还不支持,只会当作普通的文本输入框来处理。

<form method="get">

<label for="email">Email:</label>

<input id="email" name="email" type="email">

<button> Submit Form </button>

</form>

 

8. 占位符

<input name="email" placeholder="doug@givethesepeopleair.com" type="email">

 

9. 本地存储

HTML5的本地存储功能,可以让现代浏览器“记住”我们输入的,就算浏览器关闭和刷新也不会受影响。虽然这个功能有些浏览器不支持,但是IE8, Safari 4, 还有 Firefox 3.5还是支持这个功能的,你可以测试下。

 

10. 更有语义的headerfooter

<header>

...

</header>

 

<footer>

...

</footer>

 

好啦,这只是蓝鸥广州web前端开发学员的一些心得,希望那些即将踏入这个行业的人能够多多努力,在此小编也希望大家能收获属于自己的一分果实。记住做任何事情都需要坚持,不管你遇到什么困难,如果你心中的防线塌了,你就真正的失败了。

关于网站  |  普通版  |  触屏版  |  网页版
11/24 16:20
首页 刷新 顶部