01__HTML语言

HTML语言

1. html的简介

(1)什么是html?HyperText Mark-up Language ,超文本标记型语言,是网页的语言。
* 超文本超文本:超出文本的范畴
* 标记:理解为标签,html中所有的操作都是通过标签来实现的
* html是做网页。

第一个html程序

<html>
	<head>
		<title>html程序</title>
	</head>

	<body>
		<FONT color="red" size="5">这是我的第一个html程序</FONT><br/>
		<FONT color="green" size="7">这是我的第一个html程序二</FONT>
	</body>
</html>

(2)html程序遵循一定的规范
第一个:html程序以<html>开始,同时</html>结束
* 比如创建java里面方法,public void add() { 方法体 }
第二个:html程序包含两部分内容:head和body

<html>
	<head>设置页面信息</head>
	<body>显示到页面上的内容</body>
</html>

第三个:html的标签有开始标签,同时也要结束标签
第四个:html的代码不区分大小写的
第五个:有些标签没有结束标签,需要在标签内结束 eg:<br/>
* 实现换行的操作,使用标签实现的<br>, 没有</br>

(3)html的操作思想
* 在网页中可能有很多的数据,不同的数据可能需要不同的显示效果,这个时候需要使用标签把要操作的数据包起来(封装),通过修改标签的属性值来实现标签内数据样式的变化。标签相当于一个容器,通过修改容器的属性值,实现容器内数据样式的变化。

2. 字体标签

(1)文字标签 <font>
<font color="设置文字颜色" size="文字的大小">要操作的文字的内容</font>
常用两个属性
color:设置文字的颜色
有三种表示方式
第一种:直接使用英文单词进行表示 red green yellow…
第二种:使用十六进制数字进行表示 #ffffff,
第三种:通过RGB,使用RGB颜色值配置 rgb(255,0,0)
size:设置文字的大小
文字大小值范围:1-7,如果值超过了7,使用还是7的效果

(2)标题标签<h1></h1> <h2></h2>.......<h6></h6>
标题标签可以自动换行,从h1到h6字体的大小依次变小的

(3)水平线标签(这个标签没有结束标签)<hr/>
属性
color:表示设置水平线颜色
size:设置水平线的粗细,范围1-7

(4)注释标签
在java里面有几类注释?三类注释
单行注释,多行注释,文档注释
在html中注释<!-- 注释的内容 -->
使内容不在html页面中进行显示

(5)特殊字符
实现空格的操作 eg. &nbsp;

<html>
 <head>
  <title>html示例</title>
 </head>
 <body>
	<font color="red" size="5">这是我要操作的文字</font>
	<br/>
	<font color="#33cc66" size="7">这是颜色的第二种表示方法</font>
	<br/>
	<font color="rgb(255,0,0)" size="10">这是颜色的第三种表示方法</font>
	<h1>这是标题一</h1>
	<h2>这是标题二</h2>
	<h6>这是标题三</h6>
	<hr color="blue" size="7"/>
	<br/>
	<!-- 这是html的注释 -->
	<font color="rgb(255,0,0)" size="10">要实现&nbsp;&nbsp;&nbsp;&nbsp;空格的效果</font>
 </body>
</html>

3. 列表标签

(1)想要实现:
传智播客java学院人事部学工部
* 首先需要使用 <dl></dl>:定义列表的范围
* 在dl标签里面,<dt></dt>:定义上层内容
* 在dl标签里面, <dd></dd>:定义下层内容

(2)有序列表标签

* 使用 <ol></ol>: 定义有序列表的范围(默认的排序是1,2,3)
** ol标签上面有属性 type:排序的方式
** type属性里面的值 1 a i
* 之后在ol标签里面:<li></li>: 封装具体的内容

(3)无序列表标签
(特殊符号)java学院
(特殊符号)人事部
(特殊符号)学工部
* 首先使用标签 <ul></ul>: 定义无序列表的范围(默认的排序是disc)
** ul标签上面有属性 type:设置特殊符号
** type属性里面的值 disc circle square
* 之后在ul标签里面: <li></li>: 封装具体的内容

<html>
 <head>
  <title>html示例</title>
 </head>
 <body>
	<dl>
	 <dt>传智播客</dt>
	 <dd>java学院</dd>
	 <dd>人事部</dd>
	 <dd>学工部</dd>
	</dl>
	<hr/>
	<ol type="i">
	 <li>java学院</li>
	 <li>人事部</li>
	 <li>学工部</li>
	</ol>
	<hr/>
	<ul type="square">
	 <li>java学院</li>
	 <li>人事部</li>
	 <li>学工部</li>		
	</ul>
 </body>
</html>

4. 图形标签

(1)在html中显示图片
(2)标签:<img src="图片的路径名称"/>
(3)属性:
* src:图片的路径名称
* width:图片宽度
* height:图片的高度
* border:图片的边框的粗细
* alt:显示在图片上面的内容
** 鼠标移动到图片上面,稍等片刻出现文字
** 如果图片找不到,显示alt的内容
*** 这个属性在某些浏览器不能显示的

<html>
 <head>
  <title>html示例</title>
 </head>
 <body>
	<img src="c.jpg" border="5" width="400" height="400" alt="这是熊出没"/>
 </body>
</html>

5. 超链接标签

(1)什么是超链接:点击打开新的内容
(2)标签:<a href="链接到的地址">显示在页面上的内容</a>
* 代码 <a href="hello.html">显示在页面上的内容</a>
(3)属性
* href:链接到地址
* target:超链接的打开方式
** 在默认的情况下,打开方式在当前的页面打开
** target里面的值:_self,当前页面打开; _blank,在新标签页打开

<html>
 <head>
  <title>html示例</title>
 </head>
 <body>
	<a href="hello.html" target="_self">显示在页面上的内容</a>
 </body>
</html>

6. 表格标签

操作技巧:
首先数表格里面有多少行,数每行里面有多少个单元格
(1)什么是表格:对数据进行格式化,使数据显示更加清晰,结构分明
(2)标签
* 首先定义表格的范围:<table></table>
** 属性
*** border:设置表格线
*** bordercolor:设置表格线的颜色
*** cellspacing:设置单元格之间的距离
*** cellpadding:设置文字和单元格之间的距离
*** width:设置表格的宽度
*** height:设置表格的高度
* 在table标签里面表示行:<tr></tr>
** 属性
*** align:设置对齐方式,值 left center right
* 在tr标签里面表示列:
** 属性
*** align:设置某个单元格对齐方式
* 在tr标签里面也可以表示单元格:<th></th>
** 实现居中和加粗的效果

<html>
 <head>
  <title>html示例</title>
 </head>
 <body>
	<table border="1" bordercolor="blue" cellspacing="0" cellpadding="10" width="400">
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
		</tr>
		<tr align="left">
			<td>东方不败</td>
			<td>100</td>
			<td></td>
		</tr>
		<tr align="right">
			<td>岳不群</td>
			<td>200</td>
			<td></td>
		</tr>
		<tr>
			<td align="center">林平之</td>
			<td>300</td>
			<td>未知</td>
		</tr>
	</table>
 </body>
</html>

(3)合并单元格
* 是在td标签上面进行的操作,使用两个属性
** rowspan:跨行
*** 代码 <th rowspan="4">人员信息3人</th>
** colspan:跨列
*** 代码 <td colspan="3">统计信息3人</td>

(4)标题标签:<caption>标题内容</caption>

<html>
 <head>
  <title>html示例</title>
 </head>
 <body>
	<!-- 
	有多少行:4行 
	每行有多少个单元格:
	第一行有三个
	第二行到第四行有两个
	-->
	<table border="1" bordercolor="blue" cellspacing="0" cellpadding="10" width="400">
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th rowspan="4">人员信息3</th>
		</tr>
		<tr>
			<td>东方不败</td>
			<td>100</td>
		</tr>
		<tr>
			<td>岳不群</td>
			<td>200</td>
		</tr>
		<tr>
			<td>林平之</td>
			<td>300</td>
		</tr>
	</table>
	<hr/>
	<!--
	有多少行:4
	每行有多少个单元格:
	第一行到第三行有3个
	第四行有1-->
	<table border="1" bordercolor="blue" cellspacing="0" cellpadding="10" width="400">
		<caption>人员信息</caption>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
		</tr>
		<tr>
			<td>东方不败</td>
			<td>100</td>
			<td></td>
		</tr>
		<tr>
			<td>岳不群</td>
			<td>200</td>
			<td></td>
		</tr>
		<tr>
			<td colspan="3">统计信息3</td>
		</tr>
	</table>
 </body>
</html>

7. 表单标签

(1)什么是表单?把输入的数据提交到服务器上(存到服务器),这个过程称为表单。
(2)表单如何实现?使用表单标签实现数据提交到服务器上这个过程。
(3)form 标签:如果写表单,首先定义表单的范围。
* 属性
** action:提交的服务器的地址
** method:表单的提交方式(有很多种,常见的有两种 get和post)
*** 代码:<form action="hello.html" method="get"></form>
** get和post提交,在默认情况下,提交方式是get提交
*** get提交方式会在地址栏携带数据,安全性很差
*** post提交方式地址栏不会携带数据,安全性比较高,数据在请求体里面(讲到http协议时候详细说)
(4)输入项:可以输入内容或者选择内容的地方
** 要求1:输入项里面必须要有name属性
** 要求2:在单选输入项和复选输入项以及下拉选择输入项里面
都需要有属性value设置的值
* 输入项需要写到form标签里面
* 大部分输入项是通过标签input进行封装操作的
** <input type="输入项的类型"/>
第一个:普通输入项
第二个:密码输入项
第三个:单选输入项
** 要求:单选输入项里面必须有name属性,同时name的属性值必须要相同
** 设置默认选中,使用属性 checked=“checked”
第四个:复选输入项 <input type="checkbox"/>
** 要求:单选输入项里面必须有name属性,同时name的属性值必须要相同
** 设置默认选中,使用属性 checked=“checked”
第五个:文件输入项,上传文件的。<input type="file"/>
第六个:隐藏项<input type="hidden"/>
** 这个值不会显示在页面上,但是提交表单也可以提交到服务器上
第七个:普通按钮 <input type="button"/>
** 可以写value属性,设置输入项的默认值
(5)下面的两个输入项不是使用input标签进行封装的
第八个:下拉选择输入项
* 使用属性 selected=“selected” 默认选中

<select>
		<option>AAAA</option>
		<option>BBBB</option>
		<option>CCCC</option>
	</select>

第九个:文本域。<textarea cols="10" rows="5"></textarea>
(6)提交按钮和其他的按钮
* 提交按钮: <input type="submit"/>
** 属性 value:设置提交按钮显示的内容
** 点击提交按钮:地址发生了变化
eg:file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html?sex=on&love=on&love=on
** 在输入项上面写name属性之后,提交表单
eg:file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html?username=wangwu&password=123456&sex=on&love=on&love=on&love=on&hid=bbbb&xueli=AAAA&des=test
** 在单选框、复选框和下拉选择框里面设置了value之后,提交表单
eg:file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html?username=aaaa&password=123456&sex=nan&love=l&love=p&love=y&hid=bbbb&xueli=ccc&des=test
* 重置按钮:<input type="reset"/>
** 属性 value:设置重置按钮显示的内容
** 不是做清空表单输入项的操作,使表单输入项回到初始状态
* 使用图片进行提交:<input type="image" src="图片路径"/>

<html>
 <head>
  <title>html示例</title>
 </head>
 <body>
	<form action="hello.html" method="post">
		username:<input type="text" name="username" value="aaaa"/>
		<br/>
		password: <input type="password" name="password"/>
		<br/>
		sex: <input type="radio" name="sex" value="nan"/><input type="radio" name="sex" checked="checked"    value="nv"/><br/>
		love: <input type="checkbox" name="love"  value="l"/>篮球 <input type="checkbox" name="love"  value="p"/>乒乓球
		<input type="checkbox" name="love"  checked="checked"  value="y"/>羽毛球
		<br/>
		file: <input type="file"/>
		<br/>
		hidden: <input type="hidden" name="hid" value="bbbb"/>
		<br/>
		<input type="button" value="普通按钮"/>
		<BR/>
		下拉选择:<select name="xueli">
		 <option>--请选择--</option>
		 <option value="aaa">AAAA</option>
		 <option selected="selected" value="bbb">BBBB</option>
		 <option value="ccc">CCCC</option>
	    </select>
		<br/>
		自我描述:<textarea name="des" cols="10" rows="5"></textarea>
		<br/>
		<input type="submit" value="提交"/>
		<input type="reset" value="重置111"/>
		<br/>
		<input type="image" src="c.jpg"/>
	</form>
 </body>
</html>

8. 其他的标签的使用

(1)pre:原样输出
p:段落标签
s:删除线
u: 下划线
b:加粗
i:斜体

<html>
 <head>
  <title>html示例</title>
 </head>
 <body>
	<!-- pre -->
	<pre>
	public static void main(String[] args) {
		System.out.....
	}
	             abcdef
	</pre>
	<hr/>
	<s>天之道,</s>损有余而补不足,<p>是故虚胜实,不足胜有余。</p>
	<hr/>
    <b>其意博,</b>其理奥,<u>其趣深,</u>天地之象分,<i>阴阳之候列。</i>
 </body>
</html>

(2)div : 自动换行
span:在一行进行显示

<html>
 <head>
  <title>html示例</title>
 </head>
 <body>
	<div>变化之由表</div>
	<div>死生之兆彰,</div>
	<div>不谋而遗迹自同</div>
	<hr/>
	<span>天之道,</span>
	<span>损有余而补不足,</span>
	<span>是故虚胜实</span>
 </body>
</html>

9. 案例:注册页面

(1)如果单元格里面没有内容,使用占位符替代(使用空格 )
(2)想要一个超链接没有效果,在href属性值写成#

<html>
 <head>
  <title>html示例</title>
 </head>
 <body>
	<h3>免费开通黑马账号</h3>
	<form method="get">
	<table border="0" cellpadding="10">
		<tr>
			<td>注册邮箱:</td>
			<td><input type="text" name="email"/></td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>使用手机号或者账号注册</td>
		</tr>
		<tr>
			<td>创建密码:</td>
			<td><input type="password" name="password"/></td>
		</tr>
		<tr>
			<td>真实姓名:</td>
			<td><input type="text" name="realname"/></td>
		</tr>
		<tr>
			<td align="right">性别:</td>
			<td><input type="radio" name="sex" value="nv"/><input type="radio" name="sex" value="nan"/></td>
		</tr>

		<tr>
			<td align="right">生日:</td>
			<td>
				<select name="year">
					<option value="1945">1945</option>
					<option value="1937">1937</option>
				</select><select name="month">
					<option value="8">8</option>
					<option value="7">7</option>
				</select><select name="day">
					<option value="15">15</option>
					<option value="7">7</option>
				</select></td>
		</tr>
		<tr>
			<td align="right">我现在:</td>
			<td>				
			<select name="now">
					<option value="study">上学</option>
					<option value="work">工作</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td><img src="verycode.gif"/> <a href="#">看不清换一张</a></td>
		</tr>
		<tr>
			<td align="right">验证码:</td>
			<td><input type="text" name="code"/></td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td><input type="image" src="btn_reg.gif"/></td>
		</tr>
	</table>
	</form>
 </body>
</html>

btn_reg.gif
verycode.gif

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

左绍骏

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值