关于html5:HTML5CSS31

145次阅读

共计 6814 个字符，预计需要花费 18 分钟才能阅读完成。

HTML5

HTML5 作为 html 的第五次重大批改，作为新的 HTML 语言，具备新的元素，新的属性及行为。

狭义的 HTML5=HTML5 自身 +css+javascript HTML5 具备兼容性，但具备发展趋势。

HTML5 新增语义化标签

  • header: 头部标签
  • nav: 导航标签
  • article: 内容标签
  • section: 块级标签
  • aside: 侧边栏标签
  • footer：脚部标签

注意事项

1. 新增标签能够应用屡次

2.IE9 以下的版本具备兼容性问题，须要转换成块级元素 

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header,
        nav,
        aside,
        article,
        section,
        footer {
            display:block;
            width: 100%;
            height: 100px;
            margin-top: 20px;
            color: #fff;
            background-color: purple;
            text-align: center;
            line-height: 100px;
            font-weight: 700;
        }
    </style>
</head>
 
<body>
    <header> 头部 </header>
    <nav> 导航 </nav>
    <aside> 侧边栏 </aside>
    <article> 内容 </article>
    <section> 块级 </section>
    <footer> 脚部 </footer>
</body>
 
</html>

HTML5 多媒体标签

audio 音频标签 

<audio> 音频标签常见属性
  • autoplay: 自动播放
  • controls: 控件
  • loop: 有限次循环播放
  • src: 播放的地址 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <!-- 第一种办法 -->
    <audio src="./audio/Ngẫu_Hứng-Hoaprox-23817485.mp3" controls="controls" loop="loop" autoplay="autoplay"></audio>
 
    <!-- 第二种办法 -->
    <audio controls="controls" loop="loop" autoplay=“autoplay ">
        <source src="./audio/Ngẫu_Hứng-Hoaprox-23817485.mp3">
            你的浏览器 不反对播放音乐
    </audio>
</body>
 
</html>

video 视频标签 

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        video {
            width: 1000px;
            margin: 10px auto;
        }
    </style>
</head>
 
<body>
    <!-- 第一种办法 -->
    <!--   <video src="./video/mI.mp4" controls="controls" autoplay="autoplay" loop="loop"></video>    -->
 
 
    <!-- 第二种办法 -->
    <video muted="muted" autoplay="autoplay">
        <source src="./video/mI.mp4" type="video/mp4">
            <!-- 你的浏览器不反对播放视频 -->
    </video>
</body>
 
</html>

HTML5 新增 input 表单及属性 


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        form {
            width: 400px;
            padding: 20px 15px;
            margin: 50px auto;
            background: url(./image/ 星空.jpg) no-repeat;
            background-size: cover;
        }
        
        li {list-style: none;}
        input {margin: 5px 0px;}
        
        .submit,
        .reset {float: left;}
        
        .reset {margin-left: 200px;}
        
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        
        .clearfix:after {clear: both;}
        
        .clearfix {*zoom: 1;}
        
        span {
            font: normal normal 16px "楷体";
            color: white;
        }
    </style>
</head>
 
<body>
    <form action="ZiMo.php">
        <ul>
            <li><span> 账号：</span><input type="text" name="username" autocomplete="on"></li>
            <li><span> 邮箱：</span><input type="email" name=""id="" required="required" placeholder="请输出邮箱账号"></li>
            <li><span> 网址：</span><input type="url" name=""id=""></li>
            <li><span> 日期：</span><input type="date" name=""id=""></li>
            <li><span> 工夫：</span><input type="time" name=""id=""></li>
            <li><span> 月份：</span><input type="month" name=""id=""></li>
            <li><span> 周：</span><input type="week" name=""id=""></li>
            <li><span> 数值：</span><input type="number" name=""id=""></li>
            <li><span> 手机号：</span><input type="tel" name=""id=""></li>
            <li><span> 搜寻框：</span><input type="search" name=""id="" autofocus></li>
            <li><span> 色彩 </span><input type="color" name=""id=""></li>
            <li class="clearfix">
                <div class="submit"><input type="submit" value="提交"></div>
                <div class="reset"><input type="reset" value="重置"></div>
            </li>
        </ul>
    </form>
</body>
 
</html>

CSS3 选择器

属性选择器

类选择器 属性选择器 伪类选择器的权值为 10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            float: left;
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin :20px 50px;
        }
        button {background-color: red;}
        button[disabled="disabled"] {background-color: blue;}
        input[type='text'] {background-color: pink;}
        div[class^='box1']  {background-color: black;}
        div[class$='box1']{background-color: purple;}
        div[class*='box2'] {background-color: saddlebrown;}
    </style>
</head>
<body>
    <section>
        <button> 按钮 </button>
        <button> 按钮 </button>
        <button disabled="disabled"> 禁用按钮 </button>
        <button disabled="disabled"> 禁用按钮 </button>
    
        <input type="text" name=""id="">
        <input type="text" name=""id="">
        <input type="text" name=""id="">
    
        <input type="number" name=""id="">
        <input type="number" name=""id="">
        <input type="number" name=""id="">
    </section>
    
 
    <div class="box123"></div>
    <div class="box123"></div>
    <div class="box123"></div>
 
    <div class="123box1"></div>
    <div class="123box1"></div>
    <div class="123box1"></div>
 
 
    <div class="2020box2"></div>
    <div class="2020box2"></div>
    <div class="2020box2"></div>
 
 
</body>
</html>

构造伪类选择器

nth-chid(n):n 能够为公式 也能够为关键字 even(偶数) old(奇数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li:first-child {background-color: saddlebrown;}
        ul li:last-child {background-color: salmon;}
        ul li:nth-child(4n) {background-color: yellow;}
      
    </style>
</head>
 
<body>
    
</body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</html>

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div a:last-of-type {background-color: red;}
        
        div p:first-of-type {background-color: purple;}
        
        div span:nth-of-type(2n) {background-color: yellow;}
    </style>
</head>
 
<body>
    <div>
        <a href="#"> 百度 </a>
        <a href="#"> 新浪 </a>
        <a href="#">360</a>
        <a href="#"> 阿里巴巴 </a>
 
        <span>span 标签 </span>
        <span>span 标签 </span>
        <span>span 标签 </span>
        <span>span 标签 </span>
 
        <p>p 标签 </p>
        <p>p 标签 </p>
        <p>p 标签 </p>
        <p>p 标签 </p>
 
    </div>
</body>
 
</html>


两者最大的不同：前者只有是父元素中的子元素，都能够选中，后者能够选中指定元素

伪元素选择器 

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            margin: 100px auto;
        }
        
        div::before {
            display: inline-block;
            height: 200px;
            width: 200px;
            background-color: red;
            content: "我是";
        }
        
        div::after {
            display: inline-block;
            height: 200px;
            width: 200px;
            background-color: blue;
            content: "小可爱";
            
        }
    </style>
</head>
 
<body>
    <div>
        一个
    </div>
</body>
 
</html>

注意事项

  • ::before 和::after 属于伪元素选择器，content 属性必须要写
  • 伪元素不存在 dom 构造
  • 伪元素选择器为行内元素
  • 权重为 1

伪元素选择器制作字体图标 

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
        
            width: 600px;
            height: 600px;
            border: 1px solid red;
        }
        
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?cv013x');
            src: url('fonts/icomoon.eot?cv013x#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?cv013x') format('truetype'), url('fonts/icomoon.woff?cv013x') format('woff'), url('fonts/icomoon.svg?cv013x#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        
        p::after {
            content: '\e9da';
            font-size: 50px;
            font-family: "icomoon";
        }
    </style>
</head>
 
<body>
    <p></p>
</body>
 
</html>

留神：目录下必须要 fonts 文件

transition: 过渡

简写

transition: 过渡的属性 过渡的工夫 过渡的工夫曲线 过渡成果何时开始

注意事项

  • 过渡成果是一种成果从另一种成果的变动
  • 过渡有多组属性之间用逗号相隔
  • all 代表所有的属性
  • 过渡的成果在本身元素上 
<html>
    <head>
        <title> 过渡 </title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box {
                height: 600px;
                width: 600px;
                background-color: red;
                transition: all 2s linear 0s; 
            }
            .box:hover {
                width: 1000px;
                height: 1000px;
                background-color: #0000FF;
                
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

正文完
html5
发表至： html5
2020-08-03
 0
关于html5:10个有用的HTML文件上传技巧
关于html5:getUserMedia-获取相机信息
关于html5:谈谈前端页面优化
「造个轮子」——cicada 源码分析