meta标签

2017-05-19  本文已影响0人  李永州的FE

一 HTML、XML、XHTML 有什么区别

html:语法松散不严格,比如标签闭合要求不严格
xml : 要求更严格(注意其与json的区别联系)
xhtml: 是html--->xml转换的过渡

二 怎样理解 HTML 语义化

1 语义化实例:html5一堆新的语义标签:header,footer,nav,等等

2 语义化好处:

(1)可读性强,不使用样式也知道页面想要表达什么意思
(2)利于seo,利于爬虫获取更多信息,网页排名更靠前
(3)便与团队开发维护,和(1)照应

3 如何进行语义化

(1) 尽可能少的使用无语义的标签div和span
(2) 不要使用纯样式标签,如:b、font、u等,改用css设置
(3) 需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i)
(4) 每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来

4 具体应用(通过对比发现语义化的好处)

传统标签

<body>
<div id="nav"></div>
<div id="header"></div>
<div id="footer"></div>
</body>

语义化标签

<body>
<nav>导航</nav>
<header>头部</header>
<footer>尾部</footer>
</body>

三 怎样理解内容与样式分离的原则

1 好处

(1). 好处是代码分工更加明确,高内聚低耦合
(2). 便于开发维护,迅速定位bug
(3). 提高搜索引擎抓取效率

2具体表现.

(1)标签内不准在写内联样式,一律用链接引过来外面的文件
(2)尽量不用js直接操作样式

四 有哪些常见的meta标签

1.用于告诉浏览器该页面所用的编码是utf-8

<meta charset='utf-8'>

2 . name属性主要用于描述网页,比如说网页的关键字,内容等,便于搜索引擎抓取。

<meta name='keywords' content='前端'>

3 移动端适配最常见

<meta name='viewport' content='width=device-width, initial-scale=1'>

4 用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输

<meta http-equiv='expires' content='Wed, 26 Feb 1997 08:21:57 GMT'>

五 文档声明的作用?严格模式和混杂模式指什么?的作用?

1
(1) 文档声明指定了 HTML 文档遵循的文档类型定义(DTD), doctype声明指出阅读程序应该用什么规则集来解释文档中的标记,
(2) 每个DTD都包括一系列标记、attributes和properties,它们用于标记Web文档的内容;此外还包括一些规则,它们规定了哪些标记能出现在其他哪些标记中

2 <!DOCTYPE html>使用HTML5的方式,也就是标准模式来解析渲染网页

3 标准模式与混杂模式

若不添加文档声明,则处于混杂模式中,浏览器会以一种比较宽松的向后兼容的方式显示。慎用------
在标准模式中,浏览器会按照W3C标准解析代码。

六 浏览器乱码的原因是什么?如何解决

通俗来说就是文档编码方式和浏览器解析用的编码方式不同
<meta charset='XXX'>这个声明就很重要了

七 常见的浏览器有哪些,什么内核

IE浏览器——Trident内核
chrome,safari——WebKit内核
FireFox浏览器——Gecko内核
Opera浏览器——Presto内核

八 列出常见的标签,并简单介绍这些标签用在什么场景

h1~h6,标题
p,段落
a,链接
img,图片
div,块状元素用来布局
ul li ,无序列表
ol li,有序列表
table
button,按钮
span

上一篇下一篇

猜你喜欢

热点阅读