html5页面之间传值
While they are referred to in different ways by WHATWG, the development of HTML5 could be said to have three principles that distinguish the language from XHTML: pragmatism, simplification, and looseness.
虽然WHATWG用不同的方式提及它们,但是HTML5的开发可以说具有将语言与XHTML区别开来的三个原则: 实用主义 , 简化和宽松 。
简化版 (Simplification)
The XHTML 1.0 Strict template for a basic page can be intimidating to look at, even overwhelming. By comparison, the doctype declaration for an HTML5 page is so simple you can type it out by hand:
基本页面的XHTML 1.0 Strict模板看起来令人生畏,甚至不知所措。 相比之下,HTML5页面的doctype声明非常简单,您可以手动将其键入:
<!DOCTYPE html>
“That’s it?” you might be saying. Yes, that’s it.
“而已?” 你可能会说。 对,就是那样。
Common objections:
常见异议:
-
“This can’t possibly validate, can it?”
“这不可能验证,可以吗?”
- It really does. Go ahead and use the full HTML5 template below in a page if you don’t believe me: validate it as you would any other page.
- 确实如此。 如果您不相信我,请继续使用下面的完整HTML5模板:与其他任何页面一样,对其进行验证。 “How does the validator know which version of HTML I’m using?” “验证者如何知道我正在使用哪个版本HTML?”
- tags being used in an internally consistent manner in the document. If you start to mix HTML5 tags with obsolete elements, or in the wrong order, 中以内部一致的方式使用标记有关。 如果您开始将HTML5标记与过时的元素混合或以错误的顺序混合使用, that makes the page invalid. HTML5 则会使页面无效。 HTML5 extends the HTML language, it doesn’t replace it, so almost all the tags you have learned in XHTML are still perfectly valid, and can be used in an HTML5 page, just as whatever comes down the pike after HTML5 will have to support the majority of HTML5 markup… so specifying 扩展了HTML语言,但并不能替代HTML语言,因此您在XHTML中学到的几乎所有标签仍然完全有效,可以在HTML5页面中使用,就像HTML5必须支持之后的一切一样。大多数HTML5标记......如此指定您正在使用 which version of HTML you are using is somewhat redundant. 的 HTML版本是有些多余。
The meta tag to set UTF-8 encoding for the page has also been simplified:
用于设置页面UTF-8编码的meta标签也得到了简化:
<meta charset="UTF-8">
The code to link a style sheet has been simplified:
链接样式表的代码已简化:
<link rel="stylesheet" href="styles.css">
As has drawing JavaScript into a page from an external file:
正如将JavaScript从外部文件绘制到页面中一样:
<script src="file.js"></script>
The simplified JavaScript link is probably the easiest to explain as an example of this principle. In the past, there were many possible competing scripting languages for the web: LiveScript, Jscript and JavaScript, to name a few. In the present day, things have shaken out such that there is only one scripting language – JavaScript – just as there is only one way to modify the appearance of pages: CSS. If there are no alternatives, it makes no sense to specify what we are using to script or style a page: it will always be JavaScript and CSS.
作为此原理的示例,简化JavaScript链接可能最容易解释。 过去,网络上有许多可能的竞争脚本语言:LiveScript,Jscript和JavaScript,仅举几例。 如今,事情已经发生了变化,以至于只有一种脚本语言(JavaScript),就像只有一种修改页面外观的方法:CSS。 如果没有替代品,它是没有意义的,我们指定使用脚本或样式的网页是什么 :它永远是JavaScript和CSS。
The entire HTML5 page template is therefore:
因此,整个HTML5页面模板为:
<!DOCTYPE html>
<html lang="en">
<head>
<title>An HTML5 template</title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
Technically, you could use HTML5 shortcuts to reduce this even further:
从技术上讲,您可以使用HTML5快捷方式进一步减少这种情况:
<!DOCTYPE html>
<html lang="en">
<title>An HTML5 template</title>
<meta charset="utf-8">
<p>Content
松弛 (Looseness)
XHTML 1.0 Strict was very particular about the way in which it is written: all code had to be in lowercase, tags always had to be closed, etc. To me, this was a good thing: clear, concise rules are the hallmark of good governance and good code. However, learning rules is arduous, and making small mistakes in code can lead to big headaches in validation.
XHTML 1.0 Strict在编写方式上非常严格:所有代码都必须用小写字母表示,必须始终关闭标签,等等。对我来说,这是一件好事:清晰,简洁的规则是好的标志。治理和良好的代码。 但是,学习规则很艰巨,在代码中犯一些小错误会导致验证方面的大麻烦。
HTML5 frees up the rules: tags can be written uppercase, lowercase, or mixed. Most table elements, including <td>
, <tr>
and <th>
, do not need to be closed. Neither do <body>
, <dd>
, <dt>
, <head>
, <li>
, <p>
, even <html>
. (This is an anathema to many developers, and I would strongly recommend always closing your elements, unless there is a very strong argument against doing so, the best reason being that you are trying to reduce the size of files to the very least possible: in which case you should also be using a minified and removing all carriage returns from your code, and absolutely determining that your images are optimized until they squeak). In addition, some of these exceptions are tricky: you can avoid closing a paragraph if it is followed by one of 24 other elements, but not if the following tag is any one of over 100 others. Putting attribute values in quotes is optional. id
values can start with numerals.
HTML5释放了规则:标记可以大写,小写或混合使用。 大多数表元素(包括<td>
, <tr>
和<th>
)都不需要关闭。 <body>
, <dd>
, <dt>
, <head>
, <li>
, <p>
甚至<html>
。 (这对许多开发人员来说是一件令人厌恶的事情,我强烈建议您始终关闭您的元素,除非有非常强烈的理由反对这样做,最好的原因是您试图将文件的大小减小到最小:在这种情况下,您还应该使用最小化的代码并从代码中删除所有回车符,并绝对确定图像是否经过优化直到发出吱吱声。 此外,一些例外的是棘手:你能避免关闭一个段落,如果它后面的其他24种元素之一, 但如果下面的标签是别人超过100的任何一个。 将属性值放在引号中是可选的。 id
值可以以数字开头。
Form elements no longer have the requirement that they be wrapped by <fieldset>
or even the <form>
tag, partly as a nod to the common use of JavaScript to directly interpret form elements. In other words, this is perfectly valid on an HTML5 page:
表单元素不再需要由<fieldset>
甚至是<form>
标记包装,部分是为了向普通使用JavaScript直接解释表单元素致敬。 换句话说,这在HTML5页面上是完全有效的:
<body>
<input type="text">
</body>
It is not a good idea – the example above lacks an id
attribute value for JavaScript to hook into, and accessibility for the element is nil – but it is possible.
这不是一个好主意-上面的示例缺少可插入JavaScript的id
属性值,并且该元素的可访问性为nil-但有可能。
I still strongly recommend that you do almost everything I have taught as good coding practice: everything in lowercase, all tags closed, all attribute values inside double quotes, use of the <form>
tag where appropriate – as it makes your code easier to read and debug. But I can't say it is wrong to do otherwise.
我仍然强烈建议您按照我的教学习惯做几乎所有的事情:所有小写字母,所有标签都关闭,所有属性值都用双引号引起来,在适当的地方使用<form>
标签–因为这会使您的代码更易于阅读和调试。 但是我不能说否则这样做是错误的 。
实用主义 (Pragmatism)
A few elements were just a bad idea to begin with: frames and everything to do with them are obsolete in the HTML5 spec. Good riddance. <iframe>
, however, is supported in HTML5.
最初,有几个元素是个坏主意:框架以及与之相关的一切在HTML5规范中已过时。 甩掉包袱。 <iframe>
然而 ,在HTML5支持。
Somewhat controversially, the <acronym>
tag has been dropped. Now that every commercial browser supports the abbreviation tag (<abbr>
), the <acronym>
tag is somewhat redundant: the distinction between acronyms (words made of letters that form a pronounceable word in themselves, such as SAIT and laser) and abbreviations (the general principle of making new words from the leading letters of joined words) is lost on most people, and every acronym is ultimately an abbreviation anyway.
有争议的是, <acronym>
标记已删除。 现在,每个商用浏览器都支持缩写标签( <abbr>
), <acronym>
标签有些多余:首字母缩写词(由字母组成的单词本身构成可发音的单词,例如SAIT和laser )与缩写词(从大多数单词的首字母组成新单词的一般原则)已经消失了,每个缩写最终还是一个缩写。
The <object>
tag is pretty much redundant now in most instances (it has largely been superseded by the <audio>
and <video>
tags), but is still supported.
现在, <object>
标签在大多数情况下几乎是多余的(它在很大程度上已被<audio>
和<video>
标签所取代),但仍受支持。
<strong>
and <em>
remain, but <b>
and <i>
make a comeback in HTML5. To me, the distinction WHATWG makes between the elements is so fine as to be hair-thin: I would recommend that you continue to use <strong>
and <em>
as I have taught you.
<strong>
和<em>
保留,但是<b>
和<i>
在HTML5中卷土重来。 对我而言,WHATWG在元素之间的区别是如此之细,以至于变得纤细:我建议您继续使用我所教过的<strong>
和<em>
。
<big>
is out, but <small>
remains: it is now relegated to the markup for small print, as used on a legal document or warranty.
<big>
已用完,但<small>
仍然存在:现在已降级为小字体的标记,如法律文档或保修中所使用的那样。
In HTML5 you can now enclose multiple elements with a link:
在HTML5中,您现在可以使用链接将多个元素括起来:
<div>
<a href="dudley.html">
<img src="dudley-storey.jpg" alt>
<p>Learn more about Dudley Storey</p>
</a>
</div>
Technically, this move would be illegal under XHTML: both the paragraph content and the image should have been separate links. In the real world most browsers supported the code, so HTML5 supports it too, and makes it official.
从技术上讲,此举在XHTML下是非法的:段落内容和图像都应该是单独的链接。 在现实世界中,大多数浏览器都支持该代码,因此HTML5也支持该代码,并将其正式化。
翻译自: https://thenewcode.com/251/The-Differences-Between-HTML5-And-What-You-Know
html5页面之间传值