跳至主要內容

html零碎知识

.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是一样的。

邮件mail里内嵌html页面注意事项

  1. 不要写style标签、不要写class，所有CSS都用style属性，什么元素需要什么样式就用style写内联的CSS。

  2. 少用图片，邮箱不会过滤你的img标签，但是系统往往会默认不载入陌生来信的图片，如果用了很多图片的邮件，在片没有载入的情况下，丑陋无比甚至看不清内容，没耐心的用户直接就删除了。图片上务必加上alt。

  3. 不要在style里面写float、position这些style，因为会被过滤。那么如何实现左右布局或者更复杂的布局呢？用table。

  4. style内容里面background可以设置color，但是img会被过滤，就是说不能通过CSS来设置背景图片了。但是有一个很有意思的元素 属性，也叫background，里面可以定义一个图片路径，这是个不错的替代方案，虽然这样功能有限，比如无法定位背景图片了，有总比没有好。例如要给 一个单元格加一个背景，必须这样写：

    • <td background="http://image1.koubei.com/images/common/logo_koubei.gif"></td>

  5. div模式的邮箱不支持flash，iframe模式的有待验证。

  6. sohu的邮箱很怪异，会在每个文本段后面加一个空格，导致原本正常的排版一行放不下而换行，从而使某些布局错乱。所以，如果你要兼容sohu邮箱的话，遇到一些紧凑的布局就要格外小心了，尽量减少文本段的数量，留足宽度。

常用的meta元标签

<!-- 移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的）H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 
- width: 控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值如 device-width 为设备的宽度 (单位为缩放为 100% 时的 CSS的像素)height:和 width 相对应，指定高度。
initial-scale: 初始缩放比例，也即是当页面第一次 load 的时候缩放比例-maximum-scale:允许用户缩放到的最大比例
- minimum-scale: 允许用户缩放到的最小比例。
- user-scalable: 用户是否可以手动缩放
-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />


<!-- 忽略将页面中的数字识别为电话号码 -->
<meta name="format-detection" content="telephone=no" />

<!-- 忽略将页面中的数字识别为电话号码 -->
<meta name="format-detection" content="email=no" />

<!-- 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari，ios7.0版本以后，safari上已看不到效果 -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式-->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 可选default、black、black-translucent -->

利用meta标签对viewport进行控制

键值
width设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale允许用户的最大缩放值，为一个数字，可以带小数
height设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
贡献者: guo