HTML网页制作基础

最新推荐文章于 2024-07-30 16:27:16 发布
最新推荐文章于 2024-07-30 16:27:16 发布
阅读量1.1k 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： HTML 文章标签： html 文档 css javascript button float
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/luowei505050/article/details/6438176

 

HTML文档的结构

示例：

 
   
     </span></span><span style="font-family:宋体">标题部分</span><span style="font-family:Consolas"><span style="color:blue"> 
   
   
    我的第一个html页面 
   
 

 

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

 

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

 

</span><span style="font-family:宋体">元素定义</span><span style="font-family:Consolas">HTML</span><span style="font-family:宋体">文档的标题。</span><span style="font-family:Consolas"><title></span><span style="font-family:宋体">与</span><span style="font-family:Consolas">之间的内容将显示在浏览器窗口的标题栏。

 

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

 

元素的属性概述

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

        示例：

 
   
     </span></span><span style="font-family:宋体">标题部分</span><span style="font-family:Consolas"><span style="color:blue"> 
   
   bgcolor="red"> 
    背影色设置为灰色 
   
 

    2. background 属性设置背景图片可使用GIF，JPG

        示例：

 
   
     </span></span><span style="font-family:宋体">标题部分</span><span style="font-family:Consolas"><span style="color:blue"> 
   
   background="fengjing2_006.jpg"> 
       设置背景图片 
     
 
   
 

    3. bgproperties="fixed"使背景图片成固定效果，图片不随滚动条滚动。

        示例：

<HTML> 
   
     </span></span><span style="font-family:宋体">标题部分</span><span style="font-family:Consolas"><span style="color:blue"> 
   
   background="fengjing2_006.jpg" bgproperties=fixed> 
    bgproperties="fixed"

 
    bgproperties设置为fixed  图片不随着滚动条而滚动。 
     
  
   
 

    4 .text 设置非链接文字的色彩。

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

示例：

 
   
     </span></span><span style="font-family:宋体">标题部分</span><span style="font-family:Consolas"><span style="color:blue"> 
   
   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的效果

    

h5的效果

    

h6的效果

    示例：

 
   
     </span></span><span style="font-family:宋体">标题部分</span><span style="font-family:Consolas"><span style="color:blue"> 
   
   
       

h1的效果

 
    

h2的效果

 
    

h3的效果

 
    
h4的效果
 
    
h5的效果
 
    
h6的效果
 
   

    利用align 属性可以实现标题文字水平方向左、中、右的对齐方式。

    align="left / center / right"

    示例：

<HTML> 
   
     </span></span><span style="font-family:宋体">标题部分</span><span style="font-family:Consolas"><span style="color:blue"> 
   
   
       

 align="left">right的效果

 
    

 align="center">center的效果

 
    

 align="right">left的效果

 
   
 

HTML文字设置2

设置文字以粗体的方式显示。语法…

设置文字以斜体显示。语法…

效果同 语法…

设置文字以上标文本效果显示。语法…

设置文字以下标文本效果显示。语法…

设置文字以下划线显示。语法…

设置文字以删除线显示。语法…

    示例：

<HTML> 
   
     </span></span><span style="font-family:宋体">标题部分</span><span style="font-family:Consolas"><span style="color:blue"> 
   
   
    粗体
 
    斜体
 
    斜体
 
    字体上标
 
    字体下标
 
    下划线
 
    删除线
 
   
 

控制的字体、大小和文字。

    语法：

    字体",size="文字大小",color="颜色值">…

face 控制文字使用的字体

    size 控制文字的大小

color 设置文字颜色

        

HTML段落设置

段落标记，一般情况下在每个段落的前面加上一个

标记可以区分段落，又可以换行。


之后的文字将在下一行显视。

设置水平线。

标记所有包含的内容，将以居中对齐的方式显示在网页中。

< PRE >标签可以把原文件中的空格,回车,换行,tab键表现出来

标记将取消浏览器由于窗口大小变化而换行。 

          &lt;/span&gt;&lt;span style="font-family:宋体"&gt;在&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;HTML&lt;/span&gt;&lt;span style="font-family:宋体"&gt;文档中加入&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&lt;XMP&gt;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;标记，使标记内的&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;HTML&lt;/span&gt;&lt;span style="font-family:宋体"&gt;标记不起作用。&lt;/span&gt;&lt;span style="font-family:Consolas"&gt; &lt;/span&gt;&lt;/p&gt;&lt;p&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;strong&gt;示例： &lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;&lt;span style="color:blue"&gt;HTML&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;HEAD&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;title&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;标题部分&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&lt;span style="color:blue"&gt;&lt;/title&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;/HEAD&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;BODY&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;这是一个段落标记。&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&amp;lt;p&amp;gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;p&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;这是一个&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&amp;lt;br&amp;gt;&lt;span style="color:blue"&gt;&lt;br&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;hr&lt;/span&gt;&nbsp;&lt;span style="color:blue"&gt;&gt;&lt;/span&gt;&nbsp;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;center&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;居中显示&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&lt;span style="color:blue"&gt;&lt;/center&gt;&lt;br&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;PRE&gt;&lt;/span&gt;&nbsp;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;abc&nbsp;&nbsp;&nbsp;&nbsp;#sdfsd%#%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;de&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;f&nbsp;g!&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;&gt;&lt;/span&gt;&nbsp;&nbsp;&nbsp;&nbsp;sdfsad&nbsp;s$!@$(&nbsp;&nbsp;h&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$#@#%%&nbsp;&nbsp;i&nbsp;&nbsp;&nbsp;&nbsp;dsfasf&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jk&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;/PRE&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;天空在不断的变暗&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;但在玻璃窗的边缘&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;留下了一丝宝石的蓝&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;那样的深邃&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;像大海深处的暗淡&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;那样的忧郁&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;像我心底深处的盘旋&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;多么渴望留住这一丝&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;这最后的暗淡宝石的蓝&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;可时间的蔓延&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;总要将它消逝&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;然后&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;变得黑暗无边&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;NOBR&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;天空在不断的变暗&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;但在玻璃窗的边缘&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;留下了一丝宝石的蓝&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;那样的深邃&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;像大海深处的暗淡&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;那样的忧郁&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;像我心底深处的盘旋&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;多么渴望留住这一丝&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;这最后的暗淡宝石的蓝&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;可时间的蔓延&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;总要将它消逝&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;然后&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;变得黑暗无边&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;/NOBR&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;XMP&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;HTML&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;HEAD&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;title&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;标题部分&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&lt;span style="color:blue"&gt;&lt;/title&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;/HEAD&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;BODY&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;这是一个段落标记。&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&amp;lt;p&amp;gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;p&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;这是一个&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&amp;lt;br&amp;gt;&lt;span style="color:blue"&gt;&lt;br&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;hr&lt;/span&gt;&nbsp;&lt;span style="color:blue"&gt;&gt;&lt;/span&gt;&nbsp;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;center&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;居中显示&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&lt;span style="color:blue"&gt;&lt;/center&gt;&lt;br&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;
 
      

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

标记可使文字产生跑动的效果

    direction 文字走动方向

    bgcolor 设置文字背景颜色

    height 设置跑动文字的高度

    width 设置跑动文字的宽度

    hspace 设置文字的水平边距

    vspace 设置文字的上边距

    behavior 设置文字的运动方式 scroll/alternate/slide

    loop 设置跑动文字的圈数

    scrollamount 设置跑动文字移动速度

    scrolldelay 设置跑动文字移动延时

    示例：

<HTML> 
   
     </span></span><span style="font-family:宋体">标题部分</span><span style="font-family:Consolas"><span style="color:blue"> 
   
   
      
     文字  
      
   
 

示例：

 
   
     </span></span><span style="font-family:宋体">标题部分</span><span style="font-family:Consolas"><span style="color:blue"> 
   
   
        "
 
        <
 
        >
 
        ±
 
        ×
 
        &
 
        §
 
        ¢
 
        ¥
 
        ·
 
        €
 
        £
 
        ™
 
        ©
 
        ® 
   

HTML超链接

超链接是一个网站的重要元素之一，一个网站由多个页面组成，各页面之间是通过超链接来确定相互关系的，每个页面的地址都不同。

格式:这是一个连接

    href 设置超链接目标地址URL

    name 在html文档中建立特定位置的名称

    target 设置被链接的网页打开时的窗口_blank/_parent/_self/_top

    accesskey 设置超链接的快捷键

    title 设置超链接的说明文字

    style 运用css样式设置超链接文字样式

    示例：

<HTML> 
   
     </span></span><span style="font-family:宋体">标题部分</span><span style="font-family:Consolas"><span style="color:blue"> 
   
   
     href="../07-a.html" name="07html" target="_blank" 
         title="说明文字" accesskey="q" >html链接 
   
 

HTML超链接的锚点

是指同一页面中的不同位置链接。

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

    示例：

<HTML> 
   
     </span></span><span style="font-family:宋体">标题部分</span><span style="font-family:Consolas"><span style="color:blue"> 
   
   
 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有序列表

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

  1. 编号样式 " start=" 编号起始值 ">

            

  2. 项目一

  3.         

  4. 项目二

  5.         ....

        

    type

        1 阿拉伯数字

        a 英文小写

        A 英文大写

        i 罗马小写数字

        I 罗马大写数字

    start 编号样式的起始数字，如：编号样式设为A，起始值设置为2，则列表的起始值为B.

    示例：

<html> 
 
    </span></span><span style="font-family:宋体">标题</span><span style="font-family:Consolas"><span style="color:blue"> 
 
 
    

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

HTML无序列表

无序列表标记

  •     

  • 项目一

  •     

  • 项目二

  •     ....

 

type

    circle 空心圆

    disc 圆点

    square 正方形

示例：

 
 
    </span></span><span style="font-family:宋体">标题</span><span style="font-family:Consolas"><span style="color:blue"> 
 
 

  1.   type= "I"  start= "2"> 
        
    • 啊啊
     
        
    • 啊啊
     
        
    • 啊啊
     
        
    • 啊啊
     
 
 

 

HTM自定义列表

    

无序列表
不以数字为开始，而是使用一个符号作为分项标记的列表。

    

有序列表
使用数字编号，分项带有顺序性质的列表。

    

定义列表
用于解释名词的列表，包含了两种层次，一是名词，一是名词的解释。

示例：

 
 
    </span></span><span style="font-family:宋体">标题</span><span style="font-family:Consolas"><span style="color:blue"> 
 
 

  •   type= "disc"> 
        
    • 啊啊
     
        
    • 啊啊
     
        
    • 啊啊
     
        
    • 啊啊
     
 
 

 

HTML建立表格

使用表格可以划分页面的布局

格式：

..

表格中的一行数据
表格中的二行数据
表格中的三行数据

示例：

 
 
    </span></span><span style="font-family:宋体">标题</span><span style="font-family:Consolas"><span style="color:blue"> 
 
 
    

border "1"> 



 =        
表格中的一行数据表格中的一行数据
           
表格中的二行数据表格中的二行数据
         
表格中的三行数据表格中的三行数据
         
 

标签的属性

border     设置表格边框

caption    设置表格标题

align     设置表格在网页中的布局

width     设置表格宽度

height     设置表格高度

cellspacing    设置表格各单元格之间距离

cellpadding    设置单元格内部与文本之间的间距

bordercolor    设置表格边框颜色

bordercolorlight     设置表格亮面颜色

Bordercolordark 设置表格暗面颜色

示例：

<html> 
 
    </span></span><span style="font-family:宋体">标题</span><span style="font-family:Consolas"><span style="color:blue"> 
 
 
    

border "1" width "50%" height "100" bordercolorlight "#FF0000" bordercolordark "#00FF00"> 




 = = = = =             
表格中的一行数据表格中的一行数据
           
表格中的二行数据表格中的二行数据
          
表格中的三行数据表格中的三行数据
       
 
 

标签的属性

bgcolor 设置背景颜色。

align 设置行对齐方式。

valign 设置单元格垂直对齐方式。

示例：

<html> 
 
    </span></span><span style="font-family:宋体">标题</span><span style="font-family:Consolas"><span style="color:blue"> 
 
 
   

width "400" border "1"> 
bgcolor "#0099FF">
align "right">
valign "top">
  = =     
 =
表格中的一行数据表格中的一行数据
     
 =
表格中的二行数据表格中的二行数据
       
 =
 height="50">表格中的三行数据表格中的三行数据
      
 

和 标签的属性

bgcolor 设置单元各背景颜色

rowspan 设置单元格所占行数

colspan 设置单元格所占的列数

align 设置对齐方式

valign 设置单元格垂直对齐方式

width 设置单元格宽度

height 设置单元格高度

示例：

<html> 
 
    </span></span><span style="font-family:宋体">标题</span><span style="font-family:Consolas"><span style="color:blue"> 
 
 

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> 
 
    </span></span><span style="font-family:宋体">标题</span><span style="font-family:Consolas"><span style="color:blue"> 
 
 
    

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：提交表单的方法。

示例：

 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" /> 
</span></span><span style="font-family:宋体">无标题文档</span><span style="font-family:Consolas"><span style="color:blue"> 
 
 
 

  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">               
  •                
  •               
  •             
    •  
            
     
             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" />普通按钮

        示例：

     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" /> 
    </span></span><span style="font-family:宋体">无标题文档</span><span style="font-family:Consolas"><span style="color:blue"> 
     
     
     
        

     
             输入单行文字  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="selectname">               
  •                
  •               
  •             
    •  
         
     
     

    HTML表单中常用的标记

    多行文本输入标记

    name 设置识别名称。

    rows 设置文本域的行数

    cols 设置文本域的列数

    disabled 设置文本为禁用

    warp 设置为off 不换行

    HTML     表单中常用的标记

    选择域

  •     

    •     选项一

        < option >选项二

        ¡¡

    HTML表单提交数据

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

    HTML 的框架

    使用框架可以划分页面

    "20%,80%">

            

            

    示例：

    <html> 
         
            </span>HTML </span><span style="font-family:宋体">框架</span><span style="font-family:Consolas"><span style="color:blue"> 
         
         cols="20%,*" framespacing="2" frameborder="yes"> 
             src="A.html" name="framename" > 
             src="B.html" scr="B.html"> 
           
         
          
         

    A.html:

     
     
        </span>HTML </span><span style="font-family:宋体">框架</span><span style="font-family:Consolas"><span style="color:blue"> 
     
     
      
     
    A    页面-----------<br>A页面
    A    页面
    A    页面
     
    A    页面
    A    页面
    A    页面
    A    页面
     
     
     

    B.html:

     
     
        </span>HTML </span><span style="font-family:宋体">框架</span><span style="font-family:Consolas"><span style="color:blue"> 
     
     
      
        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" /> 
            </span></span><span style="font-family:宋体">无标题文档</span><span style="font-family:Consolas"><span style="color:blue"> 
         
         
         

    HTML iframe 标签

    使用格式：

         
          
             href="http://www.google.com" target="iframename">进入谷歌 
         

    HTMl 加入图像

    插入图片的元素标记

    格式: ..

    常用属性:

    src ="图片源地址"

    alt ="替换文字"

    width ="宽度"

    height ="高度"

    hspace ="垂直边距"

    vspace ="水平边距"

    border ="边框"

    align ="对齐方式"

    示例：

     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" /> 
        </span></span><span style="font-family:宋体">无标题文档</span><span style="font-family:Consolas"><span style="color:blue"> 
     
     
     
         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="循环次数"

    示例：

     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" /> 
        </span></span><span style="font-family:宋体">无标题文档</span><span style="font-family:Consolas"><span style="color:blue"> 
         
     
     
     
     
         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：

     
         
            </span></span><span style="font-family:宋体">无标题文档</span><span style="font-family:Consolas"><span style="color:blue"> 
         
         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：

     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" /> 
        </span></span><span style="font-family:宋体">无标题文档</span><span style="font-family:Consolas"><span style="color:blue"> 
     
     
     
          height="80"  src="2.swf" >  
         
     
     

    HTML DIV与CSS样式

    DIV＋CSS是网页设计标准

    可以把这个DIV元素看作一个层，也可以把他看成一个容器。他是用来在页面上具体定位的一个层 。

    CSS是Cascading Style Sheets(层叠式样式表)的简称.

        1使页面加载更快 2修改设计更有效率

        3代码从用度高

    HTML CSS样式-内联式样式

    内联式样式：它利于现有的HTML标记，把特殊的样式加入到那些由标记控制的信息中。

    基本格式：

    标签 style="CSS 样式" >

    CSS控制显示区域

    标签>

    示例：

     
         
            </span></span><span style="font-family:宋体">无标题文档</span><span style="font-family:Consolas"><span style="color:blue"> 
             
             
         
         
         
             href="http://google.com">aaaaaa     
         
     

    HTML CSS样式-嵌入式样式

    嵌入式样式：它和Javascript一样可以嵌入到HTML文件的头部中 （和标记之间），使用容器装载，例如：

         ，

    这样会对页面中所有

    标记都起作用

    HTML CSS样式-外部式样式

    外部式样式：是一种保存在外部的样式单文件，外部文件以.CSS为扩展名。

        例如:

         rel="stylesheet" href="demo.css" type="text/css">

    HTML CSS样式-输入式样式

    输入样式表：

        @import url(demo.css);

    作用:导入CSS文件。

    HTML - CSS标签选择器

    标签选择器

    class选择器

    id选择器

    关联选择器

    组合选择器

    伪元素选择器

    HTML – DIV网页布局

    使用DIV+CSS布局，使页面代码更精简。

    示例_index.html：

     
     
    </span></span><span style="font-family:宋体">无标题文档</span><span style="font-family:Consolas"><span style="color:blue"> 
     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}
    HTML基础知识入门大全
    HTDiiii的博客
    08-20 3595
    HTML 什么是 HTML HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于 web 开发者。HTML 由一系列的元素组成，这些元素可以用来包围或标记不同部分的内容，使其以某种方式呈现或者工作。两端的标签可以使内容变成超链接，以连接到另一个页面；使字体表现为斜体等。 HTML 标签/元素 HTML 属性 第一个 HTML <!-- 文档的类型 ，根据类型可以知道当前文档的版本-->
    html网页制作（一）基础
    lulu001128的博客
    05-18 1514
    知识点
    HTML网页制作基础教程
    weixin_33936401的博客
    11-28 335
    http://hi.baidu.com/%D3%C4%D3%C4052/blog/item/f3d6e20149fea07d3912bba2.html 转载于:https://blog.51cto.com/xyduan/236054
    html是制作网页的基础,HTML网页制作基础..doc
    weixin_30698949的博客
    06-29 478
    HTML网页制作基础HTML网页制作基础1.HTML 语言简介2.HTML 语言的基本标签与对应的属性3.表格与表单4.框架5.图像、声音、视频6.DIV 层与css样式一.HTML 语言简介Html 的全称是”超文本标示语言”(Hyper text Markup Language) 是一种标记语言,不需要编译,直接由浏览器执行。Html 语言规范和标准:HTML语言是不区分大小写的，但一般来说，...
    HTML——网页设计基础
    热门推荐
    qq_29178991的博客
    09-17 1万+
    说道网页设计，HTML是我们必不可少的一部分。基础网页的构成，无论怎么变幻，都是由原声的HTML代码组成构成网页。 下面我就根据工作中所用和看过的书籍一点一点总结下我们常用的HTML格式和代码。 一、什么是HTML。 HTM不是一段编程语言，而是一款标记语言，本身不能显示在浏览器中。经过浏览器的编释和编译，才能正确反映HTML标记语言的内容。HTML从1.0到5.0经历了巨大的变化，从单一的
    HTML网页设计基础PPT.ppt
    12-23
    HTML网页设计基础 HTML网页设计基础是指使用HTML语言来设计和创建网页的基础知识和技能。HTML（HyperText Markup Language）是一种标准通用标记语言，用于创建网页的结构和内容。它由一系列的标记和符号组成，用于...
    HTML网页设计基础知识学习.pptx
    最新发布
    06-17
    HTML网页设计基础知识学习.pptx
    HTML网页制作基础题试题与答案.pdf
    10-08
    本资源是关于HTML网页制作基础知识的试题与答案，涵盖了HTML基本概念、网页结构、表格、框架、表单、CSS样式表、图像格式、链接、网页设计等方面的知识点。 1. HTML基本概念： * HTML网页的基本结构包括头部、体部...
    实验一-html网页设计基础.doc编程资料
    04-06
    实验一-html网页设计基础.doc
    英雄联盟LOL静态HTML网页制作模板 DIV+CSS学生网页作品代码 游戏题材大学生网页设计作业下载
    11-14
    本篇将围绕“英雄联盟LOL静态HTML网页制作模板”这一主题，详细探讨其背后涉及的HTML、CSS以及Dreamweaver等关键知识点，帮助初学者理解和掌握网页设计的基本流程。 首先，HTML（HyperText Markup Language）是网页...
    JavaScript基础
    11-30
    关于JavaScript的基础，可以初步进行了解
    网页开发基础——HTML
    m0_46155417的博客
    07-27 2488
    网页开发基础——HTML
    HTML网页设计：一、HTML的基础
    少可爱
    07-13 979
    一、HTML的基础结构 1、HTML文档的组成 HTML文档主要由3部分组成。 HTML部分：HTML部分以<HTML>标签开始，以<HTML>标签结束。<html>标签用来告诉浏览器这两个标签中间的内容是HTML文档。 头部：头部以<head>标签开始，以</head>标签结束。这部分包含显示在网页标题栏中的标题和其他在网页中不显示的信息。标题包含在<title>和</title>标签之间。 主体部分：主体部分包
    html网站设计基础
    m0_72398927的博客
    12-02 1342
    HTML (Hyper Text Mark-up Language)，即超文本标记语言，是创建网页基础。本章将学习HTML文档的基本结构、组成HTML文档的各类常见标签。HTML 标签可以说明文字、图形、动画、声音、表格和链接等。本章重点是各种标签的基本语法和用法。HTML称为超文本标签语言，它包括很多标签 (例如：段落、~标题标签)，这些标签用来告诉浏览器(例如微软公司的InternetExplorer，简称IE) 如何显示页面，它是网页制作的基础。
    HTML网页制作基础教程，从基础了解html常用标识
    html基础教程
    02-23 4658
    网页制作基础教程：认识HTML 　　在今天，做网页的工具到处都是,只要动几下鼠标，一个精彩的网页就出来了，HTML是否要学呢？答案是肯定的，因为工具就是工具，它们生成的代码是机械的，不够简洁，使网页打开的速度减慢。而且更新、管理起来极不方便。还有很多新的功能，工具是生成不了的。必需对代码进行编辑。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且...
    HTML初识——网页设计html基础
    qq_45864756的博客
    08-29 5762
    html初识
    HTML网页制作基础第一弹
    dx15618816293的博客
    09-20 7481
    听雨现在每天都会更新一些关于HTML网页制作的一些知识，从零开始，希望大家和听雨一起进步 HTML基本概念         HTML是HyBer Txet Markup language这四个英文单词的一个缩写，中文翻译为超文本标记语言，所以也称之为标记性语言。个人理解认为Html就是浏览器的母语，所以学习设计网页我们就要学习浏览器的语言！也就是html语言。而学习HTML的作
    HTML基础
    sixudhjj的博客
    07-30 1162
    HTML基础
    网页设计html基础知识
    qq_35354139的博客
    07-08 1020
    0基础，手把手教会你如何设计简单网页。
    HTML网页设计基础与实践
    本文主要探讨了网页设计与制作的基础知识，重点关注HTML、CSS和JavaScript这三个核心组成部分。首先，HTML（HyperText Markup Language）被定义为一种描述网页的语言，它用于构建和组织网页内容。HTML文档本质上是...
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包

    打赏作者

    罗哥分享

    你的鼓励将是我创作的最大动力

    ¥1 ¥2 ¥4 ¥6 ¥10 ¥20
    扫码支付：¥1
    获取中
    扫码支付

    您的余额不足，请更换扫码支付或充值

    打赏作者

    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值