1 网页介绍
静态网页与动态网页：
静态网页：我们写好的html内容在浏览器中显示出来的效果始终都一样，不管进行多少次访问，如果想内容改变必须修改源代码。
动态网页：页面的内容是由服务器端程序控制输出，比如不同的人使用相同的网站，但是显示的当前用户是不一样的。
两者区别：静态就是我们写什么就显示什么，而动态通过程序的控制输出内容。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
2 第一个html网页
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
3 超链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>超链接</h3>
<!-- blank表示另起一页打开空白，_self表示在本页打开 不过默认在本页打开-->
<a href="hello.html" target="_self">点我啊</a>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
4 图片标签
必须属性:
alt text 规定图像的替代文本。 STF
src URL 规定显示图像的 URL。 STF
- 1
- 2
- 3
- 4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--利用图片做超链接-->
<a href="hello.html" target="_self"><img src="images/110.png" alt="孙悟空大战奥特曼" title="师姐第三" border="5"/></a>
<img src="images/three.jpg" alt="孙悟空大战奥特曼" title="师姐第三" border="10" width="500" height="400"/>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
5 列表标签
有序列表:
列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
- 1
- 2
- 3
- 4
无序列表:
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
- 1
- 2
- 3
- 4
定义列表:
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
- 1
- 2
- 3
- 4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--有序链表-->
四大美女
<!-- 1数字A字母a字母，I数字V i是vi -->
<ol type="I">
<li>西施</li>
<li>王昭君</li>
<li>貂蝉</li>
<li>杨玉环</li>
</ol>
<!--无序链表-->
四大美女
<!-- square方块，circle圆圈 默认是点 -->
<ul type="circle">
<li>西施</li>
<li>王昭君</li>
<li>貂蝉</li>
<li>杨玉环</li>
</ul>
<!--定义链表-->
<dl>
<dt>四大妹妹</dt>
<dd>西施</dd>
<dd>王昭君</dd>
<dd>貂蝉</dd>
<dd>杨玉环</dd>
</dl>
<!--自定义的嵌套列表-->
<dl>
<dt>java</dt>
<dd>javaSE</dd>
<dd>
<dl>
<dt>javaEE</dt>
<dd>Strus2</dd>
<dd>Hibernate</dd>
<dd>Spring</dd>
</dl>
</dd>
<dd>javaME</dd>
<dt>html汉语</dt>
</dl>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
6 表格标签
每个表格由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 标签开始。
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
他们三的作用:就算被打乱了还是从thead,tbody,tfoot这个顺序,可以增加用户体验,及时缓冲出表头跟尾巴这些重要信息- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- width占浏览器的80% padding单元格边距 spacing单元格间距 -->
<table border="1" width="80%" cellpadding="0" cellspacing="0">
<!-- 表名 -->
<caption>学生列表</caption>
<thead>
<tr style="background: gray">
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tfoot>
<!-- center居中显示 -->
<tr align="center">
<td colspan="4"><a href="">首页</a><a href="">上一页</a><a href="">下一页</a><a
href="">尾页</a> 第4/6页 总共有46条数据</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>10</td>
<td>乔峰</td>
<td>30</td>
<td>男</td>
</tr>
<tr style="background: yellow;">
<td>20</td>
<td>西门</td>
<td>28</td>
<td>男</td>
</tr>
<tr>
<td>30</td>
<td>莲莲</td>
<td>20</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
8 表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>用户注册</h3>
<!-- form:表单域，可以包含多个input元素（输入框/下拉列表/单选框/复选框...）
属性：
action:把表中的数据提交给哪一个资源来做处理
method：单元的提交方式：get(缺省)，post
enctype:表示表单的编码规范，文件上传时的时候使用二进制编码，其他情况不变
-->
<form action="#" method="get">
</form>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv = "Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>用户注册</h3>
<form action="#" method="get">
<!-- hidden是隐藏值 -->
<input type="hidden" name="id" value="123456"/>
<!-- readonly只读 disabled="disabled"灰色不可用的 只要跟前面的相同可以只用一个单词就行-->
账号：<input type="text" name="username" value="默认值"/><br/>
密码：<input type="password" name="password"/><br/>
<!-- checked默认选中的 -->
性别：<input type="radio" name="gender" value="boy" checked/>男
<input type="radio" name="gender" value="boy"/>女
<input type="radio" name="gender" value="boy"/>保密<br/>
爱好:<input type="checkbox" name="hoby" checked/>java
<input type="checkbox" name="music"/>听歌
<input type="checkbox" name="boll"/>打篮球
<input type="checkbox" name="games"/>LOL
<input type="checkbox" name="phonegames"/>海岛奇兵<br/>
头像：
<input type="file" name="headImg"/> <br/><hr/>
城市：<!-- value设置"gz"最上面的网址行显示的是gz-->
<!-- multiple可以同时选择多个选项 size同时显示几个值-->
<select name="city" multiple size="1">
<option value="gz">广州</option>
<option>佛山</option>
<option>深圳</option>
<option>湛江</option>
</select><br/>
简介：
<!-- 有30个列,可以写5行 -->
<textarea name="intro" row="30" cols="30">个人简介</textarea>
<br/>
<!-- <input type="image" src="images/110.png"/> -->
<input type="button" value="普通按钮" onclick="alert(1)"/>
<input type="submit" value="朕要注册" />
<input type="reset" value="重置"/>
</form>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
html5新特性
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv = "Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>用户注册</h3>
<form action="#" method="get">
<!-- required必填属性
date格式
数字模式
最大最小
占位符关键字
颜色
-->
账号：<input type="text" name="username" required/><br/>
邮箱：<input type="email" name="email" required/><br/>
年龄：<input type="date" name="age"/><br/>
手机：<input type="number" name="tel"/><br/>
<!-- max="10" min="1" 属性值最大最小值-->
<input type="search" name="keyword" placeholder="关键字"/>
<input type="color">
<br/>
<input type="submit" value="朕要注册"/>
</form>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
9 框架标签
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv = "Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<frameset rows="15%,*,5%">
<frame src="top.html"/>
<frameset cols="300,*">
<frame src="menu.html" noresize/>
<frame src="welcome.html" name="main"/>
</frameset>
<frame src="foot.html"/>
</frameset>
<noframes>
<body>
浏览器版本过低，请升级
</body>
</noframes>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv = "Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>菜单信息</h3>
四大美女
<ul type="square">
<li><a href="xishi.html" target="main">西施</a></li>
<li><a href="zhaojun.html" target="main">王昭君</a></li>
<li><a href="">貂蝉</a></li>
<li><a href="">杨玉环</a></li>
</ul>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
10 CSS概述
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* css代码*/
div{
background-color:green;
}
</style>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div style="background-color: yellow">DIV1</div>
<div style="background-color: orange">DIV2</div>
<div style="font-size: 30px; color: red;">DIV3</div>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
调用下面的index.css代码
/*全局的样式信息*/
div{
background-color:green;
}- 1
- 2
- 3
- 4
标签选择器,类别选择器,id选择器…
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
<!--标签选择器-->
div{
background-color:red;
}
p{
background-color:yellow;
font-size:30px;
color:white;
}
<!--类别选择器-->
.haha{
background-color:green;
}
<!--id选择器-->
#div1{
background-color:black;
}
</style>
</head>
<body>
<div class="haha" id="div1">DIV1</div>
<div id="div2">DIV2</div>
<div>DIV3</div>
<p class="haha">p1</p>
<p>p2</p>
<apan>span</apan>
</body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
11 JS 概述
/*要求:
* 1.定义变量
* 2.定义函数/调用函数
* 3.获取指定id的元素
* 4.提交表单
*/
index.html文件
<body>
你好
<a href="javascript:alert(22)">点我</a>
<div id="div1">DIV1的内容</div>
<div>DIV2的内容</div>
<div>DIV3的内容</div>
<form action="#" id="xx">
<input type="text" name="username"/>
<input type="button" value="提交" onclick="submitForm()"/>
</form>
</body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
index.js文件
function show(){
alert("哈哈,函数");
}
show();
function show(name){
alert("你好"+name);
}
show("乔峰");
show("阿朱");
function getSun(x,y){
return x+y;
}
var ret = getSun(2,5);
console.debug("结果="+ret);
function submitForm(){
//提交表单的代码
//获取表单对象
//var form = document.forms[0];
var form = document.getElementById("xx");
//提交表单
form.submit();
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
