首页 > 代码库 > Web开发技术——HTML

Web开发技术——HTML

2024-08-07 13:07:26   218人阅读

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="http://www.mamicode.com/#"表示空链接

电子邮件链接

<a href="mailto:webmaster@sohu.com">站长邮箱<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>

 

Web开发技术——HTML


联系
我们