@[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"/>
版权所有©2018 百斯特电子商城有限責任公司,899123.
</div>
</div>
</body>
</html >