HTML知识点

1.HTML、XML、XHTML 有什么区别?

HTML:超文本标记语言(Hyper Text Markup Language),是语法较为松散,不严格的web语言。

XML :可扩展标记语言(The Extensible Markup Language),主要用于储存数据和结构

XHTML:可扩展超文本标记语言(Extensible Hyper Text Markup Language),基于XML,作用于HTML类似,但语法更严格。

主要不同:

-XHTML 元素必须被正确地嵌套
-XHTML 元素必须被关闭
-XHTML 标签名必须用小写字母
-XHTML 文档必须拥有根元素

2.怎样理解HTML语义化?

选择适合的标签,使用合理的结构,便于开发者阅读,同时让浏览器的机器和爬虫很好的解析。

语义化好处:

1.清晰的页面结构:去掉或样式丢失的时候,也能让页面呈现清晰的结构,增强页面的可读性。

2.支持更多的设备:屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页。 如果你使用的含语义的标记,屏幕阅读器会根据你的标签来判断网页的内容,而不是一个字母一个字母的拼写出来。

3.有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息,搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。

4.便于团队开发和维护:在团队中大家都遵循同一个标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,甚至实现模块化开发。

3.怎样理解内容与样式分离原则?

HTML:内容结构
CSS:样式
JavaScript:行为
1.写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上,让 HTML 能体现页面结构或者内容。之后再去写样式。
2.写 JS 的时候,尽量不要用 JS 去直接操作样式,而是通过给元素添加删除class来控制样式变化
3.HTML 内不允许出现属性样式,尽量不要出现行内样式

内容与样式分离好处:

方便开发人员查找并修改样式,减少网页的代码,文档更清晰易读、易维护

4.有哪些常见的meta标签?

标签 描述
<meta charset="utf-8"> 声明文档使用的字符编码
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/> 声明文档兼容模式,指示IE以目前可用的最高模式显示内容
<meta name="keywords" content="your tags"> 定义针对搜索引擎的关键词
<meta name="author" content="你的姓名"> 定义网页作者
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/> 自适应屏幕大小,在移动端展示更合理
<meta http-equiv="pragma" content="no-cache"> 禁用缓存
<meta name="robots" content="index,follow" /> 搜索引擎索引方式

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

DOCTYPE 是document type(文档类型)的简写,文档声明是用于告诉浏览器用什么文档类型来解析页面。
严格模式 现在也称为标准模式,在该模式下,浏览器会严格按照 HTML 和 CSS 标准来解析、渲染你的文档。
混杂模式 指文档开头不明确申明,页面以一种比较宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止老站点无法工作。
<!doctype html> 的作用是让浏览器进入标准模式,使用最新的 HTML5标准来解析渲染页面。

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

乱码产生的根本原因

1.保存的编码格式和浏览器解析时的解码格式不匹配导致
2.乱码一般是英文以外的字符才会出现

解决办法

1.设置标签声明文档使用的字符编码
2.设置正确的字符编码
3.设置浏览器显示正确的编码

7、常见的浏览器有哪些?什么内核?

chrome、Safari、360极速浏览器以及搜狗浏览器高速模式使用WebKit内核
IE、猎豹、360、搜狗、傲游、世界之窗、Avant、腾讯TT使用Trident内核,又称为IE内核。
Firefox、Netscape6至9使用Gecko内核。
Chrome(28及往后版本)、Opera(15及往后版本)和Yandex浏览器中使用Blink内核。

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

标 签 使用场景
<html>...</html> 定义了文档的开始点和结束点
<head>..</head> 定义文档的头部,其中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等
<title>..</title> 定义文档标题
<meta>..</meta> 提供有关页面的元信息
<body>..</body> 定义文档的主体,包含文档的所有内容
<a>..</a> 定义超链接
<img> 图片
<h1>-<h6> 定义标题
<p>..</p> 段落
<ul>..</ul> 定义无序列表
<ol>..</ol> 定义有序列表
<li>..</li> 定义列表项目
<div>..</div> 定义文档中的分区或节
<em>..</em> 强调
<strong>..</strong> 语气更强的强调
<span>..</span> 定义文档中的一小节
<br /> 换行
<table>..</table> 定义表格
<tr>..</tr> 定义表格中的行
<hr /> 创建一条水平线