HTML 入门第一课

HTML学习

Html是一种超文本标记语言,用于网页编程。

1. html的学习思想:

html都是标记性语言,中间写入数据,操作(丰富)数据需要更改标签的属性。

2. html的特点:

  1. 大多数都有开始和结束标记。例如:<html></html> ,<head></head>
  2. 少数只有单个标记。<br/><hr/>
  3. 标签必须要有结束标签 一对的{ }
    单个的{
    }

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&lt;a &nbsp;&nbsp;&nbsp; b&gt;d
<!--
	浏览器中显示为:cd 5<7 5>2   
	原因: html为强标签性语言,html没有数字标签
			会自动识别<ab>为标签,但是又解析不了,所以没有显示。
-->
<!--
特殊符号用:&lt; 小于号
			&nbsp;   空格	
-->
			
	</body>
</html>





字体练习的输出结果

二、列表的学习

<html>
	<head><title>列表的学习</title></head>
	<body>
	<!--列表-->
	<dl>
		<dt>技术部门</dt><!--dt是上层列表,dd列表相对于dt要缩进2个&nbsp;的-->
		<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>&nbsp;&nbsp; <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>

在这里插入图片描述

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

m0_37347413

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值