H5新增好用

最新推荐文章于 2023-11-08 11:12:43 发布

临茳仙

最新推荐文章于 2023-11-08 11:12:43 发布

阅读量105

点赞数

CC 4.0 BY-SA版权

文章标签： git

本文链接：https://blog.csdn.net/m0_71338372/article/details/131600458

文章介绍了HTML5中的calc()函数用于动态计算长度值，新增的语义化标签如<header>,<section>,<article>等提升网页结构，以及新的表单控件如number,search,color等，还有属性选择器的使用，增强了CSS的选择和样式设定能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

calc

calc()里面写的是表达式加减乘除都可以运算符前后需要有空格隔开

 div{
     width: calc(193px + 327px);
     height: calc(367px - 189px);
     background: red;
 }

html5新增语义化标签

 header/* 头部 */

<section>区域块</section>
<nav>导航栏</nav>
<main>
<figure>类似dl
<figcaption>就是可以写文字啥的  请注意位置  要么是figure里面第一个子元素  要么是figure里面最后一个子元素
<footer><!-- 尾部 -->
<article>文章  类似多个p的集合 也是块元素</article>
<hgroup>是标题的集合  但是不会加粗  可以代表标题</hgroup>
     <!-- 侧边栏   可以是某一大块的侧边  比如腾讯大学右边 -->
    <!-- 也可以是固定在页面的左右侧边 -->
<aside>哈哈哈</aside>
行内<time>时间</time>
      <!-- 行内元素  高亮  默认有黄色背景色 -->
<mark>变黄</mark>
     <!-- 对话框 -->
<dialog>哈哈哈</dialog>
<audio src="音频文件就可以">
     <audio controls autoplay loop muted>
        <!-- 资源管理器   source 引入不同格式的音频  -->
        <!-- type="audio/音频格式"介绍这个音频文件是啥格式   可以不写 -->
        <source src="../video/3theA.mp4" type="audio/mepg">
        <source src="../video/a.mp3" type="audio/mepg">
        <source src="../video/movie.webm" type="audio/webm">
        <source src="../video/movie.ogg" type="audio/ogg">
         </audio>
          controls  控制条
    autoplay  自动播放  
    loop    循环播放   如果写loop=2就是播放两次
    muted  默认静音
    <!-- 视频的引入 vedio-->
<video controls autoplay loop muted>
        <source src="../video/3theA.mp4" type="video/mp4">
        <source src="../video/movie.ogg" type="video/ogg">
        <source src="../video/movie.webm" type="video/webm">
    </video>

H5新增表单控件

<!-- 1.数字框 -->
        <!-- min="最小值" -->
        <!-- max="最大值" -->
        <!-- step="5"间隔是5 -->
<p>数字框：<input type="number" min="10" max="20" step="5"></p>
<!-- 2、搜素框 -->
        <p>搜索框：<input type="search"></p>
        <!-- 3、颜色框 -->
        <p>颜色框：<input type="color"></p>
        <!-- 4、电话框 -->
        <p>电话框:<input type="tel"></p>
        <!-- 5、滑动条 -->
        <!-- step="10"间隔是10   比如说 用于调整音量  那么你每按一次↑键   音量会加10      每按一次↓键  音量会减10    如果你不设置  默认是1 -->
        <p>滑动条:<input type="range"></p>
        <p>滑动条:<input type="range" step="10"></p>
 <!-- 6、网址框 -->
        <!-- multiple可以同时输入多个值    英文逗号隔开  -->
        <p>网址框：<input type="url"></p>
        <!-- 可以同时输入多个网址 英文逗号隔开 -->
        <p>网址框：<input type="url" multiple></p>

        <!-- 7、邮箱框 -->
        <!-- multiple可以同时输入多个值    英文逗号隔开  -->
        <p>邮箱：<input type="email"></p>
        <p>邮箱：<input type="email" multiple></p>
        
        <!-- 8、时间相关的 -->
        <!-- 年月 -->
        <input type="month">
        <!-- 年周 -->
        <input type="week">
        <!-- 年月日 -->
        <input type="date">
        <!-- 时分 -->
        <input type="time">
        <!-- 年月日时分 -->
        <input type="datetime-local">
        <hr>
        <!-- 9、了解  -->
        <!-- <input type="text" list="对应id名字">
        <datalist id="id名字"></datalist>
        上面这样子写   就把datalist和input绑定了 -->
 <input type="text" list="gouzi">
        <datalist id="gouzi">
            <option value="彭于晏" label="最帅的男人"></option>
            <option value="三哥" label="最man的男人"></option>
            <option value="高尔山" label="最阳光的男人"></option>
            <option value="老叔" label="最性感的男人"></option>
            <option value="矿工" label="最勤劳的男人"></option>
            <option value="张长宾" label="最优质的男人"></option>
            <option value="高圆圆" label="男人最喜欢的女人"></option>
        </datalist>

<!-- H5新增的表单属性 -->
        <!-- 1、虚焦的提示信息 -->
        <p>1、虚焦的提示信 <input type="text" placeholder="请输入"></p>
        <!-- 2、最大值 max="数字" -->
        <!-- 3、最小值 min="数字" -->
        <!-- 4、间隔、步幅  step="数字" -->
        <p>234 最大值 最小值  步幅   <input type="number" min="10" max="30" step="3"></p>

        <!-- 5、必填项 required -->
        <p>5、必填项 <input type="text" required></p>

        <!-- 6、只读项   只可以看  不能更改  readonly -->
        <p>6、只读项 <input type="text" value="哈哈哈" readonly></p>

        <!-- 7、自动聚焦 autofocus-->
        <p>7、自动聚焦 <input type="text" autofocus></p>

        <!-- 8、可以同时输入多个值  可以输入一个或多个值，每个值之间用逗号分开  multiple -->
        <p>8、可以同时输入多个值 <input type="url" multiple></p>

        <!-- 9、正则表达式 pattern="正则表达式"   请注意   二阶段会学  现在了解就好 -->
        <input type="text" pattern="[a-z]{6}"> <!-- 表示可以随机输入小写6个英文 -->

        <!-- 10、list属性：
        结合datalist元素使用 -->
        <!-- <input type="text" list="对应id名字">
        <datalist id="id名字"></datalist>
        上面这样子写   就把datalist和input绑定了 -->

        <!-- 11、autocomplete属性：自动补全  历史记录 -->
        <input type="text" list="gouzi" autocomplete="off">
        <datalist id="gouzi">
            <option value="彭于晏" label="最帅的男人"></option>
            <option value="三哥" label="最man的男人"></option>
            <option value="高尔山" label="最阳光的男人"></option>
            <option value="老叔" label="最性感的男人"></option>
            <option value="矿工" label="最勤劳的男人"></option>
            <option value="张长宾" label="最优质的男人"></option>
            <option value="高圆圆" label="男人最喜欢的女人"></option>
        </datalist>

        <!-- 12、取消验证novalidate  你个哪一个表单标签设置上  那么你之前给他设置的验证信息将失效   还可以给form  -->

新增属性选择器

 /* 1、属性选择器    */
        /* 代表有placeholder属性的input框 */
        input[placeholder]{
            background: red;
        }

        /* 2、属性值选择器 */
        /* 代表type属性值为password的input框 */
        input[type="password"]{
            background: palegreen;
        }
        /* 代表选中 value属性值为abc的input */
        input[value="abc"]{
            background: yellow;
        }
        /* -------------------属性选择器 的  升级版------ */
        /* 3、属性值开头选择器^   英文输入法状态下  按住shift按键  按上方数字6 */
        input[value^="abc"]{
            background: cyan;
        }

        /* 4、属性值结尾选择器  $   英文输入法状态下  按住shift按键  按上方数字4*/
        input[value$="abc"]{
            background: orange;
        }

        /* 5、 但凡有就行 属性值选择器   无论在前 在后  在中间   有就行  *   */
        input[value*="abc"]{
            background: palegreen;
        }

        /* 6、有abc这个单词    啥叫单词   空格隔开  单纯的abc  属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词 */
        input[value~="abc"]{
            background: blue;
        }

        /* 7、只有abc这个单词   或者是abc- 这样子的  可以识别出来     |    英文输入法状态下  按住shift按键 按enter上方  "|"按键 
        并且属性值是value或者以“value-”开头的值（比如说zh-cn）*/
        input[value|="abc"]{
            background: purple;
        }

p:nth-child使用及其弊端

1. /* 结构性伪类 :nth-child() 一会儿还会说另一个 */
        /* 选中第一个li */
        li:nth-child(1){
            background: pink;
        }
        /* 还可以这样子选中第一个 */
        li:first-child{
            background: skyblue;
        }

        /* 选中最后一个   第一种方式就是数一数有多少个 */
        li:nth-child(13){
            background: palegreen;
        }
        /* 还可以这样子选中最后一个 */
        li:last-child{
            background: purple;
        }

        /* 我们可以随机选择某一个  比如说第四个 */
        li:nth-child(4){
            background: cyan;
        }

        /* 我们还可以倒数选中第几个 */
        li:nth-last-child(2){
            /* 倒数第二个             */
            background: yellow;
        }



        /* ------其实还可以书写数学表达式----- */
        /* 选中奇数行 */
        li:nth-child(2n+1){
            background: red;
        }
        /* 当然  还可以这样子表示奇数   odd */
        li:nth-child(odd){
            background: yellow;
        }

        /* 选中偶数行 */
        li:nth-child(2n){
            background: cyan;
        }
        /* 当然  还可以这样子表示偶数 */
        li:nth-child(even){
            background: purple
        }
2.弊端
/* p:nth-child(3){  先去找到第三个位置   结果发现是span  不是p  所以p:nthh-child(3)无效
            background: red;
        } */


        p:nth-child(4){
            /* 先找到第四个位置   核对是不是p标签啊   是    可以作用 */
            background: red;
        }


        /* :nth-child()先找位置   再核对元素是否为对应的 */
    </style>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <span>会打乱秩序</span>
    <p>3</p>
    <p>4</p>

了解

X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。

:root匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML

X:empty匹配没有任何子元素（包括包含文本）的元素X -->

nth-of-type

  /* div:nth-of-type() */
        /* 他是先把所有div拎出来   然后再去找第几个 */

        /* 你可以这样子选中第一个 */
        li:nth-of-type(1){
            background: red;
        }
        /* 你还可以这样子选中第一个 */
        li:first-of-type{
            background: yellow;
        }

        /* 你可以选中最后一个 */
        li:nth-of-type(9){
            background: cyan;
        }
        /* 你还可以这样子写 */
        li:last-of-type{
            background: olive;
        }

        /* 你可以选中某个 */
        li:nth-of-type(4){
            background: palegreen;
        }

        /* 你还可以选中倒数第几个 */
        li:nth-last-of-type(3){
            background: purple;
        }

        /* 你还可以数学表达式     奇数2n+1  或者odd      偶数是2n或者even */
        li:nth-of-type(4n){
            font-size: 30px;
            color:#f00;
        }