1.HTML VS XML VS XHTML
HTML译为超文本标记语言，语法比较松散，是一种不严格的web语言。
XHTML是可扩展超文本标记语言，基于XML，作用与HTML类似，但语法更严格参考。
XML是扩展标记语言，用于存储数据和结构参考。
2.HTML语义化是什么意思？
（1）指的是机器在需要更少的人类干预的情况下能够研究和收集信息，让网页能够被机器理解，最终让人类受益。
（2）主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用
（3）根据内容的结构化（内容[语义化]选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
3.内容与样式的分离
现在的网页一般分为三部分：HTML——结构，CSS——渲染，javascript——行为。
内容也就是html，样式也就是css。所以内容和样式的分离，就是指在网页编码的过程中，要将html和css两大部分分开。
实现方法：写HTML的时候先不管样式，重点放在HTML的结构和语义化上，让HTML能够体现页面结构或者内容，然后进行 css 样式设置和渲染，写JS的时候，尽量不要用JS去直接操作样式，而是通过给元素添加删除class来控制样式变化（即行为分离）。
好处：
浏览器加载网页页面速度变快。分离原则下，大部分页面代码写在了CSS当中，页面体积容量变得更小。
网页修改设计时，效率、省时。根据html标签内ID或class的标记，到CSS里找到相应的ID或class，可以快速替换指定位置的样式，不会破坏页面架构和其他部分的样式。
典型的应用就是网页换肤，使用相同的 html 结构，不同的 css 样式。
更好地被搜索引擎收录seo更好。基于内容与样式分离的原则，html的语义化就是首要考虑的,网页中语义化的标签代码就会更加适合搜索引擎。
css样式的分离，它可以根据不同的浏览器，达到显示效果的统一。保证网页架构不变形的前提下，放心在不同浏览器渲染显示样式。
4.常见的meta标签
（1）定义和用法
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
（2）一些常见的meta标签
<meta http-equiv="keywords" content="关键字1,关键字2,...">
<meta http-equiv="description" content="网页描述">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta name="renderer" content="webkit">
<meta name="renderer" content="ie-comp">
<meta name="renderer" content="ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<meta http-equiv="Window-target" content="_top">
<meta http-equiv="Refresh" content="2；URL=http://">
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="0">
<meta name="format-detection" content="telphone=no, email=no"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="cache-control" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
5.文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?
<!doctype>标签用来声明文档对象模型，用来告诉浏览器应该使用哪种方式来解析渲染页面。严格模式就是使用<!doctype>标签来显式声明该用哪种方式来渲染页面，混杂模式即不加<!doctype>标签，允许浏览器使用自己的方式来渲染页面。
<!doctype html>即就是声明使用HTML5来解析渲染页面。
6.浏览器乱码的原因是什么？如何解决
（1）乱码产生的根本原因是你保存的编码格式和浏览器解析时的解码格式不匹配导致的。
（2）乱码一般是英文以外的字符才会出现。
解决办法：首页，在文件保存的时候你自己要清楚是用哪种编码方式保存的。如果你的文件是保存为utf-8格式，那么一定要在html 的 <head>里添加<meta charset="utf-8">，这句话的意思是告诉浏览器在打开这个页面的时候不要去猜了，直接用utf-8去解码。 同理，如果你的文件保存为gbk格式，一定在文件里添加<meta charset="gbk">。
7.常见的浏览器有哪些，什么内核？
（1）Trident内核代表产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。
（2）Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。
（3）WebKit内核代表作品Safari、Chromewebkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。
（4）Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。
8。列出常见的标签，并简单介绍这些标签用在什么场景
html:我们页面的总包商
head:头部定义一些总体内容,比如浏览器标题,编码格式,样式文件引用
title:定义浏览器标题
meta:定义关于 HTML 文档的元信息,诸如例子中的编码格式,IE渲染模式(可以解决大部分IE兼容问题)
link:链接外部资源,如上图中链接浏览器标题旁的小图标,也经常用来链接css样式文件
style:在标签内定义css样式
body:我们肉眼看到的内容显示区域
script:在标签内定义js代码
br:换行符
h1~h6:不同字体大小的标题标签(块元素,什么是块元素?下篇文章详细介绍)
p:段落标签(块元素)
hr:水平分割线(块元素)
b:字体加粗(行元素,什么是行元素?下篇文章详细介绍)
strong:字体加粗,同b标签(行元素)
blockquote:引用标签,如果你的页面中需要引用一些文章内容时,使用该标签(块元素,细心的同学已经发现了块元素与行元素的一点区别了)
del:删除标签,标记废除的内容,通常用来标记原价,而优惠价则正常显示(行元素)
ins:下划线填写标签,标记可变的内容,或需要输入的内容(行元素)
em:斜体标签,用来强调(行元素)
i:斜体标签,同em(行元素)
form:表单包裹标签,里面的内容一般都是表单元素,通常结合table一并使用(块元素)
table:表格标签(table比较特殊,单独属于table元素,效果与块元素差不多)
thead:表格头部
tbody:表格主体内容部分
tr:表格行
th:表格单元格,一般用于显示标题,默认加粗样式
td:表格单元格,一般用于存放信息或输入框
input:各类表单输入元素,如上图中的输入框,单选框,复选框,隐藏的输入框以及按钮(行元素)
select:下拉框,比如用于选择省市区,民族等(行元素)
textarea:多行输入框,一般提供给用户输入简介,理由,多行文本等(行元素)
label:表单的提示信息,一般还用于包裹单选框,复选框使用,让用户点击文字也能实现勾选
img:图片标签,这个很简单,就是引用一个图片资源进行展示
ul:无序列表标签,内部只能是li标签(块元素)
li:列表项内容标签,包裹在ul中
dl:全称definition list,定义列表,即有一个标题,有一些解释信息的标签,如上图中的北京是标题,下面两行是解释(块元素)
dt:结合dl标签,一般用于显示标题
dd:结合dl标签,一般位于dt下面,用于解释dt包裹的标题内容
div:最典型并常用的块元素
span:最典型并常用的行元素
网友评论