HTML 日常练习代码

69 阅读 0 评论 46 点赞

我是靠谱客的博主鲤鱼棉花糖，最近开发中收集的这篇文章主要介绍HTML 日常练习代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

练习代码

在此之前写了一篇文章说了些html的知识，时光之门：HTML学习总结
现在把自己的练习代码发出来。
新手上路，还请各位大佬指教。（手动抱拳）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" >
	<title>一个神奇网站</title>
</head>
<body>
	<div style="height:400px;width:800px;float:center;">
    <h1 style="text-align:center;font-family:YouYuan;background-color:#A6FFFF;font-size:30px;">我最爱的食物</h1>
    <p style="font-family:STFangsong;color:#6FB7B7;font-size:20px;">我最爱的食物很多，<b>其中荤素而言喜欢吃<sup>肉</sup>，</b> 肉类最喜欢鸡肉和猪肉</p>
	<a href="http://www.xiachufang.com/category/1136/" >鸡肉做法大全</a>
	<p style="font-family:YouYuan;color:black;font-size:15px;"> Now here comes a cute picture.</p>
	<p style="text-align:center";>
		<img src="images/小鸡.jpg" alt="小鸡小鸡" width="200" height="210" />
	</p>
	<hr>
	</div>
	<div>
	<h1 style="text-align:center;font-family:YouYuan;background-color:#A6FFFF;font-size30px;">下面是一个简单的表格</h1>
    <table border="1" align="center">
	    <caption>小明的个人履历</caption>
		<tr>
			<th>时间</th>
			<th>何地干啥呢</th>
		</tr>
		<tr>
			<td>1996.10-2003.06</td>
			<td>老家过着无忧无虑的童年。</td>
		</tr>
				<tr>
			<td>2003.09-2009.06</td>
			<td>小学六年。</td>
		</tr>
				<tr>
			<td>2009.09-2012.09</td>
			<td>初中三年。</td>
		</tr>
				<tr>
			<td>2012.09-2015.06</td>
			<td>高中三年。</td>
		</tr>
				<tr>
			<td>2015.06-2019.06</td>
			<td>大学四年。</td>
		</tr>
				<tr>
			<td>2019.09-未来</td>
			<td>前路漫漫。</td>
		</tr>
    </table>
	<hr>
	</div>
	<div>
	<h1 style="text-align:center;font-family:YouYuan;background-color:#A6FFFF;font-size:30px;">下面是一个简单的列表</h1>
	<p style="font-family:YouYuan;color:#6FB7B7;font-size:20px;"> 主要显示了我在闲暇时候想做的一些事情</p>
	<ul>
		<li>睡觉</li>
		<li>吃水果</li>
		<li>逛街</li>
		<li>出去旅游</li>
	</ul>
	<hr>
	</div>
	<div>
	<h1 style="text-align:center;font-family:YouYuan;background-color:#A6FFFF;font-size:30px;">下面是一个简单的表单</h1>
	<form>
		请输入名字：<input type="text"><br>
		请输入密码：<input type="password"><br>
		<p style="font-family:YouYuan;color:#6FB7B7;font-size:20px;">请选择合适通关方式</p>
		<input type="radio" name="sex" value="male">真心话<br>
		<input type="radio" name="sex" value="female">大冒险<br>
		<input type="submit" value="提交">
		<hr>
		<fieldset>
			<p style="font-family:YouYuan;color:#6FB7B7;font-size:20px;"> 请选择喜欢的通关场景</p>
			<input type="checkbox" name="vehicle" value="Bike">池塘边<br>
			<input type="checkbox" name="vehicle" value="Car">柳树上<br>
			<input type="checkbox" name="vehicle" value="Bike">校园里<br>
			<input type="checkbox" name="vehicle" value="Car">家<br>
			<input type="reset" value="重置">
	</fieldset>
	</form>
	<hr>
	<form action="">
		<select name="cars">
			<option value="volvo">Volvo</option>
			<option value="saab">Saab</option>
			<option value="fiat">Fiat</option>
			<option value="audi">Audi</option>
		</select>
	</form>
	<hr>
	<form action="">
		<select name="cars">
			<option value="volvo">Volvo</option>
			<option value="saab">Saab</option>
			<option value="fiat" selected>Fiat</option>
			<option value="audi">Audi</option>
		</select>
	</form>
	<hr>
	<textarea rows="10" cols="30">我是一个文本框。</textarea>
	</div>
	<form action="">
	<input type="button" value="点我">
	</form>
	<br>
	<iframe src="https://www.baidu.com/" width="800" height="500"></iframe>
	<hr>
	<script>
	document.write("Hello World!")
	</script> 
	<hr>
	<p id="demo">JavaScript 可以触发动作</p>
	<script>
	function myFunction()
	{
		document.getElementById("demo").innerHTML="Hello JavaScript!";
	}
	</script>
	<button type="button" onclick="myFunction()">点我</button>
	<hr>
	<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">@啊哈亲情出版</div>
	
</body>
</html>