HTML基础笔记及经典面试题

本文链接： https://blog.csdn.net/qq_43645678/article/details/88807566

HTML笔记及面试题

1.HTML标准结构
2.文档类型
3.HTML常用标签

html标签
head标签
常用的meta标签
link标签
title标签
body标签
style标签
HTML 标题
HTML 段落
HTML 文本标签
HTML 链接
HTML 锚链接
HTML 图片
HTML 特殊字符标签
注释标签

4.HTML列表标签
5.HTML表格标签

HTML表格标签属性

6.HTML表单标签

HTML表单标签属性
HTML表单元素

7.HTML行内（内联）元素（Inline elements）
8.HTML块级元素（block-level elements）
9.HTML5 网站布局
10.HTML 框架
11. HTML 文件路径
12. HTML5 画布（canvas）
HTML 常见面试题

1.HTML标准结构

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    
  </body>
</html>

2.文档类型 <!DOCTYPE>

定义和用法

1.必须是 HTML 文档的第一行，位于标签之前。
2.不是 HTML 标签；它指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
3.请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
4.若声明错误或未声明会导致文档以兼容模式/混杂模式呈现。
5.没有结束标签,对大小写不敏感。
6.仔细检查您是否编写了有效的 HTML / XHTML 文档！

3.HTML常用标签

html标签

<html lang="en" dir="ltr"></html>

注意点

html 标签是HTML页面的根元素，其中的lang属性可用于标记网页或部分网页的语言
en定义语言为英语,zh-CN定义语言为中文
lang这个属性不仅仅可以用在html标签上

作用：

根据根据lang属性来设定不同语言的css样式，或者字体。
告诉搜索引擎做精确的识别
让语法检查程序做语言识别
帮助翻译工具做识别
帮助网页阅读程序做识别
当搜索引擎或者浏览器拿到语言标签后，有可能做一些针对指定语言的辅助操作等等

注意点

dir是国际化属性中的一员，dir属性定义了文字在浏览器中的排列方向.
如果定义整个HTML文档的排列方向应该在html标签中定义dir属性,
其它HTML标签也可以定义dir属性.
默认值：ltr – 代表左到右的排列方式 rtl – 代表右到左的排列方式

head标签

<head></head>

定义和用法

head 标签用于定义文档的头部，它是所有头部元素的容器。
head 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置
以及和其他文档的关系等。
绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：base, link , meta , script , style , 以及 title 。
title 定义文档的标题，它是 head 部分中唯一必需的元素。

提示和注释

应该把 head 标签放在文档的开始处，紧跟在 html 后面，
并处于 body 标签或 frameset 标签之前。
请记住始终为文档规定标题！

常用的meta标签

作用

搜索引擎优化（seo）；
定义页面使用语言；
自动刷新并指向新的页面；
实现网页转换时的动态效果；
控制页面缓冲；
网页定级评价；
控制网页显示的窗口等！

	<!-- 声明文档使用的字符编码 -->
	<meta charset='utf-8'>
	
	<!-- http-equiv属性 -->
	<meta http-equiv="参数" content="参数变量值">
	
	<!--Expires(期限)--设定网页到期时间，一旦网页过期，必须到服务器上重新传输--必须使用GMT的时间格式。-->
	<meta http-equiv="expires" content="Fri,12Jan200118:18:18GMT">

	<!-- Pragma(cache模式)--禁止浏览器从本地计算机的缓存中访问页面内容--这样设定，访问者将无法脱机浏览-->
    <meta http-equiv="Pragma" content="no-cache">

	<!-- Refresh(刷新)--自动刷新并指向新页面--其中的2是指停留2秒钟后自动刷新到URL网址-->
    <meta http-equiv="Refresh" content="2; URL=http://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)

	<!-- Set-Cookie(cookie设定)--如果网页过期，那么存盘的cookie将被删除--必须使用GMT的时间格式-->
    <meta http-equiv="Set-Cookie" content="cookie value=xxx; expires=Friday,12-Jan-200118:18:18GMT；path=/">

	<!-- Window-target(显示窗口的设定)--强制页面在当前窗口以独立页面显示--用来防止别人在框架里调用自己的页面-->
	<meta http-equiv="Window-target" content="_top">	

	 <!-- content-Type(显示字符集的设定)--设定页面使用的字符集--meta标签的charset的信息参数如GB2312时，代表说明网站是采用的编码是简体中文；meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；-->
    <meta http-equiv="content-Type" content="text/html;charset=gb2312">

	<!-- content-Language（显示语言的设定）-->
	<meta http-equiv="Content-Language" content="zh-cn"/>

	<!-- imagetoolbar--指定是否显示图片工具栏，当为false代表不显示，当为true代表显示-->
	<meta http-equiv="imagetoolbar" content="false"/>

	<!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

	<!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

	<!--name属性-->
	<meta name="参数" content="具体的参数值">
	
	<!-- 页面关键词 -->
    <meta name="keywords" content=""/>

	<!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>
    
    <!-- robots(机器人向导)--robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引--content的参数有all,none,index,noindex,follow,nofollow。默认是all -->
    <!--all：文件将被检索，且页面上的链接可以被查询-->
    <!--none：文件将不被检索，且页面上的链接不可以被查询-->
    <!--index：文件将被检索-->
    <!--follow：页面上的链接可以被查询-->
    <!--noindex：文件将不被检索，但页面上的链接可以被查询-->
    <!--nofollow：文件将被检索，但页面上的链接不可以被查询-->
    <meta name="robots" content="all">
    
    <!-- 网页作者 -->
    <meta name="author" content="name, [email protected]"/>
    
    <!-- generator的信息参数，代表说明网站的采用的什么软件制作 -->
	<meta name="generator" content="信息参数"/>
    
    <!-- copyright的信息参数，代表说明网站版权信息 -->
	<meta name="copyright" content="信息参数">

	<!-- revisit-after代表网站重访,7days代表7天，依此类推 -->
	<meta name="revisit-after" content="7days">

link标签

<head>
	<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

定义和用法

link 标签定义文档与外部资源的关系。
link 标签最常见的用途是链接样式表。
注释：link 元素是空元素，它仅包含属性。
注释：此元素只能存在于 head 部分，不过它可出现任何次数。

属性

属性	值	描述
charset	char_encoding	HTML5 中不支持。
href	URL	规定被链接文档的位置。
hreflang	language_code	规定被链接文档中文本的语言
media	media_query	规定被链接文档将被显示在什么设备上。
rel	alternate / author / help / icon / licence / next / pingback / prefetch / prev / search / sidebar / stylesheet / tag	规定当前文档与被链接文档之间的关系。
rev	reversed relationship	HTML5 中不支持。
sizes	heightxwidth/any	规定被链接资源的尺寸。仅适用于 rel=“icon”。
target	_blank /_self /_top / _parent /frame_name	HTML5 中不支持。
type	MIME_type	规定被链接文档的 MIME 类型。

title标签

<title>文档标题</title>

定义和用法

title 元素可定义文档的标题。
浏览器会以特殊方式来使用标题，并通常把它放置在浏览器窗口的标题栏或状态栏上。
文档加入用户的链接列表或收藏夹或书签列表时，标题将成为该文档链接的默认名称。
提示： title 标签是 head 标签中唯一要求包含的东西。
dir–(rtl/ltr)–规定元素中内容的文本方向;
lang–(language_code)–规定元素中内容的语言代码;

body标签

<body>文档内容</body>

定义和用法

body 元素定义文档的主体。
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

style标签

<html>
	<head>
		<style type="text/css">
			h1 {color:red}
			p {color:blue}
		</style>
	</head>
	<body>
		<h1>Header 1</h1>
		<p>A paragraph.</p>
	</body>
</html>

定义和用法

style 标签用于为 HTML 文档定义样式信息。
在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。
type 属性是必需的，定义 style 元素的内容。唯一可能的值是 “text/css”。
如需链接外部样式表，请使用 link 标签。
style 标签支持 HTML 中的全局属性。 style 标签支持 HTML 中的事件属性。

HTML 标题

<body>
	<h1>这是标题 1</h1>
	<h2>这是标题 2</h2>
	<h3>这是标题 3</h3>
	<h4>这是标题 4</h4>
	<h5>这是标题 5</h5>
	<h6>这是标题 6</h6>
</body>

在这里插入图片描述
定义和用法

h1 - h6 标签可定义标题。 h1 定义最大的标题。 h6 定义最小的标题。
由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。
因此，请不要利用标题标签来改变同一行中的字体大小。
相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

HTML 段落

<body>
	<p>这是一个段落。</p>
	<p>这是一个段落。</p>
	<p>这是一个段落。</p>
</body>

在这里插入图片描述
定义和用法

p 标签定义段落。
p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，也可以在样式表中规定。

HTML 文本标签

<body>
	//文本换行
	<br>
	
	//文本加粗
	<b>加粗内容</b>
	<strong>加粗内容</strong>
	
	//文本倾斜
	<em></em>  <i></i>
	
	//水平线
   	<hr />空标记
	
	//删除线样式
	<s>内容</s>
</body>

HTML 链接

<body>
	<a href="http://www.runoob.com">这是一个链接使用了 href 属性</a>
</body>

在这里插入图片描述
定义和用法

a 标签定义超链接，用于从一张页面链接到另一张页面。
a 元素最重要的属性是 href 属性，它指示链接的目标。
所有浏览器中，链接默认外观：下划线蓝色(未访问)–下划线紫色(已被访问)–下划线红色(活动链接)
可以使用 CSS 伪类向文本超链接添加复杂而多样的样式。

提示和注释

如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target
以及 type 属性。
被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。
请使用 CSS 来设置链接的样式。

属性

属性	值	描述
charset	char_encoding	HTML5 中不支持。规定被链接文档的字符集。
coords	coordinates	HTML5 中不支持。规定链接的坐标。
download	filename	规定被下载的超链接目标。
href	URL	规定链接指向的页面的 URL。
hreflang	language_code	规定被链接文档是为何种媒介/设备优化的。
media	media_query	HTML5 中不支持。规定锚的名称。
name	section_name	规定被链接资源的尺寸。仅适用于 rel=“icon”。
rel	text	规定当前文档与被链接文档之间的关系。
rev	text	HTML5 中不支持。规定被链接文档与当前文档之间的关系。
shape	default /rect / circle / poly	HTML5 中不支持。规定链接的形状。
target	_blank / _parent / _self / _top / framename	规定在何处打开链接文档。
type	MIME type	规定被链接文档的的 MIME 类型。

HTML 锚链接

通过创建锚点链接，用户能够快速定位到目标内容。

创建锚点链接分为两步：

<body>
	1. 使用 “ <a href="#id名"> 链接文本 </a> ” 创建链接文本；
	2. 使用相应的 id 名标注跳转目标的位置。
</body>

HTML 图片

<body>
	<img src="https://img-blog.csdnimg.cn/20190401220956175.png" alt="some_text">
</body>

在这里插入图片描述
定义和用法

从技术上讲，img 标签并不会在网页中插入图像，而是从网页上链接图像。
img 标签创建的是被引用图像的占位空间。
img 标签有两个必需的属性：src 属性和 alt 属性。
img 标签支持 HTML 中的全局属性。
img 标签支持 HTML 中的事件属性。

必需属性

属性	值	描述
alt	text	规定图像的替代文本。
src	URL	规定显示图像的 URL。

可选属性

属性	值	描述
align	top / bottom / middle / left / right	规定如何根据周围的文本来排列图像。(不推荐)
border	pixels	定义图像周围的边框 (不推荐)
height	pixels / %	定义图像的高度。
hspace	pixels	定义图像左侧和右侧的空白。(不推荐)
ismap	URL	将图像定义为服务器端图像映射。
longdesc	URL	指向包含长的图像描述文档的 URL。
usemap	URL	将图像定义为客户器端图像映射。
vspace	pixels	定义图像顶部和底部的空白(不推荐)
width	pixels / %	设置图像的宽度。

HTML 特殊字符标签

显示结果	描述	实体名称	实体编号
	空格	&nbsp ;	&#160 ;
<	小于号	&lt ;	&#60 ;
>	大于号	&gt ;	&#62 ;
&	和号	&amp ;	&#38 ;
"	引号	&quot ;	&#34 ;
’	撇号	&apos ; (IE不支持)	&#39 ;
￠	分（cent）	&cent ;	&#162 ;
£	镑（pound）	&pound ;	&#163 ;
¥	元（yen）	&yen ;	&#165 ;
€	欧元（euro）	&euro ;	&#8364 ;
§	小节	&sect ;	&#167 ;
©	版权（copyright）	&copy ;	&#169 ;
®	注册商标	&reg ;	&#174 ;
™	商标	&trade ;	&#8482 ;
×	乘号	&times ;	&#215 ;
÷	除号	&divide ;	&#247 ;

注释标签

在HTML中还有一种特殊的标签——注释标签。
如要在HTML文档中添些便于阅读理解但又不显示在页面中的注释文字，就需使用注释标签。
注释内容不显示在浏览器窗口，但作为HTML文档内容一部分，也会被下载到用户计算机上，查看源代码时就可以看到。
其基本语法格式如下：

<body>
	 <!-- 注释语句 -->   ctrl + /       或者 ctrl +shift + / 
</body>

4.HTML列表标签

<body>
	标签		描述
	<ul>		定义无序列表。
	<ol>		定义有序列表。
	<li>		定义列表的项目。
	<dir>		定义目录列表。不赞成使用。
	<dl>		定义定义列表。
	<dt>		定义定义列表中的项目。
	<dd>		定义定义列表中项目的描述。
	<menu>		定义命令的菜单/列表。
	<menuitem>	定义用户可以从弹出菜单调用的命令/菜单项目。
	<command>	定义命令按钮。
</body>

注意：

无序列表默认实心黑色圆点，type属性可改变，共三个值：
disc（默认）,circle（空心圆点）,square（实心黑色方块）
有序列表默认数字排序，type属性可以改变，有好几个值：1（数字）, a（字母）等等；shart属性可以改变排序从第几个开始，比如数字排序，start=“2”,
排序第一个就不再是 1 ，而是 2 。
ul ol dl 之间是可以相互嵌套的

5.HTML表格标签

<body>
	标签		描述
	<table>		定义表格
	<caption>	定义表格标题。
	<th>		定义表格中的表头单元格。
	<tr>		定义表格中的行。
	<td>		定义表格中的单元。
	<thead>		定义表格中的表头内容。
	<tbody>		定义表格中的主体内容。
	<tfoot>		定义表格中的表注内容（脚注）。
	<col>		定义表格中一个或多个列的属性值。
	<colgroup>	定义表格中供格式化的列组。
</body>

HTML表格标签属性

<body>
	      属性	                                           作用
	      
	<th colspan="2"></th>          						横跨2列的单元格
	 
	<th rowspan="2"></th>       						横跨2行的单元格

	<table cellpadding="10">    						单元格边距

	<table cellspacing="10">    						单元格间距

	<th align="left/right"></th>  						排列单元格内容
	
	<table frame="box/above/below/hsides/vsides/">    	控制围绕表格的边框
</body>

6.HTML表单标签

<body>
	标签			描述
	<form>		定义供用户输入的 HTML 表单。
	<input>		定义输入控件。
	<input type="text"> --- 文本输入
	<input type="radio"> --- 定义单选按钮
	<input type="submit"> --- 提交按钮
	<textarea>	定义多行的文本输入控件。
	<button>	定义按钮。
	<select>	定义选择列表（下拉列表）。
	<optgroup>	定义选择列表中相关选项的组合。
	<option>	定义选择列表中的选项。
	<label>		定义 input 元素的标注。
	<fieldset>	定义围绕表单中元素的边框。
	<legend>	定义 fieldset 元素的标题。
	<isindex>	不赞成使用。定义与文档相关的可搜索索引。
	<datalist>	定义下拉列表。
	<keygen>	定义生成密钥。
	<output>	定义输出的一些类型。
</body>

HTML表单标签属性

<body>
	<form accept-charset="UTF-8"> --- accept-charset 属性 --- 规定在被提交表单中使用的字符集（默认：页面字符集）
	
	<form action="action_page.php"> --- action 属性 --- 定义在提交表单时执行的动作
		注意：如果省略 action 属性，则 action 会被设置为当前页面
	
	<form autocomplete="off"> --- autocomplete 属性 --- 规定浏览器应该自动完成表单（默认：开启）

	<form ectype="application/x-www-form-urlencoded"> --- enctype 属性 --- 规定被提交数据的编码（默认：url-encoded）
	
	<form method="GET/POST"> --- method 属性 --- 规定在提交表单时所用的 HTTP 方法（GET 或 POST）
		1. 使用 GET：表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
		注意：GET 最适合少量数据的提交。浏览器会设定容量限制。

		2. 使用 POST：表单正在更新数据，或者包含敏感信息（例如密码）。
		注意：POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
	<form name="firstname"> --- name 属性 --- 规定识别表单的名称（对于 DOM 使用：document.forms.name）

	<form novalidate> --- novalidate 属性 --- 规定浏览器不验证表单

	<form target="_blank"> --- target 属性 --- 	规定 action 属性中地址的目标（默认：_self）
	
</body>

HTML表单元素

<body>
	<input>元素及输入类型
	<input type="text"> --- 文本输入
	<input type="password"> 定义密码字段
	<input type="radio"> --- 定义单选按钮
	<input type="checkbox"> --- 定义复选框
	<input type="submit"> --- 提交按钮
	<input type="number"> --- 用于应该包含数字值的输入字段
	<input type="date"> --- 用于应该包含日期的输入字段
	<input type="color"> --- 用于应该包含颜色的输入字段
	<input type="range"> --- 用于应该包含一定范围内的值的输入字段
	<input type="month"> --- 允许用户选择月份和年份。
	<input type="week"> --- 允许用户选择周和年。
	<input type="time"> --- 允许用户选择时间（无时区）。
	<input type="datetime"> --- 允许用户选择日期和时间（有时区）。
	<input type="datetime-local"> --- 允许用户选择日期和时间（无时区）。
	<input type="email"> --- 用于应该包含电子邮件地址的输入字段。
	<input type="search"> --- 用于搜索字段（搜索字段的表现类似常规文本字段）。
	<input type="tel"> --- 用于应该包含电话号码的输入字段。
	<input type="url"> --- 用于应该包含 URL 地址的输入字段。
	
	<select> 元素（下拉列表）
	<option> 元素定义待选择的选项
		注意：列表通常会把首个选项显示为被选选项。我们能够通过添加 selected 属性来定义预定义选项
	<textarea> 元素定义多行输入字段（文本域）
	<button> 元素定义可点击的按钮
</body>

输入属性

属性	描述
autocomplete	规定表单或输入字段是否应该自动完成。
autofocus	规定当页面加载时 input 元素应该自动获得焦点。
disabled	规定输入字段应该被禁用。
formaction	规定当提交表单时处理该输入控件的文件的 URL。
formenctype	规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method=“post” 的表单）。
formmethod	定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。
formnovalidate	规定在提交表单时不对 input 元素进行验证。
formtarget	规定的名称或关键词指示提交表单后在何处显示接收到的响应。
height	规定 input 元素的高度。
list	包含了 input 元素的预定义选项。
max	规定输入字段的最大值。
maxlgth	规定输入字段的最大字符数。
min	规定输入字段的最小值。
multiple	规定允许用户在 input 元素中输入一个以上的值。
novalidate	规定在提交表单时不对表单数据进行验证。
pattern	规定通过其检查输入值的正则表达式。
placeholder	规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）
size	规定输入字段的宽度（以字符计）。
step	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。
width	规定 input 元素的宽度。

7.HTML行内（内联）元素（Inline elements）

特点：

只能容纳文本或其他行内元素
可以与其他元素在同一行上，，遇到父级元素边界会自动换行
不可以设置宽高，行高，内外边距

元素	描述
a	定义锚
abbr	表示一个缩写形式
acronym	定义只取首字母缩写
b	字体加粗
bdo	可覆盖默认的文本方向
big	大号字体加粗
br	换行
cite	引用进行定义
code	定义计算机代码文本
dfn	定义一个定义项目
em	定义为强调的内容
i	斜体文本效果
img	向网页中嵌入一幅图像 input 输入框
kbd	定义键盘文本
label	定义标签
input	元素定义标注（标记）
q	定义短的引用
samp	定义样本文本
select	创建单选或多选菜单 small 呈现小号字体效果
span	组合文档中的行内元素
strong	语气更强的强调的内容
sub	定义下标文本
sup	定义上标文本
textarea	多行的文本输入控件
tt	打字机或者等宽的文本效果
var	定义变量

8.HTML块级元素（block-level elements）

特点：

可以包含行内元素和其他块级元素，且占据父元素的整个空间
独占一行
可以自动换行
能设置宽高，行高，内外边距
宽度缺省是它的容器的100%，除非设定一个宽度。

元素	描述
address	定义地址。
article	定义文章。
aside	定义页面内容之外的内容。
audio	定义声音内容。
blockquote	定义长的引用。
canvas	定义图形。
caption	定义表格标题。
dd	定义定义列表中项目的描述。
div	定义文档中的节。
dl	定义定义列表。
dt	定义定义列表中的项目。
details	定义元素的细节。
fieldset	定义围绕表单中元素的边框。
figcaption	定义 figure 元素的标题。
figure	定义媒介内容的分组，以及它们的标题。
footer	定义 section 或 page 的页脚。
form	定义供用户输入的 HTML 表单。
h1-h6	定义 HTML 标题。
header	定义 section 或 page 的页眉。
hr	定义水平线。
hgroup	定义标题组
legend	定义 fieldset 元素的标题。
li	定义列表的项目。
menu	定义命令的列表或菜单。
meter	定义预定义范围内的度量。
nav	定义导航链接。
noframes	定义针对不支持框架的用户的替代内容。
noscript	定义针对不支持客户端脚本的用户的替代内容。
ol	定义有序列表。
output	定义输出的一些类型。
p	定义段落。
pre	定义预格式文本。
section	定义 section。
table	定义表格。
tbody	定义表格中的主体内容。
td	定义表格中的单元。
tfoot	定义表格中的表注内容（脚注）。
th	定义表格中的表头单元格。
thead	定义表格中的表头内容。
time	定义日期/时间。
tr	定义表格中的行。
ul	定义无序列表。
video	定义视频。

9.HTML5 网站布局

HTML5 语义元素

元素	描述
header	定义文档或节的页眉
nav	定义导航链接的容器
section	定义文档中的节
article	定义独立的自包含文章
aside	定义内容之外的内容（比如侧栏）
footer	定义文档或节的页脚
details	定义额外的细节
summary	定义 details 元素的标题

10.HTML 框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

框架结构标签（ frameset ）

框架结构标签（）定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积

框架标签（Frame）

<body>
1. 在  frame  标签中加入：noresize="noresize", 可以避免用户拖动边框来改变它的大小。
2. 不能将 <body>(https://www.w3school.com.cn/images/picture.jpg)]</body> 标签
   与 <frameset></frameset> 标签同时使用
</body>

内联框架（iframe）
iframe 用于在网页内显示网页

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
可以把需要的文本放置在和之间，这样就可以应对无法理解 iframe 的浏览器。
frame 可用作链接的目标（target）。
frameborder 属性规定是否显示 iframe 周围的边框。设置属性值为 “0” 就可以移除边框。

<iframe src="URL" width="200" height="200" frameborder="0"></iframe>

11. HTML 文件路径

文件路径描述了网站文件夹结构中某个文件的位置。

1. 绝对路径

绝对文件路径是指向一个因特网文件的完整 URL
例如：https://www.w3school.com.cn/images/picture.jpg

2. 相对路径

路径	描述
picture.jpg	位于与当前网页相同的文件夹
images/picture.jpg	位于当前文件夹的 images 文件夹中
/images/picture.jpg	当前站点根目录的 images 文件夹中
…/picture.jpg	位于当前文件夹的上一级文件夹中

12. HTML5 画布（canvas）

canvas 元素用于在网页上绘制图形。

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

<canvas id="myCanvas" width="200" height="100"></canvas> -- 规定元素的 id、宽度和高度
<script type="text/javascript">
	var c=document.getElementById("myCanvas"); -- JavaScript 使用 id 来寻找 canvas 元素
	var cxt=c.getContext("2d"); -- 创建 context 对象
	cxt.fillStyle="#FF0000"; -- fillStyle 方法将其染成红色
	cxt.fillRect(0,0,150,75); -- fillRect 方法规定了形状、位置和尺寸
</script>

HTML 常见面试题

1. DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义?

DOCTYPE 是 document type (文档类型的）的简写。
作用：
告诉浏览器通过哪种规范(文档类型定义，DTD) 解析文档 (如HTML或XHTML规范)；
DTD 是一系列的语法规则，用来定义 XML 或 (X)HTML 的文件类型。
浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。
浏览器模式—标准模式（standards mode）：浏览器根据W3C标准来渲染页面。
浏览器模式—混杂模式(quirks mode)：浏览器采用更宽松、向后兼容方式渲染页面。
混杂模式下，浏览器会模仿旧浏览器的行为，比如IE6，在此基础上兼容新的标准特性。
混杂模式又称兼容模式、怪异模式等。
浏览器根据不同的 DOCTYPE 选择不同的渲染方法就叫做 DOCTYPE 切换。
DOCTYPE切换就是用来识别和兼容旧网页的。
!DOCTYPE html 的重要性：声明文档的解析类型(document.compatMode)，
避免浏览器的怪异模式。

2. image 标签上title属性与alt属性的区别是什么？

title

title 属性规定关于元素的额外信息。
title 属性通常会在鼠标移到元素上时显示一段工具提示文本。
title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。
title 属性是 abbr 和 acronym 元素的必需属性。

alt

alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。
alt 属性值是一个最多包含 1024 个字符的字符串，包括空格和标点。
字符串必须包含在引号中。
如果图像包含信息 - 使用 alt 描述图像
如果图像在 a 元素中 - 使用 alt 描述目标链接
如果图像仅供装饰 - 使用 alt=""

3. 请说说你对标签语义化的理解？

去掉或者丢失CSS样式的情况下能够让页面呈现出清晰的内容结构，代码结构。
有利于SEO(搜索引擎优化)：和搜索引擎建立良好沟通，有助爬虫抓取更多有效信息。
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备) 以意义的方式来渲染网页。
便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，
可以减少差异化。

4. 简述一下 src 与 href 的区别

src

src 是source的缩写，用于替换当前元素。
src 指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置。

href

href 是Hypertext Reference的缩写，用于在当前文档和引用资源之间确立联系。
href 指向网络资源所在位置，建立和当前元素(锚点)或当前文档(链接)之间的链接。

5. 页面导入样式时，使用link和@import有什么区别？

区别：

从属关系区别：
link 是HTML提供的标签，不仅可加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
@import 是 CSS 提供的语法规则，只有导入样式表的作用。
加载顺序区别:
link 引用CSS时候，页面载入时同时加载。
@import 引入的 CSS需要在页面完全加载完毕后被加载。
兼容性问题:
link 标签作为 HTML 元素，不存在兼容性问题。
@import 是在css2.1提出来的，低版本的浏览器不支持。
DOM 可控性区别:
link 支持使用 javascript 控制去改变样式。
@import 不支持 javascript 方式插入样式。
权重区别:
link 方式的样式的权重高于 @import 的权重

6. iframe框架有那些优缺点？

优点：

iframe能够原封不动的把嵌入的网页展现出来。
如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现
调用的每一个页面内容的更改，方便快捷。
网页如果为了统一风格，头部和版本都是一样的，就可写成一个页面，用iframe嵌套，
可以增加代码的可重用。
如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

缺点：

搜索引擎的爬虫程序无法解读这种页面
框架结构中出现各种滚动条
使用框架结构时，保证设置正确的导航链接。
iframe页面会增加服务器的http请求

7. 介绍一下对浏览器内核的理解

渲染引擎：负责取得网页的内容(html,xml和图像等)，整理讯息(例如假如css)，
以及计算网页的显示方式，然后输出到显示器或打印机。
JS引擎：解析和执行JavaScript来实现网页的动态效果。
浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。
所有网页浏览器、电子邮件客户端及它需要编辑、显示网络内容的应用程序都要内核。

8. 常见的浏览器内核有哪些？

Trident内核：IE，360，搜过浏览器；
Gecko内核：Netscape6及以上版本，
Presto内核：Opera
Blink内核：Opera；
Webkit内核：Safari，Chrome

9. 对 WEB 标准以及 W3C 的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链 css 和 js 脚本。
结构行为表现的分离、文件下载与页面速度更快。
内容能被更多的用户所访问，内容能被更广泛的设备所访问。
更少的代码和组件，容易维护、改版方便，不需要变动页面内容。
提供打印版本而不需要复制内容、提高网站易用性。

10. xhtml 和 html 有什么区别？

HTML 是一种基本的 WEB 网页设计语言，XHTML 是一个基于 XML 的置标语言。
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
XHTML标签名必须用小写字母。
XHTML 文档必须拥有根元素。

11. 清除浮动的几种方式，各自的优缺点？

使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）。
使用 overflow:auto（空标签元素清除浮动不得不增加无意代码弊端,用 zoom:1 兼容 IE）
使用 afert 伪元素清除浮动(用于非 IE 浏览器)。