1、思维导图
首先为大家提供本文所要阐述的知识点的思维导图,帮助大家更好的了解本文要阐述的知识。
2、HTML简介
Hyper Text Markup Language(超文本标记语言) 简写:HTML标记语言,我们也叫标签语言,Html通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)2.1、创建html文件
1.用记事本方式创建 html 文件。
1).先打开window记事本程序
2).在记事本中。书写你要显示的内容
3).保存记事本文件为.html后缀名,然后用浏览器打开访问
2.用Eclipse 创建html 文件。
1)我们要创建一个静态的web工程
在web工程中有一个目录叫webContent 这个目录下放的是web的静态资源文件。html,CSS。图片等等
2)在webContent目录下创建html文件。
<!DOCTYPE html>
<html> <!-- 表示整个html文件的开始 -->
<head> <!-- head标签是头信息标签,主要包含三部分内容。标题信息,CSS样式信息。还有JavaScript代码 -->
<meta charset="UTF-8"> <!-- 告诉浏览器当前页面使用UTF-8编码来查看页面 -->
<title>我很帅</title> <!-- title就是标题 -->
</head>
<body> <!-- body标签是整个html要显示的主体内容 -->
hello world!
</body>
</html> <!-- 表示整个html文件的结束 -->
注:Java文件是需要先编译,再由java虚拟机跑起来。但Html 文件它不需要编译,直接由浏览器进行解析执行。
2.2、html文件的书写规范
<html> <!--表示整个html文件的开始 -->
<head> <!-- 是整个html头部信息 主要包括三部分内容1.标题信息,2.CSS样式信息,3.JavaScript代码-->
<title>html标题</title> <!-- 这是html标题信息 -->
</head>
<body> <!-- body标签是整个html页面要显示的主体内容 -->
……
</body>
</html><!--表示整个html文件的结束 -->
html中多行注释的快捷键 Shirt + Ctrl + / 取消多行注释 Shirt + Ctrl + \
Html 的代码注释 <!-- 这是html 注释,可以在页面右键查看源代码中看到 -->
2.3、html标签介绍
1.标签的格式: <标签名>封装的数据</标签名>
2.标签名大小写不敏感。3.标签拥有自己的属性。
基本属性:bgcolor="red"
事件属性: οnclick="alert('你好!');"
4.标签又分为,单标签和双标签。
单标签格式: <标签名 />
双标签格式: <标签名> ...封装的数据...</标签名>
标签的语法:
<!-- ①标签不能交叉嵌套 -->
正确:<div><span>早安!</span></div>
错误:<div><span>早安!</div></span>
<hr />
<!-- ②标签必须正确关闭 -->
<!-- i.有文本内容的标签: -->
正确:<div>早安!</div>
错误:<div>早安!
<hr />
<!-- ii.没有文本内容的标签: -->
正确:<br />
错误:<br>
<hr />
<!-- ③属性必须有值,属性值必须加引号 -->
正确:<font color="blue">早安!</font>
错误:<font color=blue>早安!</font>
错误:<font color>早安!</font>
<hr />
<!-- ④注释不能嵌套 -->
正确:<!-- 注释内容 --> <br/>
错误:<!-- <!-- 这是错误的html注释 --> -->
<hr />
注意事项:html 代码不是很严谨。有时候标签不闭合,也不会报错。
2.4、常用标签介绍
2.4.1、font字体标签
font字体标签它可以显示文件内容需求1:在网页上显示 我是字体标签 ,并修改字体为 宋体,颜色为红色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.font标签.html</title>
</head>
<body>
<!-- 字体标签
需求1:在网页上显示 我是字体标签 ,并修改字体为 宋体,颜色为红色。
face 属性修改文本的字体
color 属性修改文本的颜色
size 属性修改文本的大小 它有有效范围是 1 - 7
-->
<font face="宋体" color="red" size="7">我是字体标</font>
</body>
</html>
2.4.2、特殊字符
需求1:把 <br> 换行标签 变成文本 转换成字符显示在页面上<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2.特殊字符.html</title>
</head>
<body>
<!-- 特殊字符
需求1:把 <br> 换行标签 变成文本 转换成字符显示在页面上
因为<>这种特殊的字符,在html中是拥有含义含义
< 特殊字符 <
> 特殊字符 >
空格 特殊字符
在html中它会把连接的字格当成一个空格来处理。
-->
我是 <br > <br/>
我很 帅.
</body>
</html>
2.4.3、标题标签
需求1:标题1到 标题6的演示<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.标题标签.html</title>
</head>
<body>
<!-- 标题标签
需求1:标题1到 标题6的演示
h1表示最大的标题
标题标签是h1 - h6
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>
</body>
</html>
2.4.4、超链接 ( **** 重 点 ,必 须 掌 握 * )
超连接我们使用 <a>标签去定义需求1:普通的 超连接。
需求2:网页常见,**联系我们**,可以发邮件
需求3:迅雷的下载连接
需求4:javaScript的连接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4.超链接.html</title>
</head>
<body>
<!-- 超链接
需求1:普通的 超连接。
<a href="http://www.baidu.com" target="_blank">百度 _blank</a>
需求2:网页常见,**联系我们**,可以发邮件
<a href="mailto:491581714@qq.com">联系我们</a>
需求3:迅雷的下载连接
<a href="thunder://1234123412341243.avi">蓝波.avi</a>
需求4:javaScript的连接
<a href="javascript:alert('坑你坑你.com');" >忽悠你</a>
a标签是超连接标签
href 属性设置超连接的连接地址
target 属性设置哪个目标窗口去进行加载连接
_self 默认 表示当前窗口加载连接
_blank 表示打开一个新的窗口加载连接
-->
<a href="http://www.baidu.com" target="_self">百度 _self</a>
<a href="http://www.baidu.com" target="_blank">百度 _blank</a>
<a href="mailto:491581714@qq.com">联系我们</a>
<a href="thunder://1234123412341243.avi">蓝波.avi</a>
<a href="javascript:alert('坑你坑你.com');" >忽悠你</a>
<a href="javascript:void(0)" οnclick="alert(1);">忽悠你2</a>
</body>
</html>
2.4.5、列表标签
有序列表和无序列表,有序列表即列表前按1、2、3...标注,无序列表则是有菱形或圆形标注。无序列表 ul li
有序列表 ol li
需求1:分别有序,无序,列表方式,把东北F4显示出来,刘能、小沈阳,宋小宝、赵四
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
需求1:分别有序,无序,列表方式,把东北F4显示出来,刘能、小沈阳,宋小宝、赵四
ul 是无序列表标签
li 是列表标签中的每一项
type属性可以修改li列表的符号 或者 序号
ol 是有序列表标签
li 是列表中的每一项
-->
<ul type="square">
<li>刘能</li>
<li>小沈阳</li>
<li>宋小宝</li>
<li>赵四</li>
</ul>
<br/>
<ol type="1">
<li>刘能</li>
<li>小沈阳</li>
<li>宋小宝</li>
<li>赵四</li>
</ol>
</body>
</html>
2.4.6、img标签
<img src=”” alt=”” >src 属性设置图片的源路径
alt 属性是设置当图片找不到的时候,用来替代显示的文本内容
需求1:使用img标签显示一张美女的照片。并修改宽高,和边框属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5.img标签.html</title>
</head>
<body>
<!--
需求1:使用img标签显示一张美女的照片。并修改宽高,和边框属性
相对路径
. 当前文件的目录
.. 表示上一级目录
./ 可以省略
绝对路径
C:\\1.jpg 这是错误的
http://127.0.0.1:8080/abc/1.jpg 正确的绝对路径
http://www.baidu.com/xxx/2.jpg
img 标签是图像标签
alt 属性是设置当图片找不到的时候,用来代替显示的文本内容
src 属性是图片的源路径
width 属性是设置图片的宽度
height 属性设置 图片的高度
border 属性设置图片的边框
-->
<img width="100" height="130" border="1" alt="图片丢失了!" src="../imgs/1.jpg" />
<img width="100" height="130" border="1" alt="图片丢失了!" src="0.jpg" />
<img width="100" height="130" border="1" alt="图片丢失了!" src="../10.jpg" />
</body>
</html>
2.4.7、表格标签( **** 重点 )
table: 表格标签tr: 表格中的行标签
td :表格中行的列标签
需求1:做一个 带表头的 ,三行,三列的表格,并显示边框
需求2:修改表格的宽度,高度,表格的对齐方式,单元格间距。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>6.表格标签.html</title>
</head>
<body>
<!--
需求1:做一个 带表头的 ,三行,三列的表格,并显示边框
需求2:修改表格的宽度,高度,表格的对齐方式,单元格间距。
center是居中
table 标签是 表格标签
border 属性设置表格的边框
cellpadding 属性设置单元格的内边距
width 属性设置表格的宽度
height 属性设置表格的高度
cellpadding 设置单元格的内边距
cellspacing 设置单元格的间距
tr 是表格的行标签
td 是表格的单元格标签
th 是表格的表头标签 居中、加粗
b 标签是加粗标签
-->
<center>
<table border="1" width="200" height="200" cellpadding="10" 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>
</center>
</body>
</html>
2.4.8、跨行跨列表格 (* 次重点 *)
rowspan 属性: 设置 跨行colspan 属性: 设置 跨列
需求1:新建一个五行,五列的表格,第一行,第一列的单元格要跨两列,第二行第一列的单元格跨两行,第四行第四列的单元格跨两行两列。
<!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>
<!--
需求1:新建一个五行,五列的表格,
第一行,第一列的单元格要跨两列,
第二行第一列的单元格跨两行,
第四行第四列的单元格跨两行两列。
-->
<center>
<h1>表格的跨行跨列</h1>
<table border="1" width="500" cellspacing="0" height="500">
<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>
</center>
</body>
</html>
2.4.9、了解iframe框架标签 (内嵌窗口)
iframe 是在当前页面中内嵌一个小的窗口<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>8.iframe标签.html</title>
</head>
<body>
iframe
<!--
iframe是在当前浏览器窗口中内嵌一个小窗口
src 属性设置小窗口的html源路径
-->
<iframe name="iiframe" width="300" height="300" src="4.超链接.html"></iframe>
<!--
1.先使用a标签设置好href属性,也就是iframe要去加载的新的html页面的路径
2.给iframe添加一个name属性值,起一个名字做标识
3.设置target属性值 为 iframe和name属性值
_self 当前页面
_blank 新的窗口
-->
<a href="5.img标签.html" target="iiframe">修改iframe连接5.img标签.html</a>
</body>
</html>
2.4.10、表单标签 ( ***** 重点 * )
需求1:创建一个个人信息注册的表单界面。包含用户名,密码,确认密码。性别(单选),性趣爱好(多选),国籍(下拉列表)。
隐藏域,自我评价(多行文本域)。重置,提交。效果如下图:
<!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>
<style type="text/css">
textarea{
vertical-align: bottom;
}
</style>
</head>
<body>
<!--
需求1:创建一个个人信息注册的表单界面。包含用户名,密码,确认密码。性别(单选),性趣爱好(多选),国籍(下拉列表)。
隐藏域,自我评价(多行文本域)。重置,提交。
form 标签是表单标签
input 标签是表单的表单项
type = text 表示普通的文本输入框 value 属性表示输入框里的默认值
type = password 表示密码输入框 value属性是密码框里的默认值
type = radio 是单选框 name属性可以给单选框进行分组。在同一组里面单选框只能选择一个
checked 属性表示默认选中
type = checkbox 表示复选框 checked属性可以设置默认被选中
type = submit 表示表单的提交 按钮 value属性设置按钮显示的文本
type = reset 表单重置按钮 value属性值是按钮上显示的文本
type = file 是文件上传表单项
type = button 是按钮 标签
select 标签是下拉列表框
option 标签是下拉列表中的每一项 selected="selected" 表示默认选中
textarea 是多行文本输入框
rows 属性设置 它的高度
cols 属性设置 它的宽度
多行文本输入框的默认值是起始标签和结束标签中间的文本内容
button标签也是按钮,在button起始标签和结束标签里的文本,就是按钮 显示的文本
-->
<form action="http://www.baidu.com">
<table border="1">
<tr>
<td>用户名:</td>
<td><input type="text" value="abc"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" value="wzg168" /></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女
</td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td>
<input type="checkbox" checked="checked"/>学习
<input type="checkbox" />睡觉
<input type="checkbox" />看动画片
<input type="checkbox" />看宝宝的电影
</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="submit" value="提 交" />
</td>
<td align="center">
<input type="reset" value="重 置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
2.4.11、form表单的细节 ( ***** 重点 * )
需求1:模拟tomcat 接收表单的提交信息。问题1:表单action,method都有什么作用。
action属性: 设置 表单提交到服务器的地址
method属性: 设置 表单提交的方式
问题2:为什么表单内容没有提交过去。
1.表单项没有添加name属性值
2.没有被form标签包起来
问题3:get方式和post方式提交有什么不同
GET请求:
1.不安全
2.浏览器地址栏有长度限制
POST请求
它会把所有的表单项以name=value&name=value的形式进行拼接,然后以二进制流的形式发送到服务器浏览器地址里,只有form表单action的属性值,
POST请求的特点:
1.安全
2.它可以发送大量数据到服务器
<!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>12-表单提交详细</title>
<style type="text/css">
textarea{
vertical-align: bottom;
}
</style>
</head>
<body>
<!--
127.0.0.1 是访问本机的IP地址
form 标签是表单标签
action 属性设置表单提交到服务器的地址
method 属性设置表单提交的方式 GET POST
在form表单里,只有给表单项添加name属性值,表单项在提交的时候,才会被提交到服务器。
在get请求中,浏览器地址栏的地址是action?name=value&name=value
Get 请求会把每一个表单项以name=value&name=value的形式进行字符串的拼接。
所以get请求式地址栏的完整地址格式是
action?name=value&name=value
get请求特点:
1.不安全
2.浏览器地址栏有长度限制
POST请求
它会把所有的表单项以name=value&name=value的形式进行拼接,然后以二进制流的形式发送到服务器
浏览器地址里,只有form表单action的属性值,
POST请求的特点:
1.安全
2.它可以发送大量数据到服务器
-->
<form action="http://127.0.0.1:8080" method="POST">
<table>
<tr>
<td>用户名:</td>
<td><input name="username" type="text" value="abc"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input name="password" type="password" value="wzg168" /></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" checked="checked" value="boy"/>男
<input type="radio" name="sex" value="girl"/>女
</td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td>
<input name="hobby" value="学习" type="checkbox" checked="checked"/>学习
<input name="hobby" value="睡觉" type="checkbox" />睡觉
<input name="hobby" value="看动画片" type="checkbox" />看动画片
<input name="hobby" value="看宝宝的电影" type="checkbox" />看宝宝的电影
</td>
</tr>
<tr>
<td>国家:</td>
<td>
<select name="country">
<option value="none">--请选择国家--</option>
<option value="cn" selected="selected">中国</option>
<option value="jp">日本</option>
<option value="kr" >韩国</option>
</select>
</td>
</tr>
<tr>
<td>自我介绍:</td>
<td>
<textarea name="desc" rows="10" cols="20"></textarea>
</td>
</tr>
<tr>
<td>
<input type="submit" value="提 交" />
</td>
<td align="center">
<input type="reset" value="重 置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
这是GET请求方式收到的数据
GET /?sex=on HTTP/1.1
Host: 127.0.0.1:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:48.0) Gecko/20100101 Firefox/48.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Upgrade-Insecure-Requests: 1
POST请求接收的数据格式
post 的http请求格式 分三段
请求行
请求头
空行
请求体
地址栏显示:username=abc&password=123456&sex=boy&hobby=%E5%AD%A6%E4%B9%A0&hobby=%E7%9D%A1%E8%A7%89&country=cn&desc=asdfPOST / HTTP/1.1
Host: 127.0.0.1:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:48.0) Gecko/20100101 Firefox/48.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Content-Type: application/x-www-form-urlencoded
Content-Length: 107
2.4.12其他标签
需求1:div、span、p标签的演示div 块标签: 经常和CSS组合使用来进行布局
span 内联标签: 它主要用来显示文本
p 段落标签:表示是一个段落
<!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>
<!-- div 块标签 经常和CSS组合使用来进行布局 -->
<!-- span 内联标签 它主要用来显示文本 -->
<!-- p 段落标签 -->
<!--
div是块标签,它会自动的独占一行
span 是内联标签 这的宽度就是它封装的文本的宽度
p 段落标签它会自动的上方和下方,各空出一行来
-->
<div>div标签1</div>
<div>div标签1</div>
<span>span标签1</span>
<span>span标签2</span>
<p>段落1</p>
<p>段落2</p>
</body>
</html>