目录
Mokka mit Schlag" >Mokka mit Schlag
Info
Archives
首页 web前端 H5教程 HTML5的结构和语义(2):结构_html5教程技巧

HTML5的结构和语义(2):结构_html5教程技巧

May 16, 2016 pm 03:51 PM
div href 结构 语义


  由于缺少结构,即使是形式良好的 HTML 页面也比较难以处理。必须分析标题的级别,才能看出各个部分的划分方式。边栏、页脚、页眉、导航条、主内容区和各篇文章都由通用的 div 元素来表示。HTML 5 添加了一些新元素,专门用来标识这些常见的结构:
 · section:这可以是书中的一章或一节,实际上可以是在 HTML 4 中有自己的标题的任何东西
 · header:页面上显示的页眉;与 head 元素不一样
 · footer:页脚;可以显示电子邮件中的签名
 · nav:指向其他页面的一组链接
 · article:blog、杂志、文章汇编等中的一篇文章
  我们来考虑一个典型的 blog 主页,它的顶部有页眉,底部有页脚,还有几篇文章、一个导航区和一个边栏,见代码1 典型的 blog 页面


Mokka mit Schlag







"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
Spring Comes (and Goes) in Sussex County



Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
started out as a nice winter morning when we arrived
at the site at 7:30 A.M., progressed to Spring around
10:00 A.M., and reached early summer by 10:15.





"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
But does it count for your life list?



Seems you can now go href="http://www.wired.com/science/discoveries/news/
2007/04/cone_sf">bird watching via the Internet. I
haven't been able to test it out yet (20 user
limit apparently) but this is certainly cool.
Personally, I can't imagine it replacing
actually being out in the field by any small amount.
On the other hand, I've always found it quite
sad to meet senior birders who are no longer able to
hold binoculars steady or get to the park. I can
imagine this might be of some interest to them. At
least one elderly birder did a big year on TV, after
he could no longer get out so much. This certainly
tops that.












  即使有正确的缩进,这些嵌套的 div 仍然让人觉得非常混乱。在 HTML 5 中,可以将这些元素替换为语义性的元素,见代码2 用 HTML5编写的典型blog页面


Mokka mit Schlag



Mokka mit Schlag





"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
Spring Comes (and Goes) in Sussex County


Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
started out as a nice winter morning when we arrived at
the site at 7:30 A.M., progressed to Spring around 10:00
A.M., and reached early summer by 10:15.




"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
But does it count for your life list?


Seems you can now go href="http://www.wired.com/science/discoveries/news/
2007/04/cone_sf">bird watching via the Internet. I
haven't been able to test it out yet (20 user
limit apparently) but this is certainly cool.
Personally, I can't imagine it replacing
actually being out in the field by any small amount.
On the other hand, I've always found it quite
sad to meet senior birders who are no longer able to
hold binoculars steady or get to the park. I can
imagine this might be of some interest to them. At
least one elderly birder did a big year on TV, after
he could no longer get out so much. This certainly
tops that.







Copyright 2007 Elliotte Rusty Harold





  现在不再需要 div 了。不再需要自己设置 class 属性,从标准的元素名就可以推断出各个部分的意义。这对于音频浏览器、手机浏览器和其他非标准浏览器尤其重要。
  
  (待续)
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1664
14
CakePHP 教程
1423
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
src和href是什么意思 src和href是什么意思 Aug 16, 2023 pm 05:00 PM

src和href分别是,1、src是source的缩写,用于指定外部资源的路径,通常用于嵌入外部文件,比如图片、音频、视频等,src属性一般用在img、script、iframe等标签上;2、href是hypertext reference的缩写,用于指定超链接的目标资源的路径,通常用于链接到外部文档或其他页面,href属性一般用在a、link等标签上。

css怎么实现div缺一个角 css怎么实现div缺一个角 Jan 30, 2023 am 09:23 AM

css实现div缺一个角的方法:1、创建一个HTML示例文件,并定义一个div;2、给div设置宽高背景色;3、给需要删除一角的div增加一个伪类,将伪类设置成跟背景色一样的颜色,然后旋转45度,再定位到需要去除的那个角即可。

lambda 表达式的语法和结构有什么特点? lambda 表达式的语法和结构有什么特点? Apr 25, 2024 pm 01:12 PM

Lambda表达式是无名称的匿名函数,其语法为:(parameter_list)->expression。它们具有匿名性、多样性、柯里化和闭包等特点。实际应用中,Lambda表达式可用于简洁地定义函数,如求和函数sum_lambda=lambdax,y:x+y,并通过map()函数应用于列表来进行求和操作。

深入解析MySQL.proc表的结构及用途 深入解析MySQL.proc表的结构及用途 Mar 15, 2024 pm 02:36 PM

MySQL.proc表是MySQL数据库中存储存储过程和函数信息的系统表,通过深入了解其结构及用途,可以更好地理解存储过程和函数在MySQL中的运行机制,并进行相关的管理和优化。下面将详细解析MySQL.proc表的结构及用途,并提供具体的代码示例。1.MySQL.proc表的结构MySQL.proc表是一个系统表,存储了所有存储过程和函数的定义和相关信息

internet的基本结构与技术起源于什么 internet的基本结构与技术起源于什么 Dec 15, 2020 pm 04:48 PM

internet的基本结构与技术起源于ARPANET。ARPANET是计算机网络技术发展中的一个里程碑,它的研究成果对促进网络技术的发展起到了重要的作用,并未internet的形成奠定了基础。arpanet(阿帕网)为美国国防部高级研究计划署开发的世界上第一个运营的封包交换网络,它是全球互联网的始祖。

iframe和div有什么不同 iframe和div有什么不同 Aug 28, 2023 am 11:46 AM

iframe和div的不同是iframe主要用于引入外部内容,可以加载其他网站的内容或将一个网页分割成多个区域,每个区域有自己的独立的浏览上下文,而div主要用于分割和组织内容的区块,用于布局和样式控制。

如何使用HTML和CSS实现一个具有固定导航菜单的布局 如何使用HTML和CSS实现一个具有固定导航菜单的布局 Oct 26, 2023 am 11:02 AM

如何使用HTML和CSS实现一个具有固定导航菜单的布局在现代网页设计中,固定导航菜单是常见的布局之一。它可以使导航菜单始终保持在页面顶部或侧边,使用户可以方便地浏览网页内容。本文将介绍如何使用HTML和CSS实现一个具有固定导航菜单的布局,并提供具体的代码示例。首先,需要创建一个HTML结构来呈现网页的内容和导航菜单。以下是一个简单的示例

基于 ChatGPT API 的划词翻译浏览器脚本实现 基于 ChatGPT API 的划词翻译浏览器脚本实现 May 01, 2023 pm 03:28 PM

前言最近GitHub上有个基于ChatGPTAPI的浏览器脚本,openai-translator,短时间内star冲到了12k,功能上除了支持翻译外,还支持润色和总结功能,除了浏览器插件外,还使用了tauri打包了一个桌面客户端,那抛开tauri是使用rust部分,那浏览器部分实现还是比较简单的,今天我们就来手动实现一下。openAI提供的接口比如我们可以复制以下代码,在浏览器控制台中发起请求,就可以完成翻译//示例constOPENAI_API_KEY="s

See all articles