首页 > 代码库 > HTML课上小结
HTML课上小结
HTML翻译为超文本标记语言
<标签名>内容</标签名>
静态网页动态网页的区别是看是否从数据中提取数据
一般网页由几部分组分组成
<html>开始标签
<head>头，即为网页上的控制信息
<title>页面上的标题</title>
</head>
<body，其属性一般有bgcolor页面背景色，text文字颜色，tpmargin上页边距，leftmar左页边距，backgroung背景壁纸>
页面显示内容，一般的标签
<font color="" size="" face=""></font>颜色，大小，字体
<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<u>下划线</u>
<del>删除线</del>
<sub>下标</sub>
<sup>上标</sup>
<center>居中</center>
<br>回车
 空格
<h1>一级标题</h1>
......
<h6>六级标题</h6>
标题会自动换行
<p>段落标签</p>
有序标签
<ol type="">
<li></li>
<li></li>
</ol>
无序标签
<ul type="">
<li></li>
<li></li>
</ul>
超链接：<a href="http://www.mamicode.com/网址">要点的内容</a>
<a href="http://www.mamicode.com/网址" target="_blank">在空白页面打开，self就是在自身页面打开
锚点:<a href="http://www.mamicode.com/#top"></a>直接返回到页面顶部
<a name=""></a>
<a href=""></a>返回到命名处
<img src="http://www.mamicode.com/图片地址" width="宽度" height="高度" title="图片标题" alt="图片无法加载时显示文字">
相对路径：从当前页面开始查找
绝对路径：从网站的根开始查找
表格：内容必须在单元格，单元格必须在行里，行必须在表格里。
<table width宽度 border边框 bgcolor背景颜色 background背景图>
<tr>行：
<td></td>单元格
<th></th>内容自动居中加粗
</tr>
</table>
align水平对齐 left center right
valign垂直对齐 top middle bottom
rowspan合并行
colspan合并列
</body>
</html> 结束标签
以下面作业为例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>作业20161221</title>
</head>
<body bgcolor="#000000" topmargin="200px" leftmargin="200px" >
<p>
<font face="微软雅黑" color="#FFFFFF" size="+3">
<em>
<strong>作业</strong>
</em>
<sub>20161221</sub>
</font>
</p>
<p>
<font face="微软雅黑" color="#FFFFFF" size="-1">
<del>可以不完成
</del>
</font>
</p>
<font face="微软雅黑" color="#FFFFFF" size="-1">
<p>One may fall in love with many people during the lifetime.</p>
<p>When you finally get your own happiness,</p>
<p>you will understand the preious sadness is kind of treasure,</p>
<p>which makes you better to hold and cherishthe people you love.</p>
</font>
<p>
<font face="微软雅黑" color="#FFFFFF" size="-1">字体是:<br>
<u>微软雅黑</u>
</font>
</p>
<a href="http://www.mamicode.com/#top">
<img src="http://www.mamicode.com/新建文件夹/QQ图片20161221090944.gif" width="100px" height="100px" title="哈哈哈" alt="图裂了">
</a>
<br>
<font face="微软雅黑" color="#FFFFFF" size="-1">图裂了
</font>
<br>
<br>
<font face="微软雅黑" color="#FFFFFF" size="+2">要求：
</font>
<font face="微软雅黑" color="#FFFFFF" size="-1">
<ol type="A">
<li>独立完成</li>
<li>今天所讲的都要练一遍</li>
<li>做好博客的笔记</li>
</ol>
</font>
<br>
<font face="微软雅黑" color="#FFFFFF" size="+2">PS:
</font>
<br>
<font face="微软雅黑" color="#FFFFFF" size="-1">
<ul type="square">
<li>注意有序/无序列表的使用</li>
<li>图片长宽都是100px，点击图片可以链接到网页顶端</li>
<li>要求完成度在70%以上</li>
<li>不会的可以<font color="#660066">
<a href="http://www.baidu.com" target="_blank">百度</a>
</font>(此链接在新页面打开)</li>
<li>网页左边距和上边距为200px</li>
<li>鼠标移动到图片上显示“哈哈哈”</li>
<li>坏图上显示“图裂了”</li>
</ul>
<table width="400px" height="200px" border="1" cellspacing="0" cellpadding="0">
<font color="#FFFFFF">
<tr>
<th width="100px" align="center" valign="middle">宽度/高度</th>
<th width="100px" align="center" valign="middle">对齐方式</th>
<th width="100px" align="center" valign="middle">背景颜色</th>
<td rowspan="2" align="center" valign="middle" >合并单元格</td>
</tr>
<tr>
<td bgcolor="#999999" align="center"valign="bottom">400px/200px;</td>
<td bgcolor="#999999" valign="bottom" align="right">靠右/靠下</td>
<td bgcolor="#999999"align="right" valign="bottom">gray</td>
</tr>
</font>
</table>
</body>
</html>
HTML课上小结