HTML5   发布时间:2022-04-25  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html5全解析大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

htm是软件开发中非常基础的知识,也是很重要的知识,在web中是很重要的知识点,在此梳理一下主要内容

1、HTML是什么?

全称为HyperText MarkuP Language,超文本标记语言,非编程语言。

XHTML:功能和HTML差不多,但书写要求比HTML严格。

dhtml:动态页面:js+csss+html=dhtml

 

2、HTML的基本架构?

以下 HTML source Code 便是一份 HTML 文件的基本架构 :

<HTML>
<HEAD>
<titlE> 网页的标题 </titlE>
</HEAD>
<BODY>
网页的内容,很多标记都作用于此
</BODY>
</HTML>

特点解说:

  • 整份文件处于标记<HTML>与</HTML>之间。
    <HTML>用以声明这是 HTML 文件,让浏览器认出并正确处理此 HTML 文件

  • 文件分两部分,由<HEAD>至</HEAD>称为@H_618_56@开头,<BODY>至</BODY>称@H_618_56@本文。
    基本上两者各有适用的标记,如<titlE>只可出现于开头部分。

  • @H_618_56@开头部分用以存载重要资讯,而只有@H_618_56@本文部分会被显示
    所以大部分标记会运用于本文部分。

  • <titlE>所标示的是文件标题
    会出现于浏览器顶部及为别人 Bookmark 时的名称,所以每页有不同而明确的标题 是需要的。

上述标记中只有<BODY>具参数设定。

■ <BODY> 之参数设定:
例子:

<BODY @H_618_56@text="#000000" @H_618_56@ link="#0000FF" @H_618_56@alink="#FF0000" @H_618_56@ vlink="#0000FF" @H_618_56@BACkground="bg1.gif" @H_618_56@ bgcolor="#FFFFFF" @H_618_56@leftmargin=2 @H_618_56@ topmargin=2 @H_618_56@bgproperties="fixed">

  • @H_618_56@text="#000000"
    用以设定文字颜色。 #000000 代表黑色,亦可以采用颜色的名称,即 text="@H_618_56@black" 。

  • @H_618_56@link="#0000FF"
    设定一般文字连结颜色。

  • @H_618_56@alink="#FF0000"
    设定刚按下时文字连结颜色。

  • @H_618_56@vlink="#0000FF"
    设定连结后的颜色。(被按过)。

  • @H_618_56@BACkground="bg1.gif"
    设定背景墙纸。GIF 或 JPEG 皆可,可以是绝对途径或相对途径。

  • @H_618_56@bgcolor="#FFFFFF"
    设定背景颜色。当己设定背景墙纸时会失去作用,除非墙纸有透明部分。

  • @H_618_56@leftmargin=2
    设定整份文件显示画面的@H_618_56@左方边沿空间,单位为像素。 @H_618_56@ 『只适用于IE』

  • @H_618_56@topmargin=2
    设定整份文件显示画面的@H_618_56@上方边沿空间。 @H_618_56@ 『只适用于IE』

  • @H_618_56@bgproperties="fixed"
    固定背景墙纸,当卷动文字时墙纸不会跟著卷动。 @H_618_56@『只适用于IE』

标记及参数之字母大小都可以。  


3、编写规范

a、写法

·        任何标记皆由"<"及">"所围住,如 <p>

·        标记名与小于号之间不能留有空白字符。

·        某些标记 要加上参数,某些则不必。如 <font size="+2">Hello</font>

·        参数只可加于起始标记中。

·        在起始标记标记名前加上符号"/"便是其终结标记,如 </font>

·        标记字母大小写皆可。建议全部小写

 

b、HTML标记分类

b.1围堵标记:<p>aaaa</p>

b.1空白标记:aaaa<br/>



4、常用的HTML标记

排版标记 

<!--注解--><!--由这处开始是产品订购表格-->
<P> ;段落标记:<p align="center"> 
<BR> ;换行                  
 <HR> ; 水平线     <HR @H_618_56@align="LEFT" @H_618_56@size="2" @H_618_56@width="70%" @H_618_56@color="#0000FF" @H_618_56@noshade>   
 <CENTER> ;居中标记
 <PRE> ;@H_618_56@预设格式标记
<DIV> ;@H_618_56@区隔标记。作用:设定字、画、表格等的摆放位置。 
<NOBR> ;<NOBR>称为@H_618_56@不折行标记。作用:令某些文字不因太长而绕行,一 显示于同一行或下一 行。它对住址、数学算式、一行数字、程式码等尤为有用。 
<WBR> ; <WBR>称为@H_618_56@建议折行标记。作用:预设折行部位。

字体标记 

<h1>..<h6>h1最大字体
@H_618_56@<b></b>    <storong></storong> :加粗
@H_618_56@<i></i>  :斜体                <em></em>:定义着重文字
@H_618_56@<u></u>:下划线  <s></s>:中划线、删除线
@H_618_56@<sup>:上标   <sub>:下标
 <font>  :字体大小   <font @H_618_56@face="Arial" @H_618_56@size="+2" @H_618_56@color="#008000">Creation of Webpage</font> 

图像标记

<img @H_618_56@src="logo.gif" @H_618_56@ width=100 @H_618_56@height=100 @H_618_56@ hspace=5 @H_618_56@vspace=5 @H_618_56@ border=2 @H_618_56@align="top" @H_618_56@ alt="logo of PenPals Garden" @H_618_56@lowsrc="pre_logo.gif"> 

清单标记

<ol> <ul> <dl><li><dt><dd>

无序清单:ul    <UL @H_618_56@type="square">

有序清单:ol   <ol @H_618_56@type="i" @H_618_56@start="4"></ol>

@H_618_56@自定义清单:dl dt dd  

表格标记


<TABLE> <TR> <TD> :
这三个标记是定义表格的最重要的标记,可以说只学这三个己足够。
<TABLE>是一个容器标记意思是说它用以声明这是表格而且其他表格标记只能在他的 范围内才适用,属容器标记的还有其他。
<TR>用以标示@H_618_56@表格列(row)
<TD>用以标示@H_618_56@储存格(cell)

<TABLE> 的参数设定(常用):
例如: <table @H_618_56@width="400" @H_618_56@ border="1" @H_618_56@cellspacing="2" @H_618_56@ celLPADding="2" @H_618_56@align="CENTER" @H_618_56@ valign="TOP" @H_618_56@BACkground="myweb.gif" @H_618_56@ bgcolor="#0000FF" @H_618_56@bordercolor="#FF00FF" @H_618_56@bordercolorlight="#00FF00" @H_618_56@ bordercolordark="#00FFFF" @H_618_56@cols="2">

  • @H_618_56@width="400"
    表格宽度,接受绝对值(如 80)及相对值(如 80%)。

  • @H_618_56@border="1"
    表格边框厚度,不同浏览器有不同的内定值,故请指明。

  • @H_618_56@cellspacing="2"
    表格格线厚度,请看例子三,那是加厚到 5 的格线。

  • @H_618_56@celLPADding="2"
    文字与格线的距离,请看例子四,那是加至 10 的 padding。

  • @H_618_56@align="CENTER"
    表格的摆放位置(水平),可选值为: @H_618_56@left,@H_618_56@ right,@H_618_56@center,请看例子五或六,那表格 是放于中间的,为怕一些浏览器不支援,故特加上居中标记<CENTER>,只是多 层保证而己,当然只用<CENTER>亦可。

  • @H_618_56@valign="TOP".
    表格内字画等的摆放贴 位置(垂直),可选值为: @H_618_56@top,@H_618_56@ middle,@H_618_56@bottom。

  • @H_618_56@BACkground="myweb.gif"
    表格 纸,与 bgcolor 不要同用。

  • @H_618_56@bgcolor="#0000FF"
    表格底色,与 BACkground 不要同用,请看例子六

  • @H_618_56@bordercolor="#FF00FF"
    表格边框颜色,NC 与 IE 有不同的效果,请看例子六

  • @H_618_56@bordercolorlight="#00FF00"
    表格边框光部分的颜色,请看例子二。@H_618_56@『只适用于 IE』

  • @H_618_56@bordercolordark="#00FFFF"
    表格边框光部分的颜色,请看例子二,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。@H_618_56@『只适用于 IE』

  • @H_618_56@cols="2"
    表格栏位数目,只是让浏览器在下载表格是先画出整个表格而己。

<TR> 的参数设定(常用):
例如:<tr @H_618_56@align="RIGHT" @H_618_56@ valign="MIDDLE" @H_618_56@bgcolor="#0000FF" @H_618_56@ bordercolor="#FF00FF" @H_618_56@bordercolorlight="#808080" @H_618_56@bordercolordark="#FF0000">

  • @H_618_56@align="RIGHT"
    该一列内字画等的摆放贴 位置(水平),可选值为: @H_618_56@left,@H_618_56@ center,@H_618_56@right。

  • @H_618_56@valign="MIDDLE"
    该一列内字画等的摆放贴 位置(垂直),可选值为: @H_618_56@top,@H_618_56@bottom。

  • @H_618_56@bgcolor="#0000FF"
    该一列底色,请看例子五

  • @H_618_56@bordercolor="#FF00FF"
    该一列边框颜色,请看例子三。@H_618_56@『只适用于 IE』

  • @H_618_56@bordercolorlight="#808080"
    该一列边框光部分的颜色,请看例子三。@H_618_56@『只适用于 IE』

  • @H_618_56@bordercolordark="#FF0000"
    该一列边框光部分的颜色,请看例子三,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。@H_618_56@『只适用于 IE』

<TD> 的参数设定(常用):
例如:<td @H_618_56@width="48%" @H_618_56@ height="400" @H_618_56@colspan="5" @H_618_56@ rowspan="4" @H_618_56@align="RIGHT" @H_618_56@ valign="BOTTOM" @H_618_56@bgcolor="#FF00FF" @H_618_56@ bordercolor="#808080" @H_618_56@bordercolorlight="#FF0000" @H_618_56@bordercolordark="#00FF00" @H_618_56@ BACkground="myweb.gif">

  • @H_618_56@width="48%"
    该一储存格宽度,接受绝对值(如 80)及相对值(如 80%)。

  • @H_618_56@height="400"
    该一储存格高度。

  • @H_618_56@colspan="5"
    该一储存格向右打通的栏数。请看例子六

  • @H_618_56@rowspan="4"
    该一储存格向下打通的列数。请看例子六

  • @H_618_56@align="RIGHT"
    该一储存格内字画等的摆放贴 位置(水平),可选值为: @H_618_56@left,@H_618_56@right。

  • @H_618_56@valign="BOTTOM"
    该一储存格内字画等的摆放贴 位置(垂直),可选值为: @H_618_56@top,@H_618_56@bottom。

  • @H_618_56@bgcolor="#FF00FF"
    该一储存格底色,请看例子四

  • @H_618_56@bordercolor="#808080"
    该一储存格边框颜色,请看例子三。@H_618_56@『只适用于 IE』

  • @H_618_56@bordercolorlight="#FF0000"
    该一储存格边框光部分的颜色,请看例子三。@H_618_56@『只适用于 IE』

  • @H_618_56@bordercolordark="#00FF00"
    该一储存格边框光部分的颜色,请看例子三,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。@H_618_56@『只适用于 IE』

  • @H_618_56@BACkground="myweb.gif"
    该一储存格 纸,与 bgcolor 任用其一。

例子一:

原始码 <table width="60%" border="1">
<tr><td>只有一个储存格(cell)的表格</td></tr>
</table>
显示结果

 

只有一个储存格(cell)的表格

例子二:

原始码 <table width="60%" border="5" bordercolorlight="#FF00FF" bordercolordark="#FF0000">
<tr><td>第一列第一栏</td><td>第一列第二栏</td></tr>
</table>
显示结果

 

第一列第一栏 第一列第二栏

例子三:

原始码 <table width="60%" border="1" cellspacing="5">
     <tr bordercolor="#0000FF">
<td>第一列第一栏 </td>
<td>第一列第二栏 </td>
      </tr>
      <tr bordercolorlight="#FF00FF" bordercolordark="#00FF00">
<td>第二列第一栏 </td>
<td>第二列第二栏 </td>
      </tr>
</table>
显示结果

 

第一列第一栏 第一列第二栏
第二列第一栏 第二列第二栏

例子四:

原始码 <table width="60%" border="1" celLPADding="10">
     <tr>
<td bgcolor="#FFCCE6">第一列第一栏 </td>
<td bgcolor="#FFFFC6">第一列第二栏 </td>
      </tr>
      <tr>
<td bgcolor="#FFD9FF">第二列第一栏 </td>
<td bgcolor="#DAB4B4">第二列第二栏 </td>
      </tr>
</table>
显示结果

 

第一列第一栏 第一列第二栏
第二列第一栏 第二列第二栏

例子五:

原始码 <center>
<table width="60%" cellspacing="0" celLPADding="2" align="CENTER">
     <tr>
<td bgcolor="#FFD2E9">第一列第一栏 </td>
<td bgcolor="#FFDAB5">第一列第二栏 </td>
<td bgcolor="#FFFFB5">第一列第三栏 </td>
      </tr>
      <tr bgcolor="#C0C0C0">
<td>第二列第一栏 </td>
<td>第二列第二栏 </td>
<td>第二列第三栏 </td>
      </tr>
</table>
</center>
显示结果

第一列第一栏 第一列第二栏 第一列第三栏
第二列第一栏 第二列第二栏 第二列第三栏

例子六

原始码 <center>
<table width="350" border="1" cellspacing="0" celLPADding="2" align="CENTER" bgcolor="#FFC4E1" bordercolor="#0000FF">
     <tr>
<td>第一列第一栏 </td>
<td colspan="2">第一列 之 第二栏及第三栏 </td>
      </tr>
      <tr>
<td rowspan="2">第二列及第三列 之 第一栏 </td>
<td>第二列第二栏 </td>
<td>第二列第三栏 </td>
      </tr>
      <tr>
<td>第三列第二栏 </td>
<td>第三列第三栏 </td>
      </tr>
</table>
</center>
显示结果

第一列第一栏 第一列 之 第二栏及第三栏
第二列及第三列 之 第一栏 第二列第二栏 第二列第三栏
第三列第二栏 第三列第三栏

<TH> :
<TH>与<TD>同样是标示一个储存格,唯一不同的是<TH>所标示的储存格中的文字是以粗 体出现,通常用于表格第一列以标示栏目。它的用法是取代<TD>的位置便可以,其参数 设定请参<TD>。
当然若为<TD>所标示的储存格中的文字加上粗体标记<B>便等如<TH>的效果

例子:

原始码 <center>
<table width="350" border="1" cellspacing="0" celLPADding="2" align="CENTER">
     <tr align="CENTER">
@H_618_56@<th>@H_361_50@month @H_618_56@</th><th>% of IE visitor @H_618_56@</th><th>% of NC visitor @H_618_56@</th>
      </tr>
      <tr align="CENTER">
<td>August </td><td>61% </td><td>39% </td>
      </tr>
      <tr align="CENTER">
<td>July </td><td>54% </td><td>46% </td>
      </tr>
      <tr align="CENTER">
<td>June </td><td>52% </td><td>48% </td>
      </tr>
</table>
</center>
显示结果

@H_191_1390@month
% of IE visitor % of NC visitor
August 61% 39%
July 54% 46%
June 52% 48%

<CAPTION> :
<CAPTION> 的作用是为表格标示一个标题,有如在表格上方加上一没格线的打通列。 当然亦可置于下方,通常用以存放该表格的标题

<CAPTION> 的参数设定(常用):
例如:<caption @H_618_56@align="TOP" @H_618_56@ valign="TOP"></caption>

  • @H_618_56@align="TOP"
    该表格标题相对于表格的摆放贴 位置(水平),可选值为: @H_618_56@ left,@H_618_56@center,@H_618_56@top,@H_618_56@bottom,若 align="@H_618_56@bottom" 的话标题便会出现对表格的下方,不管你 的原始码中把 <caption> 放在 <table> 中的头部或尾部。

  • @H_618_56@valign="TOP"
    该表格标题相对于表格的摆放位置(上下),可选值为: @H_618_56@ top,@H_618_56@bottom。和 @H_618_56@ align="TOP" 或 @H_618_56@align="BOTTOM" 是一样的,功能重复了,但如果你要标题 置于下方及向右或向左贴 ,那末两个参数便可一 用了。当只 一个参数时, 请首选 align,因为 valign 是由 HTML 3.0 才开始的参数。

例子:

原始码 <center>
<table width="350" border="1" cellspacing="0" celLPADding="2" align="CENTER">
@H_618_56@<caption>网页速成 八月份访客浏览器使用分析@H_618_56@</caption>
     <tr align="CENTER">
<th>@H_361_50@month </th>
<th>% of IE visitor </th>
<th>% of NC visitor </th>
      </tr>
      <tr align="CENTER">
<td>August </td>
<td>61% </td>
<td>39% </td>
      </tr>
</table>
</center>
显示结果

@H_191_1390@month
网页速成 八月份访客浏览器使用分析
% of IE visitor % of NC visitor
August 61% 39%




链接标记

<a @H_618_56@href="index.html" @H_618_56@ name="Hello" @H_618_56@target="_top">                          target的4种属性: _self;_balank;_parent;_top

框架标记

<frameset cols="50%,*">

< frame name="Hello" src="up2u.html">
< frame name="hi" src="me2.html">
< /frameset
<iframe> 的参数设定如下:
例子: <iframe @H_618_56@src="iframe.html" @H_618_56@ name="test" @H_618_56@align="MIDDLE" @H_618_56@ width="300" @H_618_56@height="100" @H_618_56@ marginwidth="1" @H_618_56@marginheight="1" @H_618_56@ frameborder="1" scrolling="Yes"> 

多媒体标记

<BGSOUND>:
<BGSOUND> 是用以插入背景音乐,但只适用於 IE,其参数设定不多。如下

<BGSOUND @H_618_56@src="your.mid" @H_618_56@ autostart=true @H_618_56@loop=infinite>

  • @H_618_56@src="your.mid"
    设定 midi 档案及路径,可以是相对或绝对。
  • @H_618_56@autostart=true
    是否在音乐档传完之後,就自动播放音乐。true 是,false 否 (内定值)。
  • @H_618_56@loop=infinite
    是否自动反覆播放。LOOP=2 表示重复两次,Infinite 表示重复多次。
<EMBED>:
<EMBED> 是用以插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU 等等,netscape 及 新版的 IE 都支援。其参数设定狻多。如下

<EMBED @H_618_56@src="your.mid" @H_618_56@ autostart="true" @H_618_56@loop="true" @H_618_56@ hidden="true">

  • @H_618_56@src="your.mid"
    设定 midi 档案及路径,可以是相对或绝对。
  • @H_618_56@autostart=true
    是否在音乐档传完之後,就自动播放音乐。true 是,false 否 (内定值)。
  • @H_618_56@loop="true"
    是否自动反覆播放。LOOP=2 表示重复两次,true 是, false 否。
  • @H_618_56@HIDDEN="true"
    是否完全隐藏控制画面,true 为是,no 为否 (内定)。
  • @H_618_56@STARTTIME="分:秒"
    设定歌曲开始播放的时间。如 STARTTIME="00:30" 表示从第30秒处开始播放。
  • @H_618_56@VOLUME="0-100"
    设定量的大小,数值是0到100之间。内定则为使用者系统本身之设定。
  • @H_618_56@WIDTH="整数" 和 @H_618_56@HIGH="整数"
    设定控制画面的宽度和高度。(若 HIDDEN="no")
  • @H_618_56@ALIGN="center"
    设定控制画面和旁边文字的对 方式,其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom。
  • @H_618_56@CONTROLS="smallconsole"
    设定控制画面的外貌。预设值是 console。
    console 一般正常的面板   
    smallconsole 较小的面板   
    playbutton 只显示播放按钮   
    pausecutton 只显示暂停按钮   
    stopbutton 只显示停止按钮   
    volumeLever显示音量调整钮  

其他标记

<MARQUEE>:
<MARQUEE> 只适用於 IE ,译为「跑马灯」如 Status Bar 的那种,意指走动或卷动的 文字,其参数设定狻多。我先举些例子,然後再列出各参数。

例子一:

原始码 <marquee width=150>I'm a small MARQUEE</marquee>
显示结果
I'm a small MARQUEE

例子二:

原始码 <marquee behavior=slide>This is a slide effect</marquee>
显示结果
This is a slide effect

例子三:

原始码 <marquee behavior=alternate>撞来撞去,啊!我昏啦</marquee>
显示结果
撞来撞去,啊!我昏啦

例子四:

原始码 <marquee scrolldelay=5 scrollamount=50>哗!!太快了,我又昏啦</marquee>
显示结果
哗!!太快了,我又昏啦

<marquee behavior="SCROLL" direction="LEFT" bgcolor="#0000FF" height="30" width="150" hspace="0" vspace="0" loop="INFINITE" scrollamount="30" scrolldelay="500">Hello</marquee>

  • behavior="SCROLL"
    决定文字的卷动方式,可选值为:
    SCROLL 一般卷动,是内定值。
    SLIDE幻灯片,一格格的,效果文字一接触左边便全部消失。
    ALTERNATE 文字向左右两边撞来撞去。

  • direction="LEFT"
    设定文字的卷动方向,LEFT 表示向左,是内定值,RIGHT 表示向右。

  • bgcolor="#0000FF"
    设定文字卷动范围的背景颜色。

  • height="30" width="150"
    >设定文字卷动范围,可采用相对或绝对,如 30% 或 30 等,单位为像素。

  • hspace="0" vspace="0"
    设定文字的水平及垂直空白位置。

  • loop="INFINITE"
    设定文字卷动次数,其值可以是正整数或 INFINITE,INFINITE 是内定值,表示无 限次。

  • scrollamount="30"
    每「格」文字间的间隔,单位是像素。

  • scrolldelay="500"
    文字卷动的停顿时间,单位是毫秒。
@L_450_155@
<BLINK> 是令文字闪烁,只适用於 NC用法直接,没有参数。看看例子便知:

例子:

原始码 <blink>我是天上星,闪又闪</blink>
显示结果
我是天上星,闪又闪

<ISINDEX> 可让某些 Web Server 找寻网页内的关键字,假如你的 Web Server 提供这样的 找寻功能,使用者的浏览器也支援这些找寻功能,那堋,载入网页时就会看到一个简单的 找寻方块。其用法直接,没有参数,本来是要放於 <HEAD> 标记内的,但把它放在 <BODY> 标记内亦不见有问题,请记住,3W 以反对标记

例子:

原始码 <isindex>
显示结果
可以搜索该索引。请键入要搜索的关键字:

<Meta> 是放於 <HEAD> 与 </HEAD>之间的标记,功用与变化等对,所以我公式化地介 绍。
  • <Meta name="Description" content="This is Chris's Home Page">
    该网页的描述,作用於寻找引擎的登录

  • <Meta name="Keywords" content="Chris,Web,Music,photo">
    该网页的关键字,作用於寻找引擎的登录

  • <Meta http-equiv="Expires" content="Tue,09 Dec 1997 00:00:00 GMT">
    <Meta http-equiv="Pragma" content="no-cache">
    以上行功能相同,都是要浏览器重新载入该页,不要使用快取档案,当然可以修 改该 Expire 时间。

  • <Meta http-equiv="Content-Type" content="text/html; charset=big5">
    <Meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    设定这是 HTML 文件及其编码语系,中文网页请使用 big5 那行,或者不设编码亦 可,纯英文网页建议使用 iso-8859-1。

  • <Meta name="GENERATOR" content="Mozilla/4.04 [en] (Win95; I) [netscape]">
    <Meta name="GENERATOR" content="Microsoft FrontPage 3.0">
    这只表示该网页由甚堋编辑器写成。

  • <Meta http-equiv="refresh" content="10; url=http://www.hkiwc.com">
    这一行较为实用,能於预定秒数内自动转到指定的网址。原始码中 10 表示 10秒。
<LINK> 用来将目前文件与其它 URL 作连结,但不会有连结按钮,用於 <HEAD> 标记间, 格式如下:
<link href="URL" rel="relationship">
<link href="URL" rev="relationship">

用法我们会於 Style Sheet 一节详细介绍。 


特殊字符 

只要你认识了 HTML 标记,你便会知道特殊字符的用处。
HTML 原始码 显示结果 描述
&lt; < 小於号或显示标记
&gt; > 大於号或显示标记
&amp; & 可用於显示其它特殊字符
&quot; " 引号
&reg; ? 注册
&copy; ? 版权
&Trade; ? 商标
&ensp;   半方大的空白
&emsp;   全方大的空白
&nbsp;   不断行的空白

5、调色原理

@H_816_3301@  @H_935_30@magenta @H_935_30@maroon @H_935_30@mediumaquamarine @H_935_30@mediumblue @H_935_30@mediumorchid @H_935_30@mediumpurpul @H_935_30@mediumseagreen @H_935_30@mediumslateblue @H_935_30@mediumspringgreen @H_935_30@mediumturquoise @H_935_30@mediumvioletred @H_935_30@midnightblue @H_305_3489@  @H_935_30@mintcream @H_935_30@mistyrose @H_935_30@moccasin @H_696_3593@  @H_557_3673@  @H_469_3801@  @H_489_3849@ 
  • 以命名方式定义常用的颜色,如 @H_618_56@RED。
  • 以 RGB 值表示,如 @H_618_56@#FF0000 表示 red。

命名方式涵括的色种不多亦不甚方便,较少采用,以下介绍 RGB 值的原理:

众所皆知颜色是由 "@H_618_56@red" "green" "blue" 三原色组合而成的,在 HTML 中对於彩度的定义是 采十六进位的,对於三原色 HTML 分别给予两个十六进位去定义,也就是每个原色可有 256 种彩度,故此三原色可混合成一千六佰多万的颜色。

例如
白色的组成是 red=ff,green=ff,blue=ff,RGB 值即为 ffffff
红色的组成是 red=ff,green=00,blue=00,RGB 值即为 ff0000
绿色的组成是 red=00,RGB 值即为 00ff00
蓝色的组成是 red=00,RGB 值即为 0000ff
黑色的组成是 red=00,RGB 值即为 000000

於应用时常在每个 RGB 值之前加上符号 @H_618_56@# 以示分别,但不加亦可。

■ HTML 基本架构:
选按不同颜色按键以测试前景颜色效果 @H_618_56@(只适合 Internet Explorer)
           
选按不同颜色按键以测试背景颜色效果
           
或输入一个 RGB 颜色码或名称
   
■ 16 常用颜色表:
@H_233_2626@  @H_802_2674@  @H_935_30@maroon
Color Value Name   Color Value Name
  #00FFFF aqua     #808080 gray
  #000080 navy   #C0C0C0 silver
  #000000 black     #008000 green
  #808000 olive     #008080 teal
  #0000FF blue   #00FF00 lime
  #800080 purple     #FFFF00 yellow
  #FF00FF fuchsia     #800000
  #FF0000 red     #FFFFFF white
■ 其它常用颜色表:
@H_262_2874@  @H_562_2922@  @H_243_3013@ 
Color Value Name   Color Value Name
  #F0F8FF aliceblue     #A00000 antiquewith
  #7FFFD4 aquamarine     #F0FFFF azure
  #F5F5DC beige     #FFE4C4 bisque
  #000000 black     #FFEBCD blanchedalmond
  #0000FF blue     #8A2BE2 blueviolet
  #A52A2A brown   #DEB887 burlywood
  #5F9EA0 cadetblue     #7FFF00 chartreuse
  #D2691E chocolate     #FF7F50 coral
  #C0F000 cornfloewrblue   #FFF8DC cornsilk
  #00FFFF cyan  
#00008B darkblue
  #008B8B darkcyan     #B8860B darkgoldenrod
  #A9A9A9 darkgray     #006400 darkgreen
  #DA0000 darkhaki     #8B008B darkmagenta
  #556B2F darkolivegreen     #DA000E darkorenge
  #9932CC darkorchid     #8B0000 darkred
  #E9967A darksalmon     #8FBC8F darkseagreen
  #483D8B darkslateblue     #2F4F4F darkslategray
  #00CED1 darkturquoise     #9400D3 darkviolet
  #FF1493 deeppink     #00BFFF deepskyblue
  #696969 dimgray     #1E90FF dodgerblue
  #B22222 firebrick     #FFFAF0 floralwhite
  #228B22 forestgreen     #DCDCDC gainsboro
  #00000E gostwhite     #FFD700 gold
  #00E00D golenrod     #808080 gray
  #008000 green     #ADFF2F greenyellow
  #F0FFF0 honeydew     #FF69B4 hotpink
  #CD5C5C indianred     #FFFFF0 ivory
  #F0E68C khaki  #E6E6FA lavender
  #FFF0F5 lavenderblush     #7CFC00 lawngreen
  #FFFACD lemonchiffon     #ADD8E6 lightblue
  #F08080 Lightcoral     #E0FFFF Lightcyan
  #0000E0 lightgodenrod     #0000E0 lightgodenrodyellow
  #0000A0 lightgray     #90EE90 lightgreen
  #FFB6C1 lightpink     #FFA07A lightsalmon
  #20B2AA lightseagreen     #87CEFA lightskyblue
  #0000EB lightslateblue     #778899 lightslategray
  #B0C4DE lightsteelblue     #FFFFE0 lightyellow
  #32CD32 limegreen     #FAF0E6 linen
  #FF00FF     #800000
  #66CDAA     #0000CD
  #BA55D3     #ED0000
  #3CB371     #7B68EE
  #00FA9A     #48D1CC
  #C71585     #191970
#F5FFFA     #FFE4E1
  #FFE4B5     #FFDEAD navajowhite
  #000080 navy     #A0B0E0 navyblue
  #FDF5E6 oldlace     #6B8E23 olivedrab
  #FFA500 orange     #0E0EED orengered
  #DA70D6 orchid     #A00D00 palegodenrod
  #98FB98 palegreen   #AFEEEE paleturquoise
  #DB7093 palevioletred     #FFEFD5 papayawhip
  #FFDAB9 peachpuff     #CD853F peru
  #FFC0CB pink     #DDA0DD plum
  #B0E0E6 powderblue     #800080 purple
  #FF0000 red   #BC8F8F rosybrown
  #4169E1 royalblue     #8B4513 saddlebrown
  #FA8072 salmon     #F4A460 sAndybrown
  #2E8B57 seagreen     #FFF5EE seasHell
  #A0522D sienna     #87CEEB skyblue
  #6A5ACD slateblue     #708090 slategray
  #FFFAFA sNow     #00FF7F springgreen
  #4682B4 steelblue     #D2B48C tan
  #D8BFD8 thistle   #FF6347 tomato
  #40E0D0 turquoise     #EE82EE violet
  #00E0ED violetred     #F5DEB3 wheat
  #000E00 hite   #F5F5F5 whitesmoke
  #FFFF00 yellow     #9ACD32 yellowgreen

大佬总结

以上是大佬教程为你收集整理的html5全解析全部内容,希望文章能够帮你解决html5全解析所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。