@[TOC]

一、HTML

1、概念

HTML，含义是超文本标志语言，它是一种用来创建超文本文档的标志语言。
那么什么是超文本呢？它是用HTML编写的文档中包含指向其他文档或资源的链接，该链接也被称为超链接（hyperlink）。通过链接，用户可以很容易的访问链接下的资源。

2、细分

HTML一般包含两类信息：一类是标记信息，包含在标签中，由一对尖括号“<>”作为定界符，其中是元素名和属性。另一类信息是文档的字符数据，他们位于标签的外部，一般是需要浏览器显示的信息。

标签一般分为开始标签和结束标签，开始标签内的单词名称为元素名称。

大家来看一些最常用的HTML标签；

二、CSS

1、概念

CSS，是层叠样式表的意思。它是用来表现HTML等文件样式的语言，CSS能偶真正做到网页表现和内容分离的一种样式设计语言。相对于传统的HTML表现而言，CSS可以对网页的对象位置进行像素级的精确控制，几乎支持所有字号字体样式，拥有对网页对象和模型样式的编辑能力，并且能够进行初步交互设计。

2、方法

（1）内联样式

内联样式，是在元素标签内使用style属性指定样式，style属性可以包含任何CSS样式声明，如下面代码使用color属性设置段落颜色；

<p style ="color :#000ff">该段落以蓝色显示.</p>

（2）内部样式表

内部样式表，是在单个页面中使用<style>标签在文档头部定义样式表，这种样式只能被定义它的页面使用，例如：

<style type="text/css">
hl{color:#f00}
body{bakeground - image:url(image/bg.gif)}
</style>

（3）外部样式表

外部样式表，把声明的样式保存在样式文件中，当某个页面需要样式时，通过<link>标签或<style>标签连接外部样式文件。外部样式以.css作为文件扩展名，例如styles.css。
来看一个经典的HTML的文件：

<! DOCTYPE html >
< html >
< head >
< meta charset= "UTF - 8">
<title>百斯特电子商城</title>
< link href= "css\style. css" rel = " stylesheet" type = " text/css"/>
</head >
< body >
<div id= "container">
  <div id= "header"><img alt= "Here is a logo."src="images/head. jpg" />
  </div >
  <div id= "topmenu">
     <form action = "LoginServlet"method = "post" name= "login" >
     <p>用户名< input type= "text" name =" username"size="13" />
     密码<input type "password" name="password" size="13"/>
    <input type ="submit" name = "Submit" value="登录">
    <input type= " button" name= "register" value="注册"
           onclick= "check();">
    <input type="button" name="myorder" value="我的订单"/>
    <input type = " button"name="shopcart" value= "査看购物车"/>
   </form>
</div>
<div id= "middle">
   <div id= "leftmenu">
     <p align= "center"><b>商品分类</b></p>
     <ul>
      <li><a rel="nofollow" href = "goods.do?catalog = mobilephone">手机数码</a></li>
      <li><a rel="nofollow" href = "goods.do?catalog = electrical">家用电器</a></li>
      <li><a rel="nofollow" href = "goods.do?catalog = automobile">汽车用品</a></li>
      <1i><a rel="nofollow" href ="goods.do?catalog = clothes" >服饰鞋帽</a></li>
<li><a rel="nofollow" href ="goods.do?catalog= health">运动健康/a></1i>
    </ul>
</div>
<div id= "content">
  <table>
    <tr><td><img src = "images/phone.jpg">< td><p>
      三星5830領取手机节优惠卷,立減100元!再送: 200元移効手机卡!
      派派价: 2068 元</p></td>
    <td><img src = " images/comp.jpg"></td><td><p>
      联想(Lenovo)G46OAL-ITH 14.0英寸笔记本电脑(i3-370M 2G 500G 512
      独显DVD刻录 摄像头 Win7)特价: 3199 元!</p></td>
     </tr>
  </table>
 </div>
</div>
<div id= " footer">
   <hr size= "1" color= "blue"/>
   版权所有&copy;2018 百斯特电子商城有限責任公司,899123.
 </div>
</div>
</body>
</html >