HTML标签（任务4）

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

• HTML是超文本标记语言，是语法比较松散的，不严格的web语言
• XML是可扩展标记语言，主要用于存储数据和结构的参考，语法很严格
• XHTML是可扩展超文本标记语言，基于XML，作用与HTML类似，但是语法比HTML要严格的多
• HTML和XHTML设计的宗旨都是为了显示数据，而XML宗旨则是传输数据
• XML的标签没有被预定义

2.怎样理解 HTML 语义化

• 语义化HTML是一种编写HTML的方式
• 选择合适的标签、使用合理的代码结构，便于开发者阅读，同时让浏览器的爬虫和机器很好地解析。

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

• 写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上，让 HTML 能体现页面结构或者内容。之后再去写样式。
• 写 JS 的时候，尽量不要用 JS 去直接操作样式，而是通过给元素添加删除class来控制样式变化
• HTML 内不允许出现属性样式，尽量不要出现行内样式

4.有哪些常见的meta标签

charset表明网页的编码格式：

secription表示网页描述：

keywords表示关键字，用于SEO搜索

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

的作用?

• 作用：就是文档声明，声明此文档是html5的格式，用来告诉浏览器的渲染方式。如果不添加此句标签，则浏览器默认会用自己的类型来解析文本，就会出现每个浏览器可能最终渲染出来的样式都不一样。加上了这句话，就是告诉浏览器，用html5的标准来渲染，那么大家最后展现出来的页面就是用统一的标准显示的

• **严格模式 **是指用标准格式来渲染页面， **混杂模式 **则是向下兼容的一种格式。这两种模式要看是否用了doctype的文档申明以及申明的dtd类型来确定。
  （1）声明位于位于HTML文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
  （2）标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

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

• 原因：编辑器保存编写的HTML文件时，选用的编码格式和浏览器默认的编码格式不一致；
• 解决：设置HTML文件的字符编码格式为保存的格式
  

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

• 常见浏览器包括微软的IE、谷歌的Grome、Firefox、opera、360(极速)、搜狗、QQ、百度、UC浏览器
• 内核定义：

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎则：解析和执行javascript来实现网页的动态效果。

• 常见内核

一、Trident内核
代表产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。
二、Gecko内核
代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。
三、WebKit内核
代表作品Safari、Chromewebkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。
**四、Presto内核
代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。
**

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

(1)dl dt dd ...：用于展示一系列标题内容的场景

代码：

Paste_Image.png

显示：

Paste_Image.png

(2)ul li和ol li： ul li 是无序列表, ol li是有序列表

代码如下：

 
求职
    
智联招聘
    
前程无忧
    
51job
    
拉勾网
  
  
  
前端
    
javascript
    
html
    
css
  

效果是：

Paste_Image.png

(3)button：按钮标签

(4)strong,em,span

• em：强调
• strong：很重要，强调性更强（比em）
• span：修饰一段文字，可以对一个元素内的文字的一部分加上 不同的颜色等css样式

(5)h1,h2...h6：不同级别的标签

(6)p：段落，表示一段文字

(7)a：表示链接，链接到一个地址

• 跳转到一个网页地址：href是地址，target打开方式，title是光标移动到a标签上后的提示文字

饥人谷视频

• 焦点跳到指定id的标签：'#' 后面就是id
  点这里焦点将跳转到指定Id的标签

(8)img：展示一张图片

• src：图片地址
• alt：图片加载失败后提示的文字

(9)div：用于给页面划分区块，让结构更清晰

(10)iframe：用于嵌入一个页面