h5的新样式

h5的新样式

1.伸缩布局
/让子盒子分别分布在首尾/
/justify-content: space-between;/
display: flex;
/让子盒子垂直居中/
/align-items:center;/
flex-direction: row;
flex-wrap: wrap;
/让多行子容器位于父容器的位置/
align-content: center;

1. ie9以下不支持h5标签,因为ie9以下的不认识这些标签. 会把这些标签看成是行内元素看待
   解决方法: 使用 html5shiv.js插件去解决.一定要放在头部, 因为要在页面渲染之前去解析他

2.谷歌和火狐不需要解析这个插件 : lt 小于 gt 大于 小于等于lte gte大于等于

3.语义化标签的作用
①提高代码的可读性和可维护性
②有利于搜索引擎

<input type="text" value="输入明星" list="star"/> <!--  input里面用 list -->
<datalist id="star">   <!-- datalist 里面用 id  来实现和 input 链接 -->
    <option>刘德华</option>
    <option>刘若英</option>
    <option>刘晓庆</option>
    <option>郭富城</option>
    <option>张学友</option>
    <option>郭郭</option>
</datalist>

<fieldset>
    <legend>用户登录</legend>  标题
    用户名: <input type="text"><br /><br />
    密　码: <input type="password">
</fieldset>

<h3><label>你的邮箱: <input type="email"></label></h3>

<h3>数字类型: <input type="number" min="2" max="20" step="5"></h3>

<h3>

    滑块: <input type="range"></h3>

<h3>日期: <input type="date"></h3>
<h3>月份: <input type="month"></h3>
<h3>星期: <input type="week"></h3>
<h3>时间: <input type="datetime-local"></h3>

<h3>小时分钟: <input type="time"></h3>
<h3>
    <label for="tel">电话格式: </label>
    <input type="tel" id="tel">
</h3>
<h3>写完整的url地址: <input type="url"></h3>

<h3>调色板: <input type="color"></h3>



<input type="submit" value="提交"> <br>

昵称:

<!--  必填项 required -->
<form action="test.html" method="post">
    昵称: <input name="username" autocomplete="off" type="text"style="outline: none;" required placeholder="请输入姓名"> <br>
    密码: <input type="password"style="outline: none;" required>  <br>
    <!--自动完成功能  autocomplete= "no/ off"  必须要有name属性 -->
    喜欢的人: <input accesskey="t" type="text"style="outline: none;" required autocomplete="off" name="like">  <br>


    上传文件: <input type="file" multiple>  <br>

    <input type="text" accesskey="s">


    <input type="submit" value="提交">

</form>

• jQuery的类操作: addClass() removeCLass() hasCLass() toggleClass()
  • h5有类似的api , 基于classList的属性, 会返回元素的类名 add() remove() contains()判断类 toggle()
  • zepto.js 适合移动端, 清亮, 有触屏事件
  /*
  • 自定义属性: data-*(属性名称)
  • 作用: 进行数据的储存.
  • 获取自定义属性的名称 jQuery的方式 对象.data(‘自定义属性的名称’)

  •                   对象.dataset  获取的属性的集合 h5
    

  • 自定义属性的写法规则 : data-name —>对象.name data-user-name —> 对象.userName
  • 用驼峰命名方式来获取
  • */