您的位置：首页 > Web前端 > HTML

HTML网页制作基础

2011-05-22 19:20 399 查看
 HTML文档的结构

示例：
 
   
     标题部分 
   
   
    我的第一个html页面 
   
 

 
元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口中显示，但是其之间可以嵌入javascript 和css样式等丰富网页的内容。

 
用来标记你的页面的解码方式。

 
元素定义HTML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。

 
元素表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。

 
元素的属性概述
    1. Bgcolor 属性标志HTML文档的背景颜色。如:Bgcolor="＃RRGGBB"

        示例：

 
   
     标题部分 
   
   bgcolor="red"> 
    背影色设置为灰色 
   
 
    2. background 属性设置背景图片可使用GIF，JPG

        示例：

 
   
     标题部分 
   
   background="fengjing2_006.jpg"> 
       设置背景图片 
     
 
   
 
    3. bgproperties="fixed"使背景图片成固定效果，图片不随滚动条滚动。

        示例：

<HTML> 
   
     标题部分 
   
   background="fengjing2_006.jpg" bgproperties=fixed> 
    bgproperties="fixed"

 
    bgproperties设置为fixed  图片不随着滚动条而滚动。 
     
  
   
     4 .text 设置非链接文字的色彩。

    5. link、vlink、alink分别对应普通超级链接、访问过的超级链接、当前活动超级链接颜色。

示例：
 
   
     标题部分 
   
   alink="red" link="pink" vlink="green"> 
 href="http://www.google.com">点击进入 
 href="http://www.baidu.com">点击进入 
   
    6. leftmargin和topmargin页面左边的空白距
与上边的空白距。

HTML文字设置1

文字是网页设计的基础部分，设置好文字的样式，可以起到事半功倍的效果，通常可以使用两种方法。
    第1种方法是直接使用HTML标记进行设置，如:使用粗体标记将文本设置为加粗样式。
    第2种方法是使用css，层叠样式表。
    HTML定义了6级标题，1-6级，标题文字随级数增大依次减小。

     

h1的效果

    

h2的效果

    

h3的效果

    

h4的效果

    [b]h5的效果
    h6的效果
    示例：

 
   
     标题部分 
   
   
       

h1的效果

 
    

h2的效果

 
    

h3的效果

 
    

h4的效果

 
    h5的效果 
    h6的效果 
   

    利用align 属性可以实现标题文字水平方向左、中、右的对齐方式。
    align="left / center / right"
    示例：

 
   
     标题部分 
   
   
       

 align="left">right的效果

 
    

 align="center">center的效果

 
    

 align="right">left的效果

 
   
 
HTML文字设置2

设置文字以粗体的方式显示。语法[b]…
设置文字以斜体显示。语法[i]…
效果同语法…
设置文字以上标文本效果显示。语法…
设置文字以下标文本效果显示。语法…
设置文字以下划线显示。语法[u]…
设置文字以删除线显示。语法…
    示例：

 
   
     标题部分 
   
   
    粗体
 
    斜体
 
    斜体
 
    字体上标
 
    字体下标
 
    下划线
 
    删除线
 
   
 
控制的字体、大小和文字。
    语法：
    字体",size="文字大小",color="颜色值">…
face 控制文字使用的字体
    size 控制文字的大小
color 设置文字颜色
        
HTML段落设置

段落标记，一般情况下在每个段落的前面加上一个标记可以区分段落，又可以换行。

之后的文字将在下一行显视。
设置水平线。
标记所有包含的内容，将以居中对齐的方式显示在网页中。
< PRE >标签可以把原文件中的空格,回车,换行,tab键表现出来
标记将取消浏览器由于窗口大小变化而换行。
在HTML文档中加入标记，使标记内的HTML标记不起作用。
    示例：

     
     
       标题部分 
     
     
       这是一个段落标记。<p> 
      
    这是一个<br>
 
     >  
    居中显示
 
    
  
    abc    #sdfsd%#%     de        f g! 
         <>    sdfsad s$!@$(  h      $#@#%%  i    dsfasf          jk 
    
 
    天空在不断的变暗 但在玻璃窗的边缘 留下了一丝宝石的蓝 那样的深邃 像大海深处的暗淡 那样的忧郁 像我心底深处的盘旋 多么渴望留住这一丝 这最后的暗淡宝石的蓝 可时间的蔓延 总要将它消逝 然后 变得黑暗无边 
     
     
    天空在不断的变暗 但在玻璃窗的边缘 留下了一丝宝石的蓝 那样的深邃 像大海深处的暗淡 那样的忧郁 像我心底深处的盘旋 多么渴望留住这一丝 这最后的暗淡宝石的蓝 可时间的蔓延 总要将它消逝 然后 变得黑暗无边 
     
     
     
       
         标题部分 
       
     
       这是一个段落标记。<p> 
      
    这是一个<br>
 
     >  
    居中显示
 
      
     

HTML的转义字符--HTML 跑动文

标记可使文字产生跑动的效果
    direction 文字走动方向
    bgcolor 设置文字背景颜色
    height 设置跑动文字的高度
    width 设置跑动文字的宽度
    hspace 设置文字的水平边距
    vspace 设置文字的上边距
    behavior 设置文字的运动方式 scroll/alternate/slide
    loop 设置跑动文字的圈数
    scrollamount 设置跑动文字移动速度
    scrolldelay 设置跑动文字移动延时
    示例：

 
   
     标题部分 
   
   
     
    文字 
     
   
 
示例：

 
   
     标题部分 
   
   
        "
 
        <
 
        >
 
        ±
 
        ×
 
        &
 
        §
 
        ¢
 
        ¥
 
        ·
 
        €
 
        £
 
        ™
 
        ©
 
        ® 
   

HTML超链接

超链接是一个网站的重要元素之一，一个网站由多个页面组成，各页面之间是通过超链接来确定相互关系的，每个页面的地址都不同。
格式:这是一个连接
    href 设置超链接目标地址URL
    name 在html文档中建立特定位置的名称
    target 设置被链接的网页打开时的窗口_blank/_parent/_self/_top
    accesskey 设置超链接的快捷键
    title 设置超链接的说明文字
    style 运用css样式设置超链接文字样式
    示例：

 
   
     标题部分 
   
   
     href="../07-a.html" name="07html" target="_blank" 
         title="说明文字" accesskey="q" >html链接 
   
 
HTML超链接的锚点

是指同一页面中的不同位置链接。
一个网页的内容很长，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。
    示例：

 
   
     标题部分 
   
   
 name="top"> 
  08-A.html 
   
 href="08-a.html#abc" name="cba" >页面内的锚点1-_- 

 
 href="08-b.html#08b" name="08a" >页面外的锚点1………… 

 
 href="08-a.html#cba" name="abc">页面内的锚点2 

 
 href=#top>返回顶部 
   
 
HTML有序列表

列表分成三种类型：有序列表、无序列表和自定义列表。有序列表使用编号来记录项目的顺序，无序列表使用项目符号来记录无序的项目，自定义列表它由两个部分组成：定义条件和定义描述。
编号样式" start="编号起始值">
        项目一

        项目二

        ....
    
    type
        1 阿拉伯数字
        a 英文小写
        A 英文大写
        i 罗马小写数字
        I 罗马大写数字
    start 编号样式的起始数字，如：编号样式设为A，起始值设置为2，则列表的起始值为B.
    示例：

 
 
    标题 
 
 
     
      ☆无序列表 
      ☆有序列表 
      ☆定义列表 
     
     
         无序列表不以数字为开始，而是使用一个符号作为分项标记的列表。 
         有序列表使用数字编号，分项带有顺序性质的列表。 
         定义列表用于解释名词的列表，包含了两种层次，一是名词，一是名词的解释。 
     
 

HTML无序列表

无序列表标记

    项目一

    项目二

    ....

 type
    circle 空心圆
    disc 圆点
    square 正方形
示例：

 
 
    标题 
 
 
 type="I" start="2"> 
    啊啊
 
    啊啊
 
    啊啊
 
    啊啊
 
 
 

 
HTM自定义列表


    无序列表不以数字为开始，而是使用一个符号作为分项标记的列表。
    有序列表使用数字编号，分项带有顺序性质的列表。
    定义列表用于解释名词的列表，包含了两种层次，一是名词，一是名词的解释。

示例：
 
 
    标题 
 
 
 type="disc"> 
    啊啊
 
    啊啊
 
    啊啊
 
    啊啊
 
 
 

 
HTML建立表格

使用表格可以划分页面的布局
格式：..
表格中的一行数据
表格中的二行数据
表格中的三行数据
示例：
 
 
    标题 
 
 
     border="1"> 
           
         
          
     
表格中的一行数据表格中的一行数据
表格中的二行数据表格中的二行数据
表格中的三行数据表格中的三行数据
 
 
标签的属性

border     设置表格边框
caption    设置表格标题
align     设置表格在网页中的布局
width     设置表格宽度
height     设置表格高度
cellspacing    设置表格各单元格之间距离
cellpadding    设置单元格内部与文本之间的间距
bordercolor    设置表格边框颜色
bordercolorlight     设置表格亮面颜色
Bordercolordark 设置表格暗面颜色
示例：
<html> 
 
    标题 
 
 
    
 border="1" width="50%" height="100" bordercolorlight="#FF0000" bordercolordark="#00FF00"> 
     
           
          
         
    
表格中的一行数据表格中的一行数据
表格中的二行数据表格中的二行数据
表格中的三行数据表格中的三行数据
 
 
 标签的属性

bgcolor 设置背景颜色。
align 设置行对齐方式。
valign 设置单元格垂直对齐方式。
示例：
<html> 
 
    标题 
 
 
     width="400" border="1"> 
      bgcolor="#0099FF">      align="right">  
      valign="top"> 
   
表格中的一行数据表格中的一行数据
表格中的二行数据表格中的二行数据
 height="50">表格中的三行数据表格中的三行数据
 
 
和标签的属性

bgcolor 设置单元各背景颜色
rowspan 设置单元格所占行数
colspan 设置单元格所占的列数
align 设置对齐方式
valign 设置单元格垂直对齐方式
width 设置单元格宽度
height 设置单元格高度
示例：
<html> 
 
    标题 
 
 
  width="400" border="1"> 
       
              
             
    
 bgcolor="#0099FF">表格中的一行数据 align="center">表格中的一行数据
表格中的二行数据表格中的二行数据
表格中的三行数据表格中的三行数据
 
         
        rowspan 
            width="400" border="1"> 
             
               
               
        
 rowspan="3">一行数据第一行数据
第二行数据
第三行数据
 
         
        colspan 
          width="400" border="1"> 
               
              
                 
        
 colspan="2">第一行数据
第二行数据第二行数据
第三行数据第三行数据
 
         
        th 
         border="1"> 
             
             
              
             
    
表格中的一行数据表格中的一行数据
表格中的二行数据表格中的二行数据
表格中的三行数据表格中的三行数据
 
 
 HTML特殊表格

Rules 设置单元格的特效
Fieldset 设置特殊表格
示例：
<html> 
 
    标题 
 
 
     width="200" border="1" rules="rows" > 
             
             
    
第一行第一行
第二行第二行
 
     border="0" width="100" bgcolor="#000000" cellspacing="1" cellpadding="0">  
         bgcolor="#FFFFFF">  
         bgcolor="#FFFFFF">  
    
细线表格细线表格
细线表格细线表格
  
     border="1"   bordercolorlight="#ffffff" bordercolordark="#ffffff">  
          
          
    
 bgcolor="#B7B7B7" bordercolorlight="#000000" >立体表格
 bgcolor="#B7B7B7" bordercolorlight="#000000"   >立体表格
  
     style="width:50">  
         公告   
        更多更新视教程，请到www.jz97.net 
      
 
HTML 表单

表单是HTML的一个重要部分，主要用于采集和提交用户输入的信息。
"f1"    action="处理表单用的URL" method="get或post" >

    1、name：
设置表单的名称。
    2、action：
设置表单的处理程序的URL。
    3、method：提交表单的方法。
示例：
 
 xmlns="http://www.w3.org/1999/xhtml"> 
 
 http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
无标题文档 
 
 
 
 name="f1" action="request.asp" method="post"> 
    请输入用户名: 
         name="txt" type="text" size="10" maxlength="7" /> 
        
 
        请输入 密  码: 
         name="pwd" type="password" size="10" maxlength="6"  /> 
        
 
        选择强项：
 
        体育 
         type="checkbox" name="ck" value="体育" /> 
        音乐 
         type="checkbox"  name="ck" value="音乐"  /> 
        跳舞 
         type="checkbox"  name="ck" value="跳舞" /> 
        
 
        男 type="radio" name="sex" value="男" checked="checked" />女 type="radio" name="sex" value="女" />
 
         name="sn"> 
               selected>中国 
              美国 
             韩国 
            
        
 
         name="确定" type="submit" id="确定" value="提交" /> 
         name="re" type="reset" value="重置"  /> 
    
 
 
 
HTML表单中常用的标记

    输入域一般在表单中使用
1、"text" />输入单行文字
2、"password"/>输入密码
3、"radio" /> 单选按钮
4、"checkbox" />多选按钮
5、"image" />图片
6、"file" /> 文件上传
7、"hidden" />隐藏域
8、"reset" />撤销按钮
9、提交按钮
10、"button" />普通按钮
    示例：
 
 xmlns="http://www.w3.org/1999/xhtml"> 
 
 http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
无标题文档 
 
 
 
     
        输入单行文字 type="text"  />
 
        输入密码 type="password"/>
 
        单选按钮 type="radio" name="abc" /> 
                  type="radio" name="abc" />
 
        多选按钮 type="checkbox" name="ab" />
                  type="checkbox" name="ab" />
 
        图片域 type="image" src="29.gif"  />
 
        文件上传 type="file" />
 
        隐藏域 type="hidden" />
 
        撤销按钮 type="reset" value="撤销按钮" />
 
        提交按钮 type="submit" value="提交按钮" />
 
        执行脚本 type="button"  value="普通按钮" onclick="prompt()" />
 
         name="t1" rows="4" cols="50"> 
            文本域 
         
        
 
              name="selectname"> 
               >中国 
               selected="selected" >美国 
               >韩国 
            
     
 
 HTML表单中常用的标记

多行文本输入标记
"t1",rows=x,cols=x>
……

name 设置识别名称。
rows 设置文本域的行数
cols 设置文本域的列数
disabled 设置文本为禁用
warp 设置为off 不换行
HTML     表单中常用的标记
选择域
    
    选项一
    < option >选项二
    ¡¡

HTML表单提交数据

    html提交数据时必须设置标签name和value属性，以便asp程序能获取相应的值。
HTML 的框架

使用框架可以划分页面

"20%,80%">
        
        

示例：
<html> 
     
        HTML 框架 
     
     cols="20%,*" framespacing="2" frameborder="yes"> 
         src="A.html" name="framename" > 
         src="B.html" scr="B.html"> 
      
     
      
     

A.html:
 
 
    HTML 框架 
 
 
  
 
A页面-----------
A页面
A页面
A页面
 
A页面
A页面
A页面
A页面
 
 
 B.html:
 
 
    HTML 框架 
 
 
  
    B页面
B页面
B页面
B页面
B页面
B页面
B页面
B页面
 
    B页面
B页面
B页面
B页面
B页面
B页面
B页面
B页面
B页面
 
 
 HTML frameset标签的属性

cols =size 设置列的大小
rows=size 设置行的大小
frameborder 是否显示边框yes/no,1/0
framespacing 设置分割条大小
HTML frame标签的属性

src 设置要链接的HTML 文件
name 窗体的名称
marginwidth 设置窗口左右边界的距离
Marginheight 设置窗口上下边界的距离
scrolling 设置窗口是否使用滚动条 yes/no 默认为auto
noresize 不能调整窗口大小
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 xmlns="http://www.w3.org/1999/xhtml"> 
     
         http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
        无标题文档 
     
     
     
HTML iframe 标签

使用格式：
     
      
         href="http://www.google.com" target="iframename">进入谷歌 
     

HTMl 加入图像

插入图片的元素标记
格式: ..
常用属性:
src ="图片源地址"
alt ="替换文字"
width ="宽度"
height ="高度"
hspace ="垂直边距"
vspace ="水平边距"
border ="边框"
align ="对齐方式"
示例：
 
 xmlns="http://www.w3.org/1999/xhtml"> 
 
     http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    无标题文档 
 
 
 
     src="03.gif" alt="按此在新窗口打开图片" width="110" border="0" onclick="window.open(this.src);"
 onmouseover="this.style.cursor='hand';" onload="if(this.width>=111) {this.width=300;}"> 
 
HTML 加入声音1


src="文件的位置URL"
autostart="true/false"自动启动
loop="循环次数"
示例：
 
 xmlns="http://www.w3.org/1999/xhtml"> 
 
     http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    无标题文档 
     language="javascript"> 
        var bool=true; 
        function next() 
        {     
            if(bool==true) 
            { 
                 bool=false; 
                 bg.src="dt.mp3"; 
                  
            } 
            else 
            { 
                bool=true; 
                bg.src="spain.mp3"; 
            } 
        } 
        function Min() 
        {     if(bg.volume==-10000) 
            { 
                return; 
            } 
            else 
            { 
            bg.volume-=500; 
            this.txt.value=bg.volume; 
            } 
        } 
        function Max() 
        {     if(bg.volume==0) 
            { 
                gb.Max.disabled="disabled" 
                return; 
            } 
            else 
            { 
            bg.volume+=500; 
            this.txt.value=bg.volume; 
            } 
        } 
     
 
 
 
 
     src="spain.mp3" volume="0" balance="-1" loop="true" id="bg">  
     type=button value="静音" onclick="bg.volume=-10000">  
     type=button value="撤销静音" onclick="bg.volume=0"> 
     type=button value="音量++" onclick="Max()" id="Max" > 
     type=button value="音量--" onclick="Min()" id="Min"> 
     type=button value="下一首" onclick="next()"> 
     type="text" id="txt"/>  
 

HTML 加入声音2


src ="文件的位置URL"
volume="音量" -10000到0之间 0最高音量
balance="声道"-10000到10000之间的值
loop="循环次数"
HTML 加入视频


    
    

示例1：
 
     
        无标题文档 
     
     bgcolor="#666666"> 
         classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" 
            width="485" height="111"> 
               name="movie" value="139.swf"> 
               name="wmode" value="transparent"> 
         
     

示例2：

 
 xmlns="http://www.w3.org/1999/xhtml"> 
 
     http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    无标题文档 
 
 
 
      height="80"  src="2.swf" >  
     
 
 

HTML DIV与CSS样式

DIV＋CSS是网页设计标准
可以把这个DIV元素看作一个层，也可以把他看成一个容器。他是用来在页面上具体定位的一个层
。
CSS是Cascading Style Sheets(层叠式样式表)的简称.
    1使页面加载更快 2修改设计更有效率
    3代码从用度高
HTML CSS样式-内联式样式

内联式样式：它利于现有的HTML标记，把特殊的样式加入到那些由标记控制的信息中。
基本格式：
标签 style="CSS 样式" >
CSS控制显示区域
标签>
示例：
 
     
        无标题文档 
         
         type="text/css"> 
             a:link{ font-size:1cm;} 
             a:hover{color:#00FF00;} 
             a:visited{color:#0033FF} 
         
     
     
     
         href="http://google.com">aaaaaa 
     
 HTML CSS样式-嵌入式样式

嵌入式样式：它和Javascript一样可以嵌入到HTML文件的头部中
（和标记之间），使用和容器装载，例如：
    
         p {color : red ; font-weight : bold} ，
这样会对页面中所有标记都起作用

HTML CSS样式-外部式样式

外部式样式：是一种保存在外部的样式单文件，外部文件以.CSS为扩展名。
    例如:
    
HTML CSS样式-输入式样式

输入样式表：
    @import url(demo.css);
作用:导入CSS文件。
HTML - CSS标签选择器

标签选择器
class选择器
id选择器
关联选择器
组合选择器
伪元素选择器
HTML – DIV网页布局

使用DIV+CSS布局，使页面代码更精简。
示例_index.html：
 
 
无标题文档 
 rel="stylesheet" type="text/css" href="demo.css"> 
 
 
      id="one"> 
         id="left"> 
         id="center"> 
             id="head">head 
             id="bd"> 
                   id="bd_left"> 
                     id="login">  
 
                         
                            登录： type="text" class="text">
 
                            密码： type="password" class="text">
 
                             type="checkbox">保存Cookies
 
                             type="submit" value="确定"  class="button" > 
                             type="reset" value="撤销" class="button"> 
                         
                     
                     class="count"> class="count_1">统计信息  
                     class="count"> class="count_2">排行榜 
                     class="count"> class="count_2">排行榜 
                 
                 id="bd_right"> 
                     class="bd_right1"> class="bd_right_1"> href="#">最新动态 
                     type="square"> 
                        欢迎到www.jz97.net 
                        欢迎到www.jz97.net 
                        欢迎到www.jz97.net 
                        欢迎到www.jz97.net 
                     
                     
                     class="bd_right2"> class="bd_right_1">互动学习 
                     class="bd_right1"> class="bd_right_1">最新动态 
                     class="bd_right2"> class="bd_right_1">互动学习 
                     class="bd_right1"> class="bd_right_1">最新动态 
                     class="bd_right2"> class="bd_right_1">互动学习 
                 
             
             id="food">food 
         
         id="right"> 
     
   
 

 示例_demo.css:
/* CSS Document */
body{
text-align:center;
background:#e5eef5;
margin:0px;}
#one{
background:#f6f6f6;
width:816;
height:1200px;}
#left{
width:8px;
height:1200px;
background:url(img/left1.gif);
float:left}

#center{
width:800px;
height:1200px;
background:#FFFFFF;
float:left}
#right{
width:8px;
height:1200px;
background:url(img/right1.gif);
float:right}
#head{
width:800px;
height:80;
background:#e5eef5;
float:left}
#bd{
width:800px;
height:1000px;
background:#f6f6f6;
margin-top:20px;}
#food{width:800px;
height:80px;
background:#e5eef5;
margin-top:20px;}
#bd_left{
width:230px;
height:1000px;
float:left;}
#bd_right{
width:570px;
height:1000px;
float:right;}
#login{
width:200px;
height:120px;
margin-top:20px;border:1px solid #84b0c7;
background:#FFFFFF}
.count{
width:200px;
height:230px;
background:#f6f6f6;
margin-top:20px;border:1px solid #84b0c7;}
.bd_right1{
width:260px;
height:310px;
margin-top:20px;
border:1px solid #84b0c7;
background:#f6f6f6;
float:left;
text-align:left}
.bd_right2{
width:260px;
height:310px;
margin-top:20px;
border:1px solid #84b0c7;
background:#f6f6f6;
float:right;
margin-right:20px;text-align:left}

p{
font-size:12px;
color:#0099FF}

.text{
border-style:groove;
width:100px;
height:20px;}

.button{
border-style:none;
background:#FFFFFF;
border-bottom-style:inset;
border-right-style:inset}

.count_1{
width:196;
height:20px;
margin-top:2px;
background:#f3f3e5}

.count_2{
width:196;
height:20px;
margin-top:2px;
background:f3e5e5}
.bd_right_1{width:256;
height:20px;
margin-top:2px;
background:e5eef5}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航