关于HTML
超文本标记语言（HyperText Markup Language，简称HTML），是一种用于创建网页的标准标记语言，常与CSS、Javascript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构化语义随着线索的呈现，使之成为一种标记语言而非编程语言。--引自维基百科-HTML
个人通俗理解：HTML告诉浏览器去展示什么内容，CSS则规定了怎么去展示这些内容，如果除了展示之外还有其他什么需要吩咐浏览器去做的话，那就是JS的事了。
HTML、XML和XHTML的区别
- XML（Extensible Markup Language，简称XML），与HTML一样也是一种标记语言，标记是指计算机所能理解的信息符号，但与HTML里已经规定好的标准标记不同的是，XML可以由使用者自行定义这些标记，这就是XML所谓的可扩展之处，同时在语法上较HTML更为严格；此外与HTML的表现数据的用途不同的是，XML是设计用来传送及携带数据信息，所以XML聚焦于携带数据信息和说明数据是什么。
- XHTML（Extensible HyperText Markup Language，简称XHTML），表现方式与HTML类似，但同时基于XML，所以也有XML语法严格和可扩展的特性。
怎样理解HTML语义化
-
是指根据具体的内容，选择合适的标签进行代码的编写，便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器更好地解析。
比如：对于文章的段落我们应该用<p>而非<div>，还有HTML5建议的用<footer>代替<div id="footer">就是语义化的表现。 -
语义化带来的好处：
- 有利于SEO，搜索引擎的爬虫是不懂非语义化的
<div>、<span>的标签的，因此语义化标签能让搜索引擎的爬虫抓取更多的有效信息。 - 类似于JS的平稳退化，当CSS的样式文件读取失败时，语义化的HTML也能展现很好的内容结构。
- 代码简洁，复用性更高。使用合适的标签可以精简代码。
- 便于团队的开发和维护。
- 有利于SEO，搜索引擎的爬虫是不懂非语义化的
-
怎样做到语义化
1.掌握常用的的标签，透彻理解标签的含义和用法；
2.每次实践时都以是否语义化的标准来要求自己；
3.有时间多review一下一些大公司、优秀开源项目的代码，学习他们的内容和样式是怎么写的。
怎样理解内容与样式分离原则
- 内容由HTML负责，样式则由CSS负责，各自分工，能让网页的结构更加层次分明，更有利于开发和维护。
- 写一个页面的时候先不要去管样式，重点应该放在HTML的结构和语义化上 ，让HTML能够体现页面的结构和内容，将这一步做好后再去考虑样式。
- 写JS的时候，尽量不要去直接操作样式，而应该通过为元素增删某个class来控制样式的变化。
- HTML内尽量避免出现属性样式，避免出现行内样式。
有哪些常见的meta标签
- meta标签的简介：
The
<meta>tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
根据翻译，<meta>标签提供了关于HTML文件的元数据，这些元数据不会显示在网页上，但是能够被机器解析。<meta>元素通常用来指定页面描述、关键字、文档作者、最后修改以及其他一些元数据。
- 常用的meta标签：
<meta charset="utf-8">
<meta name="keywords" content="饥人谷 前端">
<meta name="description" content="最有爱的前端社区">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
上述meta标签内容参考自《HTML meta标签的总结与使用介绍》
文档声明的作用，严格模式和混杂模式，<!DOCTYPE html>的作用
- 文档声明的作用：用来指示浏览器用哪个版本的HTML进行编写。
- 严格模式和混杂模式：混杂模式是一种比较宽松的向后兼容的模式。混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作，当不指定
<!DCOTYPE>声明或声明无效时会触发混杂模式；严格模式下浏览器以其支持的最高标准呈现页面，当指定了正确的<!DCOTYPE>声明时就会触发严格模式。 -
<!DOCTYPE html>的作用：HTML5没有DTD，因此不需要对DTD进行引用，但还是需要doctype来规定浏览器的行为，故<!DOCTYPE html>的作用就是告知浏览器文档是以HTML5这个版本来进行编写的，浏览器也应该用这种方式来解析渲染页面。
浏览器乱码的原因以及解决
- 原因： 乱码产生的根本原因是文档保存的编码格式和浏览器解析时的解码格式不匹配导致的。
- 解决： 使二者匹配，浏览器去匹配文档保准编码格式或文档编码保存格式去匹配浏览器的解码格式。
常见的浏览器及其内核
- IE：Trident/Edge
- Safari: Webkit
- Chrome: Chromium/Blink，这两个内核都是Webkit的一个分支，Chromium无法脱离Webkit的影响，所以这也是Blink诞生的原因之一。
- Opera: Presto/Blink
- Firefox: Gecko
- 关于浏览器内核：内核最早是Rendering Engine和JS Engine的统称，这两种Engine也没有区分很明确，但后来JS Engine越来越独立开来，然后慢慢地内核就倾向于只值Rendering Engine。
常见的标签及其应用场景
-
<html>: 文档的根元素 -
<head>: 文档的头部分，一般包含标题、元数据样式表等 -
<body>: 文档的主体元素，在浏览器上显示的部分都在包含在<body>标签里 -
<p>: 文章的段落 -
<h1>: 标题 -
<img>: 用于图片元素 -
<a>: 用于超链接元素 -
<table>: 用来绘制表格 -
<ol>,<ul>,<dl>: 分别应用于有序、无序和自定义列表 -
<form>: 应用于表单 -
<div>: 应用于一般无特殊意义的块级元素 -
<span>: 应用与一般无特殊意义的内联元素
网友评论