HTML学习总结
2017-04-04 本文已影响0人
飘飘流浪者
HTML、XML、XHTML 有什么区别?
1.HTML(Hyper Text Markup Language)即超文本标记语言。是用来描述网页的一语言，常与CSS、JavaScript一起被用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。其语法较为松散，不严格。HTML使用标记标签来描述网页，其标签是被预定义的。
2.XML（EXtensible Markup Language），即可扩展标记语言。其被设计用来传输和存储数据，而不是像HTML那样用来显示数据。XML是纯文本，它没有预定义的标签。但XML必须正确标记且格式良好。
3.XHTML：即可扩展超文本标记语言。其是以XML应用的方式定义的HTML，是更严格更纯净的HTML版本。因此，其语法比HTML更加严谨，让更多设备能够解释。
怎样理解HTML语义化？
语义化HTML是一种编写HTML的方式。选择合适的标签、使用合理的代码结构，便于开发者阅读，同时让浏览器的爬虫和机器很好地解析。简单讲就是标题就是标题，段落就是段落，让机器可以读懂内容，更让人可以读懂。
- 为了在没有CSS的情况下，页面也能呈现出很好的内容结构、代码结构：为了裸奔时好看；
- 用户体验:例如tittle、alt用于解释名词或解释图片信息、label标签的活用；
- 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
- 便于团队开发和维护，语义化更具可读性，是下一步把网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
怎样理解内容与样式分离的原则？
- 写HTML的时候先不管样式, 重点放在HTML的结构和语义化上，让HTML能体现页面结构或者内容。之后再去写样式。
- 写JS的时候，尽量不要用JS去直接操作样式，而是通过给元素添加删除class来控制样式变化。
- HTML内不允许出现属性样式，尽量不要出现行内样式。分离内容与样式增强了机器的可读性，使得机器、网络爬虫能更好地理解页面内容。
有哪些常见的meta标签？
<meta> 标签永远位于 head 元素内部。元数据总是以名称/值的形式被成对传递的。
- <meta charset="utf-8">：编码方式
- <meta name="keywords" content=""> ：向搜索引擎说明你的网页的关键词
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">：用于移动端的展示合理。
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">：双核浏览器。
- <meta name="description" content=""> ：告诉搜索引擎你的站点的主要内容。
文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用？
- DOCTYPE：简称为DTDs，是英文Document type的缩写，中文“文档类型”，在Web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的XHTML网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。
- 严格模式：使用doctype明确告知浏览器HTML的版本。严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
- 混杂模式：不加DOCTYPE，浏览器按照自身的方式自由渲染页面。在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
- <!doctype html>：告知浏览器现在使用的HTML版本是HTML5，这样浏览器就能按照HTML5标准来展示渲染页面。
浏览器乱码的原因是什么？如何解决？
乱码产生的根本原因是你保存的编码格式和浏览器解析时的解码格式不匹配导致的。乱码一般是英文以外的字符才会出现。
解决方法：首先，在文件保存的时候你自己要清楚是用哪种编码方式保存的。如果你的文件是保存为utf-8格式，那么一定要在html 的 <head>里添加<meta charset="utf-8">，这句话的意思是告诉浏览器在打开这个页面的时候不要去猜了，直接用utf-8去解码。 同理，如果你的文件保存为gbk格式，一定在文件里添加<meta charset="gbk">。
常见的浏览器有哪些，什么内核？
| 内核 | 常见浏览器 | 备注 |
|---|---|---|
| Trident内核 | IE、360 | 国产大部分浏览器 |
| Webkit内核 | chrome、safari | 国产大部分双核浏览器其中一核为Wekit |
| Gecko内核 | Firefox | |
| Presto内核 | Opera | Opera浏览器现已转向Webkit内核 |
列出常见的标签，并简单介绍这些标签用在什么场景。
| 常见标签 | 名称 | 用法 |
|---|---|---|
| h1~h6 | 标题 | <h1>tittle</h1> h1代表页面最大的标题，h2二级标题，h3... 更弱的标题 |
| p | 段落 | <p>paragraph</p> |
| a | 链接 | <a href="http://www.google.com">This is a link</a> |
| img | 展示图片 |
图1
图2
图3
图4
猜你喜欢
热点阅读
|
