HTML知识点

HTML、XML、XHTML 有什么区别？

HTML(HyperText Mark-up Language)即[超文本标记语言]或超文本链接标示语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。有以下特点：

对大小写不敏感；
标签不必成对出现；

XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。特点：

对大小写敏感，必须是小写的；
标签必须成对出现，有开始标签就必须有结束标签；
属性值必须在引号之内；
不支持属性最小化：
eg：正确：<input checked='checked'>
错误：<input checked>
name属性不赞成使用，以后会被淘汰；
空元素也要结束标签：如：
,
(水平分割线)

XML是用户创建特定语言如HTML的一种通用语言。它是指XML提供一种基本结构以及标记语言必须遵守的一组规则。使用XML可以创建一种独特的标记语言来描述任何一种信息，包括网页。XML提供了基础规则，以统一的方式来组织信息。XML并不是HTML的代替品，HTML是相对不那么结构话的语言，它可以从XML的规则得到改进。这两种技术的自然结合，使HTML遵守XML的规则和结构。为实现这种结合，出现了一种新版的HTML，即XHTML。html最终会发展到xml，xhtml是html想xml发展的一个过渡，xhtml的特性也适合xml；

怎样理解 HTML 语义化?

语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。　　
　　1.语义化有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。　　
　　2.在没有CSS的时候能够清晰的看出网页的结构，增强可读性。　　
　　3.便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。　　
　　4.支持多终端设备的浏览器渲染。

怎样理解内容与样式分离的原则？

一个符合理想状态下的网页代码，应该分成三部分：.html文件，.css文件，.js文件。html标签只负责承担内容，样式交给css，javascript负责行为。假如不能将css设做独立文件外链出去，则应该在html页面中使用<style>或者<script>标签承载内容，而不是用<table>设计布局。这样做有以下几个优点：
　　1、使页面载入得更快。由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式的逐层加载速度快。
　　2、修改设计时更有效率在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。而表格布局则更不省事。
　　３、保持视觉的一致性。DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。
　　４、更好地被搜索引擎收录。由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中代码更加适合搜索引擎。
　　５、对浏览者和浏览器更具亲和力。对浏览者和浏览器更具亲和力，由于CSS富含丰富的样式，使页面更加灵活性，更加的美观，它可以根据不同的浏览器，而达到显示效果的统一和不变形。

有哪些常见的meta标签？

META标签可分为两大部分：HTTP-EQUIV和NAME变量。
页面关键词
　　<meta name="keywords" content="your tags" />

页面描述
　　<meta name="description" content="150 words" />

搜索引擎索引方式
　　<meta name="robots" content="index,follow" />

页面重定向和刷新
　　<meta http-equiv="refresh" content="0;url=" />

其他
　　<meta name="author" content="author name" />
　　<meta name="google" content="index,follow" />
　　<meta name="googlebot" content="index,follow" />
　　<meta name="verify" content="index,follow" />

移动设备
　　<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
　　

WebApp全屏模式
　　<meta name="apple-mobile-web-app-capable" content="yes" />

隐藏状态栏/设置状态栏颜色
　　<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

添加到主屏后的标题
　　<meta name="apple-mobile-web-app-title" content="标题">

忽略数字自动识别为电话号码
　　<meta content="telephone=no" name="format-detection" />

忽略识别邮箱
　　<meta content="email=no" name="format-detection" />

申明编码
　　<meta charset='utf-8' />

优先使用 IE 最新版本和 Chrome
　　<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
　　
　　<meta http-equiv="X-UA-Compatible" content="IE=6" >
　　<meta http-equiv="X-UA-Compatible" content="IE=7" >
　　<meta http-equiv="X-UA-Compatible" content="IE=8" >

禁止浏览器从本地计算机的缓存中访问页面内容
　　<meta http-equiv="Pragma" content="no-cache">
浏览器不会自动调整文件的大小,也就是说是固定大小,不会随着浏览器拉伸缩放。
<meta name="MobileOptimized" content="240"/>

文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?

文档声明用来说明web设计中所用的html或xhtml的类型，指出浏览器或者其他阅读程序按照什么样的规则（W3C所发布的一个文档类型定义即DTD）集去解释文档中的标记。

严格模式是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，如
。

混杂模式则是一种向后兼容的解析方法，说的透明点就是可以实现IE5.5以下版本浏览器的渲染模式。

<!doctype html>声明文档的解析类型为html，避免浏览器的怪异模式。

浏览器乱码的原因是什么？如何解决?

浏览器本身选择的编码模式与需要解码的文件本身的编码模式不一致，就会造成浏览器的乱码，解决方法：改变浏览器的编码，点击编码后，选择与文件相一致的编码，一般中文乱码选择uft-8就可解决。英文的乱码情况相对较少。

常见的浏览器有哪些，什么内核？

1，使用Trident的是internet explorer，国产的绝大部分浏览器。Trident是就是ie内核
　　2，使用Gecko的是Mozilla Firefox，使用 Gecko 内核的浏览器也有不少，如 Netscape MozillaSuite/SeaMonkey 等
　　3，使用Presto的是opera，这是目前公认网页浏览速度最快的浏览器内核
　　4，使用WebKit的有苹果的safari，谷歌的chrome，还有国产的大部分双核浏览器其中一核就是WebKit

列出常见的标签，并简单介绍这些标签用在什么场景。

<pre>
<html></html> 创建一个HTML文档
<head></head> 设置文档标题和其它在网页中不显示的信息
<title></title> 设置文档的标题
<h1></h1> 最大的标题
<u></u> 下划线
<b></b> 黑体字
<i></i> 斜体字
<em></em> 强调文本(通常是斜体加黑体)
<strong></strong> 加重文本(通常是斜体加黑体)
<font size="" color=""></font> 设置字体大小从1到7，颜色使用名字或RGB的十六进制值<BASEFONT>
<big></big> 字体加大
<SMALL></SMALL> 字体缩小
<STRIKE></STRIKE> 加删除线
^{</SUP> 上标字

<SUB></SUB> 下标字

<font color=00ff00>...</font>字體顏色

<font size=1>...</font>最小字體

<font style ='font-size:100 px'>...</font>無限增大}

格式标志标签
<p></p> 创建一个段落
<dl></dl> 定义列表
<dt> 放在每个定义术语词前
<dd> 放在每个定义之前
<ol></ol> 创建一个标有数字的列表
<ul></ul> 创建一个标有圆点的列表
<li> 放在每个列表项之前,若在<ol></ol>之间则每个列表项加上一个数字, 若在<ul></ul>之间则每个列表项加上一个圆点　　
<div align=""></div> 用来排版大块HTML段落,也用于格式化表
<hr size='9' width='80%' color='ff0000'>水平線(設定寬度)
链接标志表格标志
<a href="URL"></a> 创建超文本链接
<a href="mailtEMAIL"></a> 创建自动发送电子邮件的链接
<a name="name"></a> 创建位于文档内部的书签
<a href="#name"></a> 创建指向位于文档内部书签的链接<BASE> 文档中不能被该站点辨识的其它所有链接源的URL<LINK> 定义一个链接和源之间的相互关系
</pre>