一、HTML

1. B/S软件的结构

  • JavaSE C/S Client Server
  • B/S Browser Server

2. 网页的组成部分

  • 内容(结构)：是我们在页面中可以看到的数据。我们称之为内容。一般内容我们使用html技术来展示。
  • 表现：指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用CSS技术实现。
  • 行为：指的是页面中元素与输入设备交互的响应。一般使用javascript技术实现。

3. HTML简介

  • Hyper Text Markup Language (超文本标记语言) 简写：HTML。
  • HTML通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容(如：文字如何处理，画面如何安排，图片如何显示等)。

4. HTML文件的书写规范

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html> <!-- 约束，声明 -->
<html lang="en"> <!-- html标签表示html的开始 lang=“en”表示英文 html标签中一般分为两部分：head和body -->
<head> <!-- 头信息 -->
    <meta charset="UTF-8"> <!-- 表示当前页面使用UTF-8字符集 -->
    <title>fujang</title> <!-- 标题 -->
</head>
<body> <!-- body标签是整个html的页面主体内容 -->
    页面主体内容
</body>
</html> <!-- 表示整个 html 页面的结束 -->

<!-- 注释 可以在页面右键查看源代码中看到 -->

5. HTML标签介绍

  • 标签名大小写不敏感。
  • 标签拥有自己的属性：
    • 基本属性：bgcolor="red"，可以修改简单的样式效果。
    • 事件属性：onclick="alert('你好！');" ，可以直接设置事件响应后的代码。
  • 标签又分为：
    • 单标签(<标签名 />，br换行，hr水平)。
    • 双标签(<标签名> ...封装的数据...</标签名>)。
  • 标签中属性必须有值，属性值必须加引号。
  • 注释不能嵌套。

6. 常用标签介绍

6.1 font字体标签

1
2
3
4
5
6
7
8
9
10
body>
<!-- 字体标签
需求：在网页上显示“我是字体标签”，并修改字体为宋体，颜色为红色。
	font标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)：
		color属性修改颜色。
		face属性修改字体。
		size属性修改文本大小。
-->
<font color="red" face="宋体" size="7">我是字体标签</font>
</body>

6.2 特殊字符

显示结果 描述 实体名称
空格 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
" 引号 &quot;
' 单引号 &apos;(IE不支持)

6.3 标题标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
<!-- 
标题标签
需求：演示标题1到标题6
	h1最大
	h6最小
	align属性是对齐属性：
		left左对齐(默认)。
		center剧中。
		right右对齐。
-->
<h1 align="left">标题 1</h1>
<h2 align="center">标题 2</h2>
<h3 align="right">标题 3</h3>
<h4>标题 4</h4>
<h5>标题 5</h5>
<h6>标题 6</h6>
<h7>标题 7</h7>
</body>

6.4 超链接

1
2
3
4
5
6
7
8
9
10
11
12
<body>
<!-- a标签是超链接
	href属性设置连接的地址
	target属性设置哪个目标进行跳转
		_self表示当前页面(默认值)
		_blank表示打开新页面来进行跳转
-->

<a href="http://localhost:8080">百度</a><br/>
<a href="http://localhost:8080" target="_self">百度_self</a><br/>
<a href="http://localhost:8080" target="_blank">百度_blank</a><br/>
</body>

6.5 列表标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<!--
需求：使用无序列表方式把东北F4，赵四，刘能，小沈阳，宋小宝，展示出来
	ul是无序列表
	ol是有序列表
		type属性可以修改列表项前面的符号
	li是列表项
-->
<ul type="none">
    <li>赵四</li>
    <li>刘能</li>
    <li>小沈阳</li>
    <li>宋小宝</li>
</ul>
</body>

6.6 img标签

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
<body>
<!--
需求：使用img标签显示一张美女的照片。并修改宽高，和边框属性。
img标签是图片标签,用来显示图片
	src属性可以设置图片的路径
	width属性设置图片的宽度
	height属性设置图片的高度
	border属性设置图片边框大小
	alt属性设置当指定路径找不到图片时,用来代替显示的文本内容

在JavaSE中路径也分为相对路径和绝对路径：
	相对路径:从工程名开始算
	绝对路径:盘符:/目录/文件名

在web中路径分为相对路径和绝对路径两种
	相对路径:
		.表示当前文件所在的目录
		..表示当前文件所在的上一级目录
		文件名：表示当前文件所在目录的文件,相当于./文件名但是./可以省略。
	绝对路径:
		正确格式是: http://ip:port/工程名/资源路径
		错误格式是: 盘符:/目录/文件名
-->
<img src="1.jpg" width="200" height="260" border="1" alt="美女找不到"/>
<img src="../2.jpg" width="200" height="260" />
<img src="../imgs/3.jpg" width="200" height="260" />
<img src="../imgs/4.jpg" width="200" height="260" />
<img src="../imgs/5.jpg" width="200" height="260" />
<img src="../imgs/6.jpg" width="200" height="260" />
</body>

6.7 表格标签

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
<body>
<!--
需求1：做一个带表头的，三行，三列的表格，并显示边框。
需求2：修改表格的宽度，高度，表格的对齐方式，单元格间距。
table标签是表格标签
	border设置表格标签
	width设置表格宽度
	height设置表格高度
	align设置表格相对于页面的对齐方式 
	cellspacing设置单元格间距
	
	tr是行标签
	th是表头标签
	td是单元格标签
	align设置单元格文本对齐方式
	b是加粗标签
-->
<table align="center" border="1" width="300" height="300" cellspacing="0">
	<tr>
		<th>1.1</th>
		<th>1.2</th>
		<th>1.3</th>
	</tr>
	<tr>
		<td>2.1</td>
		<td>2.2</td>
		<td>2.3</td>
	</tr>
	<tr>
		<td>3.1</td>
		<td>3.2</td>
		<td>3.3</td>
	</tr>
</table>
</body>

6.8 跨行跨列表格

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
的单元格跨两行两列。
<body>
<!-- 
需求：新建一个五行，五列的表格
第一行，第一列的单元格要跨两列
第二行第一列的单元格跨两行
第四行第四列的单元格跨两行两列
	colspan属性设置跨列
	rowspan属性设置跨行
-->
<table width="500" height="500" cellspacing="0" border="1">
    <tr>
        <td colspan="2">1.1</td>
        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>
    <tr>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
    </tr>
    <tr>
        <td>4.1</td>
        <td>4.2</td>
        <td>4.3</td>
        <td colspan="2" rowspan="2">4.4</td>
    </tr>
    <tr>
        <td>5.1</td>
        <td>5.2</td>
        <td>5.3</td>
    </tr>
</table>
</body>

6.9 iframe框架标签(内嵌窗口)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
<br/>我是一个单独的完整的页面<br/>
<!--
ifarme标签可以在页面上开辟一个小区域显示一个单独的页面
	ifarme和a标签组合使用的步骤：
		在iframe标签中使用name属性定义一个名称。
		在a标签的target属性上设置iframe的name的属性值。
-->
<iframe src="3.标题标签.html" width="500" height="400" name="abc"></iframe>
<br/>
    
<ul>
    <li><a href="0-标签语法.html" target="abc">0-标签语法.html</a></li>
    <li><a href="1.font 标签.html" target="abc">1.font 标签.html</a></li>
    <li><a href="2.特殊字符.html" target="abc">2.特殊字符.html</a></li>
</ul>
</body>

6.10 表单标签

6.10.1 表单的显示

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
<body>
<!--
需求：创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。(性别单选)，兴趣爱好(多选)，国籍(下拉列表)。隐藏域，自我评价(多行文本域)。重置，提交。
-->
<!--
form标签就是表单
	input type=text是文件输入框，value设置默认显示内容
	input type=password是密码输入框，value设置默认显示内容
	input type=radio是单选框，name属性可以对其进行分组，checked="checked"表示默认选中
	input type=checkbox是复选框，checked="checked"表示默认选中
	select标签是下拉列表框
		option标签是下拉列表框中的选项，selected="selected"设置默认选中
	textarea表示多行文本输入框(起始标签和结束标签中的内容是默认值)
		rows属性设置可以显示几行的高度
		cols属性设置每行可以显示几个字符宽度
	input type=reset是重置按钮，value属性修改按钮上的文本
	input type=submit是提交按钮，value属性修改按钮上的文本
	input type=button是按钮，value属性修改按钮上的文本
	input type=file是文件上传域
	input type=hidden是隐藏域，当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域(提交的时候同时发送给服务器)

-->
<form>
    用户名称：<input type="text" value="默认值"/><br/>
    用户密码：<input type="password" value="abc"/><br/>
    确认密码：<input type="password" value="abc"/><br/>
    性别：<input type="radio" name="sex"/>男<input type="radio" name="sex" checked="checked" />女<br/>
    兴趣爱好：<input type="checkbox" checked="checked" />Java<input type="checkbox" />JavaScript<input
        type="checkbox" />C++<br/>
    国籍：<select>
    <option>--请选择国籍--</option>
    <option selected="selected">中国</option>
    <option>美国</option>
    <option>日本</option>
</select><br/>
    自我评价：<textarea rows="10" cols="20">我才是默认值</textarea><br/>
    <input type="reset" value="abc" />
    <input type="submit"/>
</form>
</body>

</html>

6.10.2 表单的格式化

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
54
<form>
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td> 用户名称：</td>
            <td>
                <input type="text" value="默认值"/>
            </td>
        </tr>
        <tr>
        	<td> 用户密码：</td>
            <td><input type="password" value="abc"/></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" value="abc"/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex"/>男
                <input type="radio" name="sex" checked="checked" />女
            </td>
        </tr>
        <tr>
            <td> 兴趣爱好：</td>
            <td>
                <input type="checkbox" checked="checked" />Java
                <input type="checkbox" />JavaScript
                <input type="checkbox" />C++
            </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td>
                <select>
                    <option>--请选择国籍--</option>
                    <option selected="selected">中国</option>
                    <option>美国</option>
                    <option>小日本</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea rows="10" cols="20">我才是默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset" /></td>
            <td align="center"><input type="submit"/></td>
        </tr>
    </table>
</form>
</body>

6.10.3 表单提交细节

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<body>
<!--
form标签是表单标签
	action属性设置提交的服务器地址
	method属性设置提交的方式GET(默认值)或POST

表单提交的时候，数据没有发送给服务器的三种情况：
	表单项没有name属性值
	单选、复选(下拉列表中的option标签)都需要添加value属性，以便发送给服务器
	表单项不在提交的form标签中

GET请求的特点是：
	浏览器地址栏中的地址是：action属性[+?+请求参数]
	请求参数的格式是：name=value&name=value
	不安全
	它有数据长度的限制

POST请求的特点是：
 	浏览器地址栏中只有action属性值
 	相对于GET请求要安全
 	理论上没有数据长度的限制
-->
<form action="http://localhost:8080" method="post">
    <input type="hidden" name="action" value="login" />
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td> 用户名称：</td>
            <td>
                <input type="text" name="username" value="默认值"/>
            </td>
        </tr>
        <tr>
            <td> 用户密码：</td>
            <td><input type="password" name="password" value="abc"/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" value="boy"/>男
                <input type="radio" name="sex" checked="checked" value="girl" />女
            </td>
        </tr>
        <tr>
            <td> 兴趣爱好：</td>
            <td><input name="hobby" type="checkbox" checked="checked" value="java"/>Java
                <input name="hobby" type="checkbox" value="js"/>JavaScript
                <input name="hobby" type="checkbox" value="cpp"/>C++
            </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td>
                <select name="country">
                    <option value="none">--请选择国籍--</option>
                    <option value="cn" selected="selected">中国</option>
                    <option value="usa">美国</option>
                    <option value="jp">小日本</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea name="desc" rows="10" cols="20">我才是默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset" /></td>
            <td align="center"><input type="submit"/></td>
        </tr>
    </table>
</form>
</body>

6.10 其他标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
<!--
需求：div、span、p标签的演示
	div标签，默认独占一行
	span标签，它的长度是封装数据的长度
	p段落标签，默认会在段落的上方或下方各空出一行来(如果已有就不再空)
-->
<div>div 标签 1</div>
<div>div 标签 2</div>
<span>span 标签 1</span>
<span>span 标签 2</span>
<p>p 段落标签 1</p>
<p>p 段落标签 2</p>
</body>

二、CSS

1. CSS技术介绍

  • CSS是层叠样式表单。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

2. CSS语法规则

1
2
3
选择器 p {
	属性：值;
}
  • 选择器：浏览器根据“选择器”决定受CSS样式影响的HTML。
  • 属性(property)：是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明，例如：p {color: blue}。
  • 多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号)。
  • CSS注释：/*注释内容*/

3. CSS和HTML的结合方式

3.1 第一种：在标签的style属性上修改

  • 在标签的style属性上设置"key:value value;"，修改标签样式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
需求分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色。
-->
	<div style="border: 1px solid red;">div 标签 1</div>
	<div style="border: 1px solid red;">div 标签 2</div>
	<span style="border: 1px solid red;">span 标签 1</span>
	<span style="border: 1px solid red;">span 标签 2</span>
</body>
</html>

3.2 第二种：在head标签中修改

  • 在head标签中，使用style标签来定义各种自己需要的css样式。
  • 只能在同一页面内复用代码，不能在多个页面中复用css代码。
  • 维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。
    1
    2
    3
    4
    格式如下：
    xxx {
    	Key : value value;
    }
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style 标签专门用来定义css样式代码 -->
    <style type="text/css">
/* 
需求：分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色。
*/
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid red;
        }
    </style>
</head>
<body>
	<div>div 标签 1</div>
	<div>div 标签 2</div>
	<span>span 标签 1</span>
	<span>span 标签 2</span>
</body>
</html>

3.3 第三种：通过link标签引入

  • 把css样式写成一个单独的文件，再通过link标签引入即可复用。
  • 使用html的<link rel="stylesheet" type="text/css" href="./styles.css" /> 标签 导入css样式文件。
  • CSS文件内容如下。
1
2
3
4
5
6
div{
	border: 1px solid yellow;
}
span{
	border: 1px solid red;
}
  • HTML文件代码如下。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- link标签专门用来引入css样式代码 -->
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
	<div>div 标签 1</div>
	<div>div 标签 2</div>
	<span>span 标签 1</span>
	<span>span 标签 2</span>
</body>
</html>

4. CSS选择器

4.1 标签名选择器

1
2
3
4
5
标签名选择器的格式是：
标签名{
	属性：值;
}
标签名选择器，可以决定哪些标签被动的使用这个样式。
  • 示例代码如下。
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器</title>
    <style type="text/css">
        div{
            border: 1px solid yellow;
            color: blue;
            font-size: 30px;
        }
        span{
            border: 5px dashed blue;
            color: yellow;
            font-size: 20px;
        }
    </style>
</head>
<body>
	<div>div 标签 1</div>
	<div>div 标签 2</div>
	<span>span 标签 1</span>
	<span>span 标签 2</span>
</body>
</html>

4.2 id选择器

1
2
3
4
5
id 选择器的格式是：
#id 属性值{
	属性：值;
}
id选择器，可以让我们通过id属性选择性的去使用这个样式。
  • 示例代码如下。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ID 选择器</title>
    <style type="text/css">
        #id001{
            color: blue;
            font-size: 30px;
            border: 1px yellow solid;}
        #id002{
            color: red;
            font-size: 20px;
            border: 5px blue dotted ;
        }
    </style>
</head>
<body>
	<div id="id002">div 标签 1</div>
	<div id="id001">div 标签 2</div>
</body>
</html>

4.3 class选择器

1
2
3
4
5
class类型选择器的格式是：
.class 属性值{
	属性：值;
}
class类型选择器，可以通过class属性有效的选择性地去使用这个样式
  • 示例代码如下。
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>class 类型选择器</title>
    <style type="text/css">
        .class01{
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;
        }
        .class02{
            color: grey;
            font-size: 26px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
	<div class="class02">div 标签 class01</div>
	<div class="class02">div 标签</div>
	<span class="class02">span 标签 class01</span>
	<span>span 标签 2</span>
</body>
</html>

4.4 组合选择器

1
2
3
4
5
组合选择器的格式是：
选择器 1，选择器 2，选择器 n{
	属性：值;
}
组合选择器可以让多个选择器共用同一个CSS样式代码。
  • 示例代码如下。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>class 类型选择器</title>
    <style type="text/css">
        .class01 , #id01{
            color: blue;
            font-size: 20px;
            border: 1px yellow solid;
        }
    </style>
</head>
<body>
	<div id="id01">div 标签 class01</div> <br />
	<span >span 标签</span> <br />
	<div>div 标签</div> <br />
	<div>div 标签 id01</div> <br />
</body>
</html>

5. 常用样式

  • 字体颜色：color:red，颜色可以写颜色名如：black, blue, red, green等。颜色也可以写rgb值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#。
  • 宽度：width:19px;，宽度可以写像素值：19px；，也可以写百分比值：20%；。
  • 高度：height:20px;，规则同宽度。
  • 背景颜色：background-color:#0F2D4C;。
  • 字体大小：font-size：20px;。
  • 边框：border：1px solid red，红色1像素实线边框。
  • DIV居中：margin-left: auto; margin-right: auto;。
  • 文本居中：text-align: center;。
  • 超链接去下划线：text-decoration: none;。
  • 列表去修饰：ul {list-style: none;}。
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>06-css 常用样式.html</title>
    <style type="text/css">
        div{
            color: red;
            border: 1px yellow solid;
            width: 300px;
            height: 300px;
            background-color: green;
            font-size: 30px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        table{
            border: 1px red solid;
            border-collapse: collapse;
        }
        td{
        	border: 1px red solid;
        }
        a{
            text-decoration: none;
        }
        ul{
            list-style: none;
        }
    </style>
</head>
<body>
<ul>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
</ul>
<table>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
    </tr>
</table>
<a href="http://www.baidu.com">百度</a>
<div>我是 div 标签</div>
</body>
</html>