HTML5+CSS3

最新推荐文章于 2024-05-12 19:59:40 发布

Burgdan

最新推荐文章于 2024-05-12 19:59:40 发布

阅读量670

点赞数

分类专栏：前端笔记

本文链接：https://blog.csdn.net/Burgdan/article/details/62270124

版权

前端笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Html5介绍：

Html -----xhtml版本---w3c和whatwg（web应用技术工作组） ----html5

Html5广义 =html5+css3+javascript+api

Html5的特点：

代码更加简洁，标签具有语义化，新增了一些属性，代码更加的宽松。

Html5的发展史：

2004提出构想-----2008模拟第一份草案-----2012推广html5-----2020年正式的版本

当今的html5处于推广阶段，各个浏览器存在兼容性。

Ie9版本以上支持html5。

Html5的基本结构：

<!doctype html>
<html>
<head>
    <meta charset=”UTF-8”> 
    <title>网站的标题</title>
</head>
<body>
</body>
</html>

Html5语法更加的宽松。

<meta …. /> 三种写法在html5中：

1.<meta charset=”UTF-8”>

2.<meta charset=”UTF-8” />

3.<meta charset=”UTF-8”></meta> （html可以把所有的标签都看成是双标签）

向下兼容----比html5版本低的版本语法都支持。

html5新增的标签：

<header> 网页文档的一个区域---网页的头部

<nav>代表网页的导航---链接的哪行文本

<section> 代表网页的一个块---div相似

<article> 网页中的文章内容

<aside> 网页文档的侧边栏

<footer>代表网页的页脚---版权

之前的xhtml结构是:

<div class=”header”></div>
<div class=”nav”></div>
<div class=”section”>
   <div class=”section_left”></div>
   <div class=”section_right”></div>
</div>
<div class=”footer”></div>

html的结构:

<header></header>
<nav></nav>
<section>			
	<article></article>
	<aside></aside>
</section>
<footer></footer>

html、xhtml和html5的区别：

html:超文本标记语言 (Hyper Text Markup Language)

xhtml:可扩展超文本标记语言，是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严

html5:最先由WHATWG(Web 超文本应用技术工作组)命名的一种超文本标记语言，随后和W3C的xhtml2.0(标准)相结合，产生现在最新一代的超文本标记语言。可以简单点理解成：h5≈ HTML+CSS3+js+API。

html5新增的标签的属性值：

placeholder=”内容” 输入框的提示信息

aequired=”required” 必填项

qutofocus=”autofocus” 自动获取焦点---光标自动定位到输入框中

html5新增的表单type属性值：

视频：

.ogg .mp4 .webm

格式

1.<video src=”视频的路径” autoplay=”autoplay” controls>

2.<video autoplay=”autoplay” controls >

</video>

音频：

.ogg mp3 wav

格式：

1.<audio src=”声音文件路径” autoplay=”autoplay” controls>

2.<audio autoplay=”autoplay” controls >

</audio>

CSS3介绍：

css2+新语法，对css2进行扩充删减优化

CSS3中新增的选择器：

属性选择器：

E—element元素 data—属性
<标签属性=”属性值” ></标签>—html元素

伪类结构：
E---element元素

伪元素：

设置文本的阴影：

text-shadow:水平垂直 模糊强调颜色；

水平： 正值：右侧负值：左侧

垂直： 正值：下负值：上

可以有多组值，之间用逗号相隔。

设置盒子的阴影：

box-shadow：水平垂直模糊强度模糊尺寸颜色内外阴影inset；默认是外阴影但是如果是外阴影不加outset。

如果有多组值中间用逗号相隔

水平：正值是右侧，负值是左侧。

垂直：正值是下面，负值是上面。

盒子变成圆角：

border-radius：左上右上右下左下

设置半透明颜色：

color:rgba(255,0,0,0.3)

background:rgba(0,0,0,0.6)

背景图片的尺寸：

background-size：宽度高度;例如:background-size: 400px 500px;

background-size:cover;背景图片会把整个盒子（宽度和高度）都用背景覆盖上

background-size:contain;背景图片会把盒子的宽度或高度覆盖就停止

Burgdan

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3

Html5介绍：Html -----xhtml版本---w3c和whatwg（web应用技术工作组） ----html5Html5广义 =html5+css3+javascript+apiHtml5的特点：代码更加简洁，标签具有语义化，新增了一些属性，代码更加的宽松。Html5的发展史：2004提出构想-----2008模拟第一份草案-----201
复制链接

扫一扫

专栏目录