HTML、XML、XHTML 有什么区别
- HTML,超文本标记语言,是语法较为松散的、不严格的Web语言;
- XML,可扩展标记语言,主要用于存储数据和结构参考;
- XHTML,可扩展超文本标记语言,基于XML,作用与HTML类似,但语法更严格参考。
怎样理解 HTML 语义化
HTML语义化是什么
- html语义化是一种编写HTML的方式,选择合适的标签、使用合理的代码结构,便于开发者阅读,同时让浏览器的爬虫和机器很好地解析。
为什么要语义化HTML
- 提高用户体验,比如:title,alt用于解释名词和图片信息;
- 利于SEO,语义化能和搜索引擎建立良好的联系,有利于爬虫抓取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重;
- 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页;
- 便于团队开发和维护,语义化更具可读性,如果遵循W3C标准的团队都遵循这个标准,可以减少差异化,利于规范化。
如何实现HTML语义化
- 尽可能少的使用没有语义的div和span元素;
- 不要使用纯样式标签,如:b、font、u等,改用css设置;
- 需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b,因为没语义),em是斜体(不用i同b);
- 不要使用table标签进行页面布局。
怎样理解内容与样式分离的原则
什么叫做内容与样式分离的原则
- 一个网页可以简单的分为三个部分:HTML——结构,CSS——表现,JavaScrip——行为。内容和样式的分离,就是指在网页编码的过程中,要将HTML和CSS两大部分分开。
为什么要遵守内容与样式分离原则
- 浏览器加载网页页面速度变快。分离原则下,大部分页面代码写在了CSS当中,页面体积容量变得更小。
- 网页修改设计时,效率、省时。根据html标签内ID或class的标记,到CSS里找到相应的ID或class,可以快速替换指定位置的样式,不会破坏页面架构和其他部分的样式。典型的应用就是网页换肤,使用相同的 html 结构,不同的 css 样式。
- 更好地被搜索引擎收录。基于内容与样式分离的原则,html的语义化就是首要考虑的,网页中语义化的标签代码就会更加适合搜索引擎。
- css样式的分离,它可以根据不同的浏览器,达到显示效果的统一。保证网页架构不变形的前提下,放心在不同浏览器渲染显示样式。
如何实现内容与样式分离
- 写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上,让 HTML 能体现页面结构或者内容。之后再去写样式;
- 写 JS 的时候,尽量不要用 JS 去直接操作样式,而是通过给元素添加删除class来控制样式变化;
- HTML 内不允许出现属性样式,尽量不要出现行内样式。
有哪些常见的meta标签
- 声明文档所使用的文字编码
<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> 的作用?
- 文档声明的作用是告知浏览器页面使用的HTML版本;通俗的讲就是要告诉浏览器,你的 HTML 文档是用的什么版本的 HTML 来写的,这样浏览器才能按照你声明的版本来正确的解析你的 HTML 文档。
- 严格模式也叫做标准模式,是指浏览器按 W3C 标准解析执行代码;
- 混杂模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,这样做就是为了兼容在W3C标准出现之前就存在的那些“不标准”的页面。
-<!doctype html> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器使用最新的HTML 5标准来解析渲染页面。
浏览器乱码的原因是什么?如何解决
- 浏览器乱码产生的原因
- 乱码产生的根本原因是你保存的编码格式和浏览器解析时的解码格式不匹配导致的。
- 乱码一般是英文以外的字符才会出现。
- 如何解决
首先,在文件保存的时候你自己要清楚是用哪种编码方式保存的。如果你的文件是保存为utf-8格式,那么一定要在html 的<head>
里添加<meta charset="utf-8">
,这句话的意思是告诉浏览器在打开这个页面的时候不要去猜了,直接用utf-8去解码。 同理,如果你的文件保存为gbk格式,一定在文件里添加<meta charset="gbk">
。
常见的浏览器有哪些,什么内核
浏览器 | 内核 |
---|---|
IE、Maxthon、TT、The World等 | Trident |
Netcape6及以上版本、FireFox | Gecko |
Opera7及以上版本 | Presto |
Safari、Chrome | Webkit |
列出常见的标签,并简单介绍这些标签用在什么场景
常见标签 | 应用 |
---|---|
<head> | 头部,head标签是页面的“头部”, 一般来说,只有6个标签能放在<head>标签内:<title>、<meta>、<link>、<style>、<script>、<base> |
<body> | html 页面主体 |
<h1>~<h6> | 标题 |
<p> | 段落文字 |
<a> | 设置链接 |
<img> | 图片 |
<ol><ul><li> | 有序列表和无序列表 |
<table><tr><td><th> | 表格 |
<inframe> | 创建包含另外一个文档的内联框架 |
<dl><dt><dd> | 描述标题内容 |