A, HTML5 and HTML4
1.1 introduced the reasons and goals
H5 emergence of great significance for the Web. Because his intention is to want to put the problems existing on the Web together to get rid of.
- Low compatibility between the Web browser
- Document structure is not clear enough (a lot more structure and semantic tags)
- Web application functionality is limited
H5 appear great solution to the above problem
1.2 syntax changes
1.2.1 DOCTYPE declaration
H5 DOCTYPE declaration like this:
<!DOCTYPE html>
Html: 4s DOCTYPE declaration like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Html: 4t DOCTYPE declaration like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">1.2.2 specifies the character encoding
H5 specifies the character encoding format is as follows:
<meta charset="UTF-8" />Html: 4s specifies the character encoding as follows:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />1.2.3 end element tags may be omitted
I will give you a simple example to understand the hell
we usually write p tag is written like this:
<body>
<p>Hello world!</p>
</body>
The new wording would write:
<body>
<p/>Hello world!
</body>
If you do not believe, you can go and test, how to test it? It is simply their style can be set separately to see if the same, as if to prove that the two are equivalent! Note: Set the style p tag.
1.2.4 Properties (disabled, checked) having a boolean value
disabled used for input elements, button elements, option and other elements, which means whether to disable these elements, used as follows:
Wherein the attribute value "disabled" can be replaced with any other word or even "enabled" (but "false" excluded), because the property is "false" indicates that the property is not enabled, the attribute value "true" when the attribute indicates enabled. button element following code are disabled:
<input type="button" disabled="true" value="测试按钮">
<input type="button" disabled="123" value="测试按钮">
<input type="button" disabled=" " value="测试按钮">
<input type="button" disabled="any word" value="测试按钮">
button element is enabled in the following code:
<input type="button" disabled="false" value="测试按钮">
<input type="button" value="测试按钮">
checked usage and disabled, as here, in small series is not described in detail here!
1.2.5 omitted quotes (an attribute value within the tag can be omitted marks)
H5 before writing the property value is written to the src attribute of the img tag as an example:
<body>
<img src="1.png" alt="">
</body>Currently you can write:
<body>
<img sre = 1.png alt = "">
</body>The results of both is the same. We are able to properly display images
1.3 The new semantic tags
What is semantic?
It refers to a reasonable semantic HTML tag and its unique properties to format the document content. More simply, semantic information and the data is processed so that the machine can be appreciated. Semantics
The new semantic tags: Section, article, aside, header, hgroup, footer, nav, figure
Specific usage: new semantic tag Usage
The new 1.4 "In the Mood" label elements
video、audio、canvas、embed、mark、progress、meter、time、ruby、rt、rp、wbr、command、details、datalist、datagrid、keygen、output、source、menu
These labels in small series here is not introduced one by one the usage. Baidu when used directly on the line. Usually with not many remember this thing on the line. (When the interview might be used)
1.5 new input types
Email, url, number, range, DatePickers
here only give part of the explanation:
- number
<input type="number" name="">
- range
<input type = "range" name = "">
The remaining small series is not tested, determined you can test!
1.6 repeal label
- CSS can use alternative basefont, big, center, font, s, tt, u, etc.
- No longer use frame framework
- Only part of the browser support elements
- Other elements to be abolished
1.7 The new global attribute
Global attributes are properties of all tags can be used
- contentEditable property (whether or not the provisions of the content can be edited)
<input type="text" name="name" contenteditable="true">
- designMode property (carried out in this js, so that all the elements of the page can be opened in edit mode)
window.onload = function() {
document.designMode = "on";
}
- hidden property
- spellcheck attribute (attribute input and textarea new offer, do grammar checking)
- tabindex attribute (let label to obtain focus)
<a href="javascript:void(0);" tabindex="3">你好</a>
<a href="javascript:void(0);" tabindex="2">hello world!</a>
<a href="javascript:void(0);" tabindex="1">html5</a>
Second, the new semantic tags
2.1 New elements
- <Header> </ header> Header
Introduces the main information for the head of the page can also be used to plate the head
- <Footer> </ footer> Footer
Bottom or bottom section of the page
- <Nav> </ nav> Navigation (containing a list of links)
<nav>
<a href="#">链接1</a>
<a href="#">链接2</a>
</nav>- <Hgroup> composition on a title </ hgroup> page
<hgroup>
<h1>旅游</h1>
<h2>上海</h2>
</hgroup>- Section on <section> </ section> page
For different areas on the division of the page, or divided into different sections article
- <Article> </ article> used to represent a complete and independent structures in the page content section
Can be used to render a forum post, a magazine or newspaper article, a blog, user-submitted content comments, pages can be interactive modules pendant
- <aside></aside>
The label element can contain references related to the current page or the main content, sidebar, advertising, nav element group, and other similar portions are different and the main content
8.<figure></figure>
For composition elements. Generally used for pictures or video
- <Figcation> </ figcation> child element of the figure, the figure for the content will be described
<figure>
<!-- (注意没有alt) -->
<img src="images/225.jpg" width="100px" height="100px" />
<figcaption>薰衣草</figcaption>
</figure>
2.2 explain the label
- <Article> <object> <embed> emphasis on independence
- <Section> segment stressed, there is generally a title
<section>
<h1>CAR</h1>
</section> - <Nav> Not all groups are on the nav links tab, simply primary, basic into the nav can be.
Generally used for conventional navigation, sidebar navigation, in-page navigation, page navigation
- <Aside> to represent the current page or article of ancillary information section, which can contain references related to the current page or the main content, sidebar, advertising, navigation, and other similar content are different from the main part.
- The main structure of non-label
Header element is an element having a guide structure and navigation function, usually used to prevent the contents of a header block of the entire page and the page, but may also contain other content, such as data, search form associated logo or image.
Footer element which can be used as a footnote upper parent content area or a root block. Footer usually contains its associated block footer information, such as author, related reading links and copyright information, etc.
Hgroup element is the title and subtitle label packet. Hgroup tag label will usually grouped h1-h6. For example the content title and a sub-element area of a group of operators.
Address elements are used in the document presenting contact information, including name of the document author or maintainer of the document, their website link, email address, physical address, telephone number and so on. Address should not only be used to render e-mail or a real address, contact information is also used to display all the documents related with the contact.
Third, within the new form elements and attributes
3.1 Solution popular form small series: a form label to the outside of the form attribute can be linked by
eg：
<form id="form1">
<label for="man">MAN</label><input type="radio" id="man" name="sex">
<input type="radio" id="woman" name="sex">
</form>
<label for="woman" form="form1">WOMAN</label>
3.2 formtarget property
- _blank opens in a new window.
- _self default. It opens in the same frame.
- _parent opens in the parent frame set.
- _top opens in the entire window.
3.3 autofocus gets focus
<input type="text" name="">
<input type="text" name="" autofocus="autofocus">
3.4 required attribute
HTML5 in the new attribute may be applied on most input label, at the time of submission, if the element content is blank, you can not submit, displaying the message prompt text in the browser. See the following example:
<form>
<input type="text" name="" autofocus="autofocus" required>
<input type="submit" name="">
</form>
3.5 placeholder property, for displaying the text is not input before the content,
<form>
<input type="text" name="name" placeholder="请输入你的姓名">
</form>
3.6 autoComplete property
<form autocomplete="on">
<input type="text" name="name" placeholder="请输入你的姓名" >
</form>
3.7 pattern property
This property is used regular expressions. See the following small example:
<form>
<input type="text" name="content" autocomplete="off" placeholder="请输入邮箱" pattern="\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}" >
<input type="submit">
</form>
3.8 Xiaobian something to say
The new form attributes and elements, there are many, here I just list some of the more common attributes and elements, as for the remaining part of the time, little friends used online search on the line. Well! This part of the end, moving on.
Fourth, the new Javascript selector
4.1 querySelector()
<div id="box">Hello World！</div>
<script type="text/javascript">
var box = document.querySelector("#box");
box.style.color = "red";
box.style.fontSize = "24px";
box.style.fontWeight = "blod";
</script>
4.2 querySelectorAll()
<div id="box">Hello World！</div>
<div id="box">Hello！</div>
<div id="box">World！</div>
<script type="text/javascript">
var boxList = document.querySelectorAll("#box");
boxList.forEach(function(item){
item.style.color = "red";
item.style.fontSize = "24px";
item.style.fontWeight = "blod";
});
</script>
Fifth, the new node properties dom
clasList attributes and methods
- length (length)
<div id="box" class="test test1 test2 test 3 test4"></div>
<script>
var box = document.querySelector("#box");
window.onload = function (){
console.log(box.classList);
console.log(box.classList.length);
}
</script>
- add () increase
<div id = "box" class = "test test1 test2 test3 test4 "></div>
<script>
var box = document.querySelector("#box");
window.onload = function(){
box.classList.add("test5");
console.log(box.classList);
}
</script>
- remove () remove
<div id="box" class="test test2 test3 test4">Hello World!</div>
<script type="text/javascript">
var box = document.querySelector("#box");
window.onload = function (){
box.classList.remove("test");
console.log(box.classList);
}
</script>
- toggle () is simple to understand: There is removed, there is the added
- sometimes
<div id="box" class="test test2 test3 test4">Hello World!</div>
<script type="text/javascript">
var box = document.querySelector("#box");
window.onload = function (){
box.classList.toggle("test");
console.log(box.classList);
}
</script>
- No time
<div id="box" class="test test2 test3 test4">Hello World!</div>
<script type="text/javascript">
var box = document.querySelector("#box");
window.onload = function (){
box.classList.toggle("test5");
console.log(box.classList);
}
</script>
Sixth, the new method of JSON
6.1 eval
eval(): 可以解析任何字符串变成JS , 对JSON内容进行解析的话必须在最外面使用(); 例如:
<script>
var str = "({name:'Tom',age:'20',sex:'man'})";
var obj = eval(str);
console.log(obj);
</script>
七、自定义标签属性
语法：1. 在标签中使用data-str1-str2
2. 在JS 中获取到相应的自定义属性的值 。dom.dataset.str1Str2
见下面的小例子就明白了：
<div id="box" data-my-color="red" data-font-size="24px">Hello world!</div>
<script>
var box = document.querySelector("#box");
box.style.color = box.dataset.myColor;
box.style.fontSize = box.dataset.fontSize;
</script>
分析： 其实很简单，首先在标签中根据自己的需要定义属性，比如小编这里定义了字体的颜色和大小，光定义是不行的，浏览器不认识，所以还需要引用，在js中进行引用，引用方式就是和平常我们用js改变属性值是一样的，谨记要用驼峰命名法。
八、JS加载过程
一般情况
按照惯例，所有script元素都应该放在页面的head元素中。这种做法的目的就是把 所有外部文件(CSS文件和JavaScript文件)的引用都放在相同的地方。可是，在文档的head元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面的内容(浏览器在遇到body标签时才开始呈现内容)。
对于那些需要很多JavaScript代码的页面来说，这无疑会 导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现在Web应用程序一般都把全部JavaScript引用放在body元素中页面的内容后面。这样一来，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。
总结一句话：在JavaScript代码时要把该部分放在body的后面
看下面的图解：
defer (延迟脚本)
延迟脚本：defer属性只适用于外部脚本文件。
如果给script标签定义了defer属性，这个属性的作用是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，如果script元素中设置了defer属性，相当于告诉浏览器立即下载，但延迟执行。
看下面的图文详解：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>延迟加载</title>
<script defer type="text/javascript" src="test.js"></script>
</head>
<body>
</body>
</html>分析：这个例子中，虽然我们把script元素放在了文档的head元素中，但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行。
HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件(在DOM树构建完成后触发，不需要等到所有的资源都加载完毕)执行。
特别注意：在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本。
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
最佳的方法：从实用角度来说，把所有脚本都放在 </body> 之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。
图解：
async (异步脚本)
Asynchronous script: async attribute only applies to external script file, and tells the browser to download files immediately.
But defer the difference is: is marked as async script does not guarantee that they are executed in the order specified.
Direct illustration:
The similarities and differences between defer and async
- with
defer and async read network (script download) this child is the same, are asynchronous (compared to HTML parsing)
- different
After downloading the script that when implemented, is the closest we obviously defer to the application script loading and execution requirements. defer immediate download but deferred execution, the process of loading the follow-up document elements of the script and load in parallel (asynchronous), but the execution of the script to finish before DOMContentLoaded event fires after all elements parsed. async is immediately downloaded and executed, load and render a subsequent document elements of procedure and with the implementation of load js scripts in parallel (asynchronous).
Nine, summary
Some have not finished above summary, small-minded partners can continue to sum up, space is limited, so the following content into the next another article. Next is dry, continue ........