你的位置:首页 > 软件开发 > 网页设计 > HTML的基本语法

HTML的基本语法

发布时间:2017-12-06 01:00:01
HTML的文件结构:<html> <head>网页头部信息</head> ...

HTML的文件结构:<html>

                  <head>网页头部信息</head>

                  <body>网页主体正文部分</body>

                  </html>

HTML的基本标记:定义网页背景色——bgcolor

                   <body bgcolor=”背景颜色 ”>

                  设置背景图片——backgroung

                   <body background=”图片的地址 ”>

                  设置文字颜色——text

                   <body text=”文字的颜色 ”>

                  设置链接文字属性

                   <body link=”颜色 ”>

                  (使用alink可以设置鼠标单击超链接时的颜色

                    使用vlink可以设置已访问过的超链接颜色)

                   设置页面边距——margin

                   topmargin     设置顶边的距离

                   leftmargin     设置左边的距离

                   rightmargin    设置右边的距离

                   bottommargin  设置底边的距离

                   页面的头部元素<!DOCTYPE>和<head>

                    <!DOCTYPE>为浏览器提供的一项声明

                    <head>文档头部信息</head>

                   页面标题元素<title>

                    <title>…</title>(输入标题信息在浏览器上显示)

                   元信息元素<meta>

                       设置页面关键词

                        <meat name=”keywords ”content=”输入具体的关键词”>

                       设置页面主要内容

                        <meat name=”description ”content=”页面描述 ”>

                       定义页面的搜索方式

                        <meat name=”robots ”conten=”搜索方式 ”>

                   搜索方式取值:all 表示能搜索当前网页及其链接的网页

                                 nofollow 搜索引擎不继续通过此网页的链接搜索其他的网页

                                 follow 搜索引擎继续通过此网页的链接搜索其他的网页

                                 index 表示能搜索当前网页

                                 noindex 表示不能搜索当前网页

                                 none 搜索引擎将忽略此网页

                        定义编辑工具(generator:设置编辑工具)

                         <meat name=”generator ”content=”编辑软件的名称 ”>

                        定义页面的作者信息(author:设置作者信息)

                         <meat name=”author ”content=”作者的姓名”>

                        定义网页文字及语言(http-equiv 用于传送HTTP通信协议的标头)

                         <meat http-equiv=”content-type”content=”text/html ;charest=字符集类型”/>

                        定义页面的跳转 (refresh网页刷新)

                         <meat http-equiv=”refresh ”content=”跳转的时间;URL=跳转到的地址”>

                        定义页面的版权信息——copyright

                         <meat name=”copyright ”content=” type=”text/javascript ”src='/images/loading.gif' data-original=”dru.js ”></script>

       创建样式元素<style>

<style type=”text/css ”>

…………………………………………

</style>

链接元素<link>

<head>

<link rel=”stylesheet ”type=”text/css “href=”theme.css “/>

</head>

 

设置文字与段落格式

插入空格符号:&nbsp

输入特殊符号:&-&amp;﹤-&lt;﹥-&gt;x-&times;§-&sect;©-&copy;®-&reg;™-&trade

设置字体——face

        <font face=”字体样式 ”>……</font>

       设置字号——size

        <font size=”文字字号 ”>……</font>

       设置文字颜色——color

        <font color=”字体颜色 ”>……</font>

       设置粗体、斜体、下划线——b、strong、em、u

<b>加粗的文字</b>

<strong>加粗的文字</strong>

<i>斜体文字</i>

<em>斜体文字</em>

<cite>斜体文字</cite>

<u>下划线的内容</u>

设置上标和下标——sup、sub

<sup>上标内容</sup>

<sub>下标内容</sub>

设置段落的格式

       段落标记——p

         <p>段落文字</p>

段落的对齐属性——align

<aling=对齐方式>(left 左对齐、right 右对齐、center 居中对齐)

不换行标记——nobr

<nobr>不换行文字</nobr>

换行标记——br

<br>

插入水平线——hr

<hr>

设置水平线宽度与高度属性——width、size

<hr width=”宽度 ”>

<hr size=”高度 ”>

设置水平线的颜色——color

<hr color=”颜色 ”>

设置水平线的对齐方式——aling

<hr aling=”对齐方式 ”> (left 左对齐、right 右对齐、center 居中对齐)

水平线去掉阴影——noshade

<hr noshade>

设置滚动文字

滚动文字标签——marguee

<marquee>滚动的文字</marquee>

滚动方向属性——direction (默认:文字滚动的方向是从右向左的,可通过direction标记来设置滚动的方向)

<marquee direction=”滚动方向 ”>滚动的文字</marquee>

滚动方式属性——behavior

<marquee behavior=”滚动方式 ”>滚动的文字</marquee>

Behavior标记的属性:scroll-循环滚动,默认效果

                    Slide-只滚动一次就停止

                    alternate-来回交替进行滚动

滚动速度属性——scrollamount

<marquee scrollamount=”滚动速度 ”>滚动的文字</marquee>

滚动延迟属性——scrolldelay (毫秒)

<marquee scrolldelay=”时间间隔 ”>滚动的文字</marquee>

滚动循环属性——loop

<marquee loop=”循环次数 ”>滚动的文字</marquee>

滚动范围属性——width、height

< marquee width=”背景宽度 ”height=”背景高度 ” >滚动的文字</marquee>

滚动背景颜色属性——bgcolor

<marquee bgcolor=”背景颜色 ”>滚动的文字</marquee>

滚动空间属性——hspace、vspace(设置滚动文字周围的文字与滚动背景之间的空白区域)

<marquee hspace=”水平范围 ”vspace=”垂直范围 ”>滚动的文字</marquee>

 

创建精彩的图像和多媒体页面

  插入图像并设置图像属性

图像标记——img

<img src='/images/loading.gif' data-original=”图像文件的地址”>

属性            描述                属性             描述

src              图像的源文件        dynsrc           设定avia文件的播放

alt              提示文字             loop            设定avia文件循环播放的次数

width,height    宽度和高度           loopdelay       设定avia文件循环播放的延迟时间

border          边框                 start            设定avia文件的播放方式

vspace          垂直间距             lowsrc           设定低分辨率图片

hspace          水平间距             usemap          映像地图

align            排列

设置图像高度——height(如果img元素不定义高度,图片就会按照其原始尺寸显示)

<img src='/images/loading.gif' data-original=”图像文件的地址 ”height=”图像的高度 ”>

设置图像宽度——width

<img src='/images/loading.gif' data-original=”图像文件的地址”width=”图像的宽度 ”>

设置图像的边框——border

<img src='/images/loading.gif' data-original=”图像文件的地址 ”border=”图像边框的宽度 ”>

设置图像水平间距——hspace

<img src='/images/loading.gif' data-original=”图像文件的地址 ”hspace=”水平边距 ”>

设置图像垂直间距——vspace

<img src='/images/loading.gif' data-original=”图像文件的地址 ”vspace=”垂直边距 ”>

设置图像的对齐方式——align

<img src='/images/loading.gif' data-original=”图像文件的地址 ”align=”对齐方式 ”>

 

 

属性          描述                         属性        描述

Bottom      把图像与底部对齐              top        把图像与顶部对齐

left          把图像对齐到左边             right        把图像对齐到右边

middle       把图像与中央对齐

设置图像的代替文字——alt

   <img src='/images/loading.gif' data-original=”图像文件的地址 ”alt=”提示文字的内容 ”>

 添加多媒体文件

   <embed src='/images/loading.gif' data-original=”多媒体文件地址 ”width=”多媒体的宽度 ”height=”多媒体的高度 ”autostart=”是否自动运行”loop=”是否循环播放 ”></embed>

 添加背景音乐——bgsound

   <bgsound src='/images/loading.gif' data-original=”背景音乐的地址 ”>

 设置循环播放次数——loop(-1是无限循环)

   <bgsound src='/images/loading.gif' data-original=”背景音乐的地址 ”loop=”播放次数 ”>

 

创建超链接和表单

创建基本超链接

   超链接标记——a

    <a href=”链接目标 ”>链接显示文本</a>

   属性       说明                     属性            说明

   href       指定链接地址             title           为链接添加提示文字

   name      为链接命名              target          指定链接的目标窗口 

   设置的目标窗口(使用target 属性来控制打开的目标窗口)

    <a href=”链接目标 ”target=”目标窗口的打开方式”>

  创建图像的超链接

设置图像超链接——a

<a href=”链接目标 ”>链接的图像</a>

设置图像热区链接(形状:矩形-rect 椭圆形-circle 多边形-poly)

  <img usemap=”#热区名称 ”>

  <map name=”热区名称 ”>

  <area shape=”热点形状 ”coords=”区域坐标 ”href=”#链接目标 ”alt=”替换文字 ”>

   …………………………………………………………………

  </map>

 创建锚点链接

  创建锚点:<a name=”锚点的名称 ”></a>

  链接到页面不同位置的锚点链接:<a href=”#锚点的名称 ”>……</a>

 插入表单——form

   处理动作——action(用于指定表单数据提交到哪个地址进行处理)

     <form action=”表单的处理程序 ”>

       …………………………………

     </form>

 表单名称——name

   <form name=”表单名称 ”>

………………………………….

</form>

 传送方法——method

   <form method=”传送方法 ”>

……………………………..

</form>

 编码方式——enctype

   <form enctype=”编码方式 ”>

     ……………………………………

   </form>

  enctype的取值                                取值含义

  application/x-www-form-ulencoded           默认的编码形式

  multipart/form-data                         MIME编码,上传文件的表单必须选择项

  目标显示方式——target

   <form target=”目标窗口的打开方式 ”>

     ……………………………………

   </form>

 

创建强大的表格

  创建并设置表格属性

表格的基本标记——table、tr、td

<table>

   <tr>

   <td>单元格内的文字</td>

   <td>单元格内的文字</td>

   </tr>

   <tr>

   <td>单元格内的文字</td>

   <td>单元格内的文字</td>

   </tr>

   </table>

 表格宽度和高度——width、height

   <table width=”表格的宽度 ”height=”表格的高度 ”>

 表格的标题——caption

   <caption>表格的标题</caption>

 表格的表头——th

    <table>

    <tr>

    <th>…….</th>

    </tr>

    </table>

 表格对齐方式——aline(left-左对齐 center-居中 right-右对齐)

    <table aline=”对齐方式”>

 表格的边框宽度——border

    <table border=”边框宽度 ”>

 表格边框颜色——bordercolor

    <table border=”边框宽度 ”bordercolor=”边框颜色”>

 单元格间距——cellspacing

    <table cellspacing=”间距值 ”>

 单元格边距——cellpadding

     <table cellpadding=”文字与边框距离值 ”>

 表格的背景颜色——bgcolor

     <table bgcolor=”背景颜色 ”>

 表格的背景图像——background

     <table background=”背景图像地址 ”>

设计表头样式——thead

  <thead>

   …………………………

  </thead>

设计表主体样式——tbody

  <tbody bgcolor=”背景颜色 ”align=”对齐方式 ”>

  …………………………………………………….

  </tbody>

设计表尾样式——tfoot

  <tfoot bgcolor=”背景颜色 ”align=”对齐方式 ”valign=”垂直对齐方式 ”>

  …………………………………………………..

  </tfoot>

 

创建框架结构网页

  水平分割窗口——rows

     <frameset rows=”高度1,高度2,….,*”>

     <frame src='/images/loading.gif' data-original=”url ”>

<frame src='/images/loading.gif' data-original=”url ”>

……………………..

</frameset>

   垂直分割窗口——cols

      <frameset cols=”高度1,高度2,….,*”>

      <frame src='/images/loading.gif' data-original=”url ”>

<frame src='/images/loading.gif' data-original=”url ”>

……………………..

</frameset>

嵌套分割窗口

       <frameset rows=”30%,*”>

       </frame>

   <frameset cols=”20%,*”>

     <frame>

    <frame>

       </frame>

       </frame>

设置边框——frameborder

   <frameset frameborder=”是否显示 ”>

框架的边框宽度——framespacing

   <frameset framespacing=”边框宽度 ”>

框架的边框颜色——bordercolor

   <frameset bordercolor=”边框颜色 ”>

框架页面源文件——src

  <frame src='/images/loading.gif' data-original=”html文件的位置 ”>

框架名称——name

  <frame src='/images/loading.gif' data-original=”html文件的位置 ”name=”子窗口名称 ”>

调整框架窗口的尺寸——noresize

  <frame src='/images/loading.gif' data-original=”页面源文件地址 ”noresize >

框架边框与页面内容的水平边距——marginwidth

   <frame src='/images/loading.gif' data-original=”页面源文件地址 ”marginwidth=”value ”>

 

框架边框与页面内容的垂直边距——marginheight

   <frame src='/images/loading.gif' data-original=”页面源文件地址 ”marginheight=”value ”>

设置框架滚动条显示——scrolling

   <frame scrolling=”yes 或no或auto ”>

不支持框架标记——noframes

   <noframes>

   </noframes>

浮动框架的页面源文件——src

   <iframe src='/images/loading.gif' data-original=”url ”></iframe>

浮动框架的宽度和高度——width和 height

   <iframe src='/images/loading.gif' data-original=”浮动框架的源文件 ”width=”浮动框架的宽 ”height=”浮动框架的高 ”>

   </iframe>

浮动框架的对齐方式——align

   <iframe src='/images/loading.gif' data-original=”浮动框架的源文件 ”align=”对齐方式 ”></iframe>

设置浮动框架是否显示滚动条——scrolling

   <iframe src='/images/loading.gif' data-original=”浮动框架的源文件 ”scrolling=”是否显示滚动条 ”></iframe>

属性                           说明

auto             默认值,整个框架在浏览器页面中左对齐

yes              总是显示滚动条,即使页面内容不足以撑满框架范围,滚动条的位置也会预留出

no               在任何情况下都不显示滚动条

浮动框架的边框——frameborder

    <iframe src='/images/loading.gif' data-original=”浮动框架的源文件 ”frameborder=”是否显示框架边框 ”></iframe>

原标题:HTML的基本语法

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。