分类：html

超文本标记语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言。

HTML5新增的DOM API，getElementsByClassName()，querySelector()，querySelectorAll()

在 上张贴 由 一然 

//注：以下方法仅支持IE8及以上浏览器

document.getElementsByClassName("a"); //取得DOM中所有class="a"的元素

document.querySelector("#a") // 取得DOM中id= “a”的元素

document.querySelector("span") // 取得DOM中第一个span的元素

document.querySelector(".a") // 取得DOM中第一个class="a"的元素

document.querySelector(".a span") // 取得DOM中第一个class="a"的元素下第一个span元素

document.querySelectorAll("span") // 取得DOM中所有的span元素

document.querySelectorAll(".a span") // 取得DOM中所有的class="a"的元素下所有span元素

//注：以上方法仅支持IE8及以上浏览器

本地没装微软雅黑，用css写@font-face让其能显示微软雅黑字体

在 上张贴 由 一然

在设计布局网页时 经常想要用一些比较好看的字体，比如微软雅黑，这个字体在近年来在网页设计中运用越来越平常， 然而所使用的字体也只有自己能看到 到别的机子上 又恢复了原来的宋体神马的。

经过一位高手的提点，能用CSS直接实现，查阅了部分资料 并经过测试 总结下列方法来实现网页中的自定义字体
我们很容易发现EOT字体仅仅对于IE浏览器支持 面对庞大的ＩＥ用户　ＥＯＴ字体的重要性也就不说了

对于其他浏览器由于直接支持TTF字体 就不多介绍 只是在定义样式时 注意下浏览器的兼容问题就可以了

由于各浏览器对 ‘@font-face’ 规则字体格式支持存在差异，若仅通过定义一个 ‘@font-face’ 规则，可以通过 CSS hack 的方式在IE、Firefox、Chrome、Safari、Opera中得到相同的字体效果：

<style type="text/css">

/*定义字体*/
@font-face {
font-family: " your FontName ";
src: url( /location/of/font/FontFileName.eot ); /* IE */
src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* 非IE */
}
/*调用部分*/
.yourFontName { font-family:" your FontName ", verdana, helvetica, sans-serif; }

</style>

<body>
<span>微软雅黑显现效果</span>
</body>

解释一下,”your FontName” 为自定义字体名字, “real Fontname”是真实字体名字, 非IE浏览器读到第一行,一看是eot字体,跟自己没关系,于是跳到第二行,读取”local”(本地)定义的字体,试图到用户机器上去找这个字体(所以一定要用真实的字体名字,这样万一用户机子上有该字体就可以省去用户一个ttf的下载),发现没有就从后面的”url”的路径去下载ttf文件了. 而IE过程相反,它读到第一行发现是eot, 但是执行以前他会去继续读后面的行,所以”local”定义非常必要,IE不认识”local”,它就晕了,只好倒回去下载eot,如果没有local定义的话,这段字体定义代码对IE是无效的.

至此跨浏览器的内嵌字体css定义就完成了.

最后还有一个问题,我考虑了下中文内嵌字体下载量过大的问题,英文字体一般比较小,中文字体动辄几MB,下载量太大,看来中文内嵌字体要完全实用要给字体减肥才行,比如只保留字体里面网站使用的字,不用的字全部剔掉,这样就能大大减小体积了.
搜了一下,有人貌似有类似的解决方案

在线的转换工具

简要谈谈htm、html、shtm、shtml的区别

在 上张贴 由 一然

每一个网页或者说是web页都有其固定的后缀名，不同的后缀名对应着不同的文件格式和不同的规则、协议、用法，最常见的web页的后缀名是.html和.htm，但这只是web页最基本的两种文件格式，今天我们来介绍一下web页的其它一些文件格式。

首先，介绍一下html与htm：

关于HTML，HTML(HyperTextMark-upLanguage)即超文本标记语言，是WWW的描述语言。设计HTML语言的目的是为了能把存放在一

台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑

上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，

而这些信息可能存放在网络的另一台电脑中。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画

、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分，其中头部描述浏览器所需的信息，而主体则包含所

要说明的具体内容。

关于HTM，实际上HTM与HTML没有本质意义的区别，只是为了满足DOS仅能识别8+3的文件名而已，因为一些老的系统(win32)不能

识别四位文件名，所以某些网页服务器要求index.html最后一个l不能省略。MSIE能自动识别和打开这些文件，但编写网页地址

的时候必须是完全对应的，也就是说index.htm和index.html是两个不同的文件，对应着不同的地址。值得一提的是UNIX系统中

对大小写敏感，不吻合的话就可能报没有文件或者找不到文件。

其次，介绍一下shtml和shtm：

关于shtml，shtml是一种基于SSI技术的文件，也就是Server Side Include–SSI 服务器端包含指令，一些Web Server如果有

SSI功能的话就会对shtml文件特殊招待，服务器会先扫一次shtml文件看没有特殊的SSI指令存在，如果有的话就按Web Server设

定规则解释SSI指令，解释完后跟一般html一起调去客户端。

关于shtm，shtm与shtml的关系和htm与html的关系大致相似，这里就不多说了。

html或htm与shtml或shtm的关系是什么？

html或者htm是一种静态的页面格式，也就是说不需要服务器解析其中的脚本，或者说里面没有服务器端执行的脚本，而shtml或

者shtm由于它基于SSI技术，当有服务器端可执行脚本时被当作一种动态编程语言来看待，就如asp、jsp或者php一样。当shtml

或者shtm中不包含服务器端可执行脚本时其作用和html或者htm是一样的。

什么是SHTML?与HTML的区别

问起SHTML和HTML的区别，如果用一句话来解释就是：SHTML 不是HTML而是一种服务器 API，shtml是服务器动态产成的html。

虽然两者都是超文本格式，但shtml是一种用于SSI技术的文件。也就是Server Side Include–SSI 服务器端包含指令。如果Web

Server有SSI功能的话(大多数（尤其是基于Unix平台）的WEB服务器如Netscape Enterprise Server等均支持SSI命令)。 会对

shtml文件特殊招待。 先扫一次shtml文件看没有特殊的SSI指令现在。 有就按Web Server设定规则解释SSI指令。 解释完后跟

一般html一起掉去客户端。

shtml：
使用SSI(Server Side Include)的html文件扩展名，SSI（Server Side Include)，通常称为”服务器端嵌入”或者叫”服务器端包

含”，是一种类似于ASP的基于服务器的网页制作技术。

SSI工作原理：
将内容发送到浏览器之前，可以使用“服务器端包含 (SSI)”指令将文本、图形或应用程序信息包含到网页中。例如，可以使用

SSI 包含时间/日期戳、版权声明或供客户填写并返回的表单。对于在多个文件中重复出现的文本或图形，使用包含文件是一种

简便的方法。将内容存入一个包含文件中即可，而不必将内容输入所有文件。通过一个非常简单的语句即可调用包含文件，此语

句指示 Web 服务器将内容插入适当网页。而且，使用包含文件时，对内容的所有更改只需在一个地方就能完成。

转：http://www.goutoo.com/web_show.php/id/115

html标签属性tabindex按tab按顺序选择

在 上张贴 由 一然

tabindex 属性 — 代表使用”Tab”键的遍历顺序

  • 可以使用Tab键遍历页面中的所有链接与表单元素,当遍历到某个链接时, 按Enter即可.遍历时会按照tabindex的大小决定顺序
  • 遍历到某个链接的时候,会有虚线框包围链接,这时按回车键即可进入链接的页面.
  • 取值:
    • 数字，范围为[1~32767]

示例：

<a href="http://www.dodozhu.com" tabindex="1">1</a>
<a href="http://www.dodozhu.com/news/" tabindex="3">3</a>
<a href="http://www.dodozhu.com/mito/ " tabindex="2">2</a>
<!--连续按 "Tab",可以改变焦点的位置.遍历的顺序是1-2-3.-->

非法字符的原因，编码问题

在 上张贴 由 一然

在freemarker 模板使用<#include "/WEB-INF/template/wap/top.ftl"> 指令后，发现页面空出一行，但是检查文件没有换行，在火狐上查看多出了 &#65279;

    是由于文件在保存的时候在前面加入了bom字符.

 UTF-8不需要BOM来表明字节顺序，但可以用BOM来表明编码方式。字符”ZERO WIDTH NO-BREAK SPACE”的UTF-8编码是EF BB BF。所以如果接收者收到以EF BB BF开头的字节流，就知道这是UTF-8编码了。

Windows就是使用BOM来标记文本文件的编码方式的。

目前已经有很多的新版本软件已经支持BOM，但仍然有不少软件还不支持BOM。

由此可见在标准化来临的时候一个好的文本编辑器也是 比较重要的，editplus由于不支持BOM的选择而显的不足。而像EmEditor、UE（UltraEdite-32）等软件就显得比 Editplus优秀。还有就是我们做网页用的比较多的Dreamweaver，在MX及以前版本就没有BOM选项，新版的才提供这个。所以不少朋友也曾 经为此事烦恼过。如今除了Web应用还涉及到了桌面软件和Web互通的问题。下面是EmEditor的BOM选项

既然知道了原因：直接notopad++ 保存为无dom格式 （格式-》转为UTF-8 无dom格式） 完美解决

在HTML中用embed标签插入背景音乐

在 上张贴 由 一然

<embed src=音乐地址 width=300 height=45 type=audio/mpeg loop="0" autostart="false" volume="0"></embed>

解释：其中 width=100 height=40 中的数字分别表示播放器的宽度和高度 ，注意：都选择0将隐藏播放器（隐藏时一定要选择自动播放）
autostart=”true”中true或1表示自动播放，false或0表示手动播放
loop=”true” 中的true或1表示重复播放，false或0表示只播放一次
src=音乐地址 这里的“音乐地址”，修改为你找到的网络上的音乐地址

png-24图片在IE下有色差，用tweakpng（轻量级png图片处理软件）处理

在 上张贴 由 一然

工作中，遇到一个问题，我做的png-24图片在FF下和IE下显示的颜色不一致，IE中图片颜色要比正常的深一点。这是png图片的色差问题，是可以解决的。

做个示例，一张纯色的图片，色值是#0099ff，放在FF和IE 2种浏览器下：

从截屏中我们可以看出，IE下看到的图片，实际色值是#008fff；比原图颜色要深了一些。一般情况下发现不了，但是如果图片需要与CSS设置的背景色一同使用就会出现明显色差。用tweakpng工具查看png图中的数据信息，可以看到这张图中有一个gAMA的值，正是这个gAMA值使得IE的对图片的解析出了偏差。

gAMA值是一个色彩校正值，在这张图片里 gAMA = 0.45，不同的浏览器或其它可查看图片的软件都可能根据这个值对图片色彩进行校正。没有gAMA值的png图片，在浏览器中就不会产生色差。

解决方法：

1、从源头杜绝gama值
由 Photoshop CS3以及以上的版本 和 Fireworks 保存的png图片是不带gAMA值的，不会有色差问题。但Photoshop CS2和它以下的版本会保留gAMA值；

2、用tweakpng工具删除gama值
tweakpng（官网 | 下载）是一款轻量级png图片处理软件，它可以查看png中的信息参数，也可以删除你不需要的数据信息。打开软件，把你要查看的图片拖进去，便会显示图片所带的数据信息，如示例图。然后选中你要编辑的信息，双击就可以修改，或者删除此条信息，然后另存为图片即可。

HTML页面结构详细解析，新手入门

在 上张贴 由 一然

很多时候学网页制作开发的时候第一看到的印象深刻的就是html或htm后缀结尾的网页，我们把这类网页归结为静态网页，伪静态除外。

那html或htm与其它如php、asp、aspx、jsp等后缀结尾的网页有什么区别呢？
首先，html页面是静态的从头到尾没有程序的执行是纯的html语言，是不经过服务器处理就直接送出给浏览器呈现给浏览者。
而其他后缀的结尾的网页相对来说就是动态网页页面，动态页面是经过服务器对各自的程序翻译处理、数据库操作等处理然后才由浏览器把服务器处理完的数据程序给用户，而网页内容数据可以随后台数据改变而改变。

那html基本语言机构是怎么样的呢？
先看一下的html结构：

  1. <html>
  2. <head>
  3. <title>放置文章标题</title>
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> //这里是网页编码现在是gb2312
  5. <meta name=”keywords” content=”关键字” />
  6. <meta name=”description” content=”本页描述或关键字描述” />
  7. </head>
  8. <body>
  9. 这里就是正文内容
  10. </body>
  11. </html>

完整HTML包括html DOCTYPE声明、标题、head、网页编码声明等内容
最初使用完整的html源代码：

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
  2.  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  3. <html xmlns=”http://www.w3.org/1999/xhtml”>
  4. <head>
  5. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
  6. <title>标题部分-www.divcss5.com</title>
  7. <meta name=”keywords” content=”关键字” />
  8. <meta name=”description” content=”本页描述或关键字描述” />
  9. </head>
  10. <body>
  11. 内容
  12. </body>
  13. </html>

最新完整HTML结构-HTML源代码(推荐)：

  1. <!DOCTYPE html>
  2. <html lang=”zh-CN”>
  3. <head>
  4. <meta charset=”utf-8″>
  5. <title>网页标题-www.divcss5.com</title>
  6. <meta name=”keywords” content=”关键字” />
  7. <meta name=”description” content=”此网页描述” />
  8. </head>
  9. <body>
  10. 网页正文内容-WWW.DIVCSS5.COM  -DIVCSS5提供
  11. </body>
  12. </html>

无论是html还是其它后缀的动态页面其html语言结构都是这样的，只是在命名网页文件时以不同的后缀结尾。
1、无论是动态还是静态页面都是以“<html>”开始，然后在网页最后以“</html>”结尾。
2、“<html>”后接着是“<head>”页头，其在<head></head>中的内容是在浏览器中内容无法显示的，这里是给服务器、浏览器、链接外部JS、链接CSS样式等区域，而里面“<title></title>”中放置的是网页标题，可在浏览器最左上看见如图：


TITLE显示位置图

3、接着“<meta name=”keywords” content=”关键字” /> <meta name=”description” content=”本页描述或关键字描述” /> ”这两个标签里的内容是给搜索引擎看的说明本页关键字及本张网页的主要内容等SEO可以用到。
4、接着就是正文“<body></body> ”也就是常说的body区 ，这里放置的内容就可以通过浏览器呈现给用户，其内容可以是table表格布局格式内容，也可以DIV布局的内容，也可以直接是文字。这里也是最主要区域，网页的内容呈现区。
5、最后是以“</html> ”结尾，也就是网页闭合。

以上是一个完整的最简单的html语言基本结构，通过以上可以再增加更多的样式和内容充实网页。
注意：网页一般的根据xhtml标准都要求每个标签闭合，如：以<html> 开始，以</html>闭合；如果没有闭合如<meta name=”keywords” content=”关键字” />就没有</meta> 就要<meta 内容。。。  />来完成闭合。

以上就是通俗来讲的最简单的html语言结构，如果需要看更多更丰富的html语言结构，可打开一个网站的网页，然后点击浏览器的“查看”–然后点击“查看源代码”即可看见该网页的html语言结构，这样可以根据此源代码来分析此网页的HTML语言结构与内容。

标签(Tag): html
本文分享URL地址：http://www.divcss5.com/html/h2.html