HTML、XML、XHTML 的区别
HTML(hype text markup language):超文本标记语言,是最早写网页的语言,语法较为松散的、大小写混写编码不规范不严格HTML设计宗旨是用来显示数据,旨在数据的外观,显示信息。
XML(extensible markup language),可扩展标记语言,设计宗旨是传输数据、描述数据,而非显示数据;实为存储数据格式的文件,标签需要自定义。
XHTML(extensible hypertext markup language),可扩展超文本标记语言,结合XML和HTML的优点。xhtml文档具有良好完整的排版,元素必须要有结束标签;元素必须嵌套;严格区分大小写。
怎样理解HTML语义化
定义:语义化HTML是一种编写HTML的方式,意为写页面时选择合适的代码结构和标签。
优点:便于开发者阅读,维护。同时让浏览器的爬虫和机器很好地解析。使页面整体的结构清晰有条理。在没有CSS的情况下也能呈现较好的内容结构、代码结构。
如何做到:
<div>和<span>在HTML中没有语义,尽量少用<div>、<span>。
熟悉所有规范的HTML标签使用场景,熟悉各标签规范的属性,给HTML标签设置的两个必要属性是alt属性和title属性,这两个属性可以提高HTML的语义。
在img标签中,alt是必须要设置的属性,因为img是自闭合标签,并没有包含可以解释说明图片的额外信息。alt属性可以在无法显示图像时候浏览器将显示代替文本,可以显示图像是alt为图像添加描述性文本。
例如<img src="/e/1/hehe.jpg" alt="滑稽表情">。
在HTML里,title属性是可选属性,当标签包含的内容不足以说明语义时,可以通过title添加额外的信息, 在浏览器中当鼠标移到元素上时会显示提示文本。
例如<abbr title="hahaha">hhh</abbr>
在lable标签中的for属性。标签是元素定义的标注。标签的for属性值指代一个表单元素,属性值为此表单元素的id值。for属性的作用不仅把标签上的触发事件指向了for属性指代的表单元素,也从语义上绑定了和此表单元素。
例如<lable for="male">Male</lable>
怎样理解内容与样式分离原则
HTML代表页面上的内容,CSS代表页面的样子,JS代表页面上的交互和功能就是行为。写HTML时只需注重结构和语义,写好再去考虑样式。写JS时,勿用JS操作样式;例如网页换肤色:通过HTML里的ID或class标记,在CSS中找到相应的ID或class,js无需改动,节省了大量时间。在写HTML时不出现属性样式,行内样式。
如何做到:内容与样式分离的原则的实现,一个是要依靠意识,另一个是依靠经验。
例:面对一个分块明显的网页设计图时:
初级的开发人员思路及制作方法:div 层层嵌套;
中级的开发人员思路及制造方法:去掉多余的 div ,进行简化;
高级的开发人员思路及制造方法:最大化的简化 html 的结构,然后用 css 进行设置,减少 html 与 css 的契合度。
有哪些常见的meta标签
<meta charset="utf-8">编辑器里保存的代码所存为的一种编码格式,浏览器需要解析字符串显示内容,页面保存什么格式就在<meta charset="">写什么格式。
<meta http-equiv="X-UA-Compatoble" content="IE=edge,chrome=1">强制浏览器按照特定的版本标准进行渲染。但不支持IE7及以下版本。如果是ie浏览器就用最新的ie渲染,如果是双核浏览器就用chrome内核。
<metahttp-equiv=”Refresh”content=”5;URL”>:告诉浏览器在“5”秒后跳转到“一个网址”
<meta name="viewport" content="width=device-width, initial-scale=1.0">使页面在移动端展示合理,禁用缩放(zooming)功能,用户只能滚动屏幕。
<metaname="keywords"content="class">该网页的关键字是“class”。
<metaname="description"content="repositories">该网页的主要内容是“repositories”。
文档声明的作用?严格模式和混杂模式指什么?<!doctype html>的作用?
1.doctype声明的作用:在Web设计中用来说明你用的XHTML或者HTML是什么版本。、
2.严格模式(标准模式):浏览器根据浏览器支持的坐高标准呈现页面。
混杂模式(兼容模式):页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止老站点无法工作。
3.<!doctype html>!的作用:是html5的文档声明。文件的合法性验证。 如果文件代码不合法,那么浏览器解析时便会出一些差错。HTML编辑器通常也会在语法高亮的同时提供合法性验证。
浏览器乱码的原因是什么?如何解决
编码器编写的HTML在保存时会按照自己默认的格式保存,使用浏览器打开HTML时,在没有<meta charset="xxx">时,浏览器会自动选择一种方式解析字符集,如果编码器储存的是gbk格式,浏览器却选择utf-8解析,此时网页乱码。
还有一种情况是在编码器中指定<meta charset="gbk">格式在保存HTML时却用utf-8保存,浏览器打开HTML时看到<meta charset="gbk">就会按照gbk的字符集解析。
解决方法:
编辑器保存文档使用的字符集一定要跟 HTML 文档指定的字符集匹配。文件保存时清楚用哪种字符集保存的,也可以全用“utf-8”,“utf-8”包括世界上所有的文字。
常见的浏览器有哪些,什么内核
IE浏览器内核:Trident
Trident内核程序在1997年的IE4中首次被采用,简称IE内核。它是微软在Mosaic代码的基础之上修改而来的,并沿用到目前的IE8。Trident实际上是一款开放的内核,其接口内核设计的相当成熟,有许多采用IE内核而非IE的浏览器涌现。
Netscape6浏览器内核:Gecko
Gecko的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。基于开源内核的特性,备受青睐,出现很多以Gecko为内核的浏览器,因此有挺大的市场占有量。
Opera浏览器内核:Presto
Presto内核在2003年的Opera7中首次被使用,该款引擎的特点就是渲染速度的优化达到了极致,也是目前公认网页浏览速度最快的浏览器内核,但对网页的兼容性差。
苹果Safari浏览器内核:Webkit
Webkit是苹果公司自己的内核,也是使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎,均是从KDE的KHTML及KJS引擎衍生而来。且Webkit开放源代码。
傲游浏览器3、QQ浏览器和搜狗高速浏览器都是使用Webkit与Trident双核心
Webkit核心让网页打开速度更快,Trident核心则带来更好的兼容性支持。使用高速(webkit)和兼容(Trident)双浏览模式,保证良好兼容性的同时极大提升网页浏览速度。当采用高速模式访问网页出现问题时,可直接切换内核,使用兼容性更佳的兼容模式正常浏览网页。
列出常见的标签,并简单介绍这些标签用在什么场景
h1,h2,h3,h4,h5,h6:标题
p:段落,大段文字
a:HTML链接
例:<a href="http://www.w3school.com.cn">This is a link</a>,在 href 属性中指定链接的地址。
img:图像
例:<img src="hehe.jpg" alt="avatar">,只闭合不加“/”。
div:块,页面分区
例:<divid="header">...</div>
<divid="content">...</div>
<divid="footer">...</div>
ul li:无序列表,表示并列内容,ul必须后面跟着li,可嵌套
ol li:有序列表,可以表示步骤、编号的并列内容,ol后面必须跟着li。
dl:列表,dt:列表下的标题,dd:列表下的标题的描述。
例:
button:按钮
strong、span、em、:都指强调,强调的程度依次减弱。可用于单独修改某一段字的背景色或者行为。
iframe:嵌入一个界面
例:<iframesrc="http://jirengu.com"name="myPage"></iframe>
table:展示表格,thead、tbody、tfoot在不做布局时候可以省略,tr:列,td:行