网站首页 > 技术文章 正文
一、列表元素
1、分类
● 无序列表
元素:ul
全称:unordered list
>> type属性,不要使用,已经废弃,样式统一使用css控制
● 有序列表
元素:ol
全称:ordered list
>> 基本使用参考栗子:
>> type属性,不建议使用,样式使用css控制
● 定义列表
HTML <dl> 元素 (或 HTML 描述列表元素)是一个包含术语定义以及描述的列表,通常用于展示词汇表或者元数据 (键-值对列表)。
英文全称:
dl: definition list
dt: definition title
dd: definition description
① 单条术语与描述
② 多条术语,单条描述
③ 单条术语,多条描述
④ 多条术语,多条描述
2、无序列表与有序列表的区别
结合上篇的讲解,如何选择元素,应该取决于它的语义,而不是它的显示。
举两个栗子:
① 场景一
② 场景二
场景一,我们使用有序列表元素,因为这是存在逻辑的,如果我们打乱顺序,可能读者不明所以;相反,场景二我们使用无需列表元素。
二、容器元素
容器元素:该元素代表一个块区域,内部用于放置其他元素
1、 div元素
没有语义
2、 语义化容器元素
● header元素
用于展示介绍性内容,通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素,但也可能包含其他元素,比如 Logo、搜索框、作者名称,等等。
● footer元素
表示最近一个章节内容或者根节点(sectioning root )元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
● article
表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。??
● section
表示一个包含在HTML文档中的独立部分,它没有更具体的语义元素来表示,一般来说会有包含一个标题。
● aside
表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框(call-out boxes)。
三、上一篇
>>>《Python Web全栈之旅01--Web前端●走入HTML的世界(中)》
四、后记
Python Web前端的学习走完html的旅程,html相当于房屋的骨架,如何提高自己对整体骨架的搭建?可以多参考大型公司官网主页,学习别人的搭建的思路,逐步提高自身的能力。
猜你喜欢
- 2025-05-27 Python、JavaScript和Rust的Web性能比较
- 2025-05-27 「全网首发」言简意赅的Python语法,内附详细知识点和思维导图
- 2024-09-25 Python 和 JavaScript 终于联姻了!PythonMonkey 要火?
- 2024-09-25 python中的logging日志模块(一) logging python3
- 2024-09-25 node之外的后端语言,Java、Python、Go 哪个适合web前端工程师?
- 2024-09-25 Python Web全栈之旅02--Web前端●走入HTML的世界(中)
- 2024-09-25 7个Python包:web前端开发者必备,基础到高级的基石
- 2024-09-25 Python Web全栈之旅10--Web前端●CSS定位
- 2024-09-25 我适不适合学前端?看完老程序员的这篇文章给你答案
- 2024-09-25 零基础选择Java、PHP、Python还是前端培训好呢?
你 发表评论:
欢迎- 05-30为什么说网上的md5加密解密站都是通过彩虹表解密的?
- 05-30一文读懂md5,md5有什么用,什么是md5加盐
- 05-30Java md5加密解密数据
- 05-30MD5是什么?如何进行MD5校验?
- 05-30专家教你简单又轻松的MD5解密方法,一看就会
- 05-30多学习才能多赚钱之:vscode怎么安装插件
- 05-30VSCode无限画布模式(可能会惊艳到你的一个小功能)
- 05-30VSCode神级Ai插件Cline:从安装到实战【创建微信小程序扫雷】
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (55)
- 前端数组 (65)
- 前端定时器 (47)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle链接 (47)
- oracle的函数 (57)
- mac oracle (47)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)