1.HTML、XML、XHTML 有什么区别?
- HTML,超文本标记语言,是语法较为松散的、不严格的Web语言。
- XML,可扩展标记语言,主要用于存储数据和结构,可扩展。
- XHTML,可扩展超文本标记语言,基于XML,作用与HTML类似,但语法更严格。
2.怎样理解 HTML 语义化的?
语义化 HTML 就是选择合适的标签、使用合理的代码结构来编写HTML的方式,使代码更具可读性,也使得浏览器的爬虫和机器能对代码更好地解析。
为什么要语义化?
- 为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构;
- 用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
- 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
- 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
- 便于团队开发和维护,语义化更具可读性,是下一步的网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
如何让HTML语义化?
- 尽可能少的使用无语义的标签div和span;
- 在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
- 不要使用纯样式标签,如:b、font、u等,改用css设置。
- 需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);
- 使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
- 表单域要用fieldset标签包起来,并用legend标签说明表单的用途;
- 每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
3.怎样理解内容与样式分离的原则?
- 由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小。使页面载入得更快。
- 修改设计时更有效率在修改页面的时候更加容易省时。根据区域内容标记,到CSS里找到相应的ID,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式。
- 保持视觉的一致性。
- 由于将大部分的HTML代码和内容样式写入了CSS文件中,这就使得网页中代码更加适合搜索引擎。
- 由于CSS富含丰富的样式,使页面更加灵活性,更加的美观,它可以根据不同的浏览器,而达到显示效果的统一和不变形,对浏览者和浏览器更具亲和力。
4.有哪些常见的meta标签?
<meta name="keywords" content=""> | 向搜索引擎说明你的网页的关键词 |
---|---|
<meta name="description" content=""> | 告诉搜索引擎你的站点的主要内容 |
<meta name="author" content="你的姓名"> | 告诉搜索引擎你的站点的制作的作者 |
<meta charset="utf-8"> | 声明文档使用的字符编码 |
<meta http-equiv="refresh" content="n;url="> | 定时让网页在指定的时间n内跳转 |
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/> | 移动设备 |
<meta http-equiv="expires" content="Mon,12 May 2016 00:20:00 GMT"> | 可以用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式 |
<meta http-equiv="pragma" content="no-cache"> | 禁用缓存 |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | 优先使用 IE 最新版本和 Chrome |
5.文档声明的作用?严格模式和混杂模式指什么?<!DOCTYPE html> 的作用?
- 文档声明的作用是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档。
- 严格模式:又称标准模式,是指浏览器按照 W3C 标准解析代码。
- 混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。
- 添加了<!DOCTYPE html>就等同于开启了标准模式,以免浏览器启动混杂模式。
6.浏览器乱码的原因是什么?如何解决?
- 查看文档的<meta charset="">声明使用的字符编码
- 修改正确的字符编码
- 查看并设置浏览器中的字符编码
7.常见的浏览器有哪些,什么内核?
浏览器 | 内核 |
---|---|
Internet Explorer | IE内核 |
chrome&Safari | WebKit |
Mozilla Firefox | Gecko |
Opera | Presto |
8.列出常见的标签,并简单介绍这些标签用在什么场景?
- a 标签:定义超链接,用于一个页面链接到另一个页面。
- button 标签:定义一个按钮。
- body 标签:定义文档的主体。
- em 标签:把文本定义为强调的内容。
- strong 标签:把文本定义为语气更强的强调的内容。
- from 标签:用于为用户输入创建 HTML 表单。
- h1 - h6 标签:可定义标题。h1定义最大的标题。h6定义最小的标题。
- head 标签:用于定义文档的头部,它是所有头部元素的容器。
- i 标签:显示斜体文本效果。
- img 标签:向网页中嵌入一幅图片。有两个必需的属性:src 属性 和 alt 属性。
- input 标签:用于搜集用户信息。
- li 标签:定义列表项目。
- link 标签:定义文档与外部资源的关系。
- meta 标签:可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
- nav 标签:定义导航链接的部分。
- ol 标签:定义有序列表。
- p 标签:定义段落。
- span 标签:被用来组合文档中的行内元素。
- table 标签:定义 HTML 表格。
- ul 标签:定义无序列表。