美文网首页
h5c3第一天

h5c3第一天

作者: 你的昵称为 | 来源:发表于2017-02-10 23:07 被阅读0次

第一天H5学习

新的标签名

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        header{
            height: 100px;
            background-color: #ddd;
        }
        main{
            height: 300px;
            width: 80%;
            background-color: blueviolet;
            margin: 0 auto;
        }
        footer{
            height: 100px;
            background-color: brown;
        }
        section{
            width: 50%;
            height: 100px;
            background-color: chartreuse;
            margin: 0 auto;
        }
        aside{
            width: 50%;
            height: 50px;
            background-color: darkred;
        }
        article{
            width: 50%;
            height: 50px;
            background-color: fuchsia;
        }
    </style>
</head>
<!--[if lte IE 8]>//cc:ie6+teb键    记得要放在head和body中间,不然ie不识别
<script src="js/html5shiv.min.js"></script>
<![endif]-->
<body>
<header>header头部</header><!--头部-->
<main>main主体<!--主体-->
    <video src="movie/rabbit.ogg" autoplay loop controls>
    </video>

    <!--<audio src="music/郝云%20-%20活着.mp3"></audio>-->
<section>section内容<!--内容部分-->
    <aside>aside边栏</aside><!--边栏-->
    <article>article文章</article><!--文章-->
</section>
</main>
<footer>footer底部内容</footer><!--底部-->

<header></header>
<main><section>
    <aside></aside>
    <article></article>
</section></main>
<footer></footer>
</body>
</html>

data自定义属性

比如data-color 在js获取中的为伪数组,打印出来的是color

data在框架中比较常见

input标签的新属性

type="color" //颜色选择器

<input type="color"/>

type="Date" //日期选择器

<input type="date"/>

type="tel" //电话类型,在移动端会出现九宫格数字键盘

<input type="tel"/>

type="range" //小滑块

<niput type="range" man="100" min="0" value="50"><output>100</output>
//可进行设置一些基本属性设置

placeholder 占位提示

<input type="name" placeholder="请输入您的名字" required/>

required 判断表单元素内容是否为0

<input type="name" placeholder="请输入您的名字" required/>

pattern 正则表达式经行判断

<input type="tel" placeholder="请输入您的电话" id="del" required pattern="\d{4}"/>

新表单事件

oninput 表示移动的时候(输入的时候)触发

onchenge 表示移动停止时触发(range停止时)或者值改变时

oninvalid 表示表单验证失败时触发

多媒体属性

视频

<video src="movie/rabbit.ogg" autoplay loop controls>
    <source src="movie/rabbit.ogg">
    <source src="movie/rabbit.mp4">
    </video>

autoplay表示页面开启时自动播放

loop表示重复播放

conteols表示显示控件

还有width和height,视频为等比例缩放

音频

<audio src="music/郝云-活着.mp4" autoplay loop controls>
<source src="music/郝云-活着.mp4">
<source src="music/郝云-或者.ogg">
</audio>

与视频差不多,只不过没有宽高设置

Dom元素获取方式

document.querySelector(“li”) 表示获取第一个li元素

document.querySelectorAll("li") 表示获取所有的li元素

括号也可以为类名或者id名

class的操作方式

dom.classList.add("类名"); 添加类名

dom.classList.remove("类名");移除类名

dom.classList.toggle("类名"); 切换类名

dom.classList.contain("类名");判断是否存在,返回值为true或false

相关文章

  • HTML5(1.1)

    H5C3 《购物车宣传》案例 综合运用h5c3知识且进行一定扩展能使用jquery完成网页常见交互行为实际工作开发...

  • 面试题

    H5C3新特性标签.属性.操作DOM的方法querySelectAll.document.getElementBy...

  • h5c3第一天

    第一天H5学习 新的标签名 data自定义属性 比如data-color 在js获取中的为伪数组,打印出来的是...

  • 前端基础搬运工-H5C3模块

    八、H5C3模块 基础部分 1. CSS3有哪些新特性? - [ ] 1. CSS3实现圆角(border-ra...

  • HTML5+CSS3新增内容总结!!!!!绝对干货

    说到H5C3会不会觉得东西好多啊,今天就整理了一份总结性的内容; 文字阴影(text-shadow、) 边框: 圆...

  • 2017.12.21-学习笔记:面试问题之H5C3有哪些新特性?

    前言:面试中经常遇到,说一下H5C3新增了哪些?我们一般会回答其中某一些,例如header,footer,bord...

  • 学习h5C3总结~

    什么是html5? 一些学习时候自己总结的部分特效和上课的部分笔记存在GitHub里面~GitHub链接? h5并...

  • 从0开始学习HTML5CSS3(一)

    什么是h5c3 数字是版本号,指的是第几套标准。H5就是指HTML的第五套正式发布的标准,CSS3就是CSS标准的...

  • h5c3笔记

    1-私有前缀 谷歌、苹果浏览器:-webkit- -webkit-transform: rotate(45deg)...

  • H5C3面试题

    1、什么是盒模型 盒模型,是CSS布局的基石,主要规定了元素是如何显示元素间相互关系。具体有: content(内...

网友评论

      本文标题:h5c3第一天

      本文链接:https://www.haomeiwen.com/subject/xjunittx.html