此处学前端三大技术只是简单初略的学习,了解为主,是为后端做准备
HTML:格式
CSS:表现
JavaScript:交互
HTML:Hyper Text Markup Language(超文本标记语言)
常用语法
<html>
<head>
<meta charset="UTF-8">
<title>我是eclipse创建的网页title>
head>
<body>
<h1>早安1h1>
<h2>早安2h2>
<h3>早安3h3>
<h4>早安4h4>
<h5>早安5h5>
<h6>早安6h6>
<p>我是段落标签p>
<p>我是段落标签p>
我是段落标签<br />
<hr />
我是段落标签
<ul>
<li>香蕉li>
<li>橘子li>
ul>
<ol start='5'>
<li>香蕉li>
<li>橘子li>
ol>
body>
html>
图片、内联框架和超链接
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
<img alt="尚硅谷" src="1.jpg" >img>
<img alt="尚硅谷" src="../img/2.jpg" >img>
<img alt="尚硅谷" src="F:\javaLearning\JavaWeb\01.HTML\WebContent\image\3.jpg" >img>
表格
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
<table border="1" style="border-collapse: collapse;">
<tr>
<th>1th>
<th>2th>
<th>3th>
tr>
<tr>
<td colspan="2">4td>
<td>6td>
tr>
<tr>
<td rowspan="2">7td>
<td>8td>
<td>9td>
tr>
<tr>
<td>11td>
<td>12td>
tr>
table>
body>
html>
表格
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
<form action="target.html" method="post">
用户名:<input type="text" name="username" value=""/><br/>
密码:<input type="password" name="pwd" value=""/><br/>
性别:男 女 <br/>
爱好: 1 2
3 4
<br/>
最喜欢的老师:
<select name="teacher">
<option value="5">5option>
<option value="6">6option>
<option value="7">7option>
select>
<br/>
<input type="submit" value="登陆"/>
form>
body>
html>
CSS:层叠样式表(Cascading Style Sheets)
1、样式直接写在标签style属性。
(1)不能复用
(2)不能编写大量的样式
123456
css选择器
1.标签选择器:使用标签名选择元素
标签名{
样式…
}
2.id选择器,使用标签的id值选出元素
#id值{
}
3.类选择器,根据标签的类进行选择class的值
.类的值{
}
4.组选择器:选择一组元素,选着的这些元素全部应用
选择器1,选择器2,…{}
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器title>
<style type="text/css">
p{
color:blue;
font-size:25px;
font-family: 微软雅黑;
}
#p1{
color:red;
}
.pred{
/* 1.直接写颜色名*/
/* 2.写rgb值 red green blue三个值都是0-255*/
/* 3.写16进制的值 #两位数 两位数 两位数*/
color:green;
color:rgb(0,255,0);
color:#ff0000;
}
#p1,.pred{
font-size: 50px;
}
style>
head>
<body>
<p id="p1">4444444p>
<p class="pred">5555555p>
<p class="pred">6666666p>
body>
html>
JavaScript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言。
1、基本语法
与Java类似,JavaScript有变量,函数和对象。
(1)变量:使用var关键字定义变量,声明时不需要指明类型 必须先声明后使用,因为是一种弱语言,所以声明后可以任意改变其赋值的类型。
有五种原始类型:number,String,boolean,null,undefined
对象:object
var 变量名; 变量如果声明出来未赋值就是undefined
num1=12;
num1=“你好”;
num = null;
num=document.getElementById(“abc”);
(2)函数:声明函数 ,方法不管在哪儿声明,浏览器都会优先加载。
function 方法名(参数名,参数名){方法体}
function sum(a,b){
alert(a+b);
}
//将方法复制给一个变量 方法名就是变量
var sum1 = function(a,b){
alert(a+b);
//NaN Not a Number
};
//02.调用函数 方法名(参数表); 在js中唯一标识的是方法名,
在js中没有方法的重载,调用方法时候参数是可以选择的
sum(1,2);
sum1();//也可以调用为:NaN
2、加载方式
(1)写在标签事件属性里面 不推荐
(2)写在script标签里面
1)写在head里面 推荐(一定写在window.onload里面),如果不是用window.onload,会出现找不到元素的情况
加载方式
2)写在body闭合前 可以使用
可以找到元素,但比如图片,iframe请求时间较长时,可能导致js代码中获取这些元素的属性时获取不到争取的属性
(3)引入外部文件 推荐使用
3、DOM查询
dom:文档对象模型,浏览器吧html页面抽象成了一个document对象,包括页面里面的所有元素
bom:浏览器对象模型(Browser object model)
dom模型:树形模型
节点:每一个元素都是节点
父节点、子节点、祖先节点、兄弟节点
元素节点:我是连接
属性节点:href="#",不参与层级关系
文本节点:我是连接, 有层级关系
所有的节点(封装好的对象),都有三个属性
nodeName:节点名
nodeType:节点类型 所有节点的nodeType值都是整数:1,2,3
nodeValue:节点值
nodeName nodeType nodeValue
元素节点 标签名 1 null
属性节点 属性名 2 属性值
文本节点 #text 3 文本内容