html5,CSS3,JavaScript
HTML5文档类型
文档第一行代码表示的是当前文档的类型,告诉浏览器当前文档是按照html的类型进行的编译执行
首先在文档类型的书写上不同,html5中新增了一些语义化的标签以及表单属性和表单的类型,还包含有新的伪类,伪元素选择器。
其次,html5的要求更简单,简洁,在书写上面没有一定的要求。
1.文档类型声明不同
2.结构语义上的不同
html,没有体现结构语义化的标签
html5:在语义上却有很大的优势。提供了一些新的标签
比如:
<header> <article> <footer>
<head>
<ul class="nav">ul>
header>
<div class="main">
<article>article>
<aside>aside>
div>
<footer>footer>
头部 <header> 尾部 <footer>
主体: 文章 <article> 侧边栏 <aside>
导航 <nav> 区块 <section> 媒介内容分组 <figure>
vw、vh 视图宽高的百分比
邮件类型 email
文件类型 file
时间类型 date
时间(自行输入) datetime
颜色选择 color
手机号码 tel
只能输入数字 number
单选框 radio(name值必须为同一个值)
fieldset 元素可将表单内的相关元素分组。
fieldset标签将表单内容的一部分打包,生成一组相关表单的字段。
legend 元素可为 fieldset 定义一个标题。
向控件定义标注(标记)。如果您在 label 元素内点击文本,就会触发此控件。
当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label for=" " > label>
"for" 属性可把 label 绑定到另外一个元素。
把 "for" 属性的值设置为相关元素的 id 属性的值。
数据列表与input 配合使用
<input type=”text” list=”data”>
<datalist id=”data”>
<option>男option>
<option>女option>
<option>不详option>
datalist>
元素可定义下拉列表中的一个选项(一个条目)。
keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器。当提交表单时,会生成两个键, 一个是私钥,一个公钥。
私钥存储于客户端,公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。
属性: rsa/dsa/ec 描述使用的密钥类型
属性 | 值 | 描述 |
---|---|---|
max | number | 定义完成的值。 |
value | number | 定义进程的当前值。 |
不建议用作进度条
属性 | 值 | 描述 |
---|---|---|
high | number | 定义度量的值位于哪个点,被界定为高的值。 |
low | number | 定义度量的值位于哪个点,被界定为低的值。 |
max | number | 定义最大值。默认值是 1。 |
min | number | 定义最小值。默认值是 0。 |
optimum | number | 定义什么样的度量值是最佳的值。 如果该值高于 “high” 属性,则意味着值越高越好。 如果该值低于 “low” 属性的值,则意味着值越低越好。 |
value | number | 定义度量的值。 |
<input multiple="multiple" />
novalidate 属性规定当提交表单时不对其进行验证。
适用于<form> <input>标签
<form novalidate="novalidate">
属性规定必需在提交之前填写输入字段。
如果使用该属性,则字段是必填(或必选)的。
由 HTML 表单内部的动作触发的事件。
手机号正则验证:
<input pattern="1[3|4|5|7|8][0-9]{9}" />
密码正则验证
<input pattern="\d{2,6}" />
\d表示纯数字
{}填写几位数
{2,6}表示2-6位数
属性规定当页面加载时 input 元素应该自动获得焦点。
如果使用该属性,则 input 元素会获得焦点。
即可播放.mp4文件,也可播放.mp3格式
支持三种格式
.ogg/.wav/.mp4
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 设置视频的自动播放 |
controls | controls | 设置视频的播放控件 |
preload | preload | 添加视频初识加载的图片 |
loop | loop | 设置视频循环播放 |
也可播放视频及音频,简单方便但局限性太小
CSS3 是CSS2 的 “ 进化 ” 版本,在CSS2基础上增强或新增了许多特性, 弥补了 CSS2的众多不足之处,使得Web 开发变得更为高效和便捷。
1、IE浏览器
2、Opera浏览器
1995年,opera公司发布第一版Opera浏览器,使用自己研发的Presto内核。当时opera公司的开发团队不断完善Presto内核,使Opera浏览器一度成为顶级浏览器。直到2016年奇虎360和昆仑万维收购了Oprea浏览器,从此也丢弃了强大的Presto内核,改用当时Google开源的webkit内核。后来Opera浏览器跟随Google将浏览器内核改为Blink内核。
原文:https://blog.csdn.net/yuyanjing123456789/article/details/78689595
3、Safari浏览器
Safari是最早使用webkit内核的浏览器也是现在苹果默认的浏览器。
4、Firefox浏览器
Firefox采用Gecko作为内核。
5、Chrome浏览器
最开始Chrome采用webkit作为浏览器内核,直到2013年,google宣布不再使用苹果的webkit内核,开始使用webkit的分支内核Blink
Trident(也称IE内核)、Gecko、webkit、Blink
Trident(IE内核)
Trident内核代表产品Internet Explorer,又称其为IE内核。Trident(又称为MSHTML),是微软开发的一种排版引擎。国内很多的双核浏览器其中之一就是Trident,美名其曰“兼容模式”。
代表:IE、傲游、世界之窗浏览器、Avant、猎豹安全浏览器、360极速浏览器、百度浏览器等。
Window10发布后,IE将其内置浏览器命名为Edge(原名斯巴达),使用了新内核Edge引擎。
Gecko(Firefox)
Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一,仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。可惜这几年已经没落了,比如打开速度慢、升级频繁、猪一样的队友flash、神一样的对手Chrome。
Webkit(Safari)
苹果公司自己的内核,也是苹果的Safari浏览器使用的内核。
WebKit内核代表作品Safari、Chromewebkit 是一个开源项目,包含了来自KDE项目和苹果公司的一些组件,主要用于Mac OS系统,它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高,导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。
Blink(Chrome)
有Google和Opera Software开发的浏览器排版引擎,2013年4月发布,现在Chrome内核是Blink。Blink其实是webkit的分支,大部分国产浏览器最新版都采用Blink内核。
Presto(Opera)
Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎,供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎,包括加入动态功能,例如网页或其部分可随着DOM及Script语法的事件而重新排版。在13年之后,Opera宣布加入谷歌阵营,弃用了Presto。
原文:https://blog.csdn.net/weixin_42535771/article/details/81487528
其特点是通过属性来选择元素,具体有以下 5 种形式
1.div[class] 选中属性是class的
2.div[class=div1] 选中属性class的值为div1的
3.div[class*=d] 选中属性class的值中包含字母d的全部选中
4.div[class^=i] 选中属性class的值中包含i且以i开头的
5.div[class$=1] 选中属性class的值中包含1且以1结尾
伪类选择器
::first-child 选择第一个子元素
::last-child 选择最后一个子元素
::nth-child(2n) nth-child(even) 选择偶数位的子元素
::nth-child(2n-1) nth-child(odd) 选择奇数位的子元素
::nth-child(-1n+5) 选择前五个子元素
::nth-last-child(-1n+5) 选择后五个子元素
::nth-last-child(-1n+2) 选择后两个子元素
::empty 选择空元素(无任何子元素)
::target 结合锚点使用
::selection 选中区域的样式
::before和::after结合content一起使用
before在前,after在后
p:after
{
content:"台词:";
}
::first-letter 文本的第一个字母或字
::first-line 文本第一行
:: 兼容浏览器