菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 赵强-20221022-H5C301 [打印本页]
作者: BlueFlame    时间: 2022-10-23 22:23
标题: 赵强-20221022-H5C301
今日所学内容
H5C3
HTML5部分：
      HTML5的新特性
        主要是增加了一些新的标签、新的表单属性，这些特性都有兼容性的问题，基本上要IE9以上的浏览器才能支持，如果不考虑兼容性，可以大量使用新特性
      H5新增标签
    <!-- 头部部分 -->
    <header></header>

    <!-- 导航栏标签 -->
    <nav></nav>

    <!-- 内容标签 -->
    <article></article>

    <!-- 侧边栏标签 -->
    <aside></aside>

    <!-- 底部标签 -->
    <footer></footer>

      H5标签的优缺点：
        优点：便于搜索引擎来解析
        缺点：会有兼容性问题
      HTML5新增的input的type属性的属性值
<!-- 显示用户输入的内容必须是Email -->
        <input type="email">

        <!-- 限制用户输入的必须为URL地址 -->
        <input type="url">


        <!-- 限制用户输入的必须是日期类型 -->
        <input type="date">

        <!-- 限制用户必须输入时间类型 -->
        <input type="time">

        <!-- 限制用户必须输入月类型 -->
        <input type="month">

        <!-- 限制用户输入周类型 -->
        <input type="week">

        <!-- 限制用户输入数字类型 -->
        <input type="number">

        <!-- 搜索框 -->
        <input type="search">

        <!-- 生成颜色选择表单 -->
        <input type="color">

        <!-- 手机号码 -->
        <!-- 因为全世界的号码都不尽相同,所以不能做出明确的限制,需要配合JS和正则表达式来限制 -->
        <input type="tel">
HTML5新增属性：
<!-- required="required"代表此表单为必填项 -->
        <input type="text" required="required"><br>

        <!-- placeholder 填写表单的提示信息,如果有默认值将不显示 -->
        <input type="text" placeholder="请输入你的前女友"><br>



        <!-- autofocus="autofocus代表自动聚焦 页面首次加载时聚焦到该表单元素 -->
        <input type="text" autofocus="autofocus"><br>

        <!-- 当用户提交内容是浏览器记录用户提交过的内容 -->
        <!-- 注意:
        1.元素必须有autocomplete="on"
        2.元素必须有name属性
        3.在浏览器中输入的内容必须提交成功
        如果不想被记录,将autocomplete="off"即可 -->
        <input type="text" autocomplete="on" name="repeat"><br>

        <!-- 可以多选文件进行提交 -->
        <input type="file" multiple="multiple"><br>

修改placeholder里面的文字样式(在css文件中写，或者内部样式书写）
            input::placeholder {
                color: greenyellow;
            }

HTML5新增的多媒体标签
        <audio>标签 音频标签
        当前所支持的三种音频格式
    浏览器                  MP3               Wav               Ogg
       IE                       YES                 NO                 NO
  Chrome                  YES                 YES







          常用的属性和属性值
        autoplay="autoplay"  自动播放
        controls="controls"     向用户展示播放控件
        loop="loop"
         <video>标签 视频标签
        当前视频标签所支持的三种视频格式
    浏览器             MP4                  WebM              Ogg
      IE
    Chrome









CSS3新增属性
       CSS怪异盒模型
        css3中可以通过box-sizing来指定盒模型，它分别有两个值，分别为content-box和border-box。
        box-sizing：content-box；盒子的大小是width+padding+border（默认值）
        box-sizing：border-box；盒子的大小为width；
             注意点：
                使用box-sizing：border-box；时，padding和border都不要超过盒子不能的宽高
CSS3新增选择器
        属性选择器
        概念：属性选择器可以根据元素的特定户型来选择元素，这样就可以
<style>
        input[value] {
            color: skyblue;
        }

        /* 选择特定属性中的属性值来进行选择,具有type属性的text属性值的input标签 */
        input[type="text"] {
            color: blue;
        }

        /* 选择特定属性中以(type)t开头的input标签 */
        input[type^="t"] {
            color: chartreuse;
        }

        /* 选择特定属性中以h结尾的input标签 */
        input[type$="h"] {
            color: coral;
        }

        /* 选择特定属性中包含e的input标签 */
        input[type*="e"] {
            color: pink;
        }
    </style>
</head>
<body>
    <input type="text" value="追风少年">
    <input type="text" value="追图少年">
    <input type="search" value="追分少年">
</body>
        结构伪类选择器
               概念：
            结构伪类选择器主要时根据文档的结构来选择元素，通常用于根据父级元素来选择里面的子元素的情况。
        伪元素选择器

nth-child(n)
     n是数字的情况（n代表从0开始不断递增的数字）
     n是关键字的情况
     n是公式的情况
nth-child和nth-of-type的区别：
nth-child对父元素里面所有的子元素排序选择（序号是固定的），先找到第n个孩子，然后再看是否和相应元素匹配
nth-of-type对父元素里面的所有指定的子元素进行排序选择，先去进行相应元素的匹配，再排序去选择第n个元素






欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/) Powered by Discuz! X3.4