HTML基础知识

HTML、XML、XHTML 有什么区别？

• 三者发展先后HTML>XML>XHTML
• HTML：HyperText Markup Language / 超文本标记语言
• XML: Extensible Markup Language / 可扩展标记语言
• XHTML: Extensible Hypertext Markup Language / 可扩展超文本标记语

HTML

• 所谓超文本，就是说它除了能标记文本，还能标记其他的内容，比如：图片，链接，音频，视频等。
• HTML里面的标签都是预设的，不能自定义标签，语法比较松散，大小写可以混用，属性值随便你加不加引号，单引号还是双引号也随便你，标签不闭合也能运行。

XML

• 它的表现形式就是给一个文档加一堆标签，说明每段文字是干什么的，有什么意义。方便存储、传输、分享数据，人和机器都可以很方便的阅读。
• 语法严格有开有闭！

XHTML

• 是HTML与XML的结合体，也可以理解为HTML除了预设的标签，也能添加自定的标签了。而且语法变得严格。
  如：
  1.对非空元素,必须使用结束标签。
  2.元素和属性名必须小写。
  3.属性值必须在引号中。
  4.属性-属性值必须完整成对的写出。像checked这样的属性名不能在不指定属性值的情况下出现。
  5.空元素必须有结束标签,或者起始标签必须以/>结束。如：
  或

  ---

  。

---

怎样理解 HTML 语义化？

• 根据内容的结构（内容语义化），选择合适的标签便于开发者阅读和* 出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
• 语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
  举例说明，按钮用 ,输入框搜索框用，字体加粗直接用标签，/，字体倾斜用,一级标题用

  二级标题用

  ，以此类推,这就是语义化

---

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

我们先看一下下面两个例子

1. 
   
   
   
   
   这是分离前的。

.html文件

段落1

段落2

段落3

.css文件
p{color:red;}
p
这是分离后的。
有没有发现代码结构精简,而且复用性变高，而且如果以后要改外观不用再HTML里面一个个的换样式，而是直接写CSS覆盖。

---

有哪些常见的meta标签？

• chaset:

申明编码。

• name:

常用的选项有keywords(关键字) ，description(网站内容描述)，author(作者)，robots(机器人向导)等。

• http-equiv:

可用于代替name项，常用的选项有Expires(期限)，Pragma(cache模式)，Refresh(刷新)，Set-Cookie(cookie设定)，Window-target(显示窗口的设定)，content-Type(显示字符集的设定)等。

• content:

根据name项或http-equiv项的定义来决定此项填写什么样的字符串。

---

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

• 文档声明作用：为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。必须在 HTML 文档的第一行，这并不是一个 HTML 标签。
• 严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
• 混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
• 告诉浏览器，以HTML5的方式解析、渲染当前页面。

---

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

浏览器打开页面时，将编码和字符串解析成内容；若无指明编码格式，浏览器不知道以何种方式来解析编码，以浏览器默认的编码方式进行解析，所以容易造成乱码。常见有中文字符、小语种字符错误。

解决方式：设置在meta里面charset=“UTF-8”；

---

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

浏览器	内核
IE	Trident
Chrome	Blink
firefox	Gecko
Safari	Webkit
Opera	Presto

---

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

• h1-h6 标题1~6从大到小
• p 段落
• a 链接到一个地方可以使锚点可以使网页
• img 展示图片
• div标签，用于给页面划分区块，让结构更清晰
• ul li 无序列表，可以嵌套ul的直接子元素是li，里面不可以有p，h等标签
• ol li 有序列表
• dl dt dd 用于展示一系列“标题：内容....”的场景
• 按钮
• iframe 用于嵌入一个页面，需要注意跨域操作问题
• table 用于展示表格，tr为行，td为列

---