html5中的几种常见选择器

每天一更新，这些初级html知识你掌握了吗？

保德网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作，到程序开发，运营维护。创新互联从2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

css选择器的优先级：作用的元素一样，样式一样，就会有优先级问题。

* 通配选择器 0

* 标签名选择器 1

* 类选择器 10

* id选择器 100

* 后代选择器 选择器1 选择器2 ...（会有相加的过程）

* 群组选择器 选择器1,选择器2,... (不会有相加的过程)

注意：

* 1.相同类型的选择器 样式冲突下 后覆盖前

* 2.不同类型的选择器 样式冲突下 优先级高覆盖优先级低

* 3.* Tags class id style !important

* 4.!important慎用(非得用的时候，要加注释说明一下)

[img]

关于HTML5文件选择器控件的问题

form action=""

input type="file"/

input type="reset" value="清空"/

/form

看看是否合适

HTML5重点内容总结

一、 HTML5新增的标签

（1）header nav main  footer  section article hgroup  figure figcaption  aside 

video  audio canvas

            （2）如何让新标签兼容低版本浏览器：  html5shiv.js

二、 HTML5新增的表单控件

一、表单控件的新属性

        input type="text"  placeholder=""  required  autofocus  pattern="abc"

二、新增的表单控件

（1）input type="email"

（2）input type="url"

  （3）数字控件：  type="number"

  (4)  滑动组件：  type="range"

  (5)  拾色器：      type="color"

  (6)  日期控件：    type="date"

三、本地存储

1、 三种本地存储 ：  cookie webStorage(localStorage  sessionStorage)

2、localStorage的API

  (1)写入：  localStorage.setItem(键，值);  //值只能是字符串

  localStorage.user = "123" localStorage["user"] = "123"

  （2）读取  var user = localStorage.getItem("user")

              var user = localStorage.user;

    (3)删除：  localStorage.removeItem("user")    localStorage.clear()

    （4）修改：  localStorage.setItem("user","890")

3、sessionStorage的API

sessionStorage.setItem(键，值);

    sessionStorage.getItem(键);

    sessionStorage.removeItem(键);

sessionStorage.clear();

**********重点**********

  4、cookie webStorage(localStorage  sessionStorage)三者的区别

四、离线存储

（1） *.manifest  (*.appcache) 

      index.html  html manifest="*.manifest"

(2) 理解离线存储的更新方式

五、移动端的布局思路：

1、设备像素比（倍率）  逻辑像素尺寸 （360px  320px  375px  414px）

        window.devicePixelRatio

    2、 meta name="viewport" content="width=device-width,maximum-

scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no""

3、使用rem单位

六、地理定位

if (navigator.geolocation){ 

        navigator.geolocation.getCurrentPosition(success,error,{

            timeout: 5000

        });

        function success(pos){

            纬度:  pos.coords.latitute

            经度：  pos.coords.longtitude

        }

    }

    navigator.geolocation.watchPosition(success);

七、地理定位和百度地图API的结合

八、视频，音频  video autoplay="autoplay" controls="controls" loop="loop" poster=""

preload="preload"  audio

九、移动端事件： 

(1) ontouchstart  ontouchmove  ontouchend

(2) 如何判断是否为移动端：  if ("ontouchstart" in document){}

    (3) 移动端事件的事件对象及常用属性

      e.touches[0].clientX  e.touches[0].clientY  e.touches[0].target

  (4) 移动端常见问题及解决方案：

a、 click事件 300ms的延迟：  1zepto的tap事件  （2） fastclick.js

b、 zepto的tap事件有点透问题 ：  （1） fastclick.js

    (5) zepto的touch模块：  tap  singleTap  doubleTap  longTap 

            swipeLeft  swipeRight  swipeUp  swipeDown

十、swiper.js的使用  （参考官网）

十一、 canvas

(1)  canvas width="600" id="can"/canvas    300*150

  (2)  var can = document.getElementById("can");

  var cxt = can.getContext("2d");

cxt.beginPath();

cxt.moveTo(100,200);

cxt.lineTo(200,400);

          cxt.strokeStyle = '#f00';

cxt.stroke();

              cxt.clearRect(0,0,200,300);

              context.globalCompositeOperation="destination-out";  (了解)

表单有哪些html5新控件?

表单中新增的控件(type属性)

email: 提交表单时检测值是否是一个电子邮件格式

url: 提交表单时检测值是否是一个url格式

date: 年-月-日格式的控件

time: 时:分格式的控件

datetime: 年-月-日 时:分 格式的控件（UTC时间）

datetime-local: 年-月-日 时:分 格式的控件（本地时间）

month: 年-月格式的控件

week: 年-周数格式的控件

number: 数字输入框

input type="number" name="" id="" value="60" max="100" min="0" /

range: 选择区域

input type="range" name="" id="" value="60" max="100" min="0" /

tel: 电话输入框

search: 用于搜索

color: 调用系统选色器

新增控件属性：

placeholder: 占位符，输入框提示信息

input type="text" autofocus placeholder=''/

required: 该input为必填项

autofocus: 在页面加载时，域自动地获得焦点

autocomplete="off/on":可以记录输入信息

必须有name属性 必须提交过

off==关闭 on==打开

input type="tel" name="user" id="" value="" autocomplete="on"/

pattern: 正则验证

input type="tel" pattern="[0-9]{7,12}"/

min/max: input能输入的最小/最大字节的长度

step: 针对number和range类型，每次递增step的值

list: 指定一个datalist，作为下拉提示单

html5 select控件选值问题

次次都create相同ID/名称的，就会报错了。

要么换名称、要么删除上一次创建的

本文名称：html5选择控件,html5选择框
链接地址：http://kswjz.com/article/dsopjsg.html