HTML5和CSS3

最新推荐文章于 2024-07-31 23:13:20 发布

Survivor_lll

最新推荐文章于 2024-07-31 23:13:20 发布

阅读量918

点赞数 1

文章标签： html5 css3

本文链接：https://blog.csdn.net/a_lllll/article/details/84037071

版权

HTML5

html5泛称：

html5，CSS3，JavaScript

<!DOCTYPE html>
HTML5文档类型
文档第一行代码表示的是当前文档的类型，告诉浏览器当前文档是按照html的类型进行的编译执行

html5和html之间的区别？

首先在文档类型的书写上不同，html5中新增了一些语义化的标签以及表单属性和表单的类型，还包含有新的伪类，伪元素选择器。

其次，html5的要求更简单，简洁，在书写上面没有一定的要求。

规范的区别

1.文档类型声明不同

2.结构语义上的不同

html，没有体现结构语义化的标签

html5:在语义上却有很大的优势。提供了一些新的标签

比如:
<header> <article> <footer>

H5的语义化标签

经典H5布局

<!-- 头部-->
<head>
	<ul class="nav"></ul>
</header>
<!-- 主体部分 -->
<div class="main">
    <!-- 文章 -->
    <article></article>
    <!-- 侧边栏 -->
    <aside></aside>
</div>
<!-- 底部 -->
<footer></footer>

常见的语义化标签

头部	<header>				尾部	<footer>

主体：	文章	<article>		侧边栏		<aside>

导航	<nav>		区块	<section>		媒介内容分组		<figure>

视窗的宽高(viewport)

vw、vh 视图宽高的百分比

表单

表单输入类型（类型，元素，属性，事件）

邮件类型		email	   
文件类型		file		
时间类型		date		
时间（自行输入）	datetime	
颜色选择		color		 
手机号码	  	tel
只能输入数字	number		 
单选框	   	radio（name值必须为同一个值）

fieldset 标签

fieldset 元素可将表单内的相关元素分组。

fieldset标签将表单内容的一部分打包，生成一组相关表单的字段。

legend 标签

legend 元素可为 fieldset 定义一个标题。

label 标签

向控件定义标注（标记）。如果您在 label 元素内点击文本，就会触发此控件。

当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label for=" " > </label>
"for" 属性可把 label 绑定到另外一个元素。
把 "for" 属性的值设置为相关元素的 id 属性的值。

datalist标签（智能列表，数据列表、数据集合）

数据列表与input 配合使用

<input type=”text” list=”data”>
    <datalist id=”data”>
        <option>男</option>
        <option>女</option>
        <option>不详</option>
	</datalist>

option 标签

元素可定义下拉列表中的一个选项（一个条目）。

keygen 元素

keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥存储于客户端，公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。

属性： rsa/dsa/ec 描述使用的密钥类型

进度条（progress）

属性	值	描述
max	number	定义完成的值。
value	number	定义进程的当前值。

度量器（meter）

不建议用作进度条

属性	值	描述
high	number	定义度量的值位于哪个点，被界定为高的值。
low	number	定义度量的值位于哪个点，被界定为低的值。
max	number	定义最大值。默认值是 1。
min	number	定义最小值。默认值是 0。
optimum	number	定义什么样的度量值是最佳的值。如果该值高于 “high” 属性，则意味着值越高越好。如果该值低于 “low” 属性的值，则意味着值越低越好。
value	number	定义度量的值。

多选下拉框（multiple）

<input multiple="multiple" />

关闭验证（novalidate）

novalidate 属性规定当提交表单时不对其进行验证。

适用于<form> <input>标签
<form novalidate="novalidate">

必填项（required）

属性规定必需在提交之前填写输入字段。

如果使用该属性，则字段是必填（或必选）的。

表单事件

由 HTML 表单内部的动作触发的事件。

用户输入内容时触发（oninput）

验证不通过时触发（oninvalid）

正则表达式验证表单（pattern）

手机号正则验证：
<input pattern="1[3|4|5|7|8][0-9]{9}" />
密码正则验证
<input pattern="\d{2,6}" />
\d表示纯数字
{}填写几位数
{2,6}表示2-6位数

定义焦点（autofocus）

属性规定当页面加载时 input 元素应该自动获得焦点。

如果使用该属性，则 input 元素会获得焦点。

多媒体

audio

即可播放.mp4文件，也可播放.mp3格式

video（视频）

支持三种格式

.ogg/.wav/.mp4

属性	值	描述
autoplay	autoplay	设置视频的自动播放
controls	controls	设置视频的播放控件
preload	preload	添加视频初识加载的图片
loop	loop	设置视频循环播放

embed

也可播放视频及音频，简单方便但局限性太小

CSS3

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