HMTL知识点

2017-12-25 本文已影响20人唐喑喑

一、HTML、XML、XHTML 的区别

HTML

HyperText Markup Language，超文本标记语言
浏览器可以读取，并将其渲染成可视化网页
包含HTML标签和纯文本
语法松散不严格

XML

EXtensible Markup Language，可扩展标记语言
作为传输数据，而非显示数据
需要自行定义标签
具有自我描述性

XHTML

可扩展超文本语言
是HTML与XML的结合，包含了所有与XML语法结合的HTML4.01元素
语法严格

二、理解 HTML 语义化

标签名自带特定含义，（如<section></section> <artical></artical>），更容易理解
有利于SEO，帮助爬虫获取更多有效信息（爬虫是依赖于标签来确定上下文和各个关键字的权重）
方便其他设备的解析
便于开发维护

三、内容与样式分离的原则

内容放在html，样式放在css，html内不允许出现属性样式，尽量不出现行内样式，使文档清洗易读，易维护

四、常见的meta标签

meta标签提供关于HTML文档的元数据，用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键字），或其他WEB服务

SEO优化

页面关键字

不超过874个字

<meta name='keywords' content='your tags' />

页面描述

不超过150个字

<meta name='keywords' content='your tags' />

搜索引擎索引方式

robotterms是一组使用逗号分隔的值

<meta name='robots' content='index,follow' />
<!--
    all: 文件将被检索，且页面上连接可以查询
    none: 文件将不被检索，且页面上连接不可以被查询
    index: 文件将被检索
    follow: 页面上的连接可以被查询
    noindex: 文件将不被检索
    nofollow: 页面上的连接不可以被查询
-->

页面重定向和刷新

content内的数字代表时间（秒），即多久后刷新。如果加url则会重定向到指定网页

<meta http-equiv='refresh' content='0;url=' />

其他

<meta name='author' content='author name' />
<meta name='google' content='index,follow' />
<meta name='verify' content='index,follow' />

移动设备

viewport

优化移动浏览器的显示。如果不是响应式网站，不要使用initil-scale或者禁用缩放。大部分4.7-5寸宽为360px，5.5存为400px，iphone6为375px，iphone6 plus为414px

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum=1.0, user-scalable=no' />
<!--
    width: 宽度（数值/device-width），范围200-10000，默认980px
    height: 高度（数值/device-height），范围223-10000
    initial-scale: 初始的缩放比例0-10
    minimum-scale: 允许用户缩放的最小比例
    maximum-scale: 允许用户缩放的最大比例
    user-scalable: 用户是否可以手动缩
-->

webApp全屏模式：伪装app，离线应用

<meta name='apple-mobile-web-app-capable' content='yes' />

忽略数字自动识别为电话号码

<meta name='format-detection' content='telephone' />

忽略识别邮箱

<meta name='format-detection' content='email=no' />

其他

<meta name='screen-orientation' content='portrait' />
<!-- qq强制竖屏 -->
<meta name='full-screen' content='yes' />
<!-- qq强制全屏 -->

网页相关

编码格式

<meta charset='utf-8' />

优先使用ie最新版和chrome

<meta http-equiv='X-UA-Compatible' content='IE=edge, chrome=1' />

浏览器内核控制：国内浏览器多是双内核（webkit和trident）

<meta name='renderer' content='webit|ie-comp|ie-stand' />

五、文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?

文档声明的作用：告诉浏览器html文件的版本，以何种方式渲染

严格模式：标准模式，统一方式渲染页面；

混杂模式：允许浏览器用自己的方式渲染页面

<!doctype html>的作用：告诉浏览器用html5的方式渲染

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

页面编码方式出错，出现了英文以外的字符不能正确显示。设置<meta charset='utf-8'>

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

浏览器	内核
IE, Maxthon, TT	Trident
Firefox	Geckos
Opera	Presto
Safari, Chrome	Webkit
Chrome28+, Opera15+	Blink

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

h1-h6 标题 <h1></h1>
p 段落。大段文字 <p></p>
a 链接。跳转到其他地址

<a href='http://www.baidu.com' target='_blank' title='百度'>百度一下</a>
<a href='#about'>关于</a>
<a href='/getCourse'>课程</a>

img 图片。自闭合 <img src='' alt=''>
div 块 <div></div>
ul,li 无序列表

<ul>
    <li></li><li></li>
</ul>

ol,li 有序列表表

<ol>
    <li></li><li></li>
</ol>

dl,dt,dd|定义描述。标题，内容

<dl>
    <dt><dt>
    <dd></dd>
    <dd></dd>
</dl>

button 按钮 <button></button>
em 强调的内容,斜体 <em></em>
strong 重要强调 <strong></strong>
iframe 嵌入页面。要注意跨域

<iframe></iframe>

table 用于展示表格，不能用来做布局

<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot></tfoot>
</table>

i 斜体。表示和正文不同的文本，例如专业术语，外语短语或排版文字 <i></i>
mark 高亮文本 <mark></mark>
section 文档的一个区域 <section></section>
artical 文档，页面，应用或网站中的独立结构，可能是帖子，新闻，博客，评论，交互式组件 <artical></artical>