HTML、XML、XHTML 有什么区别
- HTML 指的是超文本标记语言 (Hyper Text Markup Language),“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。HTML是用来描述网页的一种语言,他不是一个编程语言而是一个标记语言。
- XML是一个可扩展标记语言(Extensible Markup Language),XML设计用来传送及携带数据信息,不用来表现或展示数据,HTML语言则用来表现数据,所以XML用途的焦点是它说明数据是什么,以及携带数据信息。
- XHTML 是一种可扩展超文本标记语言(eXtensible HyperText Markup Language)表现方式与超文本标记语言(HTML)类似,不过语法上更加严格。XHTML。大部分常见的浏览器都可以正确地解析XHTML,即使老一点的浏览器,XHTML作为HTML的一个子集,许多也可以解析。也就是说,几乎所有的网页浏览器在正确解析HTML的同时,可兼容XHTML。
怎样理解HTML语义化
根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析
- 为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构
- 用户体验
- 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息
- 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页
- 便于团队开发和维护,语义化更具可读性
怎么理解内容与样式分离的原则
一般网站都分为:
- HTML 页面结构排版
- CSS 页面的设计样式
- JS 页面交互
以上三个部分。其中说到的内容与样式分离指的是:
- HTML文件内尽量不要有样式,首要工作是构建页面结构和语义化上
- 写 JS 的时候,尽量不要用 JS 去直接操作样式,而是通过给元素添加删除class来控制样式变化
- HTML 尽量不用内样式
常见的meta标签
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词,以下为常见的meta标签:
-
页面关键词
<meta name="keywords" content="your tags" >
-
声明编码
<meta charset='utf-8' >
-
优先使用IE的最新版本和Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-
页面的描述
<meta name="description" content="150 words" />
###文档声明的作用?
告知浏览器页面使用的HTML版本
###严格模式和混杂模式指什么?
* 严格模式为添加`<!doctype>`标签来声明浏览器用哪一种HTML版本渲染页面
* 混杂模式为不添加`<!doctype>`标签,浏览器自行识别来渲染页面
###<!doctype html> 的作用?
声明使用HTML5来解析渲染页面
###浏览器乱码的原因是什么?如何解决?
出现乱码通常为浏览器没有正确使用编码格式去解析页面。解决方法为在`<head></head>`中添加`<meta charset="UTF-8">` 即可
###常见的浏览器有哪些,什么内核
* chrome:WebKit
* IE:Trident
* 火狐:Mozilla
###列出常见的标签,并简单介绍这些标签用在什么场景
标签 | 使用场景
----|----------
`<html>...</html>` | 将所有HTML内容都包含在这个标签内
`<head>...</head>` | 用于定义文档的头部,它是所有头部元素的容器。
`<title>...</title>` | 文档的标题
`<meta>...</meta> ` | 提供有关页面的元信息
`<body>...</body>`| 文档的内容
`<h1>...</h1>`| 一级标题,h1~h6分别对应六级标题,从1~6标题一次减小
`<p>...</p>`| 整段文字
`<a>...</a>`| 定义锚,即在页面插入链接
`<u>...</u>`| 下划线
`<i>...</i>`| 斜体字
`<em>...</em>`| 强调文本
`<strong>...</strong>`| 加重文本
`<b>...</b>`| 黑体字
`<ol>...</ol>`| 有序列表
`<ul>...</ul>`| 无序列表
`<li>..</li>`| 定义列表项目
`<img>`| 图片
`<div>...</div>`| 定义文档中的分区或节
`<span>...</span>`| 定义文档中的一小节
`<br />`| 换行
`<table>...</table>`| 定义表格
`<tr>...</tr>`| 定义表格中的行
`<hr />`| 创建一条水平线