一、HTML基本结构
html5基本结构:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
</head>
<body>
</body>
</html>
xhtml1.0基本结构:
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
二、编码规范
1.所有的标记都必须要有一个相应的结束标记,单标记直接用/结束
2.所有标签的元素和属性的名字都必须使用小写
3.所有的属性必须用引号""括起来
三、html标记解析
1、头标记head
文档类型:文档结构声明三种transitional( 过渡型 )、strict(严格型)、frameset(框架型),浏览器将安装DTD类型来解析
title:网页标题
meta:辅助信息标记,向浏览器传递一些信息,常用的如下:
显示字符集:<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
网页刷新:<meta http-equiv="refresh" content="5,http://www.163.com"/>
网页关键字:<meta name= " keywords " content= "电脑、机器人、智能" />
网页描述:<meta name="description" content="关于网络的网页" />
2、文档主体标记body
3、文字排版标记
1)标题标记
<h1>到<h6>表示页面中的关键词(标题),以使用时有以下的注意事项!
1.<h1>代表最重要的,<h6>代表相对最不重要的,因此,根据这个递减,适当安排关键词;
2.<h1>中使用的关键词,一个页面只能出现一次;
3.<h1>尽量靠近在html 中的<body>标签,越近越好,以便让搜索引擎最快的领略主题。
2)文字标记
<b>:加粗
<strong>:强调
b和strong的区别就在于前者是物理元素,仅表示加粗,后者是逻辑元素,表示强调的意思,<b>是在html中的标签,而在xhtml中只能使用<strong>,后者兼容性更好。
<i>:斜体
<em>:强调
<u>:下划线
3)段落与换行标记
<p>:段落
<br />换行
<br>标记使当前行强行中断而另起一行,但是新行与原来的行保持相同的属性,即新行与原来的行属于同一段落,而<p>标记在换行的时候另起了一新的段落。
4)
<a>:超级链接标记<a href="链接位置" title="链接描述" target="目标">链接文字</a>
1. 学会使用邮件链接:<a href="mailto:nyxuwen:qq.com">发送邮件</a>
2. 页面链接的锚点: <a href="#top">回到顶部</a> <div id="top">顶部的链接</div>
3. 给链接增加 鼠标提示: <a title=“点击查看刘洁的详细信息”>查看</a>
4. 理解链接的不同打开方式: <a href=“” target=“_top/_self/_blank”></a>
5)
img:图片标记 <img src="图片位置" alt="图片描述" width="宽度" height="高度" />
四、数据列表标记
ol、ul、li
dl、dt、dd
五、水平合并单元格
水平合并(colspan=合并单元格数)
<table border="1">
<tr>
<td colspan="2">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
六、垂直合并单元格
垂直合并(rowspan=合并的单元格数)
<table border="1">
<tr>
<td rowspan="2">2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
作业练习:
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
一、请将下面文字放在网页正文,要求设置网页标题为“了不起的盖茨比”,将所有的盖茨比设置为粗体,将1925设置为斜体,并制作一个详细信息的链接,指向http://baike.baidu.com/subview/369308/5222935.htm,效果如图所示
代码如下:
<!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>了不起的盖茨比</title>
</head>
<body>
<p><strong>了不起的盖茨比</strong></p>
<p>《了不起的,<strong>盖茨比</strong>》为那个奢靡年代的缩影。<strong>盖茨比</strong>怀揣着对"美国梦"的期翼,投身到那个年代的灯红酒绿之中,却在名利场中看尽世态炎凉,以及浮华背后一切终将逝去的空虚怅惘。<em>1925</em>年《了不起的<strong>盖茨比</strong>》问世。</p>
<p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
<a href="http://baike.baidu.com/subview/369308/5222935.htm">详细信息</a>
</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=iso-8859-1" />
<title>项目列表</title>
</head>
<body>
<ol>
<li>WindowsMe
<li>Windows 2003
<ul>
<li>Windows Server 2003 Web
<li>Windows Server 2003 standard
<li>Windows Server 2003 Enterprise
<li>Windows Server 2003 Datacenter
</ul>
</ol>
</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>使用表单</title>
</head>
<body>
<table border=1>
<tr>
<td rowspan="2">阿里巴巴旗下网站</td>
<td>我要买</td>
<td>我要买</td>
<td>我淘宝</td>
</tr>
<tr>
<td colspan="4">您好,欢迎来淘宝!</td>
</tr>
</table>
</body>
</html>