HTML学习
Html是一种超文本标记语言,用于网页编程。
1. html的学习思想:
html都是标记性语言,中间写入数据,操作(丰富)数据需要更改标签的属性。
2. html的特点:
- 大多数都有开始和结束标记。例如:
<html></html> ,<head></head>
- 少数只有单个标记。
<br/><hr/>
- 标签必须要有结束标签 一对的{ }
单个的{
}
3.基本的格式
<标签 属性名=属性值 属性名=属性值>数据内容</标签>
一.字体的练习
<html>
<head>
<title>字体的基本使用</title>
</head>
<body>
<p>今天首先学习<font color=#CB080B size="+6">HTMl</font>的基本使用</p>
我<br/>爱<br/>你
<h1>我爱你<h1><hr/>
<h2>我爱你</h2>
<h3>我爱你</h3>
<h4>我爱你</h4>
<h5>我爱你</h5>
c<a b>d
5<7 5>2 <br/>
c<a b>d
<!--
浏览器中显示为:cd 5<7 5>2
原因: html为强标签性语言,html没有数字标签
会自动识别<ab>为标签,但是又解析不了,所以没有显示。
-->
<!--
特殊符号用:< 小于号
空格
-->
</body>
</html>
二、列表的学习
<html>
<head><title>列表的学习</title></head>
<body>
<!--列表-->
<dl>
<dt>技术部门</dt><!--dt是上层列表,dd列表相对于dt要缩进2个 ;的-->
<dd>java部</dd>
<dd>C++部</dd>
<dd>VB部</dd>
</dl><hr/>
<!--无序列表-->
<ul type="square">
<li>技术部门</li>
<li>java部</li>
<li>c++部</li>
</ul><hr/>
<!--有序列表-->
<ol type="A">
<li>技术部门</li>
<li>java部</li>
<li>c++</li>
</ol>
</body>
</html>
演示效果
三、图像标签
<html>
<head><title>图像标签的学习</title></head>
<body>
<!--列表-->
<img alt="哇塞,桌面图标" src="1.png" width="900" height="800" border=15>
</body>
</html>
四、表格学习
<html>
<head><title>表格的学习</title></head>
<body>
<!--表格
cellpadding="0" 内边距 字体靠表格最里面的框线距离为0
cellspacing="0" 单元格边距
colspan 单元格合并
rowspan="2" 行单元格合并
colspan="2" 列单元格合并
表格的下一级标签: 即使不定义也存在。<thead></thead> <tbody></tbody> <tfoot></tfoot> 可以分一段一段的下载,方便解析。
-->
<table width="200" height="300" border="2" bordercolor="#05AA37" cellpadding="100" cellspacing="
0">
<caption>表格的学习</caption>
<tr><!-- 表示行-->
<td>张三</td><!--单元格-->
<td>23</td>
</tr>
<tr>
<td>李四</td>
<td>23</td>
</tr>
</table><br/>
<table width="200" border="1" bordercolor=#000000 cellpadding=0 cellspacing="0">
<tr >
<td colspan="2">张三是大帅哥</td>
</tr>
<tr>
<td>李四也是</td>
<td>王五也是</td>
</tr>
</table><br/>
<table width="400" border="1" bordercolor="#09EB77" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2">张三是大帅哥</td>
<td>李四也是</td>
</tr>
<tr>
<td>王五也是</td>
</tr>
</table>
</body>
</html>
五、超链接学习
1.超链接的第一个作用:链接资源
<html>
<head><title>链接的学习</title></head>
<body>
<!--
1.连接资源
href 的属性值不同,解析方式不同。
如果没有指定,则是file解析方式,打开一个文件。
如果是指定是http 则是打开网页。
thunder: 启动迅雷。
target="_blank 新窗口打开
target="_parent 在本页内打开
-->
<a href="www.baidu.com" target="_blank">百度一下</a><br/> <!--在新选项卡打开-->
<a href="http://xinlang.com" target="_parent">新浪</a><br/><!--在本页打开-->
<a href="1.png" target="_self">打开一个图片</a><br/><!--在本页的视图中打开-->
<a href="thunder://lsfjkls " target="_blank">启动迅雷</a><br/>
<a href="javascript: void(0)" onClick="alert('我弹')">点击无反应,可以自定效果 我弹为效果</a><!--字体必须为单引号-->
</body>
</html>
2.超链接的第二个作用:做标记,俗称锚
主页的代码
<html>
<head><title>链接的学习</title></head>
<body>
<!--
<a name=top></a> 必须取一个名字作为一个标示
<a href=#top>回到顶部</a> 必须带有# 不然以默认file解析
-->
<a name=top></a>
<img src="1.png" width=800 height=900 border=10>
<a name=center></a>
<img src="1.png" width=800 height="900" border=1>
<a href=#top>回到顶部</a>
<a href=#center>回到中部</a>
</body>
</html>
六、框架的学习
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>框架的学习</title>
</head>
<!--
框架的好处:可以把固定的页面写在一个框架里,增加代码复用性。
框架的写法: 在</head>和<body>的开始中间。
框架的标签的标示:frameset 里面的框架标示: frame
<frame src="1.png"></frame> 框架里的内容是Src连接
下面实现的是一个 在本窗口内点击一个文件,显示在另一个窗口。
-->
<frameset rows="40%,*">
<frame src="day-1.html"></frame>
<frameset cols=40%,*>
<frame src="day-2.html" name=left></frame>
<frame marginwidth="300" marginheight="300" name=right></frame>
</frameset>
</frameset>
<body>
</body>
</html>
重点是day-2的代码如下:
<!doctype html>
<html>
<head><title>链接的学习</title></head>
<body>
<!--
1.连接资源
href 的属性值不同,解析方式不同。
如果没有指定,则是file解析方式,打开一个文件。
如果是指定是http 则是打开网页。
thunder: 启动迅雷。
target="_blank 新窗口打开
target="_parent 在本页内打开
-->
<h1>左边的页面</h1>
<hr/>
<a href="1.png" target="right" >打开图片</a><br/>
<a href="http://xinlang.com" target="_parent">新浪</a><br/>
<a href="1.png" target="_self">打开一个图片</a><br/>
<a href="thunder://lsfjkls " target="_blank">启动迅雷</a><br/>
<a href="javascript: void(0)" onClick="alert('我弹')">点击无反应,可以自定效果 我弹为效果</a><!--字体必须为单引号-->
</body>
</html>
day-1的代码
<html>
<head><title>链接的学习</title></head>
<body>
<!--
<a name=top></a> 必须取一个名字作为一个标示
<a href=#top>回到顶部</a> 必须带有# 不然以默认file解析
-->
<font color=#F3090D size="18"> 我的小可爱董宝宝</font>
</body>
</html>
七画中画
day-1的代码同上。
<!doctype html>
<html>
<head><title>链接的学习</title></head>
<body>
<!--
画中画标签: <iframe></iframe>
用处:可以在一个网页中显示多个网页,分开开发,高效。
-->
<iframe src="day-1.html">对不起您的浏览器不支持</iframe>
</body>
</html>
八、表单组件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单学习</title>
</head>
<!--
表单属性必须有 name和value 属性
-->
<body>
<form>
输入名称:<input type="text" name="user" value=""><br/>
输入密码:<input type="password" name="password" value=""><br/>
性别:<input type="radio" name=sex value="men">男<input type="radio" name="sex" value="women" checked>女<br/>
学科:<input type="checkbox" name="subject" value="java">Java<input type=checkbox name="subject" value="mysql">MYSQL<input type="checkbox" name="subject" value="html">HTML<br/>
文件:<input type="file" name="file" value=""><br/>
图片:<input type="image" src="1.png" name="image" value="" width="80" height="80"><br/>
隐藏组件<input type="hidden" name="hidden" value="hi"><br/><!--数据不需要客户知道,需要上传到服务器-->
按钮:<input type="button" name="but" value=么么哒 onClick="alert('我爱你董宝宝')"><br/>
国家:<select name="country">
<option value="none">选择国家</option>
<option value="cn">中国</option>
<option value=am>美国</option>
<option value=yingguo>英国</option>
</select><br/>
个人介绍:<textArea name="txt" ></textArea><br/><!--大量文本输入-->
<input type="reset" value="重置数据" name=reset> <input type=submit name="submit" value=提交数据>
</form>
</body>
</html>
显示如下
九、表单提交到服务器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单学习</title>
</head>
<!--
<form action="http://127.168.1.1:8000" method="get">
1.get的方法:
GET /?user=4564&pass=46546&pass=5464&sex=men&technology=java&country=null HTTP/1.1 请求头
Host: 127.168.1.1:8000
Connection: keep-alive
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 BIDUBrowser/8.7 Safari/537.36
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.8
DNT: 1
请求体与请求行间隔为一行。
2.post方法
POST / HTTP/1.1 请求行
Host: 127.168.1.1:8000
Connection: keep-alive
Content-Length: 63
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Origin: null
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 BIDUBrowser/8.7 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.8
DNT: 1
user=45&pass=45&pass=45&sex=women&technology=mysql&country=null 请求体
-->
<body>
<form action="http://127.168.1.1:8000" method="put">
<table border="1" bordercolor="#000000" cellpadding="6" cellspacing="0" width=800 height="600">
<tr>
<td align="center" colspan="2">注册表单</td>
</tr>
<tr>
<td>输入名称</td>
<td><input type="txt" name="user" ></td>
</tr>
<tr>
<td>输入密码</td>
<td><input type="password" name="pass"></td>
</tr>
<tr>
<td> 确认密码</td>
<td><Input type="password" name=pass ></td>
</tr>
<tr>
<td> 性别</td>
<td>男<input type="radio" name=sex value="men" checked> 女<input type="radio" name="sex" value="women"> </td>
</tr>
<tr>
<td>技术</td>
<td>JAVA<input type="checkbox" name="technology" value="java"> MYSQL<Input type="checkbox" name="technology" value=mysql></td>
</tr>
<tr>
<td>选择国家</td>
<td><select name="country">
<option value=null>-选择国家-</option>
<option value=zh>中国</option>
<option value="am">美国</option>
<option value="yg">英国</option>
</select></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="reset" value="清除数据"> <Input type="submit" value="提交数据"></td>
</tr>
</table>
</form>
</body>
</html>
1.get提交和post提交的区别:
get提交: 信息显示在地址栏中,不安全。
get将数据封装在请求头中。
post提交: 信息在请求体中,比较安全。
在服务端的区别: 提交中文后,服务器会用iso8859-1进行解码,会出现乱码。
之后再用iso8859-1进行重新编码,然后再用指定的编码进行解码。
这种方法对get和post方法都适用。
post方法提交的数据,在服务器端有个request对象中setcharacterEncoding方法可以直接传入中文码表,就可以解码。
**只对请求体中的数据管用。**
十、头部标签的学习
<!doctype html>
–>
我想飞起来<b>今天</b>我在学习<u>java</u>,<i>有你很开心</i>。
<pre>可以将文本按代码的格式
显示在浏览器中。</pre>
十一、区域标签
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>区域标签学习</title>
</head>
<!--
<p>标签结束后,空一行。
<div>相当于行标签
<span>相当于单元格标签
-->
<body>
<div>区域1</div>
<div>区域二</div>
<span>区域1</span>
<span>区域2</span>
<p>区域1</p>
<p>区域2</p>
</body>
</html>