简易网页（HTML）

最新推荐文章于 2024-06-15 19:46:07 发布

@心海

最新推荐文章于 2024-06-15 19:46:07 发布

阅读量603

点赞数 2

分类专栏：网页专栏文章标签： html 前端

本文链接：https://blog.csdn.net/qq_58233395/article/details/121477439

版权

网页专栏专栏收录该内容

3 篇文章 0 订阅

订阅专栏

兄弟们，我又来了，这次咱们来个HTML的综合运用，里面有许多新的知识点，不要慌，姐姐我会一一给你们讲解清楚的，准备好了嘛，接招吧，哈哈哈😜

正题来了：

这个里面我们会用到框架，会用到表单，会把好几个HTML文件联系在一起，我在这里面会一一讲解，有不理解的可以相互讨论交流一下呀，不过我这个页面里面，我没有搞那些颜色和字体，因为我打算后期加css进去，毕竟css是美化HTML网页的，不用白不用嘛🙃
来吧，先给你们看一下几个效果图

这前两个页面的知识点会在比较后面，因为，他们是导航的倒数第二个效果图

是不是很素，素到没朋友，哈哈哈，后期我会加css去美化，伙伴们就先将就一下吧
有没有发现那几个都有下划线，而且颜色还与“菜单”不一样，那个是链接，默认未点击的颜色是蓝色，因为我在测试的时候都点击过了，所以它的颜色现在全是上面看到的那个颜色了。来吧，我们一个一个来，慢慢涨知识，先看一下这个框架的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>首页</title>
	</head>
	<frameset cols="30%,70%">
		<frame name="left" src="shige.html"/>
		<frame name="right" src="right.html" />
	</frameset>
	<noframes>
	<body>
		您的浏览器不支持框架，无法正常显示网页
	</body>
	</noframes>
</html>

我们现在开始分析一下这个代码吧，这个里面主要就是我们没有见过的两个标签吧，都是有关框架的（不过这两个标签已经被HTML5移除了），在这里面，frameset是定义一个框架，用于导航，把几个HTML网页合在一起，而noframes是用于浏览器无法使用这个框架标签时所做的提示，frame这个标签是用来命名和引用其他网页的，注意：frameset这个标签一定要放在head标签和body标签之间，怎么说呢，我来解释一下吧，我们可以把他想象成脖子，在头和身体之间（是不是更好理解了呢😄）。这里面有些属性，cols这个是列的意思，在这里面就是列分框架，把这个框架分为两列，如上图所示

这个是点击第一个标签以后的内容，这个代码也很简单，都是我这个专栏的上一篇博客介绍的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>欣赏诗歌</title>
	</head>
	<body>
		<h3>静夜思</h3>
		<h6>李白</h6>
		<p>
			窗前明月光，<br />
			疑是地上霜。<br />
			举头望明月，<br />
			低头思故乡。<br />
		</p>
	</body>
</html>

这个是点击第二个标签的页面，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>作者简介</title>
	</head>
	<body>
		“李白(701年-762年)，字太白，号青莲居士，唐朝浪漫主义诗人，被后人誉为“诗仙”。<br />
		李白祖籍陇西成纪(待考证)，出生于西域碎叶城，4岁再随父迁至剑南道绵州。<br />
		李白存世诗文千余篇，有《李太白集》传世。762年病逝，享年61岁。”
	</body>
</html>

emmm，这个感觉也没啥好讲的，下一个网页：

(⊙o⊙)…这个代码应该和上面那个代码差不多

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>写作背景</title>
	</head>
	<body>
		“《静夜思》大约创作于公元726年，当时李白26岁，客居在扬州的旅舍中。<br/>
		在一个寂静的月夜，诗人抬头望月时，思乡之情油然而生，写下了《静夜思》。<br/>
		《静夜思》主要抒发了诗人飘泊他乡的孤寂凄凉之情。”
	</body>
</html>

继续，下一个

噢，还是差不多的，好没意思啊，都没有新的东西

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>诗文赏析</title>
	</head>
	<body>
		<p>
			&nbsp;&nbsp;前两句写诗人在作客他乡的特定环境中一刹那间所产生的错觉。一个作客他乡的人都会有这样的感：白天奔波忙碌，倒还能冲淡离愁，到了夜深人静的时候，思乡的情绪，就难免一阵阵地在心头泛起波澜。在月明之夜，尤其是月色如霜的秋夜更是如此。<br />
“疑是地上霜”中的“疑”字，生动地表达了诗人睡梦初醒，迷离恍惚中将照射在床前的清冷月光误作铺在地面的浓霜。“霜”字用得更妙，既形容了月光的皎洁，又表达了季节的寒冷，还烘托出诗人飘泊他乡的孤寂凄凉之情。<br/>
后两句通过动作神态的刻画，深化思乡之情。“望”字照应了前句的“疑”字，表明诗人已从迷朦转为清醒，他翘首凝望着月亮，不禁想起，此刻他的故乡也正处在这轮明月的照耀下，自然引出了“低头思故乡”的结句。“低头”这一动作描画出诗人完全处于沉思之中。“思”字给读者留下丰富的想象：那家乡的父老兄弟、亲朋好友，那家乡的一山一水、一草一木，那逝去的年华与往事，无不在思念之中。
	   </p>
	</body>
</html>

来了来了，这里面有一个字符实体的知识点

显示结果	描述	实体名称	实体编号
“空格”	空格	&nbsp ;	&#160 ;
<	小于号	&lt ;	&#60 ;
>	大于号	&gt ;	&#62 ;
&	和号	&amp ;	&#38 ;
"	引号	&quot ;	&#34 ;
’	撇号	&apos ;	(IE不支持) '
￠	分	&cent ;	&#162 ;
£	镑	&pound ;	&#163 ;
¥	人民币/日元	&yen ;	&#165 ;
€	欧元	&euro ;	&#8364 ;
§	小节	&sect ;	&#167 ;
©	版权	&copy ;	&#169 ;
®	注册商标	&reg ;	&#174 ;
™	商标	&trade ;	&#8482 ;
×	乘号	&times ;	&#215 ;
÷	除号	&divide ;	&#247 ;

怎么说呢，这个咱们还是把常用的记一下叭🧐，毕竟以后还要用。来来来，正片来了
在这里插入图片描述
这个页面的左边，运用了表单和表格的知识，先给你们上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>联系我们</title>
	</head>
	<body>
		<p align="center">我们先做一个个人调查，然后再把我们的联系方式给你，谢谢配合<p>
		<form action="email.html" name="form" id="1">
		<table border="2" align="center"  > 
			<tr><td colspan="2" align="center">个人调查</td></tr>
			<tr>
				<td>姓名：</td>
			<td><input  type="text" name="name"/></td>
			</tr>
			<tr>
				<td>性别：</td>
				<td>
					<input type="radio" name="sex" value="male" />男
					<input type="radio" name="sex" value="female"/>女
				</td>
			</tr>
			<tr>
				<td>兴趣爱好：</td>
				<td>
					<input type="checkbox" name="vehicle" value="a"/>跑步
					<input type="checkbox" name="vehicle"  value="b"/>听音乐
					<input type="checkbox"  name="vehicle" value="c"/>打游戏
					<input type="checkbox" name="vehicle"  value="d"/>阅读
				</td>
			</tr>
			<tr>
				<td colspan="2">
				意见：<textarea rows="10" cols="55"></textarea></td>
			</tr>
			<tr >
				<td >你的联系方式：</td>
				<td>
					<select>
					<option value="qq">QQ</option>
					<option value="WeChat">微信</option>
					<input type="text"  name="contact"/>
					</select>
				</td>
			</tr>
			<tr>
				<td>点击提交，跳转至联系我们页面</td>
				<td>
					<input type="submit"  value="提交"/>
					谢谢配合，欢迎下次光临
				</td>
			</tr>
		</table>
		</form>
	</body>
</html>

这里面主要是表格和表单的嵌套，table标签是定义一个表格，它里面的tr是代表行，td是代表列，这里面的border属性是带有边框的意思，algin这个属性就不需要我说了吧，毕竟之前有提到过。form标签是定义了一个表单，表单，怎么说呢，我的认知里，我觉得它就是一个有关文本框，按钮，以及多选单选的按钮。input标签是定义表单，里面有type这个属性，可以选择相应的类型，比如说复选按钮，单选按钮，还有下拉列表等具体详情请移步表单。textarea 标签是定义一个文本域，这个主要是一个空白文本框，当然，里面可以输入文字，里面有cols和rows属性，分别表示行和列，这样就可以控制这个文本域的行高和列高了。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>发送邮件</title>
	</head>
	<body>
		<h3>发送邮件到 后勤人员</h3>
		<p>以下信息均填入你自己的信息</p>
    <form action="MAILTO:2950969981@qq.com" method="post" enctype="text/plain">
                 姓名:<br/>
        <input type="text" name="name" ><br/>
        E-mail:<br/>
        <input type="text" name="mail" ><br/>
                 意见:<br/>
        <input type="text" name="comment"  size="50"><br/><br />
        <input type="submit" value="发送">
        <input type="reset" value="重置">
    </form>
	</body>
</html>

这个发送邮件的主要也是运用了表单里的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>诗歌页面</title>
	</head>
	<body>
		<h3>菜单：</h3>
		<ul>
			<li>
				<a href="ShiGeXinShang.html"  target="right">欣赏诗歌</a>
			</li>
			<li>
			<a href="ZuozheJianjie.html" target="right">作者简介</a>
			</li>
			<li>
			<a href="XiezuoBeijing.html" target="right">写作背景</a>	
			</li>
			<li>
			<a href="ShiwenShangxi.html" target="right">诗文简析</a>	
			</li>
			<li>
			<a href="LianxiWomen.html" target="right">联系我们</a>	
			</li>
			<li>
				<a href="right.html" target="right">回到首页</a>
			</li>
		</ul>
	</body>
</html>

这段代码是框架的右半部分，a是比较重要的链接标签，它可以运用在页面书签，也可以引入其他网页的链接，点击它即可跳转至该网页，href属性就相当于img标签中的src，源文件地址，而target是标记，他可以让这几个链接都位于框架的右边。里面的列表是ul标签，不过它是无序列表，还有一个是有序列表，它的标签是ol，里面的li都是一样的，代表第一个，第二个，而在ol和ul里面有type属性，他们的取值可以决定展示出来的列表前面是圆，方块，数字，字母等具体详情请移步至列表，不得不说，我懒了，呜呜呜~~，咱就是码字码不下去了😶
谢谢伙伴们的支持，我又要跑路了，实在是太多字了，打不下去了，相信你们也很难看下去，咱就先这样子吧，下次再见咯，886~