第一章: 新的结构化元素

事实再一次证明了,选一本好的书是多么的重要啊!弃掉一开始的坑,换一本书来继续我们的学习吧。

(1) 结构化构建块

div: 这是我们都知道且喜爱的一种一般性容器。它是一种无附加语义含义的流式内容元素。

section: 这是文档或应用程序的一般性小节。

article: 这是文档或网站的一个独立的小节。

听起来十分的相似对吧?确实。但是我们区分一下:

div是没有任何的语义的,比如<div class="nav">和<div class="mick">本质上对浏览器解析来说没有任何区别。

section元素类似于div,这是一个一般性容器元素,但他有一个附加语义——它包含的东西是一组逻辑相关的内容。它也是一种内容的分节元素。

article是一种特殊的section,即它是页面的一个独立的、自包含的部分。

怎么选择?

1. 如果被封装的内容在馈送阅读器中会由完整的意义吗?是,那么article。

2. 被封装的内容是相关的?是,那么用section。

3. 如果没有语义关系,那么用div。

(2) 标题

header: 用于分节元素的内容介绍和导航。

footer: 用于表现内容的附加信息,如作者、相关文档的链接等,通常出现在内容的底部。

hgroup: 是header的一种特殊形式,它只能包含<h1>~<h6>元素,用于带有副标题的标题进行组合。

<h1>~<h6>: 没有什么改变的地方。

(3) 更多的结构化元素

nav: 导航链接小节,这些链接或是链接到其他页面的,或是链接到同一页面的其他小节。

aside: 页面的一个小节,由与周边内容略微相关但又单独分开的内容所组成。

figure: 用于这样一种内容:对理解至关重要,但可以在文档流中迁移,而不影响文档的含义。这可以用于图像或视频,也可以用于任何其他内容,包括图表、代码示例或其他媒体。

时间: 2024-08-01 10:44:47

第一章: 新的结构化元素的相关文章

opencv_形态学结构化元素对形态学图像处理的影响

场景 对大米预处理之后的二值图像做开运算再做canny边缘检测. python代码: 1 # kernel = cv2.getStructuringElement(cv2.MORPH_ELLIPSE,(3,3)) # 椭圆的核 2 3 kernel = np.ones((3,3),np.uint8) # 去除白色噪点,形态学开运算,3x3线性核 4 5 opening = cv2.morphologyEx(thresh, cv2.MORPH_OPEN, kernel, iterations =

《Linux命令行与shell脚本编程大全》第十三章 更多的结构化命令

本章讨论bash shell的循环命令for.while和until 13.1 for命令 重复执行一系列命令在编程中很常见. bash shell提供了for命令,允许你创建一个遍历一系列值的循环.每次迭代都使用其中一个值来执行已定义好的一组命令.下面是基本格式 for var in list do command done 在list参数中需要提供迭代中要用到的一系列值.会依次迭代下去.每次迭代中,var会包含列表中要用到的一系列值. do 和 done直接输入的命令可以是一条或多条标准的b

使用html5结构化元素

显示的效果如上边这样,但是有没有发现内容的外侧没有边线(这个难道是因为浏览器不同吗?有待测试) html5中新增加的元素<header>可以明确的告诉浏览器此处是页头,<nav>标记用于构建页面的导航,<article>标记用于构建页面内容的一部分,<footer>元素表明页面已到页脚或根元素部分,并且这些标记可以重复使用,极大的提高了开发者的效率. 代码如下: <!DOCTYPE html><html lang="en"

html5新增的结构化元素

1.主题结构元素: article section time  pubdate属性  nav aside article用法:常用来表示一个独立的结构: section用法:一个东西可能会有几部分,每一个可用一个section组成: article和section的区别:article是section的特例,article更强调与其他部门的独立,section强调分段和分块. time  用法: <time pubdate datetime="2014/09/01T21:51Z"

第一章linux的结构

一.linux系统结构 ######## linux是一个倒树结构linux中所有的东西都是文件这些文件都在系统顶级目录"/" /就是根目录 /目录以下为二级目录这些目录都是系统装机时系统自动建立的 二级目录的作用 /bin ##二进制可执行文件也就是系统命令 /sbin ##系统管理命令存放位置 /boot ##启动分区,负责系统启动 /dev ##设备管理文件 /etc ##大多数系统管理文件 /home ##普通用户的家目录 /lib ##32位系统库文件存放位置 /lib64

Python作业本——第5章 字典和结构化数据

习题 1. {} 2. {'fow': 42} 3.字典是无序的 4.报错    (KeyError) 5.第一种是既搜索键又搜索值,第二种值搜索键    没有区别,in操作符检查一个值是不是字典的一个键. 6.第一种是既搜索键又搜索值,第二种值搜索值    第一种检查键 7. spam.setdefault('color', 'black') 8.pprint模块的pprint函数 实践项目 5.6.1 好玩游戏的物品清单 1 stuff = {'rope': 1, 'torch': 6, '

HTM5新增结构化元素&amp;非结构化元素&amp;新增属性详解

(1)HTML5 新增的主体结构元素 (2)HTML5 新增的的非主体结构元素 (3)HTML5 表单新增元素与属性 (4)HTML5 改良的 input 元素的种类

第一章之三大结构

2019-01-13 内容:三大结构(条件表达式的值是true或者false) 一.顺序结构二.分支结构      @if语句: *if (条件表达式)         *if (条件表达式){       }else{       }   *if (条件表达式){       }else (条件表达式){       }else {       } -- @switch-case语句:*使用格式: switch (变量){        case 变量值1:        break;    

华晨汽车结构化工艺设计系统初绽异彩

2009年,华晨汽车在德国的Euro NCAP标准碰撞测试中成绩糟糕,成为当年中国汽车业的典型事件."碰撞门"后的沈阳华晨金杯汽车正视问题,对自主品牌遇到这种挫折,抑或是一种壁垒,但公司承认与和世界发达国家的一些企业有很大的差距,但仍要坚定不移的占领高端市场,拿国际最先进的标准,最高端的市场,最高的技术,作为标杆来要求自己.因此公司开展了一系列的品质提升活动. 工艺设计与管理渐成瓶颈,新一轮工艺信息化建设势在必行 华晨金杯始终以成为世界一流的汽车制造公司为目标,不断提升产品研发能力和管