HTML知识点

作者: Sunset125 | 来源:发表于2017-09-17 14:03 被阅读0次

一.HTML、XML、XHTML 有什么区别

什么是 HTML？

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言，而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

什么是 XML?

XML 指可扩展标记语言（EXtensible Markup Language）

XML 是一种标记语言，很类似 HTML

XML 的设计宗旨是传输数据，而非显示数据

XML 标签没有被预定义。您需要自行定义标签。

XML 被设计为具有自我描述性。

XML 是 W3C 的推荐标准

什么是XHTML ？

XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。

XHTML 的目标是取代 HTML。

XHTML 与 HTML 4.01 几乎是相同的。

XHTML 是更严格更纯净的 HTML 版本。

XHTML 是作为一种 XML 应用被重新定义的 HTML。

XHTML 是一个 W3C 标准。

XML 与 HTML 的主要差异

XML 不是 HTML 的替代。
XML 和 HTML 为不同的目的而设计：

XML 被设计为传输和存储数据，其焦点是数据的内容。

HTML 被设计用来显示数据，其焦点是数据的外观。

HTML 旨在显示信息，而 XML 旨在传输信息。

二.怎样理解 HTML 语义化

1、什么是HTML语义化？

语义化，顾名思义，就是你写的HTML结构，是用相对应的语义的英文字母（标签）标记的。因为HTML本身就是标记语言，不仅对自己来说，容易阅读，书写。别人看你的代码和结构也容易理解，甚至对一些不是做网页开发的人来说，也容易阅读。根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

2、为什么要语义化？

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；

用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；

有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

3、写HTML代码时应注意什么？

尽可能少的使用无语义的标签div和span；

在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；

不要使用纯样式标签，如：b、font、u等，改用css设置。

需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；

使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

表单域要用fieldset标签包起来，并用legend标签说明表单的用途；

每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

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

什么是表现和内容分离:
表现和内容分离是网页布局一直倡导的原则，也是当下非常流行的名词之一，可能很多开发人员虽然已经在很好的利用表现和内容分离原则进行网页布局，但是并没有对它有过多的注意，下面就结合代码实例简单介绍一下什么是表现和内容分离。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>样式内容混合</title>
</head> 
<body> 
<div style="width:200px;">
  <font color="red">好好学习</font>
</div> 
</body> 
</html>

    以上代码的表现和内容分离原则做的并不好，因为对文本控制的样式和网页结构都混合在一起。这样不但不利于网页的修改，而且还让网页内容不能够很好的展现于搜索引擎之下，不利于SEO。

以上代码修改如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>样式分离</title>
<style type="text/css"> 
div 
{ 
 width:200px; 
 color:red; 
}  
</style> 
</head> 
<body> 
<div>好好学习</div> 
</body> 
</html>

    以上代码实现了内容和表现分离的布局。由上面两个代码可以得出，所谓”内容“，就是网页的骨架，如果排版网页的结构，而”表现“就是对”内容“的润色，比如div的宽度或者高度，字体的颜色大小等等。这样网页的内容就赤裸裸的展现在搜索引擎面前，也利于网站的优化。

CSS技术的最大优点是，它能够帮助你将Web文档的内容结构（标记）和版面设计（样式）分离开来。作为CSS技术的突出优点，文档结构与文档样式的分离可以确保网页都能平稳退化，具备CSS支持的浏览器可以呈现美轮美奂的网页，不支持或禁用了CSS的浏览器同样可以把网页内容按照正确的结构显示出来。

四.有哪些常见的meta标签

常见meta标签	标签描述
<meta charset="utf-8">	<声明文档使用的字符编码>
<meta http-equiv="description" content="网页描述">	<页面描述>
<meta http-equiv="keywords" content="关键字1,关键字2,...">	<关键字，搜所引擎 SEO>
<meta name="renderer" content="webkit">	<若页面需默认用极速核，增加标签：>
<meta name="renderer" content="ie-comp">	<若页面需默认用ie兼容内核，增加标签：>

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

    HTML中<!DOCTYPE html>标签的作用是什么呢？<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。它是html5标准网页声明,全称为Document Type HyperText Mark-up Language，意思为文档种类为超文本标记性语言或超文本链接标示语言，现在是这个简洁形式，支持html5标准的主流浏览器都认识这个声明。表示网页采用html5，<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

由于历史的原因，浏览器对页面的渲染方式是不一样的。在W3C标准出来之前，浏览器对页面的渲染没有同一的标准，产生了差异，quirks mod（混杂模式或者兼容模式），但在W3C标准出台之后，浏览器对页面的渲染有了同一的标准（严格模式或标准模式）。但是为了保证以前就得页面仍然正常显示，有的浏览器就保存了这两种渲染模式（标准兼容模式）。那么究竟采用哪一种方式进行渲染，就要看DOCTYPE生命中的DTD。

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

乱码造成原因：

    1.比如网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之网页是编码utf-8，内容是gbk也会出现乱码。
    2.html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码。
    3.浏览器不能自动检测网页编码，造成网页乱码。
    4.网页没有设置meta charset编码造成。导致浏览器不能识别你网页默认编码类型。

解决方法：

    1.使用软件进行HTML网页内容的编辑和开发，尽量不要直接使用记事本进行编辑HTML代码。
    2.如果网页设置编码是gbk的，而数据库储存数据编码格式是UTF-8的，这个时候程序查询数据库数据显示数据前进乡程序转码即可。
    3.如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单。
       在IE9浏览器中需要转码的网页空白出右键鼠标，即可选择“编码”。
       谷歌浏览器中浏览需要转码的网页时，点击右上角“三横”图标选择“工具”-->“编码”即可选择切换网页编码达到让浏览器浏览此网页不是乱码。
    4.如果自己开发网页，必须网页加入meta charset编码标签。

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

浏览器	内核
Internet Explorer	Trident（又称为MSHTML）
Mozilla Firefox	Gecko
Safari, Google Chrome	WebKit
Opera	Presto

Trident ：[ˈtraɪdnt]
IE浏览器(遨游、世界之窗、腾讯TT…都是IE)Trident内核最慢
IE 以Trident 作为内核引擎
Gecko：[ˈgekəʊ]
开放源代码、以C++编写的网页排版引擎，是跨平台的
FireFox是基于 Gecko 开发;
presto：[ˈprestəʊ]
目前公认网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。由Opera Software开发的浏览器排版引擎，Opera（欧朋浏览器），但由于市场选择问题，主要应用在手机平台–Opera mini
Webkit：
苹果公司自己的内核，google的chrome也使用webkit作为内核。
是一个开源的浏览器引擎，同时WebKit 也是苹果Mac OS X 系统引擎框架版本的名称，它拥有清晰的源码结构、极快的渲染速度，包含的 WebCore 排版引擎和 JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来。
许多网站都是按照IE来架设的，很多网站不兼容Webkit内核，比如登录界面、网银等网页均不可使用Webkit内核的浏览器。
Safari([səˈfɑri]), Google Chrome, 傲游3, 猎豹浏览器, 百度浏览器 opera浏览器基于 Webkit 开发。

注：2013年2月Opera宣布转向WebKit引擎
注：2013年4月Opera宣布放弃WEBKIT，跟随GOOGLE的新开发的blink引擎

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

（一）基本文档结构标签：

1.：注释标签用来在源文档中插入注释。注释会被浏览器忽略。您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。
2.<!DOCTYPE>：<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
3.<html>：此元素可告知浏览器其自身是一个 HTML 文档。
4.<head>：<head> 标签用于定义文档的头部，它是所有头部元素的容器。
5.<base>：标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接。
6.<meta>：<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。包含在<head>标签中。
7.<title>：<title> 元素可定义文档的标题。
8.<body>：body 元素定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

（二）文本、字体、字号、线条、行控制、超链接、图像相关标签：

9.<b>：呈现粗体文本效果。
10.<i>：显示斜体文本效果。
11.<br ：可插入一个简单的换行符。
12.<font>：<font> 规定文本的字体、字体尺寸、字体颜色。
13.<h1> -- <h6>：<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
14.<center>：对其所包括的文本进行水平居中。
15.<a>：超连接
a) <a> 标签可定义锚。锚 (anchor) 有两种用法：
i. 通过使用 href 属性，创建指向另外一个文档的链接（或超链接）
ii. 通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）
b) <a> 元素最重要的属性是 href 属性，它指定链接的目标。
16.<img>：img 元素向网页中嵌入一幅图像。
17.<p>：<p> 标签定义段落。
18.<pre>：pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。常见应用就是用来表示计算机的源代码。
19.<u>：<u> 标签可定义下划线文本。
20.<label>：<label> 标签为 input 元素定义标注（标记）。
21.<strong>...</strong>粗体字(强调)
22.<em>...</em>斜体字(强调)
23.<BLINK> 闪烁的文字
24.<BIG> 显示大字体
25.<CITE>...<CITE> 用于引经据典的文字
26.<CODE>...</CODE> 用于列出一段程序代码

（三）表单元素相关标签：

27.<form>：<form> 标签用于为用户输入创建 HTML 表单。
28.<input>：<input> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
29.<select>：select 元素可创建单选或多选菜单。
30.<option>：option 元素定义下拉列表中的一个选项（一个条目）。option 元素位于 select 元素内部。
31.<textarea>：<textarea> 标签定义多行的文本输入控件。可以通过 cols 和 rows 属性来规定 textarea 的尺寸。
32.<button>：<button> 标签定义一个按钮。
33.<fieldset>：fieldset 元素可将表单内的相关元素分组。
34.<legend>：legend 元素为 fieldset 元素定义标题（caption）。
35.补充：
a) 客户端向服务端发送数据可以有两种方式：1. 使用表单<form>提交；2. 使用超链接传参数<a href=”xxx.jsp?username=james&age=22………”>多个参数全部用&号连接起来。
b) <form action=”指定表单数据提交的处理地址” method=”post/get”>
如：<form action=”……/login.jsp?username=james&age=22”> …. </form>
Method属性指定提交方式：post方式数据以暗文形式提交，即在浏览器地址栏上看不到提交的数据；get方式提交的数据在浏览器地址栏上可以看到，所以对敏感数据的提交都会选择post。

（四）表格相关标签：

36.<table>：<table> 标签定义 HTML 表格。
37.<thead>：<thead> 标签定义表格的表头。thead 元素应该与 tbody 和 tfoot 元素结合起来使用。
38.<tbody>：<tbody> 标签表格主体（正文）。tbody 元素应该与 thead 和 tfoot 元素结合起来使用。
39.<tfoot>：<tfoot> 标签定义表格的页脚（脚注或表注）。
40.<th>：定义表格内的表头单元格。
41.<tr>：<tr> 标签定义 HTML 表格中的行。<td>是列。
42.<td>：<td> 标签定义 HTML 表格中的标准单元格。
43.<caption>：caption 元素定义表格标题。caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

（五）容器相关标签：DIV + CSS → JavaScript

44.<div>：标签可以把文档分割为独立的、不同的部分。<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。
45.<span>：<span> 标签被用来组合文档中的行内元素。

（六）框架相关标签

46.<frameset>: frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
i. <frameset cols="20%,">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整
ii. <frameset rows="20%,">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整
iii. <frameset cols="20%,*,20%">分割左中右三个框架
47.<frame>: <frame> 标签定义 frameset 中的一个特定的窗口（框架）。
48.<iframe>：iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

（七）序号、列表标签：

49.<ul>：<ul> 标签定义无序列表。
50.<ol>：<ol> 标签定义有序列表。
51.<li>：<li> 标签定义列表项目。<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。
52.<dl>：<dl> 标签定义了定义列表。
53.<dt>：<dt> 标签定义了定义列表中的项目。
54.<dd>: <dd>标签定义了定义列表中项目的描述。

（八）引入外部文件

55.<link>：<link> 标签定义文档与外部资源的关系。<link> 标签最常见的用途是链接样式表。
56.<style>：<style> 标签用于为 HTML 文档定义样式信息。
57.<script>：<script> 标签用于定义客户端脚本，比如 JavaScript。以通过 src 属性指向外部脚本文件。