Compilation of common skills in html5 basic tutorials-H5 Tutorial-php.cn

Some of the new attributes and functions of HTML5 make the code more concise. This is always a good thing and should be worthy of our praise. I hope this HTML5 article will be of some help to you

1. New Doctype declaration

The declaration of XHTML is too long. I believe that few front-end developers can write this Doctype declaration by hand.

Copy after login The Doctype declaration of HTML5 is very short. I believe you can remember it immediately after seeing this declaration. You don’t have to waste your brain cells to remember the long and a bit abnormal Doctype declaration of XHTML.

Copy after login The short DOCTYPE statement of HTML5 allows modern browsers such as Firefox, Chrome and browsers such as IE6/7/8 to enter (quasi) standards mode. You may be surprised that IE6/ 7 can actually support HTML5 Doctype. In fact, IE will enter standards mode as long as the doctype conforms to this format.

2. tag

Image of Mars. Copy after login Look at the following simple code:

Unfortunately, here The h6 tag seems to have nothing to do with the img tag, and the semantics are not clear enough. HTML5 realized this and adopted the tag. When the is used in combination with the tag, the h6 tag and the img tag can be combined, and the code becomes more semantic.

This is an image of something interesting. Copy after login 3. Redefine

Not long ago, I used the tag to create a subtitle related to the logo . However, the tag has been redefined in HTML5 to make it more semantic. The font size of will become smaller. It would be a good idea to think about using this tag for copyright information at the bottom of the website. .

4. Removed the type attribute of Javascript and CSS tags

Usually you will add the type attribute to and :

Copy after login In HTML5, the type attribute is no longer needed because it seems a bit redundant. Removing it can make the code more concise.

Copy after login 5. Whether to use double quotes

This is a bit confusing, HTML5 is not XTHML, you can omit the double quotes in tags . I believe that most comrades, including me, are used to adding double quotes, because it makes the code look more standard. However, it depends on your personal preference whether to use double quotes or not.

Start the reactor. Copy after login 6. Make web content editable

To-D0 List Break mechanical cab driver Drive to abandoned factory Watc Copy after login 7. Email input box

HMTL5 has added a new email attribute of the input box, which can detect whether the input content conforms to the writing format of the email. The function is getting more and more powerful. , before HTML5 you could only rely on JS for detection. Although built-in form validation will soon become a reality, many browsers do not yet support this attribute and will only treat it as an ordinary text input box.

Email: Submit Form Copy after login So far, this attribute is not supported, including modern browsers, so this attribute is still unreliable for the time being.

8. Placeholders

Placeholders in the text box (see the search box effect of this blog) are helpful to improve the user experience. Before, we only You can rely on JS to achieve placeholder effects. The placeholder attribute placeholder is added in HTML5. For a detailed introduction to this attribute, you can click here: HTML5 form placeholder attribute.

Copy after login Similarly, current mainstream modern browsers do not support this attribute very well. Currently, only Chrome and Safari support this attribute, while Firefox and Opera do not support this attribute.

9. Local Storage

HTML5’s local storage function allows modern browsers to “remember” "Stay" what we input will not be affected even if the browser is closed and refreshed. Although some browsers do not support this function, IE8, Safari 4, and Firefox 3.5 still support this function. You can test it.

10. More semantic header and footer

The following code will no longer exist in HTML5

...

... Copy after login Usually we define a p for header and footer, and then add an id, but in HTML5 you can use the and tags directly, so the above code can be rewritten Into:

... ... Copy after login 要注意不要将这两个标签和网站的头部和页脚混淆起来，它们只是代表它们的容器。

11. IE对HTML5的支持

IE浏览器目前对HTML5的支持并不好，也是阻碍HTML5的更快普及的一大绊脚石，不过，IE9对HTML5的支持度还是很不错的。

IE把HTML5新增的标签都解析成内联元素，而实际上它们是块级元素，所以有必要为它们定义一个样式：

header, footer, article, section, nav, menu, hgroup { display: block; } Copy after login 尽管如此，IE还是不能解析这些新增的HTML5标签，这个时候就需要借助Javascript来解决这个问题：

document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup"); document.createElement("nav"); document.createElement("menu"); Copy after login 你可以借助这一段Javascript代码来修复IE更好的解析HTML5

_fcksavedurl=""http://html5shim.googlecode.com/svn/trunk/html5.js"> " _fcksavedurl=""http://html5shim.googlecode.com/svn/trunk/html5.js"> " Copy after login 12. 标题群( hgroup)

这个类似于第二点技巧。如果用h1和h2标签分别表示网站的名称和副标题，但这会让两个本义上密切相关的标题并没有关联起来。这个时候可以使用 标签将它们组合起来，这样代码会更有语义。

Recall Fan Page Only for people who want the memory of a lifetime. Copy after login 13. 必填项属性

前端人员肯定做过不少表单验证的项目，其中很重要的一点就是有些输入框的内容是必须填写的，这里就需要使用Javascript来检查。在 HTML5中，新增了一个“必须填写”的属性：required。required属性有两种使用方法，第二种方法显得更有结构性，而第一种更简洁。

Copy after login 有了这个属性，使表单的提交验证变得更简单了，看看下面简单的例子：

Your Name: Go Copy after login

如果输入框为空，表单将无法提交成功。

14. 自动获取焦点

同样的，HTML5也不再需要Javascript来解决输入框的自动获取焦点，如果某个输入框应当被选择或是获取到输入焦点，HTML5新增了自动获取焦点属性autofocus：

Copy after login autofocus也同样可以写成”autofocus=autofocus”，这样看起来标准些，这个根据自己的个人喜好而定。

15. 音频播放的支持

HTML5中提供了 标签，解决了以往必须依靠第三方插件才能播放音频文件的问题。目前为止，还只有少数的最新浏览器支持该标签。

Download this file. Copy after login 为什么会有两种格式的音频文件？因为Firefox和Webkit浏览器所支持的格式存在差异，Firefox只能支持.ogg文件，而 Webkit只支持.mp3的文件，解决的办法就是创建两个版本的音频文件，这样就可以兼容Firefox和Webkit的浏览器了，需要注意的是IE不 支持该标签。

16. 视频播放的支持

和 标签一样，HTML5也提供了 标签对播放视频文件的支持。YouTube也宣布了一项新的 HTML5的视频嵌入。不过有点遗憾，HTML5的规范并没有指定特定的视频播放器，而是让浏览器自己来决定。这就造成了个浏览器的兼容问题，虽然 Safari和IE9都支持还H.264格式的视频( Flash 播放器可以可以播放)，Firefox和Opera则支持开源的Theora和Vorbis格式。因此，当显示HTML5视频的时候，也得准备2种格式。

Your browser is old. Download this video instead.

... Copy after login 需要注意的是，type属性虽然可以省略掉，但是如果加上的话，浏览器就可以更快的准确的解析该视频文件。并不是所有的浏览器都支持HTML5的视频，所以得做好使用Flash版本来代替，当然，这个决定权在于你。

17. 预加载视频

预加载属性：preload，首先要确定是否需要预先加载视频，假如，访客在访问一个有很多视频展示的页面，那么就有必要预先加载一段视频，这样可 以节省访客的等待时间，提高用户体验。你可以给 标签添加一个preload属性来实现预先加载的功能。

... Copy after login 18. 显示控件

显示控件属性可以给视频添加一个播放暂停的控件，需要注意的是每个浏览器显示的效果可能会有些差异。

... Copy after login 19. 使用正则表达式

在HTML5中，我们可以直接使用正则表达式。

Create a Username: 10" required="required" autofocus="autofocus" pattern="[A-Za-z]{4,10}"> Go Copy after login 20. 检测浏览器对HTML5属性的支持

由于各浏览器对HTML5属性的支持度不同，这就造成了一些兼容问题。但是可以使用方法来检测该浏览器是否支持这些属性，上例中的代码如果要检测pattern属性是否被浏览器识别，可以使用Javascript代码来检测。

alert( 'pattern' in document.createElement('input') ) // boolean; Copy after login 其实这是确定浏览器兼容常用的方法，jQuery库就经常使用这种方法。上面的代码中创建了一个input标签，并检测pattern属性是否被浏览器支持，如果能支持的话，浏览器就支持这个功能，否则就不支持。

if (!'pattern' in document.createElement('input') ) { // do client/server side validation } Copy after login 21. Mark标签

标签用于高亮显示那些需要在视觉上向用户突出其重要性的文字，包裹在此标签里的字符串必须与用户当前的行为相关。

例如，如 果我在一些博客中搜索“Open your Mind” ，我可以使用在 标签里使用JavaScript来包裹每一次动作。

Search Results They were interrupted, just after Quato said, "Open your Mind" . Copy after login 22. 该如何正确的使用p标签

有些人可能会有疑问，有了 和 等这些标签， 标签在HTML5中还有 用吗？答案是肯定的，比如你想创建一个能包裹特殊内容的容器自由灵活的 肯定是首选，而你要创建一篇文章或者一个导航菜单，建议你使 用更有语义的 和 标签。

很多人认为HTML5可能还是很遥远的事，所以直接无视，其实不然，现在很多网站都已经开始使用HTML5了，事实上，HTML5的一些新增属性和功能是让代码变得更简洁，这总归是一件好事，应该值得我们推崇。最后感谢你阅读了这篇HTML5的文章，希望这篇文章对你有一些帮助。

以上就是本章的全部内容，更多相关教程请访问 Html5视频教程 ！