html5新特性 - Githubissues

shoutingwei commented 6 years ago

主要的目标是语义化，以便网页能更被人类和机器阅读，有利于SEO（搜索引擎优化Search Engine Optimization），提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。现在国内普遍说的 H5 是包括了 CSS3，JavaScript 的说法。

doctype声明简化 <!DOCTYPE html>

字符的默认编码是UTF-8 <meta charset=“UTF-8”>

<link rel="stylesheet" href=“styles.css">不需要写type
<script src="myscript.js">

新元素语义化：

<header>, <footer>, <article>, <section>, <aside>, <nav>, <main>,<summary>,<dialog>,<details>,<figure>,<figcation>,<mark>

<meter>,<progress>,

表单类： <datalist>,<output> 输入类： <number>, <date>, <time>, <calendar>, <range>,<tel>,<search> (新属性： autocomplete, autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height and width, list, min and max, multiple, pattern (regexp), placeholder, required, step ) 图形类：,,

新API HTML Geolocation HTML Drag and Drop

This element is draggable.

HTML Local Storage HTML Application Cache HTML Web Workers HTML SSE

var evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } ); 
evtSource.onmessage = function(e) {
  var newElement = document.createElement("li");
  var eventList = document.getElementById('list');

  newElement.innerHTML = "message: " + e.data;
  eventList.appendChild(newElement);
}

evtSource.addEventListener("ping", function(e) {
  var newElement = document.createElement("li");

  var obj = JSON.parse(e.data);
  newElement.innerHTML = "ping at " + obj.time;
  eventList.appendChild(newElement);
}, false);

移除的元素

<acronym><applet><basefont><big><center><dir><font>
<frame><frameset><noframes><strike><tt>

如果新元素不受浏览器（比如IE6）支持。解决方案：

浏览器总是把不认识的元素当作行内元素，可以在css中将他们设置为块级元素来矫正行为。
```
header, section, footer, aside, nav, main, article, figure {
    display: block; 
}
```

添加新的html元素

<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
    display: block;
    background-color: #dddddd;
    padding: 50px;
    font-size: 30px;
} 
</style> 
</head>
<body>
<h1>A Heading</h1>
<myHero>My Hero Element</myHero>
</body>
</html>

IE8或者更早的浏览器不允许为未知元素设置样式。HTML5Shiv.js是一个能使得旧版本浏览器可以为新元素设置样式的workaround。


<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>

shoutingwei commented 6 years ago

Differences Between .htm and .html There is no difference between the .htm and .html extensions. Both will be treated as HTML by any web browser or web server. The differences are cultural: .htm "smells" of early DOS systems where the system limited the extensions to 3 characters. .html "smells" of Unix operating systems that did not have this limitation.

shoutingwei commented 6 years ago

When a URL does not specify a filename (like https://www.w3schools.com/css/), the server returns a default filename. Common default filenames are index.html, index.htm, default.html and default.htm. If your server is configured only with "index.html" as default filename, your file must be named "index.html", not "index.htm." However, servers can be configured with more than one default filename, and normally you can set up as many default filenames as needed.

shoutingwei commented 6 years ago

HTML 4.01 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

shoutingwei / frontend-learning

html5新特性 #46