HTML5和CSS3的相关知识

2024-01-07 17:01:34

一、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常用标签

HTML5和CSS3的相关知识

HTML5和CSS3的相关知识

6.video视频文件

HTML5和CSS3的相关知识

HTML5和CSS3的相关知识

 video支持的格式

HTML5和CSS3的相关知识

7.audio音频文件

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

属性：

HTML5和CSS3的相关知识

二、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

HTML5和CSS3的相关知识

4.盒子阴影  box-shadow

HTML5和CSS3的相关知识

HTML5和CSS3的相关知识

<!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的圆角

HTML5和CSS3的相关知识

圆角的应用

<!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>

HTML5和CSS3的相关知识

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

HTML5和CSS3的相关知识

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

HTML5和CSS3的相关知识

8.CSS3的字体图标书写 

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

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

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

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

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

上一篇：CSS3动画知识总结


下一篇：std::async方式循环提速