1.HTML、XML、XHTML的区别。
HTML:
超文本标记语言。语法松散、不严谨。在大小写方面和闭合方面不报错,可能会导致浏览器误解。
XML:
可扩展的标记语言。主要用于储存数据和结构。标签可自定义。
XHTML:
可扩展超文本标记语言。基于XML和HTML。比HTML更加严谨。
2.HTML的语义化
选择合适的标签、使用合理的代码结构。便于开发者阅读。同时让浏览器的爬虫和机器更好的解析网页。
3.内容、样式与行为的分离原则
写HTML时。重点放在HTML的结构和语义化上。让HTML先能体现页面结构或者内容。之后在写样式。
写JS时。尽量不要直接操作样式,而是通过修改class熟悉。
HTML内不允许出现熟悉样式。尽量不要出现行内样式。
4.常见的meta标签
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="前端 饥人谷">
<meta name="description" content="最有爱的前端学习社区">
<meta charset="utf-8">
保存时的编码格式。在浏览器打开时。告诉浏览器用什么编码格式进行解析。在中文页面中。不告知浏览其用什么编码格式解析。最容易出现乱码。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
在双核浏览器中。或者装有插件的IE浏览器中。使用chrome的内核方式进行渲染。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
在移动端浏览时。使用这句使得展现更好。
<meta name="keywords" content="前端 饥人谷"><meta name="description" content="最有爱的前端学习社区">
对于搜索引擎优化有好处。能将你的页面的关键词等显示在搜索结果中。
5.文档声明的作用。严格模式和混杂模式。<!doctype html>的作用。
<!doctype html>
:doctype表示文档的对象、模型。表示用HTML5的标准来解析页面。
严格模式:浏览器按W3C标准解析执行代码。
混杂模式:不加文档声明,浏览器将用比较宽松的方式进行页面渲染和解析。在不同的浏览器可能有不同的表现。
6.浏览器乱码原因和解决方法。
浏览器出现乱码的大多数原因是编码问题。如第四点中所说的
<meta charset="utf-8">
在页面中没有这句代码时。浏览其将不知道该用什么样的编码进行解析。在浏览器蒙对的时候页面会正确显示。而猜错的时候页面就会出现乱码。这时,页面编辑者应该在网页代码的head部分中加入<meta charset="utf-8">
这样一段代码,用来告诉浏览器到底应该用何种编码进行解析。
7.常见浏览器和其内核分别是什么。
- Trident(MSHTML):是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器主要为IE浏览器。
- FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。它的主要使用者为Firefox浏览器。
- Webkit:苹果公司自己的内核,也是苹果的Safari和Google的Chrome浏览器使用的内核。
- Presto:是一个由Opera Software开发的浏览器排版引擎。在Opera 7.0及以上使用。
8.常见的标签,和这些标签用于的场合。
h1~h6——标题
h1到h6表示从大到小的标题。
a——链接
<a href="#" target="_blank" title="TapTap">TapTap</a>
<a href="#game" target="_blank" title="TapTap">TapTap</a>
第一个标签a中的href为‘#’是一个无作用的锚,点击后不会发生任何事。
第二个标签a中的href为‘#game’,点击后页面会自动跳转到当前页面中id为game的位置,并将这个位置放在浏览器的最左上方。
img——图片
![jirengulogo](http://upload-images.jianshu.io/upload_images/4672050-c5f17b73d1bc6504.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
src 表示该图片的链接,在图片显示失败时(如链接失效),将会显示alt中的信息。这样就不会造成该显示图片的地方空白一片,任何提示也没有。在搜索时。搜索引擎也会通过alt中的信息进行搜索。
div——块
<div id="header">……</div>
<div class="red_head">……</div>
给页面划分区块,让结构更加清晰。
id="header"
给该元素一个唯一标记。
class="red_head"
给该元素甚至更多的元素同一个标记。可以直接操作一个标记,来改变拥有这个标记的元素的样式。
一个元素可以同时拥有class和id,并且可以同时拥有多个class属性。
ul、ol、li——无序、有序列表
ul为无序列表。如:
<ul>
<li>椰</li>
<li>树</li>
<li>牌</li>
</ul>
li为有序列表。如:
<ol>
<li>椰</li>
<li>树</li>
<li>牌</li>
</ol>
ul和ol中。与li可以嵌套。
iframe——嵌入一个页面
嵌入页面时,注意跨域操作问题。
<iframe src="http://jirengu.com " name="myPage"></iframe>
<p><a href="http://www.w3cschool.cc" target="myPage">W3C</a></p>
当前页面与iframe中的页面相同域名时。可以通过js获取iframe中的元素并且操作。但是。当iframe中的页面与与当前页面的域名不同。则只能展现页面。
table——表格
用于展现表格。以前曾用于布局。现在最好不要用于布局。
table中,thead
定义表格的表头,tbody
定义表格的主体部分,tfoot
定义表格的表注(页脚)。这三者应该同时使用。
th
表示与内容不相关的文字。tr
表示横,td
表示列。
更多标签请参考w3school