一:HTML5
HTML(Hypertext Markup Language)超文本标记语言 <!DOCTYPE html> <html> <head> <title>标题</title> <meta charset="字符集"/> </head> <body> 网页体内容 </body> </html> 二:表单元素 <form action="提交到服务器的路径" method="get/post"> <input type="text" value="提交的值" name="xxx"/> <br/> <!--普通文本框--> <input type="password" value="提交的值" name="xxx"/> <!--密码框--> <select value="提交给服务器的值"> <!--下拉列表框--> <option value="sx">陕西省</option> <option value="sc">四川省</option> <option value="hn">湖南省</option> </select> <input type="radio" value="boy" name="sex"/> <!--单选框,一组单选框的name属性值必须一样--> <input type="checkbox" name="hobby" value="football" checked="true"/> <!--复选框--,同组的复选框name属性一致> <input type="submit" value="注册"/> </form>三:其他常用标签:
<a href="连接路径">超链接显示内容</a> <img src="图片路径" alt="如果图片加载失败,显示内容"/> <ul> <!--无序列表--> <li>显示信息项1</li> <li>显示信息项2</li> <li>显示信息项3</li> </ul> <ol> <!--有序列表--> <li>显示信息项1</li> <li>显示信息项2</li> <li>显示信息项3</li> </ol> <div></div>分区标签 四:HTML5扩展标签: <input type="email" name="xxx"/> <!--邮箱验证--> <input type="url" name="xxx"/> <!--网址验证--> <input type="number" name="num" min="最小值" max="最大值"/> <!--数字范围--> <input type="color" name="xxx"/> <!--选择本地的颜色--> <audio controls="controls"> <!--音频--> <source src="/i/song.ogg" type="audio/ogg"> </audio> <video src="movie.ogg" controls="controls"> <!--视频--> </video>五:CSS (Cascading Style Sheets)层叠样式表
CSS选择器: 1.标签选择器 标签名{ 属性名1:属性值1; 属性名2:属性值2; ... } 2.类选择器(class选择器) .类名{ 属性名1:属性值1; 属性名2:属性值2; ... } 3.ID选择器 #ID名{ 属性名1:属性值1; 属性名2:属性值2; ... } 选择器优先级:ID选择器>类选择器>标签选择器 当选择器优先级相同的情况下,采用“就近原则”(最后一次出现的选择器)六:JavaScript
JavaScript是一种脚本语言,主要针对客户端开发。1.DOM document是用来访问html元素的对象。
document.getElementById("id名称"); // 通过元素的ID获取某个元素 document.getElementsByName("name属性值"); // 通过元素的name属性值获取若干元素 元素的属性:innerHTML 表示元素内部的html内容 元素的方法:setAttribute("属性名","属性值"); getAttribute("属性名"); // 通过属性名获取属性值2.函数的声明
function 函数名(xx,xx){ // 函数体代码 } 3.变量的声明(JavaScript是弱类型的语言) var 变量名=变量值 eg: var a=5 var s="Hello JavaScript"4.系统函数
alert("警告消息"); // 弹出警告框 confirm("确认消息内容"); // 确认框,返回布尔值 parseInt("xxx"); // 将字符串转化成整数 5.数组 var array=["aaa","bbb",...]; for(var key in array){ alert(array[key]); }