HTML5学习——第十一天

最新推荐文章于 2024-11-02 15:22:06 发布

Nefertari Emotional

最新推荐文章于 2024-11-02 15:22:06 发布

阅读量150

点赞数 3

文章标签： html5 学习前端 html

本文链接：https://blog.csdn.net/weixin_64683517/article/details/140618301

版权

1.html5新增的标签

<!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>
    <!-- 网页的基本结构标签(块级标签),其实就相当于div添加名字的过程具象化了 -->
    <!-- 头部 -->
    <header>网页的头部标签</header>
    <!-- 底部 -->
    <footer>网页的底部标签</footer>
    <!-- 导航(横向导航,侧边导航) -->
    <nav>网页的导航标签</nav>
    <!-- 内容 -->
    <section>网页的内容标签</section>
    <!-- 辅助信息 -->
    <aside>网页的辅助信息标签</aside>
    <!-- 文章 -->
    <article>网页的文章标签</article>

    <!-- 媒体文件引入 -->
    <!-- 管是音频还是视频,兼容的格式较少  -->
    <embed src="./music/music.mp3" type="">
    <!-- <embed src="./music/马良-往后余生 (Demo).oggl" type=""> -->
    <embed src="./videos/3theA.mp4" type="">
    
    <!-- 独立内容块 -->
    <style>
        figure{
            width: 200px;
            height: 250px;
            background-color: aqua;
        }
        img{
            width: 100%;
            height: 150px;
        }
    </style>
    <!-- 内容块的容器 -->
    <figure>
        <!-- 图片 -->
        <img src="https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/9906/12/25225/58456/669a8dbcFe6225638/b4c8d479df8c60b9.jpg.avif" alt="">
        <!-- 文本容器 -->
        <figcaption>这是笑容+的牙膏,还是挺好用的</figcaption>
    </figure>

    <!-- 高亮显示文字 - 自带的背景颜色 -->
    <style>
        mark{
            /* background-color: aqua; */
            background-color: transparent;
            color: red;
        }
    </style>
    <mark>高亮显示文本</mark>

    <!-- 标题组 - 盛放多个标题标签的容器 -->
    <hgroup>
        <h1>主标题</h1>
        <h3>副标题</h3>
    </hgroup>

    <!-- 对话框 - 自带的边框 - 需要添加open属性开始对话框 -->
    <!-- 标签的属性名与属性值一致的时候,可以简写,直接书写属性名字 -->
     <style>
        dialog{
            width: 300px;
            height: 300px;
            border-color: green;
            border-width: 5px;
        }
     </style>
    <dialog open="open"></dialog>

    <!-- 自定义图形 - 配合js进行图形绘制 -->
    <canvas></canvas>
</body>
</html>

2.视频标签

<body>
    <!-- 视频标签 -->
    <!-- 
        属性:
            src - 视频的路径
            controls - 显示播放控件
            loop - 循环播放
            autoplay - 自动播放 - muted - 静音
            poster - 定义第一帧的图片
            preload - 预加载
    
    -->
    <!-- <video src="./videos/chen.mp4" controls loop  poster="https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/9906/12/25225/58456/669a8dbcFe6225638/b4c8d479df8c60b9.jpg.avif" preload="auto"></video> -->
    
    <!-- 播放源,从上到下执行 -->
    <video controls>
        <source src="./videos/dongbei.mp4">
        <source src="./videos/dongbei.mp4">
        <source src="./videos/dongbei.mp4">
    </video>
</body>

3.音频标签

<body>
    <!-- 音频标签 -->
     <!-- 
        属性:
            src - 音频的路径
            controls - 显示播放控件
            loop - 循环播放
            preload - 预加载
            autoplay - 自动播放
            muted - 静音
    
     -->
    <audio src="./music/music.mp3" controls loop preload="auto" muted ></audio>
</body>

4.表单标签

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[type='submit']{
            background-color: #ff202f;
        }
    </style>
</head>
<body>
    <!-- 表单标签(input)新增的type属性值 -->
    <form action="">
        <!-- 邮箱地址,判断@及后面的内容 -->
        <!-- multiple - 多个邮箱地址同时上传 -->
        <input type="email" multiple>

        <!-- 数字 - 点击控件进行增减 -->
        <input type="number" min="0" max="10" step="2">

        <!-- 滑块 -->
        <input type="range" min="0" max="100" step="10">

        <!-- 拾色器 -->
        <input type="color">

        <!-- 年月日 -->
        <input type="date">

        <!-- 年月 -->
        <input type="month">

        <!-- 年第几周 -->
        <input type="week">

        <!-- 时间 -->
        <input type="time">

        <!-- 年月日时间 -->
        <input type="datetime-local">

        <!-- 标准时间 -->
        <input type="datetime">
        
        <!-- required  - 内容不能为空 -->
        <input type="text" required value="文本框">

        <!-- placeholder - 占位符/提示文本 -->
        <input type="password" placeholder="请输入密码" autofocus>

        <!-- autofocus - 自动获取光标,如果同时出现多个,优先执行第一个,忽略其他 -->
        <input type="text" autofocus>

        <!-- maxlength - 最大长度 -->
        <input type="text" maxlength="10">

        <!-- 文本框 -->
        <!-- on - 开启数据列表  off - 关闭数据列表 -->
        <input autocomplete="" name="text张三" list="words" type="text" placeholder="请输入内容">
        <!-- 数据列表 -->
        <datalist id="words">
            <option value="">谷歌</option>
            <option value="">火狐</option>
            <option value="">欧朋</option>
            <option value="">苹果</option>
        </datalist>

        <!-- 输出标签 -->
        <output></output>
        <input type="submit">
    </form>
</body>

5.属性选择器

<style>
        /* 标签名[属性名] */
        div[class]{
            color: red;
        }

        /* 标签名[属性名='属性值'] */
        input[type='password']{
            background-color: blue;
        }

        /* 标签名[属性名^='以这个取值开头即可'] */
        input[type^='sub']{
            background-color: green;
        }
        /* 标签名[属性名$='以这个取值结尾即可'] */
        input[type$='et']{
            background-color: aqua;
        }

        /* 标签名[属性名*='属性值中拆分出的连续的单词'] */
        span[class*='ext_']{
            color: red;
        }

        /* 标签名[属性名~='取值可以拆分出连续且完整的单词'] */
        b[class~='colo']{
            color: orange;
        }

        /* 标签名[属性名|='完整且唯一的连续单词或者多个属性值之间用-连接'] */
        strong[class|='txt']{
            color: pink;
        }
    </style>
</head>
<body>
    <div class="box">第一个div</div>
    <div>第二个div</div>
    <p class="box">第一个p标签</p>
    <input type="text">
    <input type="password">
    <input type="submit">
    <input type="reset">
    <span class="text_color">span标签</span>
    <b class="flower color">加粗标签</b>
    <strong class="txt-xtx">加粗标签2</strong>
</body>

6.结构伪类选择器

 <style>
        /* 第一个子级 */
        /* ul>:first-child{
            color: red;
        } */

        /* 最后一个子级 */
        /* ul>:last-child{
            color: green;
        } */

        /* n:0123456789..... */
        /* 
            2n : 偶数
            2n+1/2n-1 : 奇数
            4n:4的倍数  3n:3的倍数
            n + 4: 包括第4个子级以后得所有子级
            -n + 5:前五个子级
        */
        /* ul的子级li并且这个li是第二个子级 */
        /* ul>li:nth-child(2){
            color: blue;
        } */

        /* 倒数第几个子级 */
        /* ul>:nth-last-child(4){
            color: red;
        } */

        /* 只有一个子级 */
        /* p>:only-child{
            color: aqua;
        } */

        /* 某个类型子级中的第一个 */
        /* ul>div:first-of-type{
            color: red;
        } */

        /* 某个类型子级中的最后一个 */
        /* ul>div:last-of-type{
            color: blue;
        } */

        /* 某个类型子级中的某一个 */
        /* ul>li:nth-of-type(2){
            color: red;
        } */

        /* 某个类型子级中的倒数第几个 */
        /* ul>li:nth-last-of-type(3){
            color: red;
        } */

        /* 子级是某个类型唯一的 */
        p>:only-of-type{
            color: red;
        }

        s,u{
            display: block;
            width: 100px;
            height: 100px;
            background-color: orange;
        }

        /* 选中空标签 - 检查某一类标签,把标签名放到:前面 */
        :empty{
            background-color: red;
        }

        /* html,body{
            height: 100%;
        } */

        /* 根元素html */
        :root{
            color: pink;
        }
    </style>
</head>
<body>
    <ul>
        <li>第1个li标签</li>
        <div>我是div</div>
        <div>我是div</div>
        <li>第2个li标签</li>
        <li>第3个li标签</li>
        <li>第4个li标签</li>
        <li>第5个li标签</li>
        <li>第6个li标签</li>
        <li>第7个li标签</li>
        <li>第8个li标签</li>
        <li>第9个li标签</li>
        <li>第10个li标签</li>
        <li>第11个li标签</li>
        <li>第12个li标签</li>
        <li>第13个li标签</li>
        <li>第14个li标签</li>
        <li>第15个li标签</li>
    </ul>
    <p>
        <span>我</span>
        <span>我</span>
        <b>是</b>
        <strong>p</strong>
        <i>标签</i>
        <i>标签</i>
    </p>
    <s></s>
    <u>下划线</u>
</body>

7.ui状态伪类选择器

 <style>
        /* 可用状态下的样式 */
        /* input:enabled{
            width: 100px;
            background-color: pink;
        } */

        /* 禁用状态下的样式 */
        /* input:disabled{
            width: 300px;
        } */

        input[type='radio']{
            /* 清除表单自带的样式 */
            appearance: none;
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50%;
        }

        /* 选中状态下的样式 */
        input[type='radio']:checked{
            background-color: plum;
        }

        input[type='checkbox']{
            /* 清除自带的样式 */
            appearance: none;
            width: 70px;
            height: 40px;
            background-color: #e9e9eb;
            border-radius: 20px;
            /* 相对定位 */
            position: relative;
        }

        input[type='checkbox']::after{
            content: '';
            width: 36px;
            height: 36px;
            background-color: #fff;
            border-radius: 50%;
            /* 绝对定位 */
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 2px;
        }

        input[type='checkbox']:checked::after{
            /* transform: translateY(-50%) translateX(30px); */
            left: 32px;
        }
        input[type='checkbox']:checked{
            background-color: #65c467;
        }
    </style>
</head>
<body>

    <!-- disabled - 禁用 -->
    <!-- 单选框 -->
    男:<input type="radio" name="sex">
    女:<input type="radio" name="sex">

    <input type="checkbox">
   
</body>

8.小米按钮案例

<style>
        input{
            appearance: none;
            width: 20px;
            height: 20px;
            background-color: #f9f9f9;
            border-radius: 5px;
            border: 1px solid #ccc;
            transition: all linear 0.5s;
        }
        input:hover{
            border-color: orange;
        }
        input:checked{
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAATlBMVEUAAAD/aQD/bAD/awD/agD/aQD/aQD/bAD/aQD/28L/dBP/+fb/zav/9Oz/5NL/omL/mFD/vI3/jT3/hjD/7OD/xJv/s3//rHP/fSP7xfatAAAACHRSTlMA8xts2babTk78UQYAAAENSURBVEjH7dfNDoIwEATgtvy4balQUYH3f1FtxSw3y2yMHpj7l411QnbVGlM1taaC6LqpjNrGtLQr7YafNO2MPr1tRUCqdS5BybONxrBOv7slMK1ShuAYfi3kzRocN6rGca00jrUiQQ78JexD5zyKnbX2DuJgn3EYvtuUAcJTthdC8JBtIATHbB0heOyS7T2Cr+dkbx4pib8le16Qhvk+2e5aXs85DFyslFje7Yn/08Dl+Ix52szFmmkHvmQSuVilmEd3IxerGPMTc7H2YFpyMbhYpZhrxcUqx1zoXCwEU3wVC8MUezf+xaf3wL/HkoVGtEqJljjR+ihaXCUrs3BZx88E6YGCn0byoww/Bx8vXG8Zm5KImgAAAABJRU5ErkJggg==);
            background-size: 100% 100%;
            border: 0;
        }
    </style>
</head>
<body>
    <input type="checkbox">
</body>

9.阴影

<style>
        p{
            color: #aaa;
            font-size: 30px;
            /* 文字阴影 */
            /* 第一个取值:水平阴影的位置  第二个取值:垂直阴影的位置  第三个取值:模糊度(不能小于0)  第四个取值:阴影的颜色 */
            text-shadow: 3px 3px 0px #ccc;
            text-shadow: 3px 3px 2px plum,6px 6px 2px aqua;
        }
        div{
            width: 300px;
            height: 300px;
            background: pink;
            margin: auto;
            /* 盒子阴影 */
            /* 第一个取值:水平阴影的位置  第二个取值:垂直阴影的位置  第三个取值:模糊度(不能小于0)  第四个取值:延伸半径  第五个取值:阴影的颜色  第六个取值:内阴影*/
            box-shadow: 4px 4px 3px 0px rgb(221, 110, 193);
            box-shadow: 4px 4px 3px 0px rgb(221, 110, 193) inset;
            box-shadow: 10px 10px 3px 0px rgb(221, 110, 193),20px 20px 5px 0px aqua;
        }
    </style>
</head>
<body>
    <p>
        测试文字阴影测试文字阴影
    </p>
    <div>
        div标签div标签div标签div标签div标签div标签div标签div标签div标签div标签
    </div>
</body>