HTML5+CSS3选择器
一、HTML5的认识
HTML5相较于HTML4进行了升级,比HTML4语义化更明确,新增了一些标签,同时也废除了一些元素旧的标签。
1.HTML5新增的语义化结构元素
header表示一个页面中一个内容区块或整个页面的标题即页面顶部的内容。
footer表示整个页面或页面中一个内容区块的脚注即页面底部的内容。
section表示页面中的一个内容区块,可与h1、h2等元素结合使用,表示文档结构。
article表示一个页面中的一块与上下文不相关的独立内容。常用于定义侧边栏内容即定义独立于网页的内容,在手机网页中经常用到。
aside表示定义页面之外的内容即声明主内容之外的内容。
nav表示页面中导航链接的部分。
main表示页面的主要内容。
figure表示一段独立的内容流,一般表示文档主体流内容的一个独立单元。
time表示声明时间。
progress表示HTML5中的默认精度条,其样式不能进行更改。
2.HTML5中新增的表单元素
datalist:其作用类似于<select name=” ” id=” ”></select>,表示在文本框中输入会出现下拉索引。
<input type=”text” list=”info”/>
<datalist id=”info”>
<option>a</option>
<option>ab</option>
<option>abc</option>
</datalist>
常与input搭配使用。
form:<form method=” ”></form>,表示表单验证。其中method中的属性包括get和post,get提交数据大,不太安全(get在注册后会将相关信息显示在网址上),post提交的数据少,较安全。
tel:格式<input type=”tel”/>,表示输入电话号码的文本框。
search:格式<input type=”search”/>,表示搜索的文本框。
url:格式<input type=”url”/>,表示输入URL地址的文本框。
email:格式<input type=”email”/>,表示输入电子邮件地址的文本框。
datetime:格式<input type=”datetime”/>,表示日期和时间的文本框。
date:格式<input type=”date”/>,表示日期的文本框。
month:格式<input type=”month”/>,表示月份的文本框。
week:格式<input type=”week”/>,表示周几的文本框。
time:格式<input type=”time”/>,表示时间的文本框。
datetime-local:格式<input type=”datetime-local”/>,表示本地日期和时间的文本框。
number:格式<input type=”number”/>,表示数字的文本框。
range:格式<input type=”range”/>,表示范围的文本框,可理解为文本框的进度条。
color:格式<input type=”color”/>,表示颜色的文本框。
file:格式<input type=”file”/>,表示文件上传管理器的文本框。
3.HTML5 中一些与JavaScript相关的标签
视频标签<video src=” ” autoplay controls loop></video>
音频标签<audio src=” ” autoplay controls loop></audio>
其中src中填入的是视频或音频的存放路径,autoplay表示自动播放,controls表示播放进度条控制器,loop表示循环播放。
画布标签<canvas></canvas>
二、CSS3选择器
在学习HTML的时候,我们初步接触了几个CSS选择器,在CSS3中,这些选择器可以继续沿用,同时还增加了一些选择器。
1.基本选择器
* 通用元素选择器,匹配任何元素。
E 标签选择器,匹配所有使用E 标签的元素。
.info class选择器,匹配所有class属性中包含info属性的元素
#info id选择器,匹配所有id属性等于info的元素。
2. 组合选择器
E,F 多元素选择器,同时匹配所有E 元素和F元素,E和F中间用逗隔开。
E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格隔开。
E>F 子元素选择器,匹配所有E 元素的子元素F 。
E+F 毗邻元素选择器,匹配所有紧随E 元素之后的同级元素F。
3.CSS2.1属性选择器
E[att] 匹配所有具有att属性的E元素。
E[att=val] 匹配所有att属性等于”val”的E 元素
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于”val”的E 元素
E[att|=val] 匹配所有att属性具有多个连字号分隔的值、其中一个值以”val”开头的E 元素。
4.CSS2.1伪类选择器
E:first-child 匹配父元素的第一个子元素
E:link 匹配所有未被单击的链接。
E:visited 匹配所有已被单击的链接。
E:active 匹配鼠标已经在其上按下、还没有释放的E 元素。
E:hover 匹配鼠标悬停其上的E 元素。
E:focus 匹配获得当前焦点的E 元素。
E:lang(c) 匹配lang属性等于c 的E 元素。
5.CSS2.1伪元素选择器
E:first-line 匹配E 元素的第一行。
E:first-letter 匹配E 元素的第一个字母。
E:before 在E 元素之前插入生成的内容。
E:after 在E 元素之后插入生成的内容。
E~F 匹配任何在E 元素之后的同级子元素。
6.CSS3属性选择器
E[att^=”val”] 属性att的值以”val”开头的元素。
E[att$=”val”] 属性att的值以”val”结尾的元素。
E[att*=”val”] 属性att的值包含”val”字符串的元素。
7. CSS3用户界面伪类选择器
E:enabled 匹配表单中激活的元素。
E:disabled 匹配表单中禁用的元素。
E:checked 匹配表单中被选中的radio(单选按钮)或checkbox(复选框)元素。
E:selection 匹配用户当前选中的元素。
8. CSS3结构性伪类选择器
E:root 匹配文档的根元素。
E:nth-child(n) 匹配其父元素的第n个子元素,括号里填写数字。
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,括号里填写数字。
E:nth-of-type(n) 与nth-child()作用类似,但只匹配使用同种标签的元素。
E:nth-last-of-type(n) 与nth-last-child()作用类似,但只匹配使用同种标签的元素。
E:last-child 匹配父元素的最后一个子元素,等同于nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个元素,等同于nth-of-type(1)。
E:last-of-type 匹配父元素下使用同种标签的最后一个元素,等同于nth-last-of-type(1)。
E:only-child 匹配父元素下仅有的一个子元素。
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素。
E:empty 匹配一个不包含任何子元素的元素。
9. CSS3反选伪类选择器
E:not(s) 匹配不符合当前选择器的任何元素。
10. CSS3的:target伪类选择器
E:target 匹配文档中特定“id”单击后的效果。
三、CSS3中和border有关的样式
border:20px solid red;表示边框线为20个像素,格式为线条,颜色为红色。
border-image: url("./img/1.jpg") round;表示插入图片。
box-shadow:-10px -10px 20px pink;表示设置阴影层,数字依次指阴影往下距离,往右距离,阴影大小,最后一个设置阴影的颜色。
border-radius:10px;表示定义圆角。若值为50%,则将整个框架设置成为圆形。
box-sizing: border-box;用来设置框架的布局。有三个属性(1)content-box这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。(2)border-box为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。(3)inherit规定应从父元素继承 box-sizing 属性的值。
HTML5+CSS3选择器相关推荐
- HTML5属性选择器以什么开头,CSS3 选择器 属性选择器介绍
属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式.使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值. 从上 ...
- html语言字体是否依赖客户端,【前端面试】HTML5+CSS3初级面试1
最近刚好在看前端的面试,把看到的内容总结一下,方便大家一起学习. 1.简单说一下对HTML5+CSS3的了解. Html5和CSS3不仅是两项新的Web技术标准,而且代表了下一代HTML和CSS技术. ...
- html5+css3基础教程收集
HTML5标签使用的常见误区 http://www.xinran001.com/bbs/thread-73344-1-1.html 如何在 IE 中使用 HTML5 元素 http://www.xin ...
- html5交互效果,浅谈HTML5 CSS3的新交互特性
本文标题的这副图片,是用Phosotshop制作的.但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字.并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的 ...
- html5+css3网页设计与网站布局从新手到高手,HTML5+CSS3网页设计与网站布局从新手到高手...
HTML5+CSS3网页设计与网站布局从新手到高手 语音 编辑 锁定 讨论 上传视频 <从新手到高手:HTML 5+CSS 3网页设计与网站布局从新手到高手>是2013年1月清华大学出版社 ...
- css3宽度变大动画_学所 前端 | HTML5+CSS3
HTML5 &CSS3 2020/09/5 啥?!HTML5是什么? "HTML5"和"HTML"有什么区别? 新增的HTML5特性有多好用? HTML ...
- html5/css3响应式页面开发总结
一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...
- 【前端面试】HTML5+CSS3初级面试1
最近刚好在看前端的面试,把看到的内容总结一下,方便大家一起学习. 1.简单说一下对HTML5+CSS3的了解. HTML5和CSS3不仅是两项新的Web技术标准,而且代表了下一代HTML和CSS技术. ...
- html笔记(三)html5+css3(html5、css3、文字相关)
W3school在线教程 html5+css3基本不兼容ie678. 大标题 小节 一.html5 1. html4 和 html5 的区别 2. 标签语义化 3. 智能表单的使用和规范 二.css3 ...
最新文章
- nio的优势_NIO研究所 | 最有AI的EC6故事
- ExtJs 备忘录(6)—— GirdPanl表格(二) [ 搜索分页 ]
- 快打开《来自艾泽拉斯的一封密码信》,破译网易重大机密
- vscode中如何运行git
- TensorFlow的安装方法
- Java 三个线程依次输出ABC
- html table 转置,jQuery+CSS实现的table表格行列转置功能示例
- Linux——tmux和vim常用命令总结(必会)
- SCM供应链管理系统有源码可以共享一下吗?
- Ext4分区不能mound的问题修复
- 蓝桥杯-第六届省赛第一题
- 让你效率飞起的右键工具——超级右键
- 常用图标(ICON)清单
- 怎么做安全生产月PPT专题课件?
- aspx与服务器控件探秘
- “丧心病狂”的C语言小程序,拿去恶搞好友
- js 数组遍历符合条件跳出循环体_Js数组遍历方法对比总结
- Halcon:PCB缺陷检测
- Groove Coverage- Far Away From Home(中英对照歌词:)
- ZZULIOJ-1091: 童年生活二三事(多实例测试)(Java)
热门文章
- 满二叉树和完全二叉树的区别
- JQ input value取值再赋值
- ES2016/ES2017/ES2018/ES2019 新语法
- 视频监控客户端开发(IP Camera)总结
- FTP 协议解析与实现
- 查看电脑支持最大内存和内存条型号
- [官方软件] Easy Sysprep v4.3.29.602 【系统封装部署利器】(2016.01.22)--skyfree大神...
- python单词词典_Python自然语言处理学习笔记(42):5.3 使用Python字典将单词映射到属性...
- CICD -- pipeline 流水线
- 虚拟内存技术的来龙去脉(上)