特殊符号
特殊符号
空格： 大于(>)：> 小于(<）: < 引号（”）："
1、因为<、>等符号在HTML 中已使用，所以必须用其他 符号来代替 2、都以分号结束（；）
版权号：©
• 3.1 HTML简介 • 3.2 HTML常用标签介绍
<head> <title>搜狐-中国最大的门户网站</title> </head>
使用<meta>标签 （1）描述文档类型和字符编码 （2）描述搜索关键字和描述
<head> <head> <meta name= http-equiv="Content-Type" content="text/html; charset=gb2312" <meta "keywords" content= "淘宝,网上购物,在线交易 ,交易市场" /> /> </head> <meta name= "description" content= "淘宝网-亚洲最大、最安全的网上交易平台，提 供各类服饰、美容、家居、数码、……" /> </head>
功能性链接
• 邮箱、QQ链接等
…… <a href="mailto: guimeiWebMater@">站长信箱</a> ……
注释
<!--注释内容 -->
用于增加代码的可读 性，不显示 …… <!-- <li>被注释掉的行将不显示</li> --> <li>正常显示行1</li> <li>正常显示行2</li> ……
<font size="7">一级主题</Font><br/> 一级主题阐述文字 <br /><Br /> <font size="5">二级主题</font><br /> 二级主题相关文字 <P>项目列表1 <p>项目列表2 <p>项目列表3
W3C提倡的Web结构
规范的示例
W3C提倡的Web结构： 1、内容（结构）和表现（样式） 分离 2、HTML内容结构要求语义化
…… <a href="../web1.htm">上级目录</a> <a href="../../web2.htm">上上级目录</a> …… 上上级目 录：../../
上级目录：../
云南工商学院：朱晓晶
超链接的三类应用场合
• 页面间链接
• 锚链接
• 功能性链接
常用于网站 导航
锚链接
• 实现锚链接 • 1、定义标记(锚)： <a name="标记名">目标位置</a>
• 3.3 表格布局
• 3.4 表单布局 • 3.5 框架布局
2016年9月18日星期 日
信息与工程学院
表格的应用
门户网站应 购物网站 用表格 应用表格 论坛中应用 表格
基本语法
<td>…</td> 定义列
<table> <tr> <td>第1个单元格的内容</td> <td>第2个单元格的内容</td> ...... </tr> <tr> <td>第1个单元格的内容</td> <td>第2个单元格的内容</td> ...... </tr> </table>
标题标签
…… <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> ……
h1最大 h6最小 前后隔行
基本块级标签——段落
• 段落标签
前后换行， 类似教材中 的段落
<tr>…</tr> 定义行
<table>...
</ table>定 义表格
跨行、跨列
…… <table width="200" border="1"> <tr> <td colspan="3">学生成绩</td> </tr> <tr> <td rowspan="2">张三</td> <td>语文</td> <td>98</td> </tr> <tr> <td>数学</td> <td>95</td> </tr> ....代码同上两行.... </table> ……
常用于布局的块级标签—— DIV层
…… <div style="width:400px; height:300px; background:#9FF"> <p>……</p> div标签可内嵌到<p>等标签 <h3>新人上路</h3> 内，作为普通块状元素使用 <ul> …… </ul> div其实就是一个...... </div> …… 一般当作结构化块状元素使用，作 为逻辑分区（分块）即容器来使用
行级标签——换行标签
• 换行标签 <br/>
和<p>的区别： 前后不换行
…… <p> 北京欢迎你，有梦想谁都了不起！<br /> 有勇气就会有奇迹。<br /> 北京欢迎你，为你开天辟地<br /> 流动中的魅力充满朝气。<br /> 北京欢迎你，在太阳下分享呼吸<br /> 在黄土地刷新成绩。<br /> 北京欢迎你，像音乐感动你<br /> 让我们都加油去超越自己。<br /> </p> ……
单个标签的闭 合形式
横线用于内容 分割
常用布局的块级标签—— 有序列表
• 有序列表标签
有序列表 …… <body> <h3>注册步骤：</h3> <ol> <li>填写信息</li> <li>收电子邮件</li> <li>注册成功</li> </ol> </body> ……
常用布局的块级标签—— 无序列表
colspan 跨3列
rowspan 跨2行
表格布局
图文布局，数据 规则整齐
表单布局， 同样要求数 据规则整齐
图文布局的实现
图文布局的实现
整个是5行2列的表格,实 际布局时border=“0”隐 藏边框
…… 公告栏：跨2列 <table border="1px"> <tr> <td colspan="2"><img src=“…" alt="公告栏" /></td> 图片：跨4行 </tr> <tr> <td rowspan="4"><img src=“…" alt="公告左侧图" /></td> <td>大学要求老师开网店</td> </tr> <tr> <td>安全锤网上大热销</td> </tr> …… </tr> </table> ……
2016年9月18日星期 日
信息与工程学院
• 3.1 HTML简介 • 3.2 HTML常用标签介绍
• 3.3 表格布局
• 3.4 表单布局 • 3.5 框架布局
2016年9月18日星期 日
信息与工程学院
HTML简介 HTML
• HTML：Hyper Text Markup Language 超文本标签语言 • HTML：网页的“源码”
这种效果可以和无序列表互相 替代，因dt是块状元素，所以 常用于图文混编的布局场合
…… <body> <dl> <dt>咖啡</dt> <dd>一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。 </dd> <dd>可以提神，刺激神经。</dd> <dl> </body> ……
常用布局的块级标签—— 描述标签
行级标签——图像标签
• 图像标签
…… <img src="images/drink.jpg" alt="精品热卖：高清晰，30寸等离子电视" title="精品热卖：高清晰，30寸等离子电视" /> ……
