关于html5:HTML5CSS31

66次阅读

共计 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:前端测试题HTML5CSS3参考答案
关于sap:SAP-Fiori-Elements-在本地测试模式下如何修改-List-Report-里字段标签和图标
关于html5:小细节盒模型里面连续输入英文和数字不会自动换行汉字会自动换行
关于html5:vueeltable前端分页