有趣的Html

一、HTML

(HyperText Markup Language)超文本标记语言。 “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。 

HTML之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点------就是一种URL指针,通过激活(点击)它,可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。

由此可见,网页的本质就是HTML,通过结合使用其他的Web技术(如:脚本语言、CGI、组件等),可以创造出功能强大的网页。因而,HTML是Web编程的基础,也就是说万维网是建立在超文本基础之上的。

二、实例

<span style="font-size:18px;"><html>
	<head>
		<title>哈哈,我又变帅了</title>
	</head>
	<body>
	<!--这是页面显示的内容-->
		呵呵,果然很帅
		<p>偶,今天天气不错。风和日丽的,</p>
		<p>老马来到   桃花岛,看见小赵在洗澡……然后
没有了</p>
		<h1>小杨很酸啊!!</h1>
		<h2>小杨很酸啊!!</h2>
		<h3>小杨很酸啊!!</h3>
		<h4>小杨很酸啊!!</h4>
		<h5>小杨很酸啊!!</h5>
		<h6>小杨很酸啊!!</h6>
		<!--<img src="C:\Users\Geory\Pictures\手机\geory/1.jpg"/>-->
		<img src="C:\Users\Geory\Pictures\心.jpg" alt="这是心形照片"
	border="50" width="100" height="100"/>
		<hr />
		的空间的流量监控<br />
		离开家饭店里看见饭都快<br />
		<>&<p>哈哈,这是段落</p>标签</p>
		<hr size="50" width ="100">
		<hr size="50" noshade="noshade"\>
		<hr color="red"/>
		<hr align="left" width="100" color="green"/>
		<hr align="right" width="200" color="yellow"/>
		<hr align="center" width="300" color="blue"/>
		<font face="全新硬笔行书简" color="red" size="6">哈哈,我又变身了</font><br/>
		<font size="7" color="green"/>小明 </font><br />
		小明的后来
		<b>这是粗体</b><br/>
		<i>这是意大利体</i><br/>
		<tt>打印机字体</tt><br/>
		<u>下划线字体</u><br/>
		3<sup>2</sup>+4<sup>2<sup/>=5<sup>2<sup/><br/>
		<s>这是一句删除的文字</s><br/>
		<em>看看什么样</em><br/>
		<strong>强调文本</strong><br/>
		<pre>
		<code>
			for(int i=0;i<100;i++)
			{
				console.writeline("哈哈");
			}
		</code>
		</pre>
		<a name="中间"></a>
		<br/>
		<hr color="blue" size="10"/>
		<marquee direction="down"><img src="F:\图片.jpg"/></marquee>
		<marquee behavior="slide"><img src="F:\图片.jpg"/></marquee>
		<hr/>
		


	</body>	
</html></span>
实例2

<span style="font-size:18px;"><html>
	<head>
		<title>表单</title>
	</head>
	<body>
		<form>
			请输入账号:<input name="txt1" type="text" value=
			"yhb@itcase.cn" size="20" maxlength="20" checked="checked" /><br/>
			请输入密码:<input name="pwd" type="password" value="" size=20 maxlength
			="10"/><br/>
			<textarea rows="10" cols="50" disabled="disabled"> 随便找出一段话,又一个姑娘真漂亮。
			她的名字叫做小的,。快使用家里大家爱讲道理了肯德
			洛杉矶的理解爱上离开的煎熬啊垃圾费拉升等级
			俺老家的理解爱劳动节啊拉升的减肥 离开家的饭
			爱离开家电费卡大家发的手机开发</textarea>
			<hr size="5" color="red" />
			<input name-"sbm" type="submit" value="提交"/><br/>
			<input name="rs" type="reset" value="充填所有内容"/></br>
			<input name="btn" type="button" value="按钮" οnclick="alert('不要乱按')"/><br/>
			<input type="image" src="图片.jpg"/><br/>
			
			<input type="checkbox" name="ch1" value="chone"/>打篮球
			<input type="checkbox" name="ch2" value="chtwo"/>打足球
			<input type="checkbox" name="ch3" value="chthree"/>打乒乓球
			<input type="checkbox" name="ch4" value="chfour" checked="checked"/>打铅球
			<hr/>
			<input type="radio" name="rd1" value="man"/>男
			<input type="radio" name="rd1" value="woman"/>女
			<input type="file" name="f1" value="fone"/>
			<hr size="4" color="green"/>
			<!--<select size="10" multiple="multiple">-->
			<select name="sel">
				<option value="0">yhb@itcase.cn</option>
				<option selected="selected" value="1">yhb@126.com</option>
				<option value="2">yhb@163.com</option>
			</select>
		</form>
	</body>
</html></span>
实例3

<span style="font-size:18px;"><html>
	<head>
		<title>哈哈,第三个</title>
	</head>
	<body>
		<table border="2">
			<tr>
				<td>第一行第一个</td>
				<td>第一行第二个</td>
				<td>第一行第三个</td>
			</tr>
			<tr>
				<td>第一行第一个</td>
				<td>第一行第二个</td>
				<td>第一行第三个</td>
			</tr>			
		</table>
		<hr color="	blue"/>
		<table border="5">
			<tr>
				<td>老杨</td>
				<td>老苏</td>
				<td>老牛</td>
			</tr>
			<tr>
				<td colspan="3"><a href="http://www.baidu.com">百度</a></td>
			</tr>
		</table>
		
		<hr color="red"/>
		<table border="9">
			<tr>
				<td><a href="http://www.baidu.com">百度</a></td>
				<td><a href="http://www.sina.com.cn">新浪</a></td>
				<td><a href="http://www.tianya.cn">天涯</a></td>
			</tr>
			<tr>
				<td><a href="http://www.google.com.hk">谷歌</a></td>
				<td><a href="http://www.sohu.com">搜狐</a></td>
				<td><a href="http://www.mop.com">猫扑</a></td>
			</tr>			
		</table>
		<hr color="green">
		<table border="4" bgcolor="red" border="yellow" cellspacing="2"
		cellpadding="10" width="100">
			<tr>
				<td rowspan="2">老苏</td>
				<td>语文</td>
				<td>58</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>33</td>
			</tr>
		</table>
		</body>
<html>
</span>
实例4

<span style="font-size:18px;"><html>
	<head>
		<title></title>
	</head>
	<body text="white" bgcolor="white">
		<a href="http://www.baidu.com">百度</a>
		<a href="http://www.baidu.com"><img src="../叶子.jpg"/></a>
		<a href="Myfirst.html">第一个html文件</a>
		<a href="小刚.jpg">小刚</a>
		<a href="Myfirst.html#中间">跳到第一个网页中间去</a>
		
		<a href="mailto:yhb@itcase.cn?subject:主题 & body=干啥呢"> 发个邮件</a>

		<hr/>
		<font face="全新硬笔行书简" color="red">其实我一直想对你说
	</font><br/>
	呵呵,其实,你自己向下你们的过去<br/>
	<font face="全新硬笔行书简" color="red">其实我一直想对你说
	</font><br/>
	你猜<br/>
<font face="全新硬笔行书简" color="red">其实我一直想对你说
	</font><br/>
	我想说的是<br/>
<font face="全新硬笔行书简" color="red">其实我一直想对你说
	</font><br/>
	你和小赵很有缘,你们可以天长地久
	<body>

</html></span>

三、小结

这4个实例,涉及到链接、表格、标题、换行、加载图片、提交表单等基础操作,对Html的理解先总结到这里了。




  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 19
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值