Web开发技术——HTML

浏览数：20 / 时间：2015年06月09日

html文件的基本结构

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>My first web page</title>
  </head>
  <body>
    Hello World!
  </body>
</html>

<title> 网页标题
<head> 头部部分
<body> 主体部分，网页内容可以是文本、图像
head + body = 网页
<meta>标签：描述网页，定义页面的一些基本信息。
charset=gb2312：可以避免页面中的乱码。简单中文：gb2312，繁体中文：big5，纯英文网页：iso-8859-1

页面背景色和背景图像

为了使网页整体美观大方，背景颜色应该尽量的浅。

<body bgcolor="#FFCCFF" background="back_image.gif"> hello world!</body>

文本控制标签

标题标签：<h></h>

<body>
    <h1>一级标题</h1>
    <h6>六级标题</h6>
</body>

文本字体标签：

<font size="12" color="red" face="宋体></font>

段落标签：

换行标签：

<p align="center">淘宝集市</p>
<p align="left">
    淘宝首届书友会！<br>
    欢笑大众
</p>

特殊符号

空格：  引号("")：" 小于（<）：< 大于(>):> 版权号(@)：©

<body>
    <p><font size="2" color="red"> 手机充值、IP卡/电话卡<font><br>移动&nbsp;|&nbsp; 100 | &nbsp;联通| &nbsp;50</p>
    <p><font size ="10" color="blue">Copyright &copy; 2007 &quot;淘宝网&quot; All rights.</font></p>
</body>

字体布局

内容分隔标签<hr>

<body>
    <hr size="5" color="red" width="300>
    <hr align="left" size=‘10‘ color= green width = 800>
</body>

无序列表

type=circle, shape, square

<ul type="circle">
    <li><font size="5" color="black">AAA</font></li>
    <li>BBB</li>
    <li>CCC</li>
</ul>

有序列表

type=1,a

<ol type="1">
    <li><font size="5" color="black">AAA</font></li>
    <li>BBB</li>
    <li>CCC</li>
</ol>

预格式文本

<pre>
    <img src="qq.jpg" width="159" height="133" align="left">
    腾讯-QQ币/QQ幻想-30元卡

    一口价：26.45元
    运费：卖家承担运费
    剩余时间：5天
    宝贝类型： 全新
    卖主声明：货到付款，可试用10
</pre>

超链接标签

链接到其他页面

<font size="2"><a href="register/register.html">【免费注册】</a></font>
<a href="register/register.html"><font size="2">【免费注册】</font></a>

锚标记

<a href="#helpme">【新人上路】</a> 2、链接到锚标记所在位置
<a name="helpme">新人上路指南</a> 1、定义锚标记
href="#"表示空链接

电子邮件链接

<a href="mailto:[email protected]">站长邮箱<a>

图像标签

<img src="images/adv_2.jpg "width="300" height="150" alt="明星演唱会开幕">
alt属性：鼠标移到上面时显示，或者图像未找到时显示。

滚动标签

<font size=12 color="purple"><marquee scrolldelay="100 direction="up">Hello World!</marquee></font>
scrolldelay：表示滚动延迟时间。direction：表示滚动的方向，默认为从右向左。

表格

基本语法

<table border="1"
        width="400"
        height="200"
        bordercolor="red"
        background="back.jpg"
        bgColor=#ebefff
        cellpadding="30" 
        cellspacing="40"> 
  <tr>
    <td align="center">
      Content
    </td>
  </tr>
</table>

<table>：定义表格
<td>：列
<tr>：行
border：边框尺寸
width：宽度; height: 高度；bordercolor：边框颜色；background：表格的背景颜色; bgColor:表格、行、列的背景颜色(RGB颜色对照表)
align：表格、行、列的对齐方式

跨行跨列

<table border="1">
  <tr>
    <td>AAA</td>
    <td colspan="2">BBB</td>
  </tr>
  <tr>
    <td rowspan="2">DDD</td>
    <td>CCC</td>
    <td>FFF</td>
  </tr>
  <tr>
    <td>GGG</td>
    <td>YYY</td>
  </tr>
</table>

表单

表单的作用

注册用户
收集信息
反馈信息
为网站提供搜索工具

<FORM action=" http://www.sohu.com"method=" post" >
</FORM>
action：指定哪个网页接收
post：提交方法

<FORM name="form3" method="post" action="">
    <INPUT type="checkbox" name="gen" value="男 " size="21"maxlength=4 checked="checked">
</FORM>

type：控件类型
name：控件名称
value：默认值
size：控件初始宽度
maxlength：最大字符长度
checked：控件是否被选中

<FORM action=" http://www.sohu.com"method=" post" >
  <input type="text" /> <!-- 文 本 框 -->
  <input type="password" /> <!-- 密 框 -->
  <input type="hidden" /> <!-- 域 -->
  <input type="radio" /> <!-- 单 框 -->
  <input type="checkbox" /> <!-- 多 框 -->
  <input type="file" /> <!-- 文 件 上 传 框 -->
  <input type="button" /> <!-- 普 按 -->
  <input type="reset" /> <!-- 按 -->
  <input type="submit" /> <!-- 单 提 交 按 -->
  <input type="image" /> <!-- 图 片 按 -->
  <textarea rows="5" cols="40">
    文 本 域
  </textarea>
  <select> <!-- 下 拉 框 -->
    <option>AAA</option>
    <option>BBB</option>
    <option>CCC</option>
  </select>
</FORM>

Frame框架

FrameSet.html

Top.html 固定部分
left.html 导航功能
Main.html 详细内容

<frameset cols="25%,50%,*" rows="50%,*" border="5">
    <frame src="the_first.html">
</frameset>

cols：将窗口分割成左中右3部分，可选
rows="50%,*"：将窗口分割成上下2部分，可选
border:边框尺寸

<frame src="the_first.html">??????????????????
<frameset rows="20%,*" frameborder="0">
  <frame src="top.html" name="topframe" scrolling="no" noresize="noresize">
  <frameset cols="20%,*">
    <frame src="left.html" noresize="noresize"scrolling="no" name="leftframe">
    <frame src="right.html" name="rightframe">
  </frameset>
</frameset>

frameborder：设置边框大小
scrolling：滚动条
noresize：禁止调整框架大小
name：框架名，便于文本接标target属性所引用框架名，便于文本接标target属性所引用

如果在同一个页面中，要实现一个在框架窗口中的超链接出现在另一个框架窗口中，如何实现？

答案：使用target目标窗口属性

<P>
  <a href="right.html" target="rightframe">
  <IMG src="images/reg.jpg" width="158" height="31" border="0" /></A>
</P>
<P>
  <a href="buy.html" target="rightframe">
  <IMG src="images/buy.jpg" width="160" height="32" border="0" /></A>
</P>