HTML 知识点总结

常用知识点总结：

      0. HTML与XHTML有什么区别

      1. <!DOCTYPE> 作用和写法及注意事项

      2. <header>中<meta>标签的组成及作用？<header>中常用设置？

      3.  HTML中常用块级标签、行内标签和空元素有哪些?块级和行内有什么区别？

      4. 常用HTML实体字符有哪些?

      5. 常用链接形式？

      6. link 和@import 的区别是？

0. HTML与XHTML有什么区别

       HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

　　最主要的不同：

　　XHTML 元素必须被正确地嵌套。

　　XHTML 元素必须被关闭。

　　标签名必须用小写字母。

　　XHTML 文档必须拥有根元素。

 

1. <!DOCTYPE> 

          <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。

            常用的 DOCTYPE 声明：

HTML5
<!DOCTYPE html>
HTML 4.01 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset

该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset

该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1

该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 

注意：    1.  <!DOCTYPE> 声明没有结束标签。

              2. <!DOCTYPE> 声明对大小写不敏感。

              3. 请使用 W3C 的验证器来检查您是否编写了有效的 HTML / XHTML 文档！

              4. 严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。

              5. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现；在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。这个时候IE6,7,8的CSS盒模型会出现bug,content内容区域会包括padding（内边距）和border（边框）.

 

  

      2. <header>中<meta>标签的组成及作用？<header>中常用设置？

         <meta> 标签主要分两大部分：页面描述信息(NAME) 和 HTTP标题信息(HTTP-EQUIV)。

         在 HTML 中，<meta> 标签没有结束标签。在 XHTML 中，<meta> 标签必须被正确地关闭。

 

         2.1 页面描述信息（NAME)  与SEO非常重要。以下为常用设置：

keywords关键字

<meta name="kyewords" lang="EN" content="vacation,greece,sunshine" >

description (简介) 

<meta name="description" content="你网页的简述" >

author (作者)    

<meta name="author" content="张三，abc@sina.com" >

robots (机器人向导) 

<meta name="robots" content="All|None|Index|Noindex|Follow|Nofollow" >

         robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

注意：许多搜索引擎都通过放出robot/spider搜索来登录网站，这些robot/spider就要用到meta元素的一些特性来决定怎样登录。 

        all：(默认) 文件将被检索，且页面上的链接可以被查询；

         none：文件将不被检索，且页面上的链接不可以被查询；(和 "noindex, no follow" 起相同作用)

        index：文件将被检索；（让robot/spider登录）

         follow：页面上的链接可以被查询；

         noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)

        nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)

常用设置：

<meta name="robots" content="index, follow"> //设定允许搜索引擎可以检索，页面上链接可以查询 <meta name="googlebot" content="index, follow" > //针对google的搜索机器人设定允许搜索引擎可以检索，页面上链接可以查询

 

          2.2  HTTP标题信息(HTTP-EQUIV)

          它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。详细参见HTTP协议：

          HTTP-EQUIV常用设置：

//1. 设定页面类型和字符集
<meta http-equiv=Content-Type content="text/html; charset=urf-8">


//2. 设定该页面30秒自动刷新,可添加刷新到新网址

<meta http-equiv="Refresh" content="30">

<meta http-equiv="Refresh" content="5; Url=http://www.xia8.net">


//3.设定网页的到期时间，过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；Contect:如果为数字，则表示多少时间后过期。

<meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00 GMT">

<meta http-equiv="Expires" content="1">


//4. 禁止浏览器从本地计算机的缓存中访问页面内容：这样设定，访问者将无法脱机浏览。

<meta http-equiv="Expires" content="-1">                    

<meta http-equiv="Pragma" content="No-cach">             //应用http1.0和1.1

<meta http-equiv="Cache-Control" content="no-cache">      //应用http1.1


//5. cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；
<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT">

//6. 强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；
<meta http-equiv="windows-Target" content="_top">
 

            2.3 <header>中常用设置？

1.标签栏小图标

<link rel="shortcut icon" href="img/100du.ico"> //需要在线制作ico格式的图标

2.基链接

<base href="http://www.dow3.com/" target="_blank"> //页面内所有相对链接都会加上Base

3. 优先使用 IE 最新版本和 Chrome （IE8及以上才会识别）

 

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 关于X-UA-Compatible ,指定使用特定IE版本渲染--> <meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 --> <meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 --> <meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

4.转码申明：用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta

<meta http-equiv="Cache-Control" content="no-siteapp" />

      3. HTML中常用块级标签、行内标签和空元素有哪些?块级和行内有什么区别？

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

行内元素有：a b span img input select strong

空元素： <br> <hr> <img> <input> <link> <meta>

           块元素与行内元素区别：

块级元素：默认独占一行，宽度填满父级宽度。可设置width,height，margin和padding属性。

行内元素：相邻行内元素排列在同一行内，宽度随元素的内容而变化，不支持width,height属性， 水平方向的margin和padding属性支持，竖直方向的margin和padding不支持。

块级元素和行内元素相互转换：display：block/inline;

 

 

      4. 常用HTML实体字符有哪些？

空格：&nbsp;
>：&gt;
<：&lt;
&：&amp;
人民币：&yen;
版权：&copy;
乘号：&times;
除号：&divide;

 

 

      5. 常用链接形式？

<a href="#">这是会跳到页首的</a>                        //空标签，但是会跳转到首页，不建议使用
  
<a href="javascript:void(0)">这个不会跳动</a>          //空标签，不会跳转，用户体验更好

<a href="mailto:example@example.com">给我写邮件</a>   //邮箱链接

<a  href=“#top”>返回顶部</a>                        //  锚链接

 

  

    6. link 和@import 的区别是？

1. link属于XHTML标签，而@import是CSS提供的;

2. 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

3. import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;

4. link方式的样式的权重 高于@import的权重.

（尽量减少使用@inport,最好将CSS文件统一为一个，减少HTTP请求）

 

posted @ 2015-08-04 13:23  331415706  阅读(265)  评论(0)  编辑  收藏  举报