0.推荐开发技术资料网站:http://www.shouce.ren/,里面包含了各种开发技术手册、开发工具插件、各种技术书籍等等。
1 网页开发方式上的两个层次:
◆HTML4.1
◇结构:html4.0
◇样式:css css2
◇行为:js
◆HTML5
◇结构:html5
◇样式:css3
◇行为:js API 有所增强 如 地理定位 web存储 拖拽 重力感应 硬件访问等
2.HTML5狭义的概念上就是HTML4的升级版本,HTML5广义上的概念上就是代表着浏览器技术发展的的一个阶段,也就是 html5+css3+js API 一套前端技术的组合
3.W3C标记验证服务官网:https://validator.w3.org/
4.html页面的 meta标签的主要作用是 用于描述网页的元(最根本的)信息,相当于页面的元神。
5.html5的语法规范更加的简洁、宽松,而html4的语法规范更加严格,但是实际工作中无论是使用html5还是html4都要书写规范,避免后期再看就看不懂了。
6.经典的div加css网页布局和html5网页布局
◆div+css网页布局【
<div class="header"></div>
<div class="nav"></div>
<div class="section">
<div class="aside"></div>
<div class="article"></div>
</div>
<div class="footer"></div>
】
◆html5网页布局【
<header></header>
<nav></nav>
<section>
<aside></aside>
<article></article>
</section>
<footer></footer>
】
★IE8及以下版本的浏览器不支持html5及css3,所以需要引入一个html5的插件脚本 html5shiv.js ,<script src="html5shiv.min.js"></script>
7.IE浏览器 的条件注释
<!--[if lte ie 8]><![endif]--> 表示当前浏览器的版本小于等于ie 8 就执行注释标签对中的代码,否则就不执行,条件注释只有ie浏览器中可 以识别,例如<!--[if lte ie 8]><script src="html5shiv.min.js"></script><![endif]--> ,这样就能够只会在ie8及其以下的版本浏览器中引入这个脚本了,l表示less既更小,t表示then既比较,e表示equal既等于,g表示great既更大。
8.html5新增的表单标签兼容性并不好,因为这些新增的表单标签实际原理,就是浏览器内置了这些表单标签的js脚本,不同浏览器内置的js脚本并不是完全一样,所以展示这些表单标签的时候,功能虽然大同小异但是样式各不一样,所以说兼容性不好,并不像那些新增的结构化标签一样,只需要弄个脚本让他们显示为块儿级元素。
9.css新增自适应宽度【
width:100%;//宽度
max-width:640px;//最大宽度
min-width:320px;//最小宽度
】,以前需要通过设置一个父容器,然后让两个子容器浮动,左边的固定宽度,右边的自适应父容器,然后设置右边的容器左外边距为左边容器的宽度,这样就能够让右边的容器自适应父容器的宽度,父容器变宽右边的容器也会变宽,父容器变窄,右边的容器也会变窄,但是现在不需要了,只需要设置css新增的自适应宽度的样式即可。
10.html5新表单标签
◆type=email:文本为email格式
◆type=tel:文本为手机号码格式
◆type=number:文本为数字格式
◆type=search:有搜索框的一些样式
◆type=range:有滑块儿的样式,并且value值为数字
◆type=color:拾色器,就是点击之后可以选择颜色
◆type=time:文本为时间格式,兼容好的话可以选择时间
◆type=date:文本为日期格式,兼容好的话可以选择日期
◆type=month:文本为月份格式,兼容好的话可以选择月份
◆type=week:文本为星期格式,兼容好的话可以选择星期
★新表单的兼容性并不好,原理都是浏览器内嵌自带的js脚本支持,所以版本低的浏览器可能不会有这些脚本的支持。
11.html5新增文本框绑定数据下拉列表
【
<input type="text" list="bao" />
<datalist id="bao">
<option>宝马</option>
<option>宝石</option>
<option>宝刀</option>
<option>宝剑</option>
<option>宝宝</option>
</datalist>
】
12.html5新增的其它标签
◆表单分组框:<fieldset><legend></legend></fieldset>
◆文本输出:<output></output> //纯输出的标签,与span相比,仅仅是有语义化而已。
◆加密类型:<keygen /> //在有些浏览器上无效
◆度量器: <meter value="50" max="100" min="0" low="30" high="80"></meter>//max 和min 表示度量器的最大值与最小值,low和high表示度量器的正常取值范围,低于或高于正常取值范围,度量器都会变色,比如变黄或者变红,在正常范围下,度量器的颜色应该是绿色的。
◆进度条:<progress value="40" max="100" min="0"></progress>
13.html5新增的表单属性
◆占位符(提示文字)属性:<input type="text" placeholder="例如:李狗蛋" />
◆自动获取焦点属性:<input type="text" autofocus />
◆自动补全属性(默认 on):<input type="text" autocomplete="on/off" />
◆文本框必填属性:<input type="text" required />
◆文件 多选 属性:<input type="file" multiple />
◆表单关闭验证功能 属性:<form action="" novalidate></form>
◆文本框自定义正则验证 属性 :<input type="tel" pattern="^1\d{10}$" />
14.推荐一个网页特效网站:http://www.5iweb.com.cn/,这里面有很多的网页特效,可以用来参考。
15.html5新增的事件
◆oninvalid 当html5表单元素验证不通过时就会触发【
txt1.oninvalid=function(){
//设置验证不通过是的提示文字
this.setCustomValidity("您输入的数据不符合要求,请重新输入!");
}
】
16.html5新增的多媒体标签
◆之前在网页上播放多媒体 必须依赖于第三方 插件
◇mediaplay
◇快播
◇flash插件
◆现在html5里面提供了 视频video和音频audio的标签
◆audio 音频标签
◇<audio src="music/yinyue.mp3" controls autoplay loop> controls显示控制条、autoplay表示自动播放音乐、loop表示循环播放</audio>
◇audio 音频标签只支持 Ogg Vorbis、MP3、Wav这三种格式的音频文件,所以需要写兼容性的写法,【<audio controls loop autoplay>
<!-- 通过source标签指定多格式音频文件 -->
<source src="music/yinyue.mp3" >
<source src="music/yinyue.ogg" >
<source src="music/yinyue.wav" >
您的浏览器不支持html5音频播放功能
</audio>
】
◆video 视频标签
◇<video src="video/movie.mp4" controls autoplay loop></video>
◇video 视频标签只支持 Ogg MPEG 4 WebM这三种格式的视频文件,所以需要些兼容性的写法,【<video autoplay controls loop >
<source src="video/movie.mp4" >
<source src="video/movie.ogg" >
<source src="video/movie.webm" >
您的浏览器不支持html5视频播放功能
</video>
】
★原本html4中也有一个音乐标签 <embed src="music/yinyue.mp3"></embed> ,其实内部渲染之后就是video了。
17.html5 新增的dom对象获取方式
◆通过查询选择器的方式获取dom对象:document.querySelector("#box");可以通过id获取dom对象,只会获取第一个查询到的对象,无论你是类选择器还是标签选择器在或者id选择器。
◆通过查询选择器的方式获取多个dom对象(装到伪数组中):document.querySelectorAll(".box");可以获取到查询到的多个dom对象,返回值是一个伪数组,无论你是类选择器还是标签选择器再或者id选择器,就算只有一个dom对象都会返回一个伪数组。
★无论是querySelector还是querySelectorAll,其实都是根据css2+css3选择器来获取dom对象或伪数组dom对象
18.html5 新增的操作类的方式
◆box.classList.add("class5");//添加类,classList属性表示类的列表,这个方法类似于jQuery中的addClass();
◆box.classList.remove("class5");//移除类,这个方法类似于jQuery中的removeClass();
◆box.classList.contains("class5");//是否包含类,这个方法类似于jQuery中的hasClass();
◆box.classList.toggle("class5");//切换类,如果有就删除,如果没有就添加,这个方法类似于jQuery中的toggleClass();
19.html5中的自定义属性,必须以data开头以-连接,如 <div id="box" data-size="200"></div>
◆获取html5中的自定义属性:box.dataset["size"],表示获取自定义属性key为size的值
◆设置html5中的自定义属性:box.dataset["size"]=500;
◆获取值时注意,如果你设置的html5自定义属性为<div id="box" data-box-size="200"></div>时,有多个-,那么获取的时候就必须使用小驼峰命名法这么获取,box.dataset['boxSize'],只能够这样子来获取。
◆设置html5中的自定义属性【
var box=document.querySelector(".box");
//获取 一个 横杠隔开 - 的自定义属性
console.log(box.dataset["name"]);
//获取 两个 横杠隔开 - 的自定义属性
console.log(box.dataset["childName"]);
//设置 一个 横杠隔开 - 的自定义属性
box.dataset["sex"]="男";
//设置 两个 横杠隔开 - 的自定义属性
box.dataset["childSex"]="不详";
】
★html5标签在页面上设置自定义属性时无法设置大写的,更无法使用小驼峰命名法,就算你设置了大写的自定义属性,到后来都会被页面标签渲染成全小写的自定义属性【
data-haSX-XhxaXi="hahaxixi" 会被渲染成 data-hasx-xhxaxi="hahaxixi"
】,只有在使用js的方式才能使用驼峰命名法来获取或者设置页面标签上显示的多个-的自定义属性。
1 网页开发方式上的两个层次:
◆HTML4.1
◇结构:html4.0
◇样式:css css2
◇行为:js
◆HTML5
◇结构:html5
◇样式:css3
◇行为:js API 有所增强 如 地理定位 web存储 拖拽 重力感应 硬件访问等
2.HTML5狭义的概念上就是HTML4的升级版本,HTML5广义上的概念上就是代表着浏览器技术发展的的一个阶段,也就是 html5+css3+js API 一套前端技术的组合
3.W3C标记验证服务官网:https://validator.w3.org/
4.html页面的 meta标签的主要作用是 用于描述网页的元(最根本的)信息,相当于页面的元神。
5.html5的语法规范更加的简洁、宽松,而html4的语法规范更加严格,但是实际工作中无论是使用html5还是html4都要书写规范,避免后期再看就看不懂了。
6.经典的div加css网页布局和html5网页布局
◆div+css网页布局【
<div class="header"></div>
<div class="nav"></div>
<div class="section">
<div class="aside"></div>
<div class="article"></div>
</div>
<div class="footer"></div>
】
◆html5网页布局【
<header></header>
<nav></nav>
<section>
<aside></aside>
<article></article>
</section>
<footer></footer>
】
★IE8及以下版本的浏览器不支持html5及css3,所以需要引入一个html5的插件脚本 html5shiv.js ,<script src="html5shiv.min.js"></script>
7.IE浏览器 的条件注释
<!--[if lte ie 8]><![endif]--> 表示当前浏览器的版本小于等于ie 8 就执行注释标签对中的代码,否则就不执行,条件注释只有ie浏览器中可 以识别,例如<!--[if lte ie 8]><script src="html5shiv.min.js"></script><![endif]--> ,这样就能够只会在ie8及其以下的版本浏览器中引入这个脚本了,l表示less既更小,t表示then既比较,e表示equal既等于,g表示great既更大。
8.html5新增的表单标签兼容性并不好,因为这些新增的表单标签实际原理,就是浏览器内置了这些表单标签的js脚本,不同浏览器内置的js脚本并不是完全一样,所以展示这些表单标签的时候,功能虽然大同小异但是样式各不一样,所以说兼容性不好,并不像那些新增的结构化标签一样,只需要弄个脚本让他们显示为块儿级元素。
9.css新增自适应宽度【
width:100%;//宽度
max-width:640px;//最大宽度
min-width:320px;//最小宽度
】,以前需要通过设置一个父容器,然后让两个子容器浮动,左边的固定宽度,右边的自适应父容器,然后设置右边的容器左外边距为左边容器的宽度,这样就能够让右边的容器自适应父容器的宽度,父容器变宽右边的容器也会变宽,父容器变窄,右边的容器也会变窄,但是现在不需要了,只需要设置css新增的自适应宽度的样式即可。
10.html5新表单标签
◆type=email:文本为email格式
◆type=tel:文本为手机号码格式
◆type=number:文本为数字格式
◆type=search:有搜索框的一些样式
◆type=range:有滑块儿的样式,并且value值为数字
◆type=color:拾色器,就是点击之后可以选择颜色
◆type=time:文本为时间格式,兼容好的话可以选择时间
◆type=date:文本为日期格式,兼容好的话可以选择日期
◆type=month:文本为月份格式,兼容好的话可以选择月份
◆type=week:文本为星期格式,兼容好的话可以选择星期
★新表单的兼容性并不好,原理都是浏览器内嵌自带的js脚本支持,所以版本低的浏览器可能不会有这些脚本的支持。
11.html5新增文本框绑定数据下拉列表
【
<input type="text" list="bao" />
<datalist id="bao">
<option>宝马</option>
<option>宝石</option>
<option>宝刀</option>
<option>宝剑</option>
<option>宝宝</option>
</datalist>
】
12.html5新增的其它标签
◆表单分组框:<fieldset><legend></legend></fieldset>
◆文本输出:<output></output> //纯输出的标签,与span相比,仅仅是有语义化而已。
◆加密类型:<keygen /> //在有些浏览器上无效
◆度量器: <meter value="50" max="100" min="0" low="30" high="80"></meter>//max 和min 表示度量器的最大值与最小值,low和high表示度量器的正常取值范围,低于或高于正常取值范围,度量器都会变色,比如变黄或者变红,在正常范围下,度量器的颜色应该是绿色的。
◆进度条:<progress value="40" max="100" min="0"></progress>
13.html5新增的表单属性
◆占位符(提示文字)属性:<input type="text" placeholder="例如:李狗蛋" />
◆自动获取焦点属性:<input type="text" autofocus />
◆自动补全属性(默认 on):<input type="text" autocomplete="on/off" />
◆文本框必填属性:<input type="text" required />
◆文件 多选 属性:<input type="file" multiple />
◆表单关闭验证功能 属性:<form action="" novalidate></form>
◆文本框自定义正则验证 属性 :<input type="tel" pattern="^1\d{10}$" />
14.推荐一个网页特效网站:http://www.5iweb.com.cn/,这里面有很多的网页特效,可以用来参考。
15.html5新增的事件
◆oninvalid 当html5表单元素验证不通过时就会触发【
txt1.oninvalid=function(){
//设置验证不通过是的提示文字
this.setCustomValidity("您输入的数据不符合要求,请重新输入!");
}
】
16.html5新增的多媒体标签
◆之前在网页上播放多媒体 必须依赖于第三方 插件
◇mediaplay
◇快播
◇flash插件
◆现在html5里面提供了 视频video和音频audio的标签
◆audio 音频标签
◇<audio src="music/yinyue.mp3" controls autoplay loop> controls显示控制条、autoplay表示自动播放音乐、loop表示循环播放</audio>
◇audio 音频标签只支持 Ogg Vorbis、MP3、Wav这三种格式的音频文件,所以需要写兼容性的写法,【<audio controls loop autoplay>
<!-- 通过source标签指定多格式音频文件 -->
<source src="music/yinyue.mp3" >
<source src="music/yinyue.ogg" >
<source src="music/yinyue.wav" >
您的浏览器不支持html5音频播放功能
</audio>
】
◆video 视频标签
◇<video src="video/movie.mp4" controls autoplay loop></video>
◇video 视频标签只支持 Ogg MPEG 4 WebM这三种格式的视频文件,所以需要些兼容性的写法,【<video autoplay controls loop >
<source src="video/movie.mp4" >
<source src="video/movie.ogg" >
<source src="video/movie.webm" >
您的浏览器不支持html5视频播放功能
</video>
】
★原本html4中也有一个音乐标签 <embed src="music/yinyue.mp3"></embed> ,其实内部渲染之后就是video了。
17.html5 新增的dom对象获取方式
◆通过查询选择器的方式获取dom对象:document.querySelector("#box");可以通过id获取dom对象,只会获取第一个查询到的对象,无论你是类选择器还是标签选择器在或者id选择器。
◆通过查询选择器的方式获取多个dom对象(装到伪数组中):document.querySelectorAll(".box");可以获取到查询到的多个dom对象,返回值是一个伪数组,无论你是类选择器还是标签选择器再或者id选择器,就算只有一个dom对象都会返回一个伪数组。
★无论是querySelector还是querySelectorAll,其实都是根据css2+css3选择器来获取dom对象或伪数组dom对象
18.html5 新增的操作类的方式
◆box.classList.add("class5");//添加类,classList属性表示类的列表,这个方法类似于jQuery中的addClass();
◆box.classList.remove("class5");//移除类,这个方法类似于jQuery中的removeClass();
◆box.classList.contains("class5");//是否包含类,这个方法类似于jQuery中的hasClass();
◆box.classList.toggle("class5");//切换类,如果有就删除,如果没有就添加,这个方法类似于jQuery中的toggleClass();
19.html5中的自定义属性,必须以data开头以-连接,如 <div id="box" data-size="200"></div>
◆获取html5中的自定义属性:box.dataset["size"],表示获取自定义属性key为size的值
◆设置html5中的自定义属性:box.dataset["size"]=500;
◆获取值时注意,如果你设置的html5自定义属性为<div id="box" data-box-size="200"></div>时,有多个-,那么获取的时候就必须使用小驼峰命名法这么获取,box.dataset['boxSize'],只能够这样子来获取。
◆设置html5中的自定义属性【
var box=document.querySelector(".box");
//获取 一个 横杠隔开 - 的自定义属性
console.log(box.dataset["name"]);
//获取 两个 横杠隔开 - 的自定义属性
console.log(box.dataset["childName"]);
//设置 一个 横杠隔开 - 的自定义属性
box.dataset["sex"]="男";
//设置 两个 横杠隔开 - 的自定义属性
box.dataset["childSex"]="不详";
】
★html5标签在页面上设置自定义属性时无法设置大写的,更无法使用小驼峰命名法,就算你设置了大写的自定义属性,到后来都会被页面标签渲染成全小写的自定义属性【
data-haSX-XhxaXi="hahaxixi" 会被渲染成 data-hasx-xhxaxi="hahaxixi"
】,只有在使用js的方式才能使用驼峰命名法来获取或者设置页面标签上显示的多个-的自定义属性。