有趣的Html

最新推荐文章于 2024-05-25 10:45:10 发布

lrgeory

最新推荐文章于 2024-05-25 10:45:10 发布

阅读量1.2k

点赞数 2

分类专栏： ● 代码之美 ———【web】

本文链接：https://blog.csdn.net/wang18631061452/article/details/51417237

版权

● 代码之美同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

———【web】

4 篇文章 0 订阅

订阅专栏

一、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的理解先总结到这里了。

lrgeory

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
19
评论
有趣的Html

一、HTML（HyperText Markup Language）超文本标记语言。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。 HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点--
复制链接

扫一扫

专栏目录