HTML5与CSS3选择器深入解析
需积分: 0 50 浏览量
更新于2024-08-17
收藏 675KB PPT 举报
"这篇内容主要探讨了HTML5和CSS3中的选择器,以及HTML5的发展历程和关键特性。作者鲁超伍,网名Adam,是一位有多年前端开发经验的专业工程师,目前在淘宝网北京UED任职。他强调了网站标准从XHTML1、CSS2.1到HTML5和CSS3的演变,并指出HTML5与CSS3如何更好地分离内容和表现。"
在CSS3选择器部分,提到了以下几种类型:
1. **属性选择器**:例如`a[href$='.pdf']`选取所有href属性以'.pdf'结尾的`<a>`标签,`a[href^='mailto']`选取href属性以'mailto'开头的`<a>`标签,而`a[class*=‘item’]`则选取class属性包含'item'的`<a>`标签。
2. **兄弟选择器**:`Div~img`表示选取所有紧跟在`<div>`元素后面的`<img>`元素,但不包括同级的其他元素。
3. **伪类选择器**:`:nth-child(n)`选取父元素的第n个子元素;`:nth-last-child(n)`选取父元素的倒数第n个子元素;`:last-child`选取父元素的最后一个子元素;`:checked`选取被选中的表单元素,如已勾选的复选框或单选按钮;`:empty`选取没有子节点(包括文本节点)的元素;`:only-child`选取其父元素下唯一的孩子元素;`:nth-of-type(odd)`和`:nth-of-type(even)`分别选取奇数位置和偶数位置的同类型元素。
HTML5的发展历程涵盖了从2007年至今的关键阶段,其中重要的里程碑包括:
- **XHTML1**和**CSS2.1**,这两个标准定义了2001年至2006年间网站内容与呈现方式的基础。
- **Web Hypertext Application Technology Working Group (WHATWG)** 和 **World Wide Web Consortium (W3C)** 的合作推动了HTML5标准的形成,旨在改进内容和呈现的分离,增强网页功能和可用性。
- **HTML5** 从2007年开始,引入了许多新元素、API和特性,如`<video>`和`<audio>`标签、离线数据存储API、画布(Canvas)和视频支持等。
支持HTML5的浏览器,如Opera、Safari、Firefox和Internet Explorer 8.0+,逐渐添加了对HTML5特性的支持,如跨文档消息传递、服务器发送事件、Web Forms 2.0、地理定位、Web Workers、可编辑内容等。
HTML5的关键技术概览包括:
- **新增和移除的元素**:HTML5引入了新的语义化元素,如`<header>`、`<footer>`、`<article>`、`<section>`等,同时移除了某些过时或不常用的元素。
- **HTML5基本布局**:通过流式布局、响应式设计等方法,HTML5提供了更灵活的页面构建方式。
- **对表单的支持**:HTML5加强了表单元素,如新增了`<input type="date">`、`<input type="range">`等类型,以及离线存储、验证功能等。
通过这些内容,我们可以深入理解HTML5和CSS3如何改进了网页开发,以及如何利用它们来创建更具交互性和响应性的现代网页。
2013-03-30 上传
2011-08-05 上传
2023-06-08 上传
2023-03-25 上传
2023-08-05 上传
2024-02-05 上传
2023-06-03 上传
2024-07-09 上传
2023-09-02 上传
![](https://profile-avatar.csdnimg.cn/fd7c6203a3ce46f8a5332ca9381206db_weixin_42200791.jpg!1)
Happy破鞋
- 粉丝: 10
- 资源: 2万+
最新资源
- 解决Eclipse配置与导入Java工程常见问题
- 真空发生器:工作原理与抽吸性能分析
- 爱立信RBS6201开站流程详解
- 电脑开机声音解析:故障诊断指南
- JAVA实现贪吃蛇游戏
- 模糊神经网络实现与自学习能力探索
- PID型模糊神经网络控制器设计与学习算法
- 模糊神经网络在自适应PID控制器中的应用
- C++实现的学生成绩管理系统设计
- 802.1D STP 实现与优化:二层交换机中的生成树协议
- 解决Windows无法完成SD卡格式化的九种方法
- 软件测试方法:Beta与Alpha测试详解
- 软件测试周期详解:从需求分析到维护测试
- CMMI模型详解:软件企业能力提升的关键
- 移动Web开发框架选择:jQueryMobile、jQTouch、SenchaTouch对比
- Java程序设计试题与复习指南