HTML初学（简单html文件、简单表格布局）

78 阅读 0 评论 52 点赞

我是靠谱客的博主瘦瘦刺猬，最近开发中收集的这篇文章主要介绍HTML初学（简单html文件、简单表格布局），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

作业a

代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>下终南山过斛斯山人宿置酒</title>
 </head>
 <!-- 红色字体，背景图片不重复、位置固定、达到窗口100%的比例 -->
 <body background="b3.jpg" style="color:red
			   background-repeat:no-repeat;
               background-attachment:fixed;
               background-size:100% 100%;">
  <p>
  	<!-- 文本居中 -->
	<div style="text-align:center">下终南山过斛斯山人宿置酒</div>
	<div style="text-align:center">唐·李白</div>
  </p>
  <hr>
  <p>
	<div style="text-align:center">暮从碧山下，山月随人归。</div>
	<div style="text-align:center">却顾所来径，苍苍横翠微。</div>
	<div style="text-align:center">相携及田家，童稚开荆扉。</div>
	<div style="text-align:center">绿竹入幽径，青萝抚行衣。</div>
	<div style="text-align:center">欢言得所憩，美酒聊共挥。</div>
	<div style="text-align:center">长歌吟松风，曲尽河星稀。</div>
	<div style="text-align:center">我醉君复乐，陶然共忘机。</div>
  </p>
 </body>
</html>

效果图

在这里插入图片描述

作业b

代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>表格布局</title>
 </head>

 <body>
  <!-- 居中，白色字体，大小为30px，加两种阴影 -->
  <div style="text-align:center;
			  color:white; 
			  font-size:30px; 
			  text-shadow:5px 5px 5px purple, 0px 0px 2px black">不想学辣！</div>
  
  <!-- 表格边框粗细程度为1，居中，宽800px，高300px -->
  <table border="1" align="center" width="680px" height="300px">

  	<!-- 添加图片 -->
  	<tr>
		<td rowspan="4">
			<img src="b4.jpg" width="500px"/>
		</td>
	</tr>
  	<tr>
		<!-- italic为斜体 -->
		<td style="font-size:20px; color:gold; font-style:italic" 
			colspan="2" align="center">毁灭吧，我累了。</td>
	</tr>

	<tr> <!-- <u></u>用于加下划线 -->
		<td style="font-size:20px; color:hotpink" align="center"><u>打游戏</u></td>
		<td style="font-size:20px; color:hotpink" align="center"><u>看漫画</u></td>
	</tr>
	
	<tr>
		<td style="font-size:20px; color:hotpink" align="center"><u>读小说</u></td>
		<td style="font-size:20px; color:hotpink" align="center"><u>听音乐</u></td>
	</tr>
  </table>
 </body>
</html>