|
关于HTML5你知道多少？ HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。 1993年HTML的草案发布，在html5版本之前，html共有4个版本.2.0版、3.2版、4.0版，再到1999年的4.01版。 为什么会有HTML5这个版本？ 4.01后，w3c并不看好html，他们转而去发展XHTML，但并不理想。这时候由浏览器厂商们提出的H5标准更能顺应web2.0的时代，所以h5被慢慢推广了起来。 2004年，浏览器主要厂商成立了WHATWG（WebHypertext Application Technology WorkingGroup）组织，它们创立了HTML5规范，专门针对WEB应用开发新功能（web应用新功能被认为是HTML4中最薄弱的环节）。WEB2.0也正是那个时候提出的。WEB2.0实至名归，开创了web的第二个时代，旧的静态网站逐渐让位于需要更多特性的动态网站和社交网站。2014年10月底（29日），HTML5规范正式定稿。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>HTML5新增类型</title></head><body> <form action=""> <p> 邮箱：<input type="email" name="email"/> </p> <p> 搜索：<input type="search"/> </p> <p> 网站类型：<input type="url"/> </p> <p> 颜色：<input type="color"/> </p> <p> 成绩：<input type="number" min="0" max="300" step="5"/> </p> <p> 范围：<input type="range" min="0" max="100" value="80" step="10"/> </p> <p> 日期：<input type="date"/><br/> 周：<input type="week"/><br/> 月：<input type="month"/> </p> <p> <input type="submit"/> <input type="reset"/> </p> </form></body></html>
常见的html5新增语义化标签 1.header 页面头部 2.footer 页脚 3.article定义页面独立的内容区域 4.aside定义页面的侧边栏内容 5.details文档某个部分的细节 6.summary是details中的标题 7.figure规定独立的流内容 8.figcaption是figure的标题 9.mark 标记 10.nav 导航链接 11.meter用来表示范围已知且可度量的内容。 12.ruby加注释
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>HTML5新增属性</title></head><body> <form action=""> <p>用户名：<input type="text" required name="name" autofocus placeholder="请输入用户名："/></p> <p>邮箱：<input type="email" multiple name="email" required /></p> <p>密码：<input type="text" minlength="6" maxlength="12"/></p> <p><input type="submit"/></p> </form></body></html>
HTML5新增的结构标签 <header>...</header> 头部 <nav>...</nav> 导航 <section>...</section>定义文档中的节。比如章节、页眉、页脚或文档中的其它部分 <aside>...</aside> 侧边栏 <footer>...</footer> 页脚 <article>...</article>代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>div标签和span标签</title></head><body> <!-- 无语义标签(节标签) div(块级容器) span(行内容器) 块级元素和行内元素的区别： 块级元素可以包含行内元素和块级元素 行内元素一般不包含块级元素
块级元素：p div ul ol dl dt li h1-h6 行内元素：span strong em --> <div>头部</div> <div>中部</div> <div>页脚</div>
<span>我是span标签1</span> <span>我是span标签2</span> <span>我是span标签3</span></body></html>
HTML5新增的结构标签
<figure></figure> 用于对元素进行组合。多用于图片与图片描述组合 <figure> <img src="img.gif"alt="figure标签" title="figure标签" /> <figcaption>figure的标题</figcaption> </figure>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>新增结构标签</title></head><body> <header>头部</header> <nav>导航</nav> <article>内容 <section>文章标题</section> </article> <aside>侧边栏</aside> <footer>页脚</footer></body></html>
HTML5新增的结构标签 <details> 标签用于描述文档或文档某个部分的细节 IE不支持 <details> 标签 <details> <summary>details中的标题</summary> <p>详细的内容</p> </details>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>新增结构标签二</title></head><body> <!--<dl>--> <!--<dt>--> <!--<img src="images/guangtouqiang.jpg" width="200px" alt="未能成功加载" title="光头强"/>--> <!--</dt>--> <!--<dd>光头强系列</dd>--> <!--</dl>--> <!--<hr/>--> <!--<figure>--> <!--<img src="images/guangtouqiang.jpg" width="200px" alt="未能成功加载" title="光头强"/>--> <!--<figcaption>光头强系列</figcaption>--> <!--</figure>-->
<!--<details>--> <!--<summary>创新社会治理 夯实平安之基</summary>--> <!--<p>经济社会快速发展，如今的城市成为典型的陌生人社会，单位人变为社会人，--> <!--“重新组织群众”成为新的课题。创新基层社会治理，必须牢牢坚持自治、法治、德治，激活社会细胞，让基层成为平安的坚强堡垒。--> <!-- ■在很多地方、领域，“人情社会”的观念依然存在，遇到问题，--> <!--首先想到的不是法，而是人情、关系、人脉。创新社会治理，建设平安中国，必须加强法治建设，--> <!--让办事依法、遇事找法、解决问题用法、化解矛盾靠法成为常态。</p>--> <!--</details>--> <!--<hr/>--> <!--<p>你是<mark>大长腿</mark>吗？</p>--> <meter min="0" max="100" value="77" low="20" high="80">度量衡</meter> <progress max="100" value="80">进度条 </progress>
</body></html>
HTML5新增的结构标签 <mark> </mark> 定义带有记号的文本，它会给你要突出显示的文本下加个背景色。 如：<p>你是<mark>大长腿</mark>吗？</p> <meter> </meter>标签 <meter>标签定义度量衡。仅用于已知最大和最小值的度量。 <meter min="0"max="100" value="80"></meter> low:最低临界点 high：最高临界点 <meter min="0"max="100" value="81" low="20"high="80"></meter> <progress></progress>标签 <progress> 标签定义运行中的进度（进程） <progress max="100"value="20"></progress> max：定义完成值 value：定义当前值 <datalist></datalist>标签 <datalist> 标签定义选项列表,与 input 元素配合使用该元素，来定义 input 可能的值 datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。 请使用 input 元素的 list 属性来绑定 datalist。 <input id="myCar" list="cars" /> <datalistid="cars"> <optionvalue="BMW"> <optionvalue="Ford"> <optionvalue="Volvo"> </datalist> 
<audio></audio>标签 <audio> 标签定义声音，比如音乐或其他音频流 <audio src="someaudio.mp3"> 您的浏览器不支持audio 标签。 </audio> 
<source></source> 标签 <source> 标签为媒介元素（比如<video> 和 <audio>）定义媒介资源。 <source>标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。 <audio controls> <sourcesrc="horse.ogg" > <sourcesrc="horse.mp3" > Yourbrowser does not support the audio element. </audio>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>音频</title></head><body> <!-- audio 支持的格式： ogg mp3 wav 注意：loop 属性值 正数(代表播放次数) 负数或者不加任何属性值(代表无限播放) --> <audio src="images/1.mp3" autoplay controls loop="2" muted></audio> <hr/> 如果浏览器不支持某种格式的音频，可以将一种音频转换成3中格式 <audio controls> <source src="images/1.mp3"/> <source src="images/1.ogg"/> 您的浏览器不支持音频播放 </audio>
</body></html>
<embed/>标签 <embed>标签定义嵌入的内容，比如插件，当然也可以用来嵌入声音 <embed> 标签必须有 src 属性 <embed src="helloworld.mp4" /> <canvas> </canvas> 标签 canvas只是个容器，你可以通过控制坐标在canvas上绘制图形。一般配合js使用能实现非常复杂的动画效果 <canvasid="myCanvas">你的浏览器不支持canvas标签</canvas> <scripttype="text/javascript"> varcanvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script> css 什么是CSS CSS（Cascading StyleSheets）层叠样式表，又叫级联样式表，简称样式表 1.用于HTML文档中元素样式的定义 实现了将内容与表现分离 提高代码的可重用性和可维护性 2.文件后缀是.css
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>embed标签</title></head><body><embed src='http://player.youku.com/player.php/sid/XMzk4MDUzNTgwNA==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed></body></html>
CSS与HTML之间的关系 1.HTML用于构建网页的结构 2.CSS用于构建HTML元素的样式 3.HTML是页面的内容组成，CSS是页面的表现 结构层 HTML 表示层 CSS 行为层 JavaScript
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>画布</title> <style type="text/css"> canvas{ background-color: gray; }</style></head><body> <!-- canvas标签： 1.canvas必须配合js在网页上绘制图像 2.画布是一个矩形区域，我们可以控制其每一个像素 3.canvas拥有多种绘制路径、矩形、圆形...
颜色的表示方式： 1.直接用颜色名称:"red" "green" 2.十六进制颜色值："#eeeeff" 3.rgb(1-255,1-255,1-255) 属性： fillStyle 填充绘画的颜色、渐变或模式 strokeStyle 用于笔触的颜色、渐变或模式 shadowColor 用于阴影颜色 shadowOffsetX 水平距离偏移量 shadowOffsetY 垂直距离偏移量 shadowBlur 模糊级别 方法： getContext():返回一个对象，这个方法封装了很多的绘图方法和属性。 但是现在只能提供2d的绘画环境。 rect():创建矩形。 fillRect():绘制填充的矩形 createLinearGradient()：创建线性渐变 addColorStop(): 渐变对象中颜色和停止位置
--> <canvas id="mycanvas" width="400px" height="400px"> 您的浏览器版本太低 </canvas> <script type="text/javascript"> //js代码块 var canvas=document.getElementById("mycanvas"); var obj=canvas.getContext("2d");
// var colorobj= obj.createLinearGradient(0,0,100,0); var colorobj=obj.createRadialGradient(50,50,10,50,50,50); colorobj.addColorStop(0,"red"); colorobj.addColorStop(0.5,"blue"); colorobj.addColorStop(1,"green"); //obj.rect(0,0,100,100); obj.shadowColor="rgb(11,25,9)"; obj.shadowOffsetX=3; obj.shadowOffsetY=3; obj.shadowBlur=5;
obj.fillStyle=colorobj; obj.strokeStyle="green"; obj.fillRect(0,0,100,100); obj.strokeRect(100,100,100,100);</script></body></html>
使用CSS样式表的方式 1.内联方式 直接把CSS代码用style属性添加到开始标签中 <p style=“color:red;”>红色字体</p> 2.内部样式表 直接把CSS代码添加到头部的style标签中 <head> <style> p{color:red;} </style> </head> 3.外部样式表 <link rel="stylesheet"href=""/> StyleSheet，的意思就是样式调用 4.导入式 <head> <style> @import url(my.css); </style> </head> 优先级：行内样式>内部样式>外部样式>导入样式 css加载方式link和@import的区别，为什么不推荐使用@import? 1.@import是CSS提供加载样式的一种方式，只能用于加载CSS。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义rel连接属性等。 2.加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候会比较明显。 3.兼容性的差别。@import在IE5以上才能识别，而link标签无此问题。 4.使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为dom操作元素的样式时，用@import方式的样式也许还未加载完成。 5.使用@import方式会增加HTTP请求，会影响加载速度，所以谨慎使用该方法。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>video标签</title></head><body> <video src="images/a.mp4" controls loop muted poster="images/guangtouqiang.jpg"></video></body></html>
css语法 1.css是以属性/值对形式出现 2.属性和属性值之间用冒号（:）连接 3.多对属性之间用分号（;）隔开 如：color：red； CSS样式表特征 1.继承性 指被包含在内部的标签可以拥有外部标签的样式，比如：text-*、font-*、line-*，但有些属性不能继承，比如：border、padding、margin 2.层叠性 可以定义多个样式 3.优先级 样式定义冲突时，按照不同样式规则的优先级来应用样式
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>文件上传和按钮组</title></head><body> <p>上传头像： <input type="file"/></p> <p>隐藏域：<input type="hidden" value="11"/></p> <p>普通按钮：<input type="button" value="注册"/></p> <p>提交按钮：<input type="submit" value="登陆"/></p> <p>重置按钮：<input type="reset"/></p> <p>图像图片按钮：<input type="image" src="images/anniu.jpg" width="20px"/></p> <p> <button>下一步</button> </p></body></html>
css基础选择器 1.通用选择器，全局选择器（*） 可以与任何元素匹配 常用于设置一些默认样式 优先级最低 2.元素选择器 HTML文档中的元素 p、b、div、a、img、body等 3.类选择器 .className{ } 如：.box{ color:red; } 类名不能以数字开头 一个页面中class名字可以重复 4.ID选择器 #idName{ } 如：#box{color:red;} 一个页面中id相同的id名只能出现一次 一般重复使用的样式不使用ID选择器，因为ID属性是唯一的 5.合并选择器 语法：选择器1,选择器2,...{ } 作用：提取共同的样式，减少重复代码 例如：.header,.footer{height:300px;} div+css布局 内容和显示分离，便于维护扩展，网页布局方便，当需求改变的时候，效果最明显 div： 1.可定义文档中的分区或节 2.可以把文档分割为独立的、不同的部分。 3.是一个块级元素。这意味着它的内容自动地开始一个新行 4.通常与css进行配合，会有更加强的表现形式 布局实例时需要用到的css属性 width:数值 height:数值 background-color:颜色 float:left 使div不占据一行 一般页面可简单分为上中下结构，上为头部，中为内容部分，下位脚部。例子： 
此时为了有更强的表现力，我们可以加入一点css样式，整体代码如下: 
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>单选按钮和复选框</title></head><body> <!-- 单选按钮: 必须通过相同的name属性值来达到单选的效果 复选框 --> <p>性别：<input type="radio" name="sex" checked value="男"/>男 <input name="sex" value="女" type="radio"/>女</p> <p>爱好：<input type="checkbox" checked/>吃饭饭 <input checked type="checkbox"/>睡觉觉 <input type="checkbox"/>打代码 </p></body></html>
|
