HTML基础知识
2017-09-21 本文已影响0人
月光下的微笑
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.空元素必须有结束标签,或者起始标签必须以/>结束。如：<br/>或<hr></hr>。
怎样理解 HTML 语义化？
- 根据内容的结构（内容语义化），选择合适的标签便于开发者阅读和* 出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
- 语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
举例说明，按钮用<button> ,输入框搜索框用<input>，字体加粗直接用标签，<b></b>/<strong></strong>，字体倾斜用<i></i>,一级标题用<h1> 二级标题用<h2>，以此类推,这就是语义化
怎样理解内容与样式分离的原则？
我们先看一下下面两个例子
- <p style="color: red"></p>
<p style="color: red"></p>
<p style="color: red"></p>
这是分离前的。
.html文件
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
.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项的定义来决定此项填写什么样的字符串。
文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?
- 文档声明作用：为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。必须在 HTML 文档的第一行，这并不是一个 HTML 标签。
- 严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
- 混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
- <!DOCTYPE html> 告诉浏览器，以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 用于展示一系列“标题：内容....”的场景
- <button> </button>按钮
- iframe 用于嵌入一个页面，需要注意跨域操作问题
- table 用于展示表格，tr为行，td为列
