Web开发技术——HTML

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>
  1. <title> 网页标题
  2. <head> 头部部分
  3. <body> 主体部分,网页内容可以是文本、图像
  4. head + body = 网页
  5. <meta>标签:描述网页,定义页面的一些基本信息。
  6. 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></font>

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

段落标签:<p></p>

换行标签:<br>

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

特殊符号

空格:&nbsp; 引号("")&quot; 小于(<):&lt; 大于(>):&gt; 版权号(@)&copy;

<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>
  1. <table>:定义表格
  2. <td>:列
  3. <tr>:行
  4. border:边框尺寸
  5. width:宽度; height: 高度;bordercolor:边框颜色;background:表格的背景颜色; bgColor:表格、行、列的背景颜色(RGB颜色对照表)
  6. 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> 

表单

表单的作用

  1. 注册用户
  2. 收集信息
  3. 反馈信息
  4. 为网站提供搜索工具
<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>
  1. type:控件类型
  2. name:控件名称
  3. value:默认值
  4. size:控件初始宽度
  5. maxlength:最大字符长度
  6. 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

  1. Top.html 固定部分
  2. left.html 导航功能
  3. 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>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。