Python Web全栈之旅01--Web前端●走入HTML的世界(下)
一、列表元素
1、分类
● 无序列表
元素:ul
全称:unordered list
>> type属性,不要使用,已经废弃,样式统一使用css控制
● 有序列表
元素:ol
全称:ordered list
>> 基本使用参考栗子:
>> type属性,不建议使用,样式使用css控制
● 定义列表
HTML <dl> 元素 (或 HTML 描述列表元素)是一个包含术语定义以及描述的列表,通常用于展示词汇表或者元数据 (键-值对列表)。
英文全称:
dl: definition list
dt: definition title
dd: definition description
① 单条术语与描述
② 多条术语,单条描述
③ 单条术语,多条描述
④ 多条术语,多条描述
2、无序列表与有序列表的区别
结合上篇的讲解,如何选择元素,应该取决于它的语义,而不是它的显示。
举两个栗子:
① 场景一
把大象装进冰箱,分三步 (多选)
打开冰箱
把大象装进去
关上冰箱
② 场景二
Python大星喜欢的水果: (多选)
香蕉
水蜜桃
火龙果
芒果
场景一,我们使用有序列表元素,因为这是存在逻辑的,如果我们打乱顺序,可能读者不明所以;相反,场景二我们使用无需列表元素。
二、容器元素
容器元素:该元素代表一个块区域,内部用于放置其他元素
1、 div元素
没有语义
2、 语义化容器元素
● header元素
用于展示介绍性内容,通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素,但也可能包含其他元素,比如 Logo、搜索框、作者名称,等等。
● footer元素
表示最近一个章节内容或者根节点(sectioning root )元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
● article
表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。
● section
表示一个包含在HTML文档中的独立部分,它没有更具体的语义元素来表示,一般来说会有包含一个标题。
● aside
表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框(call-out boxes)。
三、上一篇
>>>《Python Web全栈之旅01--Web前端●走入HTML的世界(中)》
四、后记
Python Web前端的学习走完html的旅程,html相当于房屋的骨架,如何提高自己对整体骨架的搭建?可以多参考大型公司官网主页,学习别人的搭建的思路,逐步提高自身的能力。
发表评论 取消回复