Html知识点总结
1. HTML、XML、XHTML 有什么区别?
- HTML全名为超文本标记语言(Hyper Text Markup Language),是用于创建Web的标准的标记语言。
- HTML编码不规范,表现、结构混乱。不利于开发和维护。
- XML全名为可扩展标记语言(Extensible Markup Language),它也是一种标记语言。
- XML,是一种用来储存、传输数据的可扩展标记语言,标签没有预定义,需要自定义标签。
- XHTML是根据HTML 4 和 XML 1.0重组而成。
- 改进了HTML定义不规范,结构不严谨的缺点。它的语法更加严格,相对HTML的兼容性也不差。
2. 怎样理解 HTML 语义化?
- 所谓 web 语义化,从广义上来说,不仅要使机器(搜索引擎等)易于理解,也要使人易于理解。在团队协作开发中,对人的易于理解显得尤为重要了,一个莫名其妙的 class 会让后续的开发或者维护者一头雾水,增加了协作成本。
- HTML标签就带有一定的语义化成分。编写代码时明显区分,标题是标题,段落是段落。将内容结构化,使代码变得更加易读,易维护;同时机器和爬虫更加容易解析。
3.内容与样式分离的原则
将一篇文档的内容及意义与其呈现出来的方式独立开来。一方面可以使机器更加容易理解其意图或者含义。另一方面可以降低后期维护的复杂度。
4.有哪些常用的Meta标签?
1.Name属性
name属性主要用于描述网页,比如网页的关键词,叙述等。与之对应的属性值为content,content中的内容是对name填入类型的具体描述,便于搜索引擎抓取。meta标签中name属性语法格式是:
<meta name="参数" content="具体的描述">。
常用参数
A. keywords(关键字)
说明:用于告诉搜索引擎,你网页的关键字。举例:
<meta name="keywords" content="...">
B. description(网站内容的描述)
说明:用于告诉搜索引擎,你网站的主要内容。举例:
<meta name="description" content="...">
2. http-equiv属性
http-equiv顾名思义,相当于http的文件头作用。
http-equiv属性主要有以下几种参数:
A. content-Type(设定网页字符集)(推荐使用HTML5的方式)
说明:用于设定网页字符集,便于浏览器解析与渲染页面举例:
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML,不推荐
<meta charset="utf-8"> //HTML5设定网页字符集的方式,推荐使用UTF-8
B. X-UA-Compatible(浏览器采取何种版本渲染当前页面)
说明:用于告知浏览器以何种版本来渲染页面。(一般都设置为最新模式,在各大框架中这个设置也很常见。)举例:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
5.文档声明的作用?严格模式和混杂模式指什么? 的作用?
-
文档声明用来告知浏览器当前文档所使用的HTML或XHTML规范。
是用来声明当前文档为html5的方法。
<!DOCYTYPE html>
- 严格模式是指按照浏览器所支持的最高版本来实现效果;
- 混杂模式则相反,尽可能向后兼容。使用老版本浏览器的显示模式。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
6.浏览器乱码的原因以及解决方法。
产生乱码的原因一般是文档没有声明自身的编码导致浏览器错误地使用了与文档不同的解码方式,从而导致内容无法正常显示。一定要清楚文件保存时的编码方式并在文件内声明。
<meta charset='xxx'>
7.常见的浏览器有哪些,什么内核?
常见的浏览器及其对应内核
- 使用Trident的是internet explorer,国产的绝大部分浏览器。Trident是就是ie内核。
- 使用Gecko的是Mozilla Firefox,使用 Gecko 内核的浏览器也有不少,如 Netscape MozillaSuite/SeaMonkey 等。
- 使用Presto的是opera,这是目前公认网页浏览速度最快的浏览器内核。
- 使用WebKit的有苹果的safari,谷歌的chrome,还有国产的大部分双核浏览器其中一核就是WebKit。
8.HTML常见标签和使用场景
标签 |使用场景
---- |
<html>...</html>
|将所有HTML内容都包含在这个标签内
<head>...</head>
|用于定义文档的头部,它是所有头部元素的容器。
<title>...</title>
|文档的标题
<meta>...</meta>
|提供有关页面的元信息
<body>...</body>
|文档的内容
<h1>...</h1>
|一级标题,h1h6分别对应六级标题,从16标题一次减小
<p>...</p>
|整段文字
<a>...</a>
|定义锚,即在页面插入链接
|1.href="#about" 跳转到id为about的位置
|2.href="/test" 跳转到完整域名+test
<img>
|图片
|alt
图片无法展示时,显示内容,便于视力障碍人士使用
<ul>...</ul>
|无序列表
<ol>...</ol>
|有序列表
<li>...</li>
|列表项
<br>
|换行
<div>...</div>
|定义文档中的节,默认表现为块元素
<span>...</span>
|定义定义文档中的节,默认表现为行内元素
<em>...</em>
|定义强调文本
<i>...</i>
|定义斜体字
<strong>...</strong>
|定义强调文本
<q>...</q>
|定义短引用