html5全解析

最新推荐文章于 2023-08-31 10:37:22 发布
最新推荐文章于 2023-08-31 10:37:22 发布
阅读量1.9k 收藏 7
点赞数 1
分类专栏： 前端开发 java/android朝圣之路 文章标签： xhtml html ui设计 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sdksdk0/article/details/50739988
版权

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>称为开头，<BODY>至</BODY>称本文。
    基本上两者各有适用的标记，如<TITLE>只可出现于开头部分。

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

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

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

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

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

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

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

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

  • vlink="#0000FF"
    设定连结后的颜色。（被按过）。

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

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

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

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

  • bgproperties="fixed"
    固定背景墙纸，当卷动文字时墙纸不会跟著卷动。 『只适用于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 align="LEFT" size="2" width="70%" color="#0000FF" noshade>   
 <CENTER> ；居中标记
 <PRE> ；预设格式标记
<DIV> ；区隔标记。作用：设定字、画、表格等的摆放位置。 
<NOBR> ；<NOBR>称为不折行标记。作用：令某些文字不因太长而绕行，一　显示于同一行或下一 行。它对住址、数学算式、一行数字、程式码等尤为有用。 
<WBR> ； <WBR>称为建议折行标记。作用：预设折行部位。

字体标记：　

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

图像标记：

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

清单标记：

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

无序清单：ul    <UL type="square">

有序清单：ol   <ol type="i" start="4"></ol>

自定义清单：dl dt dd  

表格标记：


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

<TABLE> 的参数设定（常用）：
例如： <table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">

  • width="400"
    表格宽度，接受绝对值（如 80）及相对值（如 80%）。

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

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

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

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

  • valign="TOP".
    表格内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。

  • background="myweb.gif"
    表格　纸，与 bgcolor 不要同用。

  • bgcolor="#0000FF"
    表格底色，与 background 不要同用，请看例子六。

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

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

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

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

<TR> 的参数设定（常用）：
例如：<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">

  • align="RIGHT"
    该一列内字画等的摆放贴　位置（水平），可选值为： left, center, right。

  • valign="MIDDLE"
    该一列内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。

  • bgcolor="#0000FF"
    该一列底色，请看例子五。

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

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

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

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

  • width="48%"
    该一储存格宽度，接受绝对值（如 80）及相对值（如 80%）。

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

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

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

  • align="RIGHT"
    该一储存格内字画等的摆放贴　位置（水平），可选值为： left, center, right。

  • valign="BOTTOM"
    该一储存格内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。

  • bgcolor="#FF00FF"
    该一储存格底色，请看例子四。

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

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

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

  • 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">
<th>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>
      <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>
显示结果

Month% of IE visitor% of NC visitor
August61%39%
July54%46%
June52%48%

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

<CAPTION> 的参数设定（常用）：
例如：<caption align="TOP" valign="TOP"></caption>

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

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

例子：

原始码<center>
<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER">
<caption>网页速成 八月份访客浏览器使用分析</caption>
     <tr align="CENTER">
<th>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>
显示结果

网页速成 八月份访客浏览器使用分析
Month% of IE visitor% of NC visitor
August61%39%

链接标记：

<a href="index.html" name="hello" 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 src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes"> 

多媒体标记：

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

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

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

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

  • src="your.mid"
    设定 midi 档案及路径，可以是相对或绝对。
  • autostart=true
    是否在音乐档传完之後，就自动播放音乐。true 是，false 否 (内定值)。
  • loop="true"
    是否自动反覆播放。LOOP=2 表示重复两次，true 是， false 否。
  • HIDDEN="true"
    是否完全隐藏控制画面，true 为是，no 为否 (内定)。
  • STARTTIME="分:秒"
    设定歌曲开始播放的时间。如 STARTTIME="00:30" 表示从第30秒处开始播放。
  • VOLUME="0-100"
    设定量的大小，数值是0到100之间。内定则为使用者系统本身之设定。
  • WIDTH="整数" 和 HIGH="整数"
    设定控制画面的宽度和高度。(若 HIDDEN="no")
  • ALIGN="center"
    设定控制画面和旁边文字的对　方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom。
  • 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"
    文字卷动的停顿时间，单位是毫秒。
<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、调色原理

  • 以命名方式定义常用的颜色，如 RED。
  • 以 RGB 值表示，如 #FF0000 表示 red。

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

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

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

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

■ HTML 基本架构：
选按不同颜色按键以测试前景颜色效果 (只适合 Internet Explorer)
           
选按不同颜色按键以测试背景颜色效果
           
或输入一个 RGB 颜色码或名称
   
■ 16 常用颜色表：
ColorValueName ColorValueName
 #00FFFFaqua  #808080gray
 #000080navy  #C0C0C0silver
 #000000black  #008000green
 #808000olive  #008080teal
 #0000FFblue  #00FF00lime
 #800080purple  #FFFF00yellow
 #FF00FFfuchsia  #800000maroon
 #FF0000red  #FFFFFFwhite
■ 其它常用颜色表：
ColorValueName ColorValueName
 #F0F8FFaliceblue  #A00000antiquewith
 #7FFFD4aquamarine  #F0FFFFazure
 #F5F5DCbeige  #FFE4C4bisque
 #000000black  #FFEBCDblanchedalmond
 #0000FFblue  #8A2BE2blueviolet
 #A52A2Abrown  #DEB887burlywood
 #5F9EA0cadetblue  #7FFF00chartreuse
 #D2691Echocolate  #FF7F50coral
 #C0F000cornfloewrblue  #FFF8DCcornsilk
 #00FFFFcyan  #00008Bdarkblue
 #008B8Bdarkcyan  #B8860Bdarkgoldenrod
 #A9A9A9darkgray  #006400darkgreen
 #DA0000darkhaki  #8B008Bdarkmagenta
 #556B2Fdarkolivegreen  #DA000Edarkorenge
 #9932CCdarkorchid  #8B0000darkred
 #E9967Adarksalmon  #8FBC8Fdarkseagreen
 #483D8Bdarkslateblue  #2F4F4Fdarkslategray
 #00CED1darkturquoise  #9400D3darkviolet
 #FF1493deeppink  #00BFFFdeepskyblue
 #696969dimgray  #1E90FFdodgerblue
 #B22222firebrick  #FFFAF0floralwhite
 #228B22forestgreen  #DCDCDCgainsboro
 #00000Egostwhite  #FFD700gold
 #00E00Dgolenrod  #808080gray
 #008000green  #ADFF2Fgreenyellow
 #F0FFF0honeydew  #FF69B4hotpink
 #CD5C5Cindianred  #FFFFF0ivory
 #F0E68Ckhaki  #E6E6FAlavender
 #FFF0F5lavenderblush  #7CFC00lawngreen
 #FFFACDlemonchiffon  #ADD8E6lightblue
 #F08080lightcoral  #E0FFFFlightcyan
 #0000E0lightgodenrod  #0000E0lightgodenrodyellow
 #0000A0lightgray  #90EE90lightgreen
 #FFB6C1lightpink  #FFA07Alightsalmon
 #20B2AAlightseagreen  #87CEFAlightskyblue
 #0000EBlightslateblue  #778899lightslategray
 #B0C4DElightsteelblue  #FFFFE0lightyellow
 #32CD32limegreen  #FAF0E6linen
 #FF00FFmagenta  #800000maroon
 #66CDAAmediumaquamarine  #0000CDmediumblue
 #BA55D3mediumorchid  #ED0000mediumpurpul
 #3CB371mediumseagreen  #7B68EEmediumslateblue
 #00FA9Amediumspringgreen  #48D1CCmediumturquoise
 #C71585mediumvioletred  #191970midnightblue
 #F5FFFAmintcream  #FFE4E1mistyrose
 #FFE4B5moccasin  #FFDEADnavajowhite
 #000080navy  #A0B0E0navyblue
 #FDF5E6oldlace  #6B8E23olivedrab
 #FFA500orange  #0E0EEDorengered
 #DA70D6orchid  #A00D00palegodenrod
 #98FB98palegreen  #AFEEEEpaleturquoise
 #DB7093palevioletred  #FFEFD5papayawhip
 #FFDAB9peachpuff  #CD853Fperu
 #FFC0CBpink  #DDA0DDplum
 #B0E0E6powderblue  #800080purple
 #FF0000red  #BC8F8Frosybrown
 #4169E1royalblue  #8B4513saddlebrown
 #FA8072salmon  #F4A460sandybrown
 #2E8B57seagreen  #FFF5EEseashell
 #A0522Dsienna  #87CEEBskyblue
 #6A5ACDslateblue  #708090slategray
 #FFFAFAsnow  #00FF7Fspringgreen
 #4682B4steelblue  #D2B48Ctan
 #D8BFD8thistle  #FF6347tomato
 #40E0D0turquoise  #EE82EEviolet
 #00E0EDvioletred  #F5DEB3wheat
 #000E00hite  #F5F5F5whitesmoke
 #FFFF00yellow  #9ACD32yellowgreen


朱培
关注
专栏目录
HTML5详解
real_fxy的博客
05-29 770
typora-root-url: pic HTML5 一、简介 1、什么是 HTML5？ HTML5 是最新的 HTML 标准。 HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。 HTML5 拥有新的语义、图形以及多媒体元素。 HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。 HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。 **注释：**在下面的章节中，您将学到如何“帮助”老版本的浏览器处理 HTML5。 .
什么是HTML5？
weixin_34310127的博客
05-08 102
　　HTML5草案的前身名为Web Applications 1.0。於2004年被WHATWG提出，於2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案已公布,预计将在2010年9月正式向公众推荐。WHATWG表示该规范是目前正在进行的工作，仍须多年的努力。 　　HTML5提供了一些新的元素和属性，例如<nav>（网...
HTML5 全面解析
weixin_46534854的博客
03-12 247
1. HTML5 新增语义化标签 1.1 新增页面结构标签 标签名 语义和功能 属性 单标签/双标签 header 表示页面或section中的页眉 双 footer 表示页面或section中的页脚 双 article 表示文章、博客、新闻、帖子、评论等 双 aside 表示侧边栏 双 nav 表示导航 双 section 表示页面中的一节或文章中的一段 双 **总结：**HTML5新增的这些结构标签就是具有语义的div 1.2 新增状态标签
html5解析,HTML5 解析规则分析
weixin_33293858的博客
06-28 320
HTML5 解析规则分析2019年07月25日|萬仟网IT编程 |我要评论HTML 5推荐标准的成功之一是提供了一个详细的规范来说明如何解析HTML文档。一直以来，浏览器提供商都试图猜测和拷贝其它浏览器的实现，寄希望于他们的解析器在处理HTML文档的时候不产... 09-08-14尽管html 5中的一些部分目前争议比较大，关于解析的这部分得到了...
html5实现二维码扫描并解析
09-02
实现基本步骤： 操作摄像头，获取图片。 技术要点：MediaStream、GetUserMedia、File api。 利用canvas使用相关算法分析图片识别图片得出结果。 ...后台解析二维码主要用到ThoughtWorks.QRCode.dll
html 解析 流程,html的解析流程
weixin_36346970的博客
06-07 2428
先抛出几个问题：1、DomContentLoad是什么 ？2、Load是什么 ？3、paint是什么4、js会阻塞dom的解析吗，js会阻塞dom的渲染吗 ？5、css会阻塞dom的解析吗，css会阻塞dom的渲染吗 ？6、img会阻塞dom的解析吗，img会阻塞dom的渲染吗 ？7、js前有css 与 js前面无css 对html 的解析有什么区别 ？8、总结下html的解析流程是什么在讲解这几...
js 解析html文件,用Javascript解析html
weixin_42133329的博客
06-19 6044
说到用Javascript解析html，大家肯定会想到dom或者正则表达式，但这两个都不是我今天我要说的。dom很不错，不过效率不高，而且必须将要解析的html插入到当前页面或者建立一个iframe才能进行，而用正则表达式，又有太过繁琐和难以维护的问题。有人要说了，ruby、php、python有了那么多开源的优秀的html解析的类库，什么beautiful soap，什么Mechanize，什么...
一个c语言的html解析
05-13
5. 属性解析：HTML标签可以带有属性，解析器需要能提取并处理这些属性，如`class="myClass"`。 6. 错误处理：在解析过程中，可能会遇到格式错误的HTML，如未闭合的标签或无效的属性。解析器需要有处理这些错误的...
HTML5内容解析器ContextParser.zip
07-18
Context Parser 是一款功能强劲的 HTML5 内容解析器，它能解析 HTML5 Web 页面。浏览器通常用 JavaScript 和 CSS 引擎来构建页面的动态组件。为了决定应该用哪种引擎，浏览器可以用 HTML 解析算法来确定 HTML 模块的内容。 标签：Context
关于php页面解析html,php解析HTML
weixin_42584758的博客
03-19 1435
PHPSimpleHTMLDOM解析器显然是相当不多的html文件解析工具。他能够在server端採用相似于jquery的方式进行dom查找和改动。眼下这个解析器支持PHP5。可是，这个首先将html进行了标签解析，占用了大量的内存。在解析复杂一点的html文件时，甚至占用超过10M的内存，如今在高并发的情况下。这个是无法接受的。当你载入了5个10个甚至很多其它的文档的时候。用完一个就清理...
如何将HTML5性能发挥到极致
Layabox 引擎
05-27 1408
HTML5作为新兴领域越来越热。然而在移动设备硬件性能弱于PC的背景下，对性能的需求显得更为重要，而HTML5性能优化前与优化后有着极大的差别，如何优化才能提高性能，对此熟知的人很少。本文以LayaAir引擎为例，通过代码示例详细阐述如何利用引擎对HTML5作出性能的极致优化。主题包括： 代码执行基本原理 基准测试 内存优化 图形渲染性能 减少CPU使用量 其他优化策略第1节：代码执行...
HTML5 安全问题解析
Preserve
08-28 1176
Html5安全问题解析
【HTML】HTML5详解
最新发布
colourful_mole的博客
08-31 53
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。HTML5 简单易学。
HTML5全解析：详细指南与关键元素
DOCTYPE>`): 声明文档使用的是HTML5标准，确保浏览器以正确的模式解析页面。 3. **超链接标签** (`<a>`): 用于创建链接，可以指向其他网页、文件、邮箱地址等。 4. **缩写标签** (`<abbr>`): 用于表示缩写词，鼠标...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值