HTML5标签嵌套规则



html5出现前,常把元素按display属性分为块级元素、行内元素、内联块元素。

橘咲夜

HTML5标签嵌套规则 

                     

在html5中,按照内容模型来区分,分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型(embedded content)、交互型(interactive content)。
元素不属于任何一个类别,被称为穿透的;元素可能属于不止一个类别,称为混合的。

元数据元素:是可以被用于说明其他内容的表现或行为,或在当前文档和其他文档之间建立联系的元素。

base 、 link 、 meta 、 script 、 style 、 template 、 title 、 noscript

流元素:是在应用程序和文档的主体部分中使用的大部分元素。

a 、 abbr 、address、area(如果它是map元素的子元素)、 article 、 aside 、audio、 
b 、bdi、bdo、blockquote、br、 button 、 canvas 、ciite、code、
data、datalist、del、dfn、 div 、 dl 、
em、embed、
fieldset、figure、footer 、form 、 
h1~h6 、header 、hr、 
i 、iframe、img 、 input 、ins、
kbd、keygen、
label、
main、map、mark、math、meter、 nav 、noscript、 object 、 ol 、output、
p、pre、progress、
q、 ruby、
s、samp、 script 、 section 、 select 、small、 span 、strong、sub 、 sup 、 svg 、 
table、 template 、 textarea、time、
u、 ul 、
var、 video 、
wbr、 
text

区块型元素:是用于定义标题及页脚范围的元素。

article、 aside、 nav 、 section

标题型元素:定义一个区块/章节的标题。

h1~h6

语句型元素:用于标记段落级文本的元素。

a 、abbr、 audio、 b 、button、 canvcas 、cite、 data 、 i 、 img 、 input 、 map 、object 、select 、 span 、textarea、 time 、video 、…

嵌入型元素:引用或插入到文档中其他资源的元素。

audio 、 canvas 、 embed 、 iframe 、 img 、 math 、 object、 svg 、video

交互型元素:专门用于与用户交互的元素。

a 、 audio(如果设置了controls属性) 、 button 、 embed 、 iframe 、img(如果设置了usemap属性) 、 imputed(如果type属性不为hidden)keygen、 label 、object(如果设置了usemap属性) 、 select 、 textarea 、 video(如果设置了controls属性)
<h1>….<h6>、<p>的子元素是语句型元素
<header>、<footer>不可嵌套<header>、<footer>
<a>的子元素是transparent(以他父元素允许的元素为准),但不包括交互型元素
<form>不可嵌套<form>
<button>子元素是语句型元素,不可嵌套交互型元素
<caption>不可嵌套<table>
<dt> 、<th>不可嵌套<header> 、<footer>、区块型元素、标题元素
 
————————————————

博客里嵌套各种代码说明

WordPress独立博客:WP里分为可视化和HTML(源码)
网易博客:网易博客的源码按钮是<>
搜狐博客:搜狐博客的源码切换按钮在右下角
新浪博客:新浪博客的源码切换按钮在左下角
QQ空间:QQ空间需要展开“高级”选项
百度空间、人人网、天涯等博客均无源码模式,暂时无法嵌套代码。
 
常见问题:
1.embed不显示问题(问题的关键是是否启用了https,未启用的网站可以插入,但启用的网站则不显示)

如果https下访问如下代码,视频不显示

HTML5标签嵌套规则 原因:https地址中,如果加载了http资源,浏览器将认为这是不安全的资源,将会默认阻止,这就会给你带来资源不全的问题了,比如:图片显示不了,样式加载不了,JS加载不了。
解决办法:不指定具体协议,使用资源协议自适配,或者补全https. HTML5标签嵌套规则  

………………………..

…………………………

…………………………

HTML 内嵌网页

方式一

使用iframe标签

<iframe height=”200″ width=”200″ style=”border: none;” src=”http://localhost:3001/index2.html”></iframe>

方式二

给div添加html内容

<div id=”viewDiv” style=”width: 500px; height: 500px;”></div>

document.getElementById(‘viewDiv’).innerHTML = ‘<object type=”text/html” data=”http://localhost:3001/index2.html” width=”100%” height=”100%”></object>’

 
 
 

版权声明:chenzhoujianke 发表于 2020-04-02 11:31:47。
转载请注明:HTML5标签嵌套规则 | 毒导航

暂无评论

暂无评论...