HTML基本标签（一）

HTML：Hyper Text Markup Language 超文本标签语言，网页的“源码”

浏览器：“解释和执行”HTML源码的工具

HTML文档的结构：

<html>
<head>
<title>我的第一个网页 </title>
</head>

<body >
       Hello World!
</body>

</html>

网页摘要信息利于浏览器解析和搜索引擎搜索：

1)使用<title>标签

<head>
  <title>搜狐-中国最大的门户网站</title>
</head>

2)使用<meta>标签

（1）描述文档类型和字符编码

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>

（2）描述搜索关键字和描述

<head> 
   <meta name= "keywords" content= "淘宝,网上购物,在线交易,交易市场" />
   <meta name= "description" content= "淘宝网-亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码、……" />
</head>

HTML标签分类（方便后续的布局设计）：

块级标签：显示为“块”状，前后隔一行（块级块内包含多行）
行级标签：按行逐一显示（行级包括文字、图片等）

根据使用场合，块级标签又细分为：基本块级标签，常用于布局的块级标签

基本块级标签

标题标签

<h1>标题</h1>
……
<h6>标题</h6>


……
<body>
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>
</body>
……

段落标签

<p>……</p>

……
<body>
  <h1>北京欢迎你</h1>
  <p>北京欢迎你，有梦想谁都了不起！</p>
  <p>有勇气就会有奇迹。</p>
</body>
……

水平线标签

<p>……</p>

……
<body>
  <h1>北京欢迎你</h1>
  <p>北京欢迎你，有梦想谁都了不起！</p>
  <p>有勇气就会有奇迹。</p>
</body>
……

常用于布局的块级标签

有序列表标签

<ol>
  <li>列表项1</li> 
   … …  
</ol>

……
<body>
<h3>注册步骤：</h3>
<ol>
  <li>填写信息</li> 
  <li>收电子邮件</li>
  <li>注册成功</li>  
</ol>
</body>
……

无序列表标签

<ul>
  <li>列表项1</li> 
   ……  
</ul>


<body>
<h3>新人上路指南 </h3> 
<ul>
  <li>如何激活会员名？</li>
  <li>如何注册贵美会员？</li>
  <li>注册时密码设置有什么要求？</li>
  <li>贵美认证</li>
</ul>
</body>

定义描述标签

<dl>
  <dt>标题</dt> 
  <dd>描述1</dd> 
 ……
</dl>


……
<body>
<dl>
    <dt>咖啡</dt>
    <dd>一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。</dd>
   <dd>可以提神，刺激神经。</dd>
<dl>
</body>
……

用定义描述标签实现图文混编的效果

……
<body>
<dl>
  <dt> 图片的HTML代码（后续讲解）……<dt>
  <dd>商品名称：灿坤蒸气电熨斗</dd>
  <dd>商品价格：388元</dd>
  <dd>商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计</dd>
</dl>
</body>
……

表格

<table>
  <tr>  
     <td>百度</td> 
     <td>新浪</td>
 </tr> 
……
</dl>
 

<table>--表格
<tr>      --行
<td>     --列（单元格）

表单

<form>
  ……  
</form>

一般和table使用：
<form>
<table>
    <tr>
       <td>...</td>
       <td>...</td>
    </tr>
.....
</table>
</form>

分区标签

……
<div style="width:400px; height:300px; background:#9FF">
    <p>……</p>
    <h3>新人上路</h3>
    <ul>
    ……
    </ul>
div其实就是一个......
  </div>
……

一般当作结构化块状元素使用，作为逻辑分区（分块）即容器来使用

请说出实际开发常用的4种块状结构是什么？

div-ul(ol)-li ：常用于分类导航或菜单等
div-dl-dt-dd ：常用于图文混编的场合
table-tr-td ：常用于图文布局或显示数据
form-table-tr-td：常用于布局表单

行级标签

图像标签

<img  src= "图片地址"  alt="提示文字"   title="提示文字" />


……
<img src="images/drink.jpg" alt="精品热卖：高清晰，30寸等离子电视" 
    title="精品热卖：高清晰，30寸等离子电视" />
……

范围标签<span> ：显示某行内的独特样式

<span >文本等行级内容</span>


……
<p>商品价格:仅售<span style="color:red;font-size:70px;">10</span>元</p>
……

换行标签 <br/>

……
<p>
  北京欢迎你，有梦想谁都了不起！<br />
  有勇气就会有奇迹。<br />
  北京欢迎你，为你开天辟地<br />
  流动中的魅力充满朝气。<br />
  北京欢迎你，在太阳下分享呼吸<br />
  在黄土地刷新成绩。<br />
  北京欢迎你，像音乐感动你<br />
  让我们都加油去超越自己。<br />
  </p>
……

W3C

W3C：World Wide Web Consortium，万维网联盟
W3C的职能：负责制定和维护web行业标准
W3C标准包括：

列的标准： HTML

内容方面：XHTML

样式美化方面：CSS

结构文档访问方面：OM

页面交互方面：ECMAScript

……

XHTML 1.0基本规范

标签名和属性名称必须小写
HTML标签必须关闭
属性值必须用引号括起来

标签必须正确嵌套必须添加文档类型声明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
……
</head>
……body部分内容……
</html>


1、声明必须位于文档的最前面
2、三种级别：Strict（严格类型） 、Trasitional（过度类型）、 Frameset（框架类型）

软件开发案例分析