HTML基本语法
- HTML是用来构建网页的，我们在浏览器中看到的页面，基本上都是使用HTML实现
- 示例：
<HTML>
<head>
<title>这是我的网页标题</title>
<head>
<body>
Hello World!!!
</body>
</html>
- 常用标签
- HTML网页的内容都是通过标签实现，不同的标签会被浏览器解释执行为不同的样式显示在页面中
- 文本类:用于显示文字的标签
- 块级标签，单独占用一行 h1 h2 h3 ol-li
- 行级标签，只占用行内一部分空间，span
- 图片
<img src="images/QQ.png" width="200px">- 表单
- form：可以将用户填写的东西提交到后台服务器
<!DOCTYPEhtml> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <form> <form action=""><!--action代表的是要请求 的后台的目的地--> 用户名:<input type="text"><br> 密码:<input type="password"><br> <button>登录</button> <!--表单具有发送请求的功能--> </form> <form action=""> 用户名:<input type="text"><br> 密码:<input type="password"><br> 确认密码:<input type="password"><br> 性别:<input type="radio" name="sex" checked> 男<input type="radio" name="sex">女<br> 家庭住址:<selectname=""id=""> <option value="sd">山东省</option> <option value="js">江苏省</option> <option value="zj" selected>浙江省</option> </select><br> 兴趣爱好:<input type="checkbox" checked>体育 <input type="checkbox">美食 <input type="checkbox">健康 <input type="checkbox">电影<br> 自我介绍:<textarea cols="20" rows="10"></textarea> </form> <button>注册</button> <input type="submit" value="注册"> <input type="reset" value="重置"> </body> </html>- 超链接标签
<!--超链接--> <a href="http://www.baidu.com">百度</a>- table表格标签
<table border="1"> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>- div标签
<div> </div>
CSS基本语法
用于对网页进行美化，调整页面的样式；在html文档中进行编写，浏览器直接解释执行
- 基本语法
- 行内样式
- 调整文本的字体和颜色（行内样式只对当前标签有效）
<h1 id="title1" style="color:red;">一级标题</h1> <!--块级标签--> <p style="font-size: 30px">段落标签 </p> <span style="font-size: 30px;font-family: '微软雅黑 Light'" >行级内容</span> - 内部样式
- 在head中以style标签进行样式设置
- 针对整个页面中的某一类或者某一组标签进行样式设置
内部样式引用<style> /*标签选择器*/ span{ font-size:30px; font-family:"微软雅黑Light"; } /*类选择器*/ .redClass,h1{ font-size:20px; color:cornflowerblue; }/*red类，可以自定义*/ /*ID选择器，推荐使用，每一个标签都可以自定义一个ID*/ #text1{ font-size:50px; color:brown; } /*复杂选择器：属性选择器，组合选择器*/ /*组合选择器*/ ol,h2{ color:green; } </style><p class="redClass">段落文本二</p> <span class="redClass">行级内容二</span><!--样式叠加效应，类选择器优先级更高--> <span id="text1"class=" redClass">行级内容三</span><!--类选择器比ID优先级小--> - 外部样式（推荐使用）
- 是将所有的选择器样式放到外部的css文件中
- 然后在对应的html文件中应用该css文件
<head> <metacharset="UTF-8"> <title>Title</title> <linkrel="stylesheet"href="css/style.css"> </head>
- 行内样式
JavaScript基本语法
- 和Java没有任何关系，和Java风格相似，JS主要用于实现页面的的动态效果
- 按钮的点击事件
- 表单信息的合理性验证
- 基本语法
- 变量
- 用于存储我我们要处理的某些数据
var num1=100; var str="你好"; - 事件和函数
- 事件：点击事件 onclick 失去焦点事件 onblur 内容改变事件 onchange
- 页面中的动态效果都是我们进行了某种操作才触发
- 也就是我们触发了页面中的响应事件，比如单击、双击、失去焦点、回车
- 每种事件所要实现的动作都要放在function函数中
<button onclick="sum()">点击按钮</button> <input type="password" onblur="chkPwd(this.value)"> <input id="email" type="text" onblur="chkEmail()"> <script> window.onload=function(){ //页面一加载就要执行 } functionchkPwd(pwd){ alert(pwd); //获取用户填写的密码，判断长度是否合理 if(pwd.length<8){ alert("密码的长度必须大于8位") } } function chkEmail(){ //获取用户填写的邮箱，判断其是否有@符号 var email=document.getElementById(email).value; if(email.indexOf("@")<0) //邮箱格式[email protected] alert("邮箱格式不合理。没有@符号") } } </script>
- 引用外部的js文件
当js内容过多的时候，我们新建一个外部的js文件，然后在html页面中引用该js文件<script src="js/test.js "></script>
- 变量
jQuery
- jQery是JavaScript的框架，对JS的功能进行了一定的封装，让我们可以以一种更加简单的方式实现动态效果
- 使用方式：
- 引入外部的js文件
<script src="js/test.js "></script> - 通过Query实现表单验证
密码：<input id="pwd" type="password" onblur="chkPwd()"> <span id="message1"></span> <script> function chkPwd() { //获取input标签的输入值 var pwd=$("#pwd").val(); if(pwd.length<8){ //alert("密码长度不能少于八位"); $("#message1").html("密码长度不能少于八位"); $("#message1").css("color","red"); } else { $("#message1").html("")}} </script>
- 引入外部的js文件