HTML（八）

最新推荐文章于 2022-04-24 12:00:10 发布

原创最新推荐文章于 2022-04-24 12:00:10 发布 · 311 阅读

0 ·

CC 4.0 BY-SA版权

JavaWeb 专栏收录该内容

48 篇文章

订阅专栏

本文介绍了HTML5中新增的重要元素及属性，如iframe元素的多种属性、新的结构元素（article、section等）、语法元素（mark、time等），并探讨了它们在网页布局中的应用。

1.13 iframe

HTML不在推荐使用frameset ,HTML5保留了iframe元素，该元素可以在普通的HTML页面中使用，该元素在普通HTML页面中生成一个行内框架。

属性如下：

src：该属性指定该iframe装载那个页面

name：iframe的名字

longdesc：该属性也是指定一个页面的URL，该页面包含了关于该iframe的长描述

scrolling：设置是否在iframe中显式滚动条

height/width：高度和宽度

srcdoc属性：html5的新属性   规定在 <iframe> 中显示的页面的 HTML 内容。 

seamless属性：规定 <iframe> 看上去像是包含文档的一部分。

sandbox：是一个安全性方面的属性，用于对框架中的网页增加一系列额外限制，该属性
有如下属性值：
    “”：限制全部
    all-forms：允许框架内的表单进行提交
	allow-same-origin：允许 iframe 内容被视为与包含文档有相同的来源。
	  对于不同源的网页（两个页面对应URL的域名或端口不同，即认为这个两个页面是不
	同的）该页面将被禁止使用AJAX与服务器交互。
	  禁止加载来自服务器的内容，同时禁止该页面从cookie和webstorage中读取内容。
   （同源策略）尤其在做前后端项目分离 跨域
	allow-top-navigation  允许 iframe 内容从包含文档导航（加载）内容。
	allow-scripts  允许脚本执行。

实例代码：

<iframe src="left.html" name="myiframe" scrolling="no" frameborder="0"></iframe>
<a href="index.html" target="myiframe">我的连接</a>
<iframe src="top.html" name="myiframe" scrolling="yes" frameborder="0" width="500" height="500"   sandbox="allow-top-navigation">
</iframe>

1.14 id，style，class属性

id属性：

id属性用于为HTML元素指定唯一标识，当程序使用JavaScript编程时即可通过该属性来获取该HTML元素

style属性：

style用于为HTML元素指定CSS样式

class属性：

class属性则用于匹配CSS样式的class选择器

在这里插入图片描述
1.15 dir属性

dir 属性规定元素内容的文本方向。

ltr （默认）从左向右的文本方向。
rtl 从右向左的文本方向。

实例代码：
在这里插入图片描述
1.16 title属性

title属性用于为HTML元素指定额外信息
在这里插入图片描述
1.17 lang属性

通过设置lang属性来告诉浏览器和搜索引擎：网页或网页中的元素的内容所使用的语言。
该属性的属性值应该是符合标准的语言代码，比如zh代表中文、en代表英语、fr代表法语、ja代表日文等。

1.18 accesskey属性

当HTML页面中有多个元素时，可以通过accesskey属性指定激活该元素的快捷键。

实例代码：
在这里插入图片描述
1.19 tabindex属性

当用户浏览网页时，可通过按键盘上的Tab键不断切换窗口或页面中HTML元素来获得焦点，tabIndex属性用来控制窗口、HTML元素获取焦点的顺序。

实例代码：
在这里插入图片描述
1.20 contentEditable属性

HTML5为大部分HTML元素增加了contentEditable属性，如果将该属性设置为true,浏览器就会允许修改HTML元素里的内容。

实例代码：
在这里插入图片描述
1.21 designMode属性

designMode属性相当于一个全局的contentEditable属性，如果把整个页面的designMode属性设为on,该页面上所有可支持contentEditable属性的元素都变成可编辑状态。默认是Off

在这里插入图片描述
1.22 hidden属性

HTML5为所有元素提供了一个hidden属性，这个属性支持true,false两个属性值。
一旦把某个HTML元素的hidden设为true,就意味着通知浏览器不显示该组件，浏览器也不会保留组件所占用的空间。

在这里插入图片描述
实例代码：

1.23 spellcheck属性

HTML5为< input>< TextArea>< /TextArea>等元素增加了spellcheck属性，该属性是一个支持boolean值的属性，如果设置了spellcheck属性，浏览器就会负责对用户输入的文本内容执行输入检查。

在这里插入图片描述
1.24 contextmenu属性

contextmenu 属性为元素规定上下文菜单。这个菜单会在用户右键点击元素时出现。

contextmenu 属性的值是需要打开的 < menu> 元素的 id。

1.25 HTML5新增的结构元素article，section元素

①article：

article 该元素用于代表页面上独立、完整的一篇 “文章”，该元素表示的内容可以是一个帖子，一篇blog文章，一篇短文、一条完整的回复。总之，只要是一个独立的文档内容，就应该使用< article>元素来表示。

article内部可以使用 header来定义文章 “标题”内容

使用footer来定义文章“脚注”部分
使用section来把文章分成几个段落

article内部可以有多个 article来作为它的附属文章

②section：

section用来对文章内容进行分块 section元素也通常由标题(h1~h6)和内容组成。

section侧重对文章分块。表达一个完整的内容时，应该使用< article>如果把一个内容分成几个部分用section

③div

div元素是一个通用组件。

section元素是一个负责分块的html组件。
使用article，section只是为了让爬虫，搜索引擎，浏览器等工具解析该文档结构。

实例代码：
在这里插入图片描述
header：

   header 元素通常用于代表标题，从功能上看，该元素的作用有点类似于 hn元素，
但header元素的用途更加广泛，该元素的内部既可包含hn元素 也可包含普通的p span
等元素 还可包含 nav元素。

footer:

 footer 该元素主要用于父级元素定义“脚注”部分，包括该文章的版权信息、作者授权
信息等。

当网页内容,article或section包含了更多复杂内容的标题时，此时建议使用header 元素来组织他们。

实例代码：
在这里插入图片描述
1.26 nav，aside元素

HTML5提供了aside和nav表示文档结构的元素。

nav：

nav该元素专门用于定义页面上的“导航条”。
包括页面上方的“主导航条”侧边的“边栏导航”，页面内部的“页面导航”页面下方的“底部导航”
HTML5推荐将这些导航链接分别放在相应的nav元素中进行管理。

aside：

aside该元素专门用于定义当前页面或当前文章的附属信息，通常来说，推荐aside元素使用CSS渲染成侧边栏。

HTML5 提供的 nav 和 aside元素只是文档结构元素，并不负责对文本格式进行处理，如果想要进行处理，则建议使用CSS样式。

实例代码：

1.27 main元素

一个HTML文档最多只能包含一个main元素，该元素用于包含网页中除导航条、logo,版权信息等之外的主要内容。
使用main元素，网页内 article section div等元素都应该放在main元素之内。
在一个文档中，不能出现一个以上的 < main> 元素。
< main> 元素不能是以下元素的后代：< article>、< aside>、< footer>、< header> 或 < nav>。

实例代码：
在这里插入图片描述
1.28 figure，figcaption元素