HTML5和CSS3的相关知识

2021-07-28 21:33:08 阅读：167 来源： 互联网

标签：CSS3 50px 浏览器 transition color 知识 height HTML5 0px

一、HTML5

1.H5的发展历史

HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。
HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”
2013年5月6日， HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。
本次草案的发布，从2012年12月27日至今，进行了多达近百项的修改，包括HTML和XHTML的标签，相关的API、Canvas等，同时HTML5的图像img标签及svg也进行了改进，性能得到进一步提升。

2.H5的兼容

支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

3.H5的语法

内容类型（ContentType） HTML5的文件扩展符与内容类型保持不变，仍然为".html"或".htm"
DOCTYPE声明 <!DOCTYPE html>不区分大小写
指定字符集编码 <meta charset="UTF-8">
可省略标记的元素不允许写结束标记的元素：br、col、embed、hr、img、input、link、meta
可以省略结束标记的元素： li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
可以省略全部标记的元素：html、head、body、colgroup、tbody
属性值可以使用双引号，也可以使用单引号。

4.H5的语义化

在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为html5的出现消失了，这就是我们平时说的“语义”。

5.H5常用标签

6.video视频文件

video支持的格式

7.audio音频文件

可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

属性：

二、CSS3

1.CSS3浏览器前缀

-ms- -ms-box-shadow IE浏览器专属的CSS属性需添加-ms-前缀

-moz- -moz-box-shadow 所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz-前缀

-o- -o-box-shadow Opera浏览器专属的CSS属性需添加-o-前缀

-webkit- -webkit-box-shadow 所有基于Webkit引擎的浏览器（如Chrome、Safari）专属的CSS需添加-webkit-前缀

2.CSS3渐进增强写法（从小到大）

.transition {

-webkit-transition: all .5s;

-moz-transition: all .5s;

-o-transition: all .5s;

transition: all .5s;

}

优雅降级写法（从大到小）

.transition {

transition: all .5s;

-o-transition: all .5s;

-moz-transition: all .5s;

-webkit-transition: all .5s;

}

3.文字阴影text-shadow

4.盒子阴影 box-shadow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影</title>
    <style>
        p{
            font-size: 55px;
            color: blueviolet;
            text-align: center;
            text-shadow: 20px 8px 5px rgb(233, 210, 247);
            font-weight: bolder;  
        }
        div{
            width: 300px;
            height: 300px;
            /* border:solid 1px slateblue; */
            background-color: rgb(180, 245, 253);
            color: coral;
            margin: auto;
            line-height: 300px ;
            text-align: center;
        }
        div:hover{
            box-shadow: 0px 0px 20px 10px rgb(255, 215, 192);
            border-radius: 150px/150px;
        }
    </style>
</head>
<body>
    <p>你好呀</p>
    <div>越努力越幸运</div>
</body>
</html>

注意：阴影不设置阴影颜色时，默认跟文本的颜色一致。

5.CSS的圆角

圆角的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角</title>
    <style>
        .box1{
             width: 100px;
             height: 50px;
             background-color: coral;
             border-radius: 50px 50px 0 0;
             display: inline-block;
        }
        .box2{
             width: 50px;
             height: 100px;
             background-color: coral;
             border-radius: 0 50px 50px 0;
             display: inline-block;
        }
        .box3{
             width: 100px;
             height: 50px;
             background-color: coral;
             border-radius: 0 0 50px 50px ;
             display: inline-block;
        }
        .box4{
             width: 50px;
             height: 100px;
             background-color: coral;
             border-radius: 50px 0px 0px 50px;
             display: inline-block;
        }

        .box5{
             width: 50px;
             height: 50px;
             background-color: coral;
             border-radius: 50px 0px 0px 0px;
             display: inline-block;
        }
        .box6{
             width: 50px;
             height: 50px;
             background-color: coral;
             border-radius: 0px 50px 0px 0px;
             display: inline-block;
        }
        .box7{
             width: 50px;
             height: 50px;
             background-color: coral;
             border-radius: 0px 0px 0px 50px;
             display: inline-block;
        }
        .box8{
             width: 50px;
             height: 50px;
             background-color: coral;
             border-radius: 0px 0px 50px 0px ;
             display: inline-block;
        }
       

    </style>
   
</head>
<body>
    <!-- 半圆 -->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <!-- 1/4圆 -->
    <div class="box5"></div>
    <div class="box6"></div>
    <div class="box7"></div>
    <div class="box8"></div>
</body>
</html>

6.CSS控制单词换行的属性

7.CSS中英文大小写的属性

8.CSS3的字体图标书写

@font-face：字体语法在网页上显示服务端字体

font-family：规定字体的名称。

src:url 定义字体文件的 URL。

注：在IE中使用时，只能使用微软自带的Embedded OpenType字体文件，扩展名为.eot

CSCSS控制单词换行的属性S控制单词换行的属性

标签：CSS3,50px,浏览器,transition,color,知识,height,HTML5,0px
来源： https://blog.csdn.net/qq_59641085/article/details/119187743

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML5和CSS3的相关知识