整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

标签的相互嵌套规则是怎样

-html 嵌套规范注意点

1-1块级元素一般作为大容器,可以嵌套:文本,块级元素,行内元素,行内块元素等;但是,p标签中不要嵌套div标签,p,h,等块级标签;

1-2-a标签内可以嵌套任意元素,但是,a标签不能嵌套a标签;

2-注意点

2-1大标签嵌套小标签。是父子;

2-2块级嵌套行内

p标签不能嵌套嵌套h1~h6;

h1~h6不能嵌套p标签

一个段落,一个是标题;

3-1-1测试 p标签不能嵌套div;代码截图:

3-1-2 浏览器显示:


小结,右键检查,显示浏览器自动闭合了两个p标签,强制不准p标签嵌套h1和div标签;

3-2-1 p标签嵌套其他标签,比如

span,b,strong,i,em,s,del,u,ins,ins,small,big,sub,sup;

3-2-2 测试代码截图:

浏览器截图:

对比不嵌套图片和代码:

小结,嵌套标签后浏览器显示正常,检查图如下;检查后,未发现强制闭合标签;

4-1 测试a标签,a标签不能嵌套a标签;

代码截图:

浏览器显示和浏览器检查截图:

小结,当a标签嵌套a标签后,显示浏览器点击检查后,看到标签被强制闭合,使其不能被嵌套;

检查显示a标签嵌套h1,div标签时,显示正常;

4-2 测试a标签嵌套其他标签,代码和浏览器显示截图;

浏览器检查截图

小结,浏览器显示a标签嵌套后,文本显示正常,浏览器检查正常,无强制闭合;

a标签嵌套标签后,所有字体变成蓝色,点击后变色,并且,自带下划线;

a标签嵌套标签后,不会自动换行,需要添加br换行进行对比参照。

html高级特性 : 本篇文章主要讲述,关于HTML语义化、框架和iframe、音频和视频相关的知识点,下面我们一起来学习了解吧


html语义化

html语义化是指在编写html代码时,使用具有语义意义的元素来描述网页内容的结构、属性和功能等。

这种做法不仅可以使页面结构更加清晰,易于维护, 而且能够让搜索引擎更好地理解页面内容,提高页面的可访问性。

以下是一些常用的html元素和它们的语义含义:

  • <header>:表示网页或文章的标题、导航栏等主要内容。
  • <nav>:表示导航菜单栏。
  • <main>:表示页面主体部分的内容,通常是一个单独的区块。
  • <section>:表示文档中一个**的区域,通常包含一个头部和一个相关内容的块级元素。
  • <article>:表示即便被拆开阅读,也能单独存在或者被嵌入其他文档的内容。
  • <aside>:表示页面内容的附属信息或服务,通常作为侧边栏。
  • <footer>:表示网页尾部信息,如版权声明、联系方式等。



除此之外,还有一些表达特定意义的html元素,例如:

  • <h1>-<h6>:表示标题,编号从1到6,其中<h1>是最高等级的标题。
  • <p>:表示段落
  • <em>:表示强调文本,将文本以斜体的形式展示。
  • <strong>:表示重要性文本,将文本以加粗的形式展示。
  • <time>:表示日期或时间
  • <figure>:表示一组相关联的多媒体内容和它们的标题。 通过合理利用这些具有语义含义的html元素,我们可以更清楚地表达网页内容的结构和意义。

html语义化的优点

  1. 有利于seo:搜索引擎爬虫可以更好地理解页面结构,提高网站的排名。
  2. 提高可读性:标签的含义更清晰,能够更容易地理解网页结构。
  3. 方便开发维护:更具有可读性和

框架和iframe

HTML中,框架和iframe都是用于在一个页面中嵌入另一个页面的方式。它们具有不同的使用方法和特点,请参考以下详细介绍。

  1. 框架(frameset)

框架是一种比较古老的技术,它可以将一个网页分割为多个窗口(frame),每个窗口可以独立加载不同的HTML文件。框架通常使用<frameset>和<frame>标签来实现。例如:

<!DOCTYPE html>
<html>
<head>
  <title>框架示例</title>
</head>
<frameset rows="20%,80%">
  <frame src="header.html">
  <frame src="content.html">
</frameset>
</html>

上面的示例代码中,使用了frameset标签来定义分割窗口,并使用frame标签指定每个窗口所要显示的HTML文件。

框架的优点是能够快速刷新其中的一个局部,而不需要完整地重新加载整个页面,从而提高用户体验。但是,由于框架的缺点也显著——此技术已经过时,浏览器支持性较差,且容易造成网站的SEO问题,因此较少在现代Web开发中使用。

  1. iframe

iframe是现代Web开发中常用的页面嵌入技术。它可以将一个页面嵌入到另一个页面中的固定位置,以实现局部更新和交互。可以使用<iframe>标签来创建iframe。例如:

<!DOCTYPE html>
<html>
<head>
  <title>iframe示例</title>
</head>
<body>
  <h1>主页</h1>
  <p>这是首页内容。</p>
  <iframe src="news.html"></iframe>
</body>
</html>

上面的示例代码中,指定了一个iframe元素并将其src属性设置为要嵌入的HTML文件链接。

与框架相比,iframe具有更强大的可定制性、灵活性和兼容性,而且也不会对SEO造成负面影响。但是,可能存在与同源策略相关的安全问题,需要开发者进行考虑和防范。

总之,在HTML中可使用框架和iframe用于在一个页面中嵌入另一个页面。但是,由于框架技术已经过时,较少使用;iframe则常见于现代Web开发中。需要根据实际需求进行选择和应用。

音频和视频

HTML中,音频和视频是用来在网页中嵌入音频或视频文件的标签。它们分别使用<audio>标签和<video>标签来实现。

  1. 音频(Audio)

音频可以用来播放音乐、语音等各种音频效果。可以使用<audio>标签来创建音频播放器,并通过src属性指定要播放的音频文件链接。例如:

<audio src="music.mp3" controls></audio>

上面的示例代码中,定义了一个音频播放器,通过src属性指定了要播放的音频文件名为"music.mp3"。controls属性可以让浏览器自动添加播放控件,包括播放/暂停、音量调节、快进/快退等。

  1. (Video)

视频可以用于播放各种视频内容,例如电影、短片、教学视频等。可以使用<video>标签来创建视频播放器,并通过src属性指定要播放的视频文件链接。例如:

<video src="movie.mp4" controls></video>

上面的示例代码中,定义了一个视频播放器,通过src属性指定了要播放的视频文件名为"movie.mp4"。同样,设置了controls属性可以让浏览器自动添加播放控件。

在使用音频和视频时,可以设置多个属性,包括:autoplay(自动播放)、loop(循环播放)、preload(预加载)、muted(关闭声音),等等。要实现更复杂的功能,可以通过JavaScript来操作音频和视频标签提供的API。

总之,在HTML中可使用音频和视频标签来嵌入音频或视频文件,并在网页中进行播放、暂停等操作。具体使用方式和属性设置根据需要进行选择和调整。


总结

以上就是今天要讲的内容,本文简单介绍了HTML高级特性的知识点,更多内容可以查看THTML官方文档

如果觉得有用,欢迎明天再来,继续合集的下一篇文章学习
遇到问题,私信我!!~~


eb前端基础,Web前端教程

块元素又名块级元素(blockelement),和其对应的是内联元素(inlineelement),都是html规范中的概念。大多数HTML元素被定义为块级元素或内联元素。块级元素在浏览器显示时,通常会以新行来开始(和结束)。

如果介绍HTML网页基本标签的嵌套规则,首先要说的就是元素的分类。元素可以划分为块级元素和行级元素,块级元素是什么?它可以独占一行,可以设置宽高度,默认是100%;行级元素与之相反,它的内容决定它的宽高度,至于特殊字符就当成是文字来看

  <!DOCTYPEhtml>

  <htmllang="en">

  <head>

  <metacharset="UTF-8">

  <metaname="viewport"content="width=device-width,initial-scale=1.0">

  <title>HTML块级、行级元素,特殊字符,嵌套规则</title>

  </head>

  <body>

  <!--块元素:独占一行,可以设置宽高、默认宽度100%-->

  块元素分为文字类和容器类

  文字类块元素:p、h1——h6

  容器类块元素:div、table、tr、td、frame、ul>li、ol、dl、dt、dd(序列)

  <!--行元素:不独占一行,宽高度取决于内容-->

  行元素:aimginputstrongemdelspan

  特殊字符:文字br hr

  </body>

  </html>

嵌套规则总结如下几点:

1.块元素可以嵌套行元素2.行元素可以嵌套行元素3.行元素不可以嵌套块元素4.文字类块元素不可以嵌套块元素5.容器类块元素可以嵌套块元素

块元素和内联元素的基本差异是块元素一般都从新行开始,相邻的块级元素将会在不同行显示。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素加上display:block这样的属性,让它也有每次都从新行开始的属性,即成为块元素同样我们可以把块元素加上display:inline这样的属性,让它也在一行上排列。