Home >Web Front-end >H5 Tutorial >Compilation of common skills in html5 basic tutorials

Compilation of common skills in html5 basic tutorials

PHPzOriginal: 2016-05-16 15:48:541416browse

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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.

<!DOCTYPE html>

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. 24203f2f45e6606542ba09fd2181843a tag

<img alt="About image" src="path/to/image"> 
<h6>Image of Mars.</h6>

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 24203f2f45e6606542ba09fd2181843a tag. When the 24203f2f45e6606542ba09fd2181843a is used in combination with the 614eb9dc63b3fb809437a716aa228d24 tag, the h6 tag and the img tag can be combined, and the code becomes more semantic.

<figure> 
<img alt="About image" src="path/to/image"> 
<figcaption> 
<h6>This is an image of something interesting. </h6> 
</figcaption> 
</figure>

3. Redefine d015d241ae6d34c34210679b5204fe85

Not long ago, I used the d015d241ae6d34c34210679b5204fe85 tag to create a subtitle related to the logo . However, the d015d241ae6d34c34210679b5204fe85 tag has been redefined in HTML5 to make it more semantic. The font size of d015d241ae6d34c34210679b5204fe85 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 2cdf5bf648cf2f33323966d7f58a7f3f and 3f1c4e4b6b16bbbd69b2ee476dc4f83a:

<link rel=stylesheet type=text/css href="path/to/stylesheet.css"> 
<script type=text/javascript src="path/to/script.js"></script>

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

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

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.

<h6 id=someId class=myClass> Start the reactor.</h6>

6. Make web content editable

<h2>To-D0 List</h2> 
<ul contenteditable> 
　　<li>Break mechanical cab driver</li> 
　　<li>Drive to abandoned factory</li> 
　　<li>Watc</li> 
</ul>

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.

<FORM method=get> 
<LABEL for=email>Email:</LABEL> 
<INPUT id=email type=email name=email> 
<BUTTON type=submit> Submit Form </BUTTON> 
</FORM>

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.

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

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

<p id=header> 
... 
</p> 
<p id=footer> 
... 
</p

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

<HEADER> 
... 
</HEADER> 
<FOOTER> 
... 
</FOOTER>

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

11. IE对HTML5的支持

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

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

header, footer, article, section, nav, menu, hgroup { 
display: block; 
}

尽管如此，IE还是不能解析这些新增的HTML5标签，这个时候就需要借助Javascript来解决这个问题：

document.createElement("article"); 
document.createElement("footer"); 
document.createElement("header"); 
document.createElement("hgroup"); 
document.createElement("nav"); 
document.createElement("menu");

你可以借助这一段Javascript代码来修复IE更好的解析HTML5

<SCRIPT mce_src="http://html5shim.googlecode.com/svn/trunk/html5.js"></SCRIPT> 
_fcksavedurl=""http://html5shim.googlecode.com/svn/trunk/html5.js"></SCRIPT>" 
_fcksavedurl=""http://html5shim.googlecode.com/svn/trunk/html5.js"></SCRIPT>"

12. 标题群( hgroup)

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

<HEADER> 
<HGROUP> 
<H1> Recall Fan Page </H1> 
<H2> Only for people who want the memory of a lifetime. </H2> 
</HGROUP> 
</HEADER>

13. 必填项属性

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

<input type="text" name="someInput" required> 
<input type="text" name="someInput" required="required">

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

<from method=post> 
<label for=someInput> Your Name: </label> 
<input id=someInput type=text name=someInput placeholder="Douglas Quaid" required="required"> 
<button type=submit>Go</button> 
</form>

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

14. 自动获取焦点

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

<INPUT type=text name=someInput placeholder="Douglas Quaid" required="required" autofocus="autofocus">

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

15. 音频播放的支持

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

<audio controls="controls" autoplay="autoplay"> 
<source src="file.ogg" _fcksavedurl=""file.ogg"" _fcksavedurl=""file.ogg"" /> 
<source src="file.mp3" /> 
<a href="file.mp3">Download this file.</a> 
</audio>

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

16. 视频播放的支持

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

<video controls preload> 
<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs=&#39;vorbis, theora&#39;" /> 
<source src="cohagenPhoneCall.mp4" type="video/mp4; &#39;codecs=&#39;avc1.42E01E, mp4a.40.2&#39;" /> 
<p> 
Your browser is old. 
<a href="cohagenPhoneCall.mp4"> 
Download this video instead. 
</a> 
</p> 
... 
</video>

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

17. 预加载视频

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

<video preload="preload"> 
... 
</video>

18. 显示控件

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

<video controls="controls" preload="preload"> 
... 
</video>

19. 使用正则表达式

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

<form method=post action=""> 
<label for=username>Create a Username: </label> 
<input id=username type=text name=username placeholder="4 <> 10" required="required" autofocus="autofocus" pattern="[A-Za-z]{4,10}"> 
<button type=submit>Go </button> 
</form>

20. 检测浏览器对HTML5属性的支持

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

alert( &#39;pattern&#39; in document.createElement(&#39;input&#39;) ) // boolean;

其实这是确定浏览器兼容常用的方法，jQuery库就经常使用这种方法。上面的代码中创建了一个input标签，并检测pattern属性是否被浏览器支持，如果能支持的话，浏览器就支持这个功能，否则就不支持。

<script> 
if (!&#39;pattern&#39; in document.createElement(&#39;input&#39;) ) { 
// do client/server side validation 
} 
</script>

21. Mark标签

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

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

<h3> Search Results </h3> 
<h6> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </h6>

22. 该如何正确的使用p标签

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

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

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5 timer small example_html5 tutorial skillsNext article：HTML5 timer small example_html5 tutorial skills

See more

Compilation of common skills in html5 basic tutorials

Related articles