您的位置：首页 > Web前端 > HTML5

前端学习笔记——XHTML及HTML5新变化

2019-09-10 19:51 253 查看

一、XHTML介绍

1.XHTML简介
（1）XHTML是可扩展的超文本标记语言
（2）三种XHTML文档类型
STRICT（严格类型）
TRANSITIONAL（过渡类型）
FRAMESET（框架类型）
2.XHTML元素
XHTML元素必须正确正确嵌套、始终关闭、小写、有一个根元素
3.XHTML属性
XHTML属性必须小写、用引号包围、最小化是禁止的

二、HTML5与HTML4的区别

1.语法改变
（1）内容类型
文件扩展与内容类型保持不变
（2）DOCTYPE声明
HTML4中需要指明版本，HTML5中不再需要
创建HTML文件直接首行声明<!DOCTYPE html>
（3）指定字符编码
HTML4：&lt；meta http-equiv=”content-type” content=”text/html;charset=”UTF-8”>
HTML5：<meta charset=”UTF-8”>
（4）可以省略标记的元素

（5）具有boolean值的属性
不指定属性值时默认为false
（6）省略引号
2.全局属性
（1）contentEditable：指定元素内容是否允许编辑
（2）designMode：指定整个页面是否可编辑，该属性为on时，页面中所有支持contentEditable属性的元素都变为可编辑状态
（3）hidden：通知浏览器不渲染该元素，使该元素处于不可见状态
（4）spellcheck：input、textarea可使用，针对用户输入进行拼写和语法检查
（5）tebindex：不断敲击tab键对元素进行遍历，可通过tabindex值指定遍历顺序。默认情况下只能够对链接、表单元素进行访问，其他元素需要指定。
3.新增的主体结构元素
（1）article
代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。
可以嵌套使用，可以用来表示插件
代码演示：

<article>
<header>外层Article头部</header>
<article>
<header>aticle的嵌套</header>
<p>这是内层内容</p>
<footer>
<p>这是内层底部</p>
</footer>
</article>
<footer>
<p>这是外层底部</p>
</footer>
</article>

<article>
<h1>这是一个新的article，用来演示内嵌页面</h1>
<embed>
<embed src="#" width="600" height="400"></embed>
</object>
</article>

效果图

（2）section
对于网站或应用程序中页面山的内容进行分块，通常由内容及其标题组成。
但section元素并非一个普通的容器元素，等一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div。
（3）nav
可以用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分。
应用场景：传统导航条、侧边栏导航、页内导航、翻页操作
代码示例:

<nav>
<h1>导航</h1>
<ul>
<li><a href="#">主页</a> </li>
<li><a href="#">开发文档</a> </li>
</ul>
</nav>
<article>
<header>
<h1>HTML5与CSS3的历史</h1>
<nav>
<ul>
<li><a href="#">HTML5历史</a></li>
<li><a href="#">CSS3历史</a></li>
</ul>
</nav>
</header>
<section>
<h1>HTML5历史</h1>
<p>...</p>
</section>
</article>

效果图

（4）aside
表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容的部分。
（5）time
（6）pubdate

4.新增的非主体结构元素
（1）header：
具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但是也可以包含其他内容。
（2）footer
可以作为其上层腹肌内容区块或是一个跟区块的脚注。
（3）hgroup
将标题及其子标题进行分组的元素，通常会将h1-h6元素进行分组，譬如一个内容区块的标题及其子元素算一组。
（4）address
在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。

5.表单新增元素与属性
（1）表单内元素的form属性
表单内的从属元素可以通过设置form属性指定表单id，声明该元素从属于指定表单。通过这种方式，表单内丛书元素可以书写在页面上任何地方，而不必必须书写在表单内部。
（2）表单内元素的formaction属性
HTML4中，一个表单内的所有元素只能通过表单的action属性被统一提交到另一个页面；HTML5中可以为所有的提交按钮，增加不同的formaction属性，使单机不同的按钮时可以将表单提交到不同的页面，并通过formmethod属性指定不同提交方法。
（3）表单内元素的formenctype属性
HTML4中，表单元素具有一个enctype属性，该属性用于指定在表单发送到服务器之前，应该如何对表单内的数据进行编码。
HTML5中，可以使用formenctype属性对表单元素分别指定不同的编码方式。
（4）表单内元素的formtarget属性
HTML4中，表单元素具有一个target属性，该属性用于指定在何处打开表单提交后需 3ff7 要加载的页面；
HTML5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面。
（5）表单内元素的autofocus属性
为文本框、选择框或按钮组件加上autofocus属性，当页面打开时，该控件自动获得光标焦点。
（6）表单内元素的required属性
在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。
（7）表单内元素的labels属性
在HTML5中，为所有可使用标签的表单元素、button、select元素等，定义一个labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合。
（8）标签的control属性
在标签内部放置一个表单元素，并通过该标签的control属性来访问该表单元素。
（9）文本框的placeholder属性
当文本框处于未输入状态时显示的输入提示；当文本框处于未输入状态且未获取光标焦点时，模糊显示输入提示文字。
（10）文本框的list属性
该属性的值为某个datalist元素的id，datalist元素也是HTML5中新增的元素，该元素类似于选择框，但是当用户想要设定的值不在选择列表之内时，允许自行输入。datalist元素本身并不显示，而是当文本框获得焦点时，以提示输入的方式显示。
（11）文本框的AutoComplete属性
帮助输入所用的自动完成功能。
（12）文本框的pattern属性
在HTML5中，对input元素使用pattern属性，并将属性值设为某个格式的正则表达式，在提交时会针对这些进行检查，检查其内容是否符合给定格式。当输入的内容不符合时，则不允许提交，同时在浏览器中显示信息提示文字。
（13）文本框的SelectionDirection属性
当用户在input元素和textarea元素中用鼠标选取部分文字时，可以使用该属性来获取选取方向。没有选取、正向选取时，属性值为“forward”；反向选取时，属性值为“backword”。
（14）复选框的indeterminate属性
对于复选框checkbox来说，只有选取与非选取两种状态。HTML5中，可以在JavaScript脚本代码中对该元素使用indeterminate属性，该属性具有选取、未选取、尚未明确三种状态。
（15）img提交按钮的height属性与width属性
分别指定图片按钮的高度和宽度。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航