HTML
<!-- HTML中的注释 -->
<!DOCTYPE html> <!-- HTML的版本号 无版本代表HTML5 -->
<html> <!-- HTML最外层的标签 -->
<head> <!-- HTML头标签 里面包括大部分页面配置信息和标题 -->
<meta charset="UTF-8"><!-- 页面的字符类型 -->
<title>我的第一个html</title><!--页面的标题 -->
</head>
<body><!-- HTML的身体标签 里面放了HTML中的实际内容 -->
<!--
在HTML中 主要有两种标签
单标签：字符集设置标签<meta charset="UTF-8" />
双标签：根标签<html></html>
头标签<head></head>
标题标签<title></title>
常用单标签：
换行标签：<br />
分割线<hr />
一个英文空格
一个中文空格
常用的双标签；
段落标签：<p></p> 换行且有段落间距
块标签：<div></div> 换行且无段落间距
标记标签：<span></span>自身不含有特性 不换行也没有段落间距
-->
<!--
超链接标签 a标签
href属性：跳转到指定页面
页面中存在路径关系：
1、绝对路径：以http://开始的路径 绝对路径 域名
服务器路径
相对路径
base路径
target属性：选择在当前页面显示新内容_self
选择在新页面显示新内容_blank
2、图片标签
img标签 src属性 添加图片路径
alt属性 当图片找不到时显示的内容
width属性 设置图片的宽度高度，不允许加px
<h3>前端的组成部分</h3>
<ul> //列表标签 无序列表
<!-- ol li
有序列表 -->
//列表标签 <li>html</li>
<li>css</li>
<li>javaScript</li>
<li>jquery</li>
</ul>
路径标签********重点
//路径标签 <a href="http://www.baidu.com">百度一下，我不知道</a>
//图片标签 <img src="img/5.jpg" alt="当图片找不到，显示内容" width="400" height="300"/>
//表格标签 <table>
<tr>
<td>学号</td>
<td>姓名</td>
<td>班级</td>
<td>课程</td>
<td>分数</td>
</tr>
//<th> 字体加粗
//<th width="100"> 表格加宽
<tr>
<th width="100">学号</th>
<th width="100">姓名</th>
<th width="100">班级</th>
<th width="100">课程</th>
<th width="100">分数</th>
</tr>
</table>
//iframe框架标签
<iframe src="http://www.baidu.com" width="100%" height="600" ></iframe>
//表单标签 **********重点
<!-- form 标签 大部分标签需要name属性
action:连接java的入口
method:表单提交的方式 get post
input 标签：输入标签
type:
text 文本行标签
password 密码
radio 单选框
checkbox 多选框
button 按钮
submit 保存按钮
reset 重置按钮
select 标签：下拉框
option 选项
textarea 文本编辑器
-->
<form action="#" method="get">
用户名：<input type="text" /><br />
密&emsp码：<input type="password" /><br />
确认密码：<input type="password" /><br />
选择性别：男<input type="radio" name="gender"/>女<input type="radio" name="gender"/>
选择兴趣：java<input type="checkbox" name="hobby" />
前端<input type="checkbox" name="hobby" />
数据库<input type="checkbox" name="hobby" />
Linux<input type="checkbox" name="hobby" />
选择国家：<select>
<option>中国</option>
<option>日本</option>
<option>韩国</option>
</select>
个人说明：<texttarea></texttarea><br />
<input type="button" value="点击按钮" /> <input type="submit" value="提交"/> <input type="reset" value="重置" />
</form>
<form action="http://www.baidu.com/s" method="get">
<input type="hidden" name="enc" value="utf-8" /><实际工作中会频繁使用隐藏域 避免用户看见一些信息>
<input type="text" name="wd" id="" value="" />
<input type="submit" value="百度一下，谁知道呢" />
</form>
//form标签添加表格
<form action="#" method="get">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="" id="" value="" /></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="" id="" value="" /></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="" id="" value="" /></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="eamil" name="" id="" value="" /></td>
</tr>
<tr>
<td>性别：</td>
<td>男<input type="radio" name="gender" id="" value="" />女<input type="radio" name="gender" id="" value="" /></td>
</tr>
<tr>
<td>爱好：</td>
<td>
唱<input type="checkbox" name="hobby" />
跳<input type="checkbox" name="hobby" />
rap<input type="checkbox" name="hobby" />
打篮球<input type="checkbox" name="hobby" />
</td>
</tr>
<tr>
<td>民族：</td>
<td><select name="">
<option value="">汉</option>
<option value="">苗</option>
<option value="">藏</option>
</select>
</td>
</tr>
<tr>
<td valign="top">个人说明：</td>
<td>
<textarea></textarea>
</td>
</tr>
<tr>
<td><input type="reset" name="" id="" value="重置" /></td>
<td><input type="submit" value="注册" /></td>
</tr>
</table>
</form>
</body>
</html>CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
<!--
CSS 的固定写法
属性名1：属性值1；
...
匹配所有标签 可进行样式修改
-->
</title>
<style type="text/css"> /* 在head标签内容 中添加style标签 type="text/css" */
/* 全部选择器 默认去掉所有标签边框 内边距和外边距 */
div{ //选择器
border:dashed 1px;
width:400px;
height:300px;
color:blue;
background-color:green;
}
div{
border:dotted 1px;
margin-bottom:5px;
}
p{
border:dashed 1px;
}
/*
id选择器：
id{
属性名：属性值
}
只能修改指定id的标签样式
注意：虽然id重复页面不会出现异常 但是通常情况下 不允许页面中标签id重复
*/
d1{
color:red;
}
/*
类选择器：.class{
属性名：属性值;
...
}
class 属性允许多个标签使用相同的clss 如果需要重复的样式 推荐使用class属性
*/
.c1{
color:green;
}
</style>
<!-- 外部导入CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div style="border: solid 1px; width:400px; height:300px; background-color:yellow; ">
我的div
</div>
<div id="d1">
第一个div
</div>
<div>
第二个div
</div>
<div>
<p class="c1">
我是P段落
</p>
</div>
</body>
</html>javaScript
<!DOCTYPE html>
<html>
<head>
<!-- 也可以外部引入js 如果一个script标签引入其他的js文件 name该标签中不可以编写js代码-->
<script src="" type="text/javaScript">
alert
</script>
<!-- 最简单的js版本的hello world! 需要编写script标签 -->
<script type="text/javascript">
/* system.out.println() */
alert("Hello World!"); //弹窗
</script>
<script type="text/javascript">
var i=1;
var j=1.1;
//字符串类型
var c='s';
var str="abc";
alert(str);
var b=true;
//与java不同的是 数组使用[]
var ary=[1,2,3,4,5];
//可以直接创建对象
var obj=new Object();
var stu={
id:1001,
name:"ddh",
age:21,
toString:function(){
return this.id + " "+ this.name+" "+ this.age;
}
};
alert(stu);
alert(i++);
//js中的双目运算符
+ - */ %
//js中 赋值运算符
= += -= *= /= %=
//js中比较运算符
> < >= <= != ==
//js中== 等值运算符
/* 只要值相等 就返回true
在js中true==1
false==0
数字和字符串可以直接比较
*/
var i=1;
var j="1";
var b=true;
alert(i==j);
alert(j==b);
alert(b==i);
alert(0==false)
//声明一个变量
var u;
//在js中所有没有赋值的变量默认值均为undefined
alert(u);
//在Js中如果有任意数字与undefined值运算 结果均为NaN Not a number
//在js中任意数字与NaN运算 结果均为NaN
//字符串与underfined 和 NaN的运算 均是拼接字符串操作
var str="abc";
alert(str+NaN);
//alert(null == undefined);
//null == undefined != NaN
alert(1+null);
//null值在与任意数字做运算时 都相当于0
alert("abc"+null);
//js中 === 等同运算符
/*
js中数据类型 字符串值，数值，布尔值，数组，对象
ECMAScript 有五种原始类型（primitive type）,即Undefined、Null
*/
alert(typeof(1));//number
alert(typeof(NaN));//NaN 不是一个数字 但是是number类型
alert(typeof('a'));//string
alert(typeof([1,2,3,4,5]));//object
var obj=new Object();
alert(typeof(obj));//object
alert(typeof(undefined));//undefined
alert(typeof(null));//object
/* js中的数组与java中的集合功能类似 */
var ary=[3,1,2,5,4];
alert(typeof(ary) + ":" + ary);
for (var i = 0; i < array.length; i++) {
for (var j = 0; j < array.length-i-1; j++) {
if (ary[i]>ary[j+1]) {
var temp=ary[j];
ary[j]=ary[j+1];
ary[j+1]=temp;
}
}
}
alert(ary);
ary[10]=10;
//js中的函数
//声明函数
function test(){
alert("这是一个js中的函数");
}
//调用方法
test();
//查看方法名的类型 显示是一个function
alert(typeof(test));
//调用函数
//js中的函数 不需要添加有无返回值 直接return即可
//没有返回值 不写return
//有返回值 写return
//js中的形参 由于不存在其他数据类型 都是var类型 所以不需要也不允许添加其他形参的类型
//直接写形参的变量名即可
function add(x,y){
return x+y;
}
alert(add(5,10));
/*
js中函数可以写成匿名函数
匿名函数要求必须被一个变量接收
该变量就成为了函数变量
函数变量名() 调用该函数
*/
var test=function(){
alert("这是一个test函数");
}
test();
/* js中的对象 */
var obj=new Object();
//对象中 没有改属性 则直接编写该属性名 初始化该属性
obj.id=1001;
obj.name="lisi";
obj.age=18;
alert(obj.id + " " + obj.name + " " + obj.age);
obj.test=function(){
alert("这是obj对象中的test函数");
}
obj.toString=function(){
return this.id + " "+this.name+" "+this.age;
}
obj.test();//可以不在括号传参 一样输出正确结果
！！！js中的json对象 非常重要 (实质Map集合 key-value)
var jsonObject={
"id" : 1001,
"name" : "azrail",
"age" : 18
"toString" : function(){
return this.id+ " "+this.name + " "+this.age;
},
"subObj" : {
"id" : 1010,
"name" : "subObj",
}
};
//alert(jsonObject.id+ " "+ jsonObject.name+ " "+jsonObject.age);
//alert(jsonObject);
alert(jsonObject.subObj.id+ " "+ jsonObject.subObj.name);
/*
js中所有的事件都是以on开始的
最常用的事件：
onclik:鼠标点击事件
*/
function testClick(){
alert("这是一个鼠标点击事件");
}
function checkUserName(){
//1 获取username标签
var username=document.getElementById("username");
//2 判断username中是否输入了内容
if(username.value! = null || username.value!= ""){
//3 如果没有输入获取span标签
var span=document.getElementById("usernameSpan");
//4 在span标签中提示用户名不能为空
span.innerHTML="用户名不能为空!";
}else{
//5 如果输入了值 将span的内容清空
span.innerHTML=" ";
}
}
</script>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" name="" id="" value="这是一个按钮" onclick="testClick()" /><br />
<h1>用户注册</h1>
用户名：<input type="text" name="" id="" value="" /><br />
密 码: <input type="password" name=" " id="" value="" />
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
