编程教育资源分享平台

网站首页 > 技术文章 正文

HTML+CSS零基础教学:每天学习几分钟,轻松掌握HTML(四)

luoriw 2024-01-17 11:26:01 技术文章 21 ℃ 0 评论

概述

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官方文档

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

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表
最新留言