大胡子歌歌
大胡子歌歌

任务4-HTML初识

1、HTML、XML、XHTML 有什么区别?

1）HTML，超文本标记语言，是语法较为松散的、不严格的Web语言；

2）XML，可扩展标记语言， 是一种标记语言，很类似 HTML;
它的设计宗旨是传输数据，而非显示数据，XML标签没有被预定义，您需要自行定义标签。XML 被设计为具有自我描述性。
XML 和 HTML 为不同的目的而设计：
XML 被设计为传输和存储数据，其焦点是数据的内容。
HTML 被设计用来显示数据，其焦点是数据的外观。
即HTML 旨在显示信息，而 XML 旨在传输信息。

3）XHTML，可扩展超文本标记语言，基于XML，作用与HTML类似，但语法更严格，比如在XHTML标准中：
元素必须被正确地嵌套。
元素必须被关闭。
标签名必须用小写字母。
文档必须拥有根元素。

2、怎样理解 HTML 语义化?

HTML是一种对文本内容进行结构和语义（或者说“意义”）进行说明的方法。
它会告诉我们说：“这行是一个标题，这几行组成了一个段落。这些文字是项目列表，这些文字是链接到互联网上另一个文件的超链接。”

值得注意的是，不应该让HTML来告诉我们：“这些文字是蓝色的，这些文字又是红色的。这部分内容是最最靠右的一栏，这行内容是斜体字。”这些和表现相关的信息是CSS的工作。

在做前端开发的时候要记住：HTML告诉我们一块内容是什么（或其意义），而不是它长的什么样子。当我们提到“语义标记”的时候，我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。

HTML语义化的优点：
1.去掉或样式丢失的时候能让页面呈现清晰的结构。
2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。
3.方便搜索引擎和网络爬虫很好的解析。
4.便于团队开发和维护。

3、怎样理解内容与样式分离的原则?

CSS与HTML分离的优点
1、使页面载入得更快由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式的逐层加载速度快。
2、修改设计时更有效率在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。
3、保持视觉的一致性最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。
4、更好地被搜索引擎收录由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中代码更加适合搜索引擎。
5、对浏览者和浏览器更具亲和力对浏览者和浏览器更具亲和力，由于CSS富含丰富的样式，使页面更加灵活性，更加的美观，它可以根据不同的浏览器，而达到显示效果的统一和不变形。
所以在前端开发时坚持内容与样式的分离原则，工作更容易和有序。

4、有哪些常见的meta标签?

1、META标签的keywords 写法为： meat标签的Keywords的的信息参数，代表说明网站的关键词是什么。

2、META标签的Description meta标签的Description的信息参数，代表说明网站的主要内容，概况是什么。

3、META标签的http-equiv=Content-Type content="text/html 代表的是HTTP的头部协议，提示浏览器网页的信息。
写法为：
charset="信息参数" 指定字符集即网采用的编码方式：
GB2312=简体中文；
BIG5=繁体中文；
iso-2022-jp=日文；
ks_c_5601=韩文；
ISO-8859-1=英文;
UTF-8=世界通用的语言编码；
在HTML5中，在表达charset信息时可以简写，前面的内容可以去掉，即写法是：

4、 适配移动设备。

5、适配双核浏览器。

6、META标签的generator meta标签的generator的信息参数，代表说明网站的采用的什么软件制作。

7、META标签的author meta标签的author的信息参数，代表说明网页版权作者信息。

8、META标签的http-equiv="Refresh" meta标签的Refresh代表多少时间网页自动刷新，加上Url中的网址参数就代表，多长时间自动链接其他网址。

9、META标签的HTTP-EQUIV="Pragma" CONTENT="no-cache" 代表禁止浏览器从本地计算机的缓存中访问页面内容,这样设定，访问者将无法脱机浏览。

10、META标签的COPYRIGHT meta标签的COPYRIGHT的信息参数，代表说明网站版权信息。

11、META标签的http-equiv="imagetoolbar" 指定是否显示图片工具栏，当为false代表不显示，当为true代表显示。

12、META标签的Content-Script-Type W3C网页规范，指明页面中脚本的类型。

13、META标签的revisit-after revisit-after代表网站重访,7 days代表7天，依此类推。

14、META标签的Robots Robots代表告诉搜索引擎机器人抓取哪些页面 其中的属性说明如下：
信息参数为all：文件将被检索，且页面上的链接可以被查询；
信息参数为none：文件将不被检索，且页面上的链接不可以被查询；
信息参数为index：文件将被检索；
信息参数为follow：页面上的链接可以被查询；
信息参数为noindex：文件将不被检索，但页面上的链接可以被查询；
信息参数为nofollow：文件将不被检索，页面上的链接可以被查询。

15、META标签的 代表页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用,设置有：_blank、_top、_self、_parent。

16、META标签的set-cookie 代表Cookie设定，如果网页过期，存盘的cookie将被删除,需要注意的也是必须使用GMT时间格式

5、文档声明的作用?严格模式和混杂模式指什么?的作用?

浏览器分为两种模式，一种是严格模式，一种是混杂模式，这两种模式就是是通过doctype的定义来区分，
什么是doctype，doctype是一种标准通用标记语言的文档类型声明，目的是告诉浏览器要使用什么样的文档类型定义(DTD)来解析文档，doctype 最早是xml的概念，在xml中它的定义是通过一种特定的语法，作为一种元数据，来描述xml文档中允许出现的元素，以及各元素的组成，规则等。
doctype在html中的作用是触发浏览器的标准模式，如果html中省略了doctype，浏览器会进入到混杂模式的状态也称之为兼容模式，在这种模式下有些样式，布局会和标准模式（或称严格模式）存在差异，html标准，DOM标准只规定了标准模式下的行为，没有对兼容模式做出规定，因此不同浏览器在兼容模式下的处理也是不同的，应用兼容模式比较困难，所以需要慎用。
在html4中 doctype有三种模式
严格模式：。
过渡模式：。
框架模式：。
因为浏览器有容错能力，实际上运用这三种模式并不十分严格,浏览器都能正确解析出用户想要的结果，所以
在html5中doctype就简化成了。

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

浏览器解析页面时使用的编码标准与网页实际的编码标准不一致就会导致乱码，可能的原因有两种：
1）网页未声明编码标准，浏览器渲染时自动使用的编码标准与文档实际的编码标准不一致。此时可以为网页添加编码声明或在浏览器中手动指定正确的编码标准。

2）网页声明了编码标准，但是与实际使用的不一致，浏览器在渲染时采用网页声明的编码设置，于是出现乱码。只要将声明的编码标准更改成正确的就可以 了。

7、常见的浏览器有哪些，什么内核?

1）IE浏览器（Internet explorer）
IE浏览器是世界上使用最广泛的浏览器，它由微软公公司开发，预装在windows操作系统中。所以我们装完windows系统之后就会有IE浏览器。
IE浏览器使用Trident内核，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器还包括：傲游、世界之窗浏览器、Avant、腾讯TT等

2）Safari浏览器
Safari浏览器由苹果公司开发，它也是使用的比较广泛的浏览器之一。Safari预装在苹果操作系统当中，从2003年首发测试以来到现在已经11个年头。是苹果系统的专属浏览器，当然现在其他的操作系统也能装Safari。
Safari使用WebKit内核，webkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。

Firefox浏览器
火狐浏览器是一个开源的浏览器，由Mozilla资金会和开源开发者一起开发。由于是开源的，所以它集成了很多小插件，开源拓展很多功能。发布于2002年，它也是世界上使用率前五的浏览器。
Mozilla Firefox使用Gecko内核，Gecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。

Opera浏览器
opera浏览器是由挪威一家软件公司开发，该浏览器创始于1995.目前其最新版本是opera 20.他有着快速小巧的特点，还有绿色版的，属于轻灵的浏览器。
Opera使用Presto内核，Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。

Chrome浏览器
Chrome浏览器由谷歌公司开发，测试版本在2008年发布。虽说是比较年轻的浏览器，但是却以良好的稳定性，快速，安全性获得使用者的亲睐。与Safari 一样采用WebKit内核。

其他浏览器
现在很多国内浏览器，像360浏览器，猎豹浏览器，搜狗浏览器使用高速（webkit）和兼容（Trident）双核浏览模式，保证良好兼容性的同时极大提升网页浏览速度。当采用高速模式访问网页出现问题时，可点击地址栏旁边的内核按钮直接切换内核，使用兼容性更佳的兼容模式正常浏览网页。

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

 创建一个HTML文档。
 设置文档标题和其它在网页中不显示的信息。
 设置文档的标题
 元素定义文档的主体,包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

到
描述标题的标签，块元素，从上到下字体依次减少。

 
 paragraph的缩写，描述的是段落，段中没有间距，但是在段与段之间是有间距的，典型的块元素。
信息)插入一张图片，alt 定义当图片无法加载时，显示什么信息。
 链接标签，例有比较重要的属性有两个，分别是href、target，href指定超链接地址；target指定打开方式：_blank 新页面打开，_self 为默认值可不写，指在当前页面打开。
标签定义表格，用户注册登录时会用到。

     
  • html列表标签，
      表示有序列表。

         
      1. html列表标签，
          表示无序列表。

           
           
          内容块标签，dl：内容块，dt：内容块的标题，dd：内容。