题目来源1
编写html代码,使得运行结果如图片所示
题1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>各科小常识</h1>
<hr />
<h3>语文</h3>
<p>  圣人惠天下第一 爱丽丝天外飞仙</p>
<hr />
<h3>数学</h3>
<p>  勾股定理:a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
<hr />
<h3>英语</h3>
<p>  no game no life</p>
<hr />
<h3>化学</h3>
<p>  H<sub>2</sub>SO<sub>4</sub></p>
<hr />
<h3>经济</h3>
<p>  雪乃股稳赚不亏</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 操作。