自学前端十一天~

弹走鱼尾纹~

已于 2022-03-24 20:54:45 修改

阅读量1.5k

点赞数

于 2022-03-24 20:43:44 首次发布

本文链接：https://blog.csdn.net/qq_41575188/article/details/123720400

版权

今天学习了HTML5、CSS3这些升级的属性。

HTML5和HTML的区别：

HTML5已经远远超越了标记语言的范畴，它的设计目的是在移动设备上支持多媒体，和HTML比起来，深度和广度上都做了进一步提升，HTML5相比于html的声明更为简单，方便记忆，所以HTML5要比HTML更有利于程序员的快速阅读和开发。此外，两者结构语义也有所不同。HTML没有结构语义化的标签，通常以<divid="header"></div>来命名，HTML5则增加了很多语义化的标签，比如：<header> 、<nav>、<article>、<aside>、<footer>等，使代码结构清晰，更加具有可读性.

CSS3和CSS的区别：

css3比css多了一些样式，一般网站上的css样式都是属于css2.0属性，而一些浏览器中的如果不兼容css3的话，就会以css样式的方式显示。

html5-语义化标签

html5增加了很多语义化标签，之前学习html布局的时候，我们定义页面的头部和尾部等都是设置class属性来加以区别，但是html5支持<header>、<section>、<footer>上中下布局的标签，且在中部section标签里面支持<nav>、<main>、<aside>标签，使爬虫在爬取的时候更容易识别页面布局。

<style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
        }
        header,footer{
            background-color: orange;
            height: 50px;
            width: 100%;
            text-align: center;
            line-height: 50px;
            font-weight: 700;
        }
        section{
            height: calc(100% - 100px);
        }
        nav,aside{
            width: 100px;
            height: 100%;
            background-color: #ccc;
            float: left;
        }
        main{
            float: left;
            width: calc(100% - 200px);
            height: 100%;
        }
        aside p{
            font-size: 12px;
            color: white;
        }
        main article header, main article footer{
            background-color: pink;
        }
        main .article1{
            height: 40%;
        }
        main .article2{
            height: 60%;
        }
    </style>
</head>
<body>
    <header>header</header>
    <section>
        <nav>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </nav>
        <main>
            <article class="article1">
                <header>article-header</header>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti architecto earum sequi quasi doloribus commodi magni! Quo eos nisi iusto nesciunt, beatae incidunt ipsam dolorum! Quas nobis cumque nemo!</p>
                <footer>article-footer</footer>
            </article>
            <article class="article2">
                <header>article-header</header>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti architecto earum sequi quasi doloribus commodi magni! Quo eos nisi iusto nesciunt, beatae incidunt ipsam dolorum! Quas nobis cumque nemo!</p>
                <footer>article-footer</footer>
            </article>
        </main>
        <aside>
            <figure>aside</figure>
            <p class="adide_p">Lorem ipsum dolor, sit amet consectetur adipisicing elit. A adipisci, corporis temporibus, sapiente consectetur officia aliquam pariatur nesciunt sunt aperiam totam sequi quia autem aliquid. Illo nulla ipsa cum dolores.r</p>
        </aside>
    </section>
    <footer>footer</footer>
</body>

html5-表单进阶

表单里面的input标签的type属性有很多，如下：

type="email" 必须输入包含@符号的邮箱
type="tel" 适用于手机端弹出手机拨号键盘，电脑没有意义
type="url" 地址必须完整，加http
type="range" 出现一个滑块，值默认是从0-100，滑块默认在中间，每滑动一次增加1。可以自定义设置min值和max值，设置value初始值，设置step步长。
type="number" 只能输入数字，和range有相同的属性
type="search" 比普通文本框多一个快速清除
type="date" 出现一个日期选择盘，具体到具体天
type="month" 出现一个日期选择盘，具体到具体月
type="week" 出现一个日期选择盘，具体到具体周
type="datetime-local" 出现一个日期选择盘，具体到具体秒

<form action="">
       <div>
            <h3>颜色选择</h3>
            <input type="color" name="color">
       </div>
       <div>
            <h3>邮箱输入</h3>
            <input type="email" name="email">
       </div>
       <div>
            <h3>url地址</h3>
            <input type="url" name="url">
       </div>
       <div>
            <h3>电话号码</h3>
            <input type="tel" name="tel">
       </div>
       <div>
            <h3>滑块效果</h3>
            <input type="range" name="range">
       </div>
       <div>
            <h3>数字类型</h3>
            <input type="number" name="number">
       </div>
       <div>
            <h3>搜索</h3>
            <input type="search" name="search">
       </div>
       <div>
            <h3>日期选择</h3>
            <input type="date" name="date">
            <input type="month" name="month">
            <input type="week" name="week">

            <input type="datetime-local" name="datetime">
       </div>

        <input type="submit">
  </form>

html5-表单进阶属性

autofocus 设置自动聚焦。
required 设置必填项，不填会阻止提交。
multiple 设置后可以填写多个邮箱地址，用逗号隔开。
pattern 设置正则表达式来限制输入内容。

<form action="">
        <div>用户名:<input type="text" name="username" autofocus pattern="[0-9][A-Z]{3}"></div>
        <div>邮箱:<input type="email" name="email" required multiple></div>
        <input type="submit">
    </form>

html5-选项列表

可以关联表单内容，支持模糊搜索：
<datalist>
    <option></option>
</datalist>

<body>
    <input type="text" list="mylist">
    <datalist id="mylist">
        <option value= "手机"></option>
        <option value= "手表"></option>
        <option value= "手镯"></option>
        <option value= "手环"></option>
    </datalist>
</body>

html5-音频标签

controls 出现控制栏
loop 循环播放
autoplay 自动播放
muted 静音播放

<body>
    <h1>音频</h1>
    <audio src="jiejie.wav" controls autoplay loop></audio>
</body>

html5-视频标签

poster 设置海报
width、height 支持宽高属性
controls 出现控制栏 
loop 循环播放 
autoplay 自动播放 
muted 静音播放

<body>
    <video src="./movie.mp4" controls poster="./poster.jpg"></video>
</body>

CSS3-层级选择器

<style>
        .box>li{
            border: 1px solid red;
        }
        .child+li{
            background-color: yellow;

        }
        .child~li{
            background-color: green;
        }
    </style>
</head>
<body>
    <ul class="box">
        <li>111
            <ul>
                <li>111-111</li>
                <li>222-222</li>
            </ul>
        </li>
        <li class="child">222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
</body>

.box>li 选择box类下面的亲li，也就是最近的li。
.child+li 选择当前元素后面的第一个兄弟。
.child~li 选择当前元素后面的所有亲兄弟。

CSS3-属性选择器

<style>
        /* 所有有class属性的 */
        [class]{
            background-color: yellow;
        }
        /* div标签的并且带有class属性的 */
        div[class]{
            border: 2px solid black;
        }
        /* div标签的并且class属性是box1的 */
        div[class=box1]{
            color: pink;
        }
        /* div标签的并且class属性包含box1的 */
        div[class~=box1]{
            font-weight: 700;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2 box1">2</div>
    <div class="box3">3</div>
    <p class="p1">1</p>
    <p class="p2">2</p>
    <p class="p3">3</p>
</body>