HTML入门习题及答案

最新推荐文章于 2024-06-24 14:26:55 发布

_kirakira_

最新推荐文章于 2024-06-24 14:26:55 发布

阅读量8k

点赞数 68

分类专栏： html 文章标签： html html5

本文链接：https://blog.csdn.net/qq_43212582/article/details/105667270

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

题目来源¹

编写html代码，使得运行结果如图片所示

题1

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>各科小常识</h1>
		<hr />
		<h3>语文</h3>
		<p>&emsp;&emsp;圣人惠天下第一 爱丽丝天外飞仙</p>
		<hr />
		<h3>数学</h3>
		<p>&emsp;&emsp;勾股定理：a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
		<hr />
		<h3>英语</h3>
		<p>&emsp;&emsp;no game no life</p>
		<hr />
		<h3>化学</h3>
		<p>&emsp;&emsp;H<sub>2</sub>SO<sub>4</sub></p>
		<hr />
		<h3>经济</h3>
		<p>&emsp;&emsp;雪乃股稳赚不亏</p>
	</body>
</html>

题2

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>调查问卷</h3>
		<h4>你用什么方式查询信息?</h4>
		<ol>
			<li>谷歌浏览器</li>
			<li>火狐浏览器</li>
			<li>翻书</li>
			<li>问女朋友</li>
		</ol>
		<h4>你最喜欢使用哪个编程语言?</h4>
		<ol>
			<li>Java</li>
			<li>python</li>
			<li>C</li>
			<li>C++</li>
			<li>JavaScript</li>
		</ol>
		<h4>你喜欢下面的哪些角色（多选）</h4>
		<ul>
			<li>轻井泽惠</li>
			<li>加藤惠</li>
			<li>藤原千花</li>
			<li>鸢一折纸</li>
			<li>御坂美琴</li>
			<li>雪之下雪乃</li>
		</ul>
	</body>
</html>

题3

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div><label for="name">昵称：</label> <input type="text"  id="name"  style="background-color: #FFFF00;"/></div>
		<div><label for="psd">密码：</label><input type="password" id="psd" /></div>
		<div><label for="mail">邮箱：</label><input type="text" id="mail" />
		<select><option value="qq.com">qq.com</option></select>
		</div>
		<div>
			<label>性别：</label>
		<input type="radio" id="man" checked name="sex" /><label for="man">男</label>
		<input type="radio" id="woman" name="sex" /><label for="woman">女</label>
		</div>
		<div>
			兴趣：
			<input type="checkbox" id="anime" /><label for="anime">看番</label>
			<input type="checkbox" id="chat" /><label for="chat">社交</label>
			<input type="checkbox" id="study" checked /><label for="study">学习</label>
		</div>
		<div>
			<textarea rows="5" cols="40" value="个人介绍:"></textarea>
		</div>
		<div style="padding-left: 100px;"><button>注册</button></div>
		<div><label>上传个人照片：</label></div>
		<div><input type="button" id="selfile" value="选择文件" /><label for="selfile">未选择文件</label></div>
	</body>
</html>

总结：div标签用于布局网络框架，大部分代码均使用div配合id或class布局html页面，
小局部也可以用div和其它功能标签进行布局

与之不同的是p标签用于文章正文，它和div标签不同的是，上下近邻的p标签具有一定间距，而上下近邻的div标签没有间距

div标签独占一行，而span标签随内容适应，有多少内容就占据多少空间，span标签可以用于修饰局部或者布局文章中的一些字体样式，它没有结构的意义，当其他行内元素都不适合的时候，可以用span来配合CSS 操作。

HTML5学习笔记 ↩︎

_kirakira_

关注

68
点赞
踩
305

收藏

觉得还不错? 一键收藏
9
评论
HTML入门习题及答案

题目来源1题1<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h3>各科小常识</h1> <hr /> <h...
复制链接

扫一扫

专栏目录