HTML网页制作基础.docx

上传人:b****5 文档编号:11568810 上传时间:2023-03-19 格式:DOCX 页数:33 大小:27.57KB
下载 相关 举报
HTML网页制作基础.docx_第1页
第1页 / 共33页
HTML网页制作基础.docx_第2页
第2页 / 共33页
HTML网页制作基础.docx_第3页
第3页 / 共33页
HTML网页制作基础.docx_第4页
第4页 / 共33页
HTML网页制作基础.docx_第5页
第5页 / 共33页
点击查看更多>>
下载资源
资源描述

HTML网页制作基础.docx

《HTML网页制作基础.docx》由会员分享,可在线阅读,更多相关《HTML网页制作基础.docx(33页珍藏版)》请在冰豆网上搜索。

HTML网页制作基础.docx

HTML网页制作基础

HTML网页制作基础

HTML文档的结构

示例:

 

   

     标题部分 

   

   

    我的第一个html页面 

   

 

元素出现在文档的开头部分。

与之间的内容不会在浏览器的文档窗口中显示,但是其之间可以嵌入javascript和css样式等丰富网页的内容。

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

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

元素表明是HTML文档的主体部分。

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

元素的属性概述

1.Bgcolor属性标志HTML文档的背景颜色。

如:

Bgcolor=“#RRGGBB”

示例:

 

   

     标题部分 

   

   

    背影色设置为灰色 

   

 

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

示例:

 

   

     标题部分 

   

   

       设置背景图片 

     
 

   

 

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

示例:

 

   

     标题部分 

   

   

    bgproperties="fixed"

 

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

 

     
  

   

 

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

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

示例:

 

   

     标题部分 

   

   

点击进入 

点击进入 

   

6.leftmargin和topmargin页面左边的空白距与上边的空白距。

HTML文字设置1

文字是网页设计的基础部分,设置好文字的样式,可以起到事半功倍的效果,通常可以使用两种方法。

第1种方法是直接使用HTML标记进行设置,如:

使用粗体标记将文本设置为加粗样式。

第2种方法是使用css,层叠样式表。

HTML定义了6级标题,1-6级,标题文字随级数增大依次减小。

h1的效果

h2的效果

h3的效果

h4的效果

h5的效果

h6的效果

示例:

 

   

     标题部分 

   

   

       

h1的效果

 

    

h2的效果

 

    

h3的效果

 

    

h4的效果

 

    

h5的效果
 

    

h6的效果
 

   

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

align=“left/center/right”

示例:

 

   

     标题部分 

   

   

       right的效果 

    center的效果 

    left的效果 

   

 

HTML文字设置2

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

语法

设置文字以斜体显示。

语法

效果同语法

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

语法

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

语法

设置文字以下划线显示。

语法

设置文字以删除线显示。

语法

示例:

 

   

     标题部分 

   

   

    粗体
 

    斜体
 

    斜体
 

    字体上标
 

    字体下标
 

    下划线
 

    删除线
 

   

 

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

语法:

face控制文字使用的字体

size控制文字的大小

color设置文字颜色

HTML段落设置

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

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


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


设置水平线。

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

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

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

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

     

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样式设置超链接文字样式

示例:

 

   

     标题部分 

   

   

    

         title="说明文字" accesskey="q" >html链接 

   

 

HTML超链接的锚点

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

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

示例:

 

   

     标题部分 

   

   

 

  08-A.html 

  


 

页面内的锚点1-_- 













 

页面外的锚点1………… 













 

页面内的锚点2 













 

返回顶部 

   

 

HTML有序列表

列表分成三种类型:

有序列表、无序列表和自定义列表。

有序列表使用编号来记录项目的顺序,无序列表使用项目符号来记录无序的项目,自定义列表它由两个部分组成:

定义条件和定义描述。

  • 项目一
  • 项目二
  • ....

    type

    1阿拉伯数字

    a英文小写

    A英文大写

    i罗马小写数字

    I罗马大写数字

    start编号样式的起始数字,如:

    编号样式设为A,起始值设置为2,则列表的起始值为B.

    示例:

     

     

        标题 

     

     

        

     

          

    无序列表
     

          

    有序列表
     

          

    定义列表
     

        

     

        

     

             

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

     

             

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

     

             

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

     

        

     

     

    HTML无序列表

    无序列表标记

    • 项目一
    • 项目二
    • ....

    type

    circle空心圆

    disc圆点

    square正方形

    示例:

     

     

        标题 

     

     

     

        

  • 啊啊
  •  

        

  • 啊啊
  •  

        

  • 啊啊
  •  

        

  • 啊啊
  •  

     

     

    HTM自定义列表

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

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

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

    示例:

     

     

        标题 

     

     

     

        

  • 啊啊
  •  

        

  • 啊啊
  •  

        

  • 啊啊
  •  

        

  • 啊啊
  •  

     

     

    HTML建立表格

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

    格式:

    ..

    --表格中的一行数据-->

    --表格中的一行数据-->

    --表格中的一行数据-->

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

    示例:

     

     

        标题 

     

     

         

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

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

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

          

     

    标签的属性

    border设置表格边框

    caption设置表格标题

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

    width设置表格宽度

    height设置表格高度

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

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

    bordercolor设置表格边框颜色

    bordercolorlight设置表格亮面颜色

    Bordercolordark设置表格暗面颜色

    示例:

     

     

        标题 

     

     

         

         

            

       

            

      

            

     

        

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

     

     

    标签的属性

    bgcolor设置背景颜色。

    align设置行对齐方式。

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

    示例:

     

     

        标题 

     

     

        

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

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

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

        

     

    和标签的属性

    bgcolor设置单元各背景颜色

    rowspan设置单元格所占行数

    colspan设置单元格所占的列数

    align设置对齐方式

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

    width设置单元格宽度

    height设置单元格高度

    示例:

     

     

        标题 

     

     

     

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

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

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

         

            


     

            rowspan 

               

             一行数据 第一行数据   

                 第二行数据  

                  第三行数据 

             

            


     

            colspan 

             

                第一行数据   

                第二行数据第二行数据  

                    第三行数据第三行数据 

             

            


     

            th 

             

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

                

    --前者用来显示数据的名称,后者用来显示数据的内容。

    --> 

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

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

         

     

     

    HTML特殊表格

    Rules设置单元格的特效

    Fieldset设置特殊表格

    示例:

     

     

        标题 

     

     

        

    展开阅读全文
    相关搜索

    当前位置:首页 > 经管营销 > 经济市场

    copyright@ 2008-2022 冰豆网网站版权所有

    经营许可证编号:鄂ICP备2022015515号-1