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请求)

原文地址:https://www.cnblogs.com/Peng2014/p/4701732.html