HTML基础笔记及经典面试题
HTML笔记及面试题
- 1. HTML 基本概念
- 1. 浏览器概念
- 2. 服务器概念
- 3. 访问网页原理
- 3.1 浏览器请求数据的原理
- 3.2 浏览器请求数据的过程
- 4. URL 概念
- 4.1 URL 格式
- 4.2 URL 拆分
- 5. HTTP 协议
- 2. 初识 HTML
- 1. HTML 作用
- 2. 第一个 HTML 网页
- 2.1 HTML标准结构
- 3. HTML 字符集问题
- 4. DTD 文档声明
- 5. HTML和XHTML、HTML5区别
- 6. .htm 和 .html扩展名区别
- 3.HTML基础标签
- 1. html标签
- 2. head标签
- 3. 常用的meta标签
- 4. link标签
- 5. title标签
- 6. body标签
- 7. style标签
- 8. HTML 标题
- 9. HTML 段落
- 10. HTML 文本标签
- 11. HTML 链接
- 12. HTML 锚链接
- 13. HTML 图片标签
- 14. HTML 特殊字符标签
- 15. 注释标签
- 4.HTML列表标签
- 5.HTML表格标签
- 1. HTML表格标签属性
- 6.HTML表单标签
- 1. HTML表单标签属性
- 2. HTML表单元素
- 3. 输入属性
- 7.HTML 多媒体标签
- 1. video 标签
- 1.1 作用：播放视频
- 1.2 格式
- 1.3 第二种格式存在的意义
- 1.4 注意点:
- 1.5 video标签的属性
- 2. audio 标签
- 1.1 作用: 播放音频
- 1.2 格式
- 1.3 注意点:
- 3. 详情和概要标签
- 3.1 作用
- 3.2 格式:
- 4. marquee 标签
- 4.1 作用: 跑马灯效果
- 4.2 格式:
- 4.3 属性:
- 4.4 注意点:
- 8.HTML行内（内联）元素（Inline elements）
- 9.HTML块级元素（block-level elements）
- 10.HTML5 网站布局
- 11.HTML 框架
- 1. 框架结构标签（ frameset ）
- 2. 框架标签（Frame）
- 3. 内联框架（iframe）
- 12. HTML 文件路径
- 1. 绝对路径
- 2. 相对路径
- 13. HTML5 画布（canvas）
- HTML 常见面试题
1. HTML 基本概念
1. 浏览器概念
- 概念：
- 浏览器是安装在电脑里面的一个软件， 能够将网页内容呈现给用户查看，并让用户与网页交互的一种软件。
- 主流浏览器：
- 浏览器内核：
- 不同的浏览器有不同的浏览器内核， 浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容，从而导致了浏览器兼容性问题出现
| 浏览器 | 内核 |
|---|---|
| IE | Trident |
| WebKit / Blink | |
| FireFox | Gecko |
| Safari | WebKit |
| Opera | Presto |
2. 服务器概念
- 概念：
- 服务器是比我们的电脑配置更高的电脑，并且24小时不断电，不关机的计算机
- 服务器是专门用于存储数据电脑， 访问者可以访问服务器获得服务器上存储的资源
- 服务器一旦关机，访问者就无法访问
3. 访问网页原理
3.1 浏览器请求数据的原理
- 访问网页时是有真实的、物理的文件传输的
- 网页不是一个文件，而是一堆文件组成的
- 我们之所以平常感觉第二次访问比第一次访问快的原因就是，第一次访问时已经将所有文件缓存到了本地
3.2 浏览器请求数据的过程
- 浏览器根据输入的URL地址发送请求报文
- 服务器接收到请求报文，会对请求报文进行处理
- 服务器将处理完的结果通过响应报文返回给浏览器
- 浏览器解析服务器返回的结果，将结果显示出来
4. URL 概念
- 概念：
- 在浏览器的地址栏中输入的地址其实就是URL
- URL全称Uniform Resource Locator(统一资源定位符)， 互联网上的每一个资源都有一个唯一的URL地址
4.1 URL 格式
- 127.0.0.1/index.html （浏览器会自动补全http:和：80）
- http://127.0.0.1/index.html （浏览器会自动补全：80）
- http://127.0.0.1:80/index.html （完整格式）
- 协议类型://ip地址:端口号/资源路径/资源名称
4.2 URL 拆分
- 网络协议类型 http://
- 服务器IP地址 127.0.0.1
- 服务器端口号 :80
- 资源路径 网页在服务器上的路径
- 资源名称 index.html
5. HTTP 协议
- 概念：
- HTTP是Hypertext Transfer Protocol的缩写, 超文本传输协议
- HTTP协议就相当于我们让两个人都说中文或者都说英文一样, 就是提前规范两个人之间如何沟通, 也就是规范/约束浏览器和服务器之间如何沟通
2. 初识 HTML
1. HTML 作用
HTML 专门用来描述文本的语义的
- 用于描述其它文本语义的文本, 我们称之为标签.
- 用于描述文本语义的标签将来在浏览器中是不会被显示出来的
- 所以我们称这些文本为"超文本", 而这些文本又叫做标签, 所以HTML被称之为"超文本标记语言"
2. 第一个 HTML 网页
2.1 HTML标准结构
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
body>
html>
3. HTML 字符集问题
- 乱码问题
- 因为我们在编写网页的时候没有指定字符集
- 解决乱码现象
- 在
head标签中添加, 指定字符集
- 在
- 什么是字符集
- 字符集就是字符的集合
- 在网页中我们常见的字符集有两个
GBK/UTF-8
GBK(GB2312)和UTF-8区别GBK(GB2312)里面存储的字符比较少, 仅仅存储了汉字和一些常用外文- 体积比较小
UTF-8里面存储的世界上所有的文字- 体积比较大
- 注意点：
- 在HTML文件中指定的字符集必须和保存这个文件的字符集一致, 否则还是会出现乱码
- 仅仅指定字符集不一定能解决乱码问题, 还需要保存文件的时候, 文件的保存格式必须和指定的字符集一致才能保证没有乱码问题
4. DTD 文档声明
- 概念：
- 由于HTML有很多个版本的规范, 每个版本的规范之间又有一定的差异.
- 为了让浏览器能够正确的编译/解析/渲染我们的网页, 需要在HTML文件的第一行告诉浏览器, 当前这个网页是用哪一个版本的HTML规范来编写的.
- 浏览器知道了用哪一个版本的规范来编写之后, 它就能够正确的编译/解析/渲染网页
- DTD文档声明格式:
-
注意点：
必须是 HTML 文档的第一行，位于标签之前不是 HTML 标签；它指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。- 请始终向 HTML 文档添加
声明，这样浏览器才能获知文档类型。 没有结束标签,对大小写不敏感。- 若声明错误或未声明会导致文档以兼容模式/混杂模式呈现。
-
HTML的DTD文档声明和XHTML的DTD文档声明有何区别?
- XHTML本身规定比如标签必须小写、必须严格闭合、必须使用引号引起属性等等
- 而HTML会更加松散没有这么严格
5. HTML和XHTML、HTML5区别
- HTML语法非常宽松容错性强;
- XHTML更为严格,它要求标签必须小写、必须严格闭合、标签中的属性必须使用引号引起等等;
- HTML5是HTML的下一个版本所以除了非常宽松容错性强以外,还增加许多新的特性
6. .htm 和 .html扩展名区别
- DOS操作系统（win95或win98）下只能支持长度为3的后缀名，所以是htm
- 但在windows后缀长度可以大于3位，所以windows下无所谓htm与html，html是为长文件的格式命名的
- 所以htm是为了兼容过去的DOS命名格式存在的
3.HTML基础标签
1. 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 – 代表右到左的排列方式
2. head标签
<head>head>
定义和用法
- head 标签用于定义文档的头部，它是所有头部元素的容器。
- head 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
- 文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置
以及和其他文档的关系等。 - 绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
- 下面这些标签可用在 head 部分：base, link , meta , script , style , 以及 title 。
- title 定义文档的标题，它是 head 部分中唯一必需的元素。
提示和注释
- 应该把 head 标签放在文档的开始处，紧跟在 html 后面，
并处于 body 标签或 frameset 标签之前。 - 请记住始终为文档规定标题！
3. 常用的meta标签
作用
- 搜索引擎优化（seo）；
- 定义页面使用语言；
- 自动刷新并指向新的页面；
- 实现网页转换时的动态效果；
- 控制页面缓冲；
- 网页定级评价；
- 控制网页显示的窗口等！
<meta charset='utf-8'>
<meta http-equiv="参数" content="参数变量值">
<meta http-equiv="expires" content="Fri,12Jan200118:18:18GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Refresh" content="2; URL=http://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)
<meta http-equiv="Set-Cookie" content="cookie value=xxx; expires=Friday,12-Jan-200118:18:18GMT；path=/">
<meta http-equiv="Window-target" content="_top">
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta http-equiv="Content-Language" content="zh-cn"/>
<meta http-equiv="imagetoolbar" content="false"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="参数" content="具体的参数值">
<meta name="keywords" content=""/>
<meta name="description" content="不超过150个字符"/>
<meta name="robots" content="all">
<meta name="author" content="name, [email protected]"/>
<meta name="generator" content="信息参数"/>
<meta name="copyright" content="信息参数">
<meta name="revisit-after" content="7days">
4. 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 类型。 |
5. title标签
<title>文档标题title>
定义和用法
- title 元素可定义文档的标题。
- 浏览器会以特殊方式来使用标题，并通常把它放置在浏览器窗口的标题栏或状态栏上。
- 文档加入用户的链接列表或收藏夹或书签列表时，标题将成为该文档链接的默认名称。
- 提示： title 标签是 head 标签中唯一要求包含的东西。
- dir–(rtl/ltr)–规定元素中内容的文本方向;
- lang–(language_code)–规定元素中内容的语言代码;
6. body标签
<body>文档内容body>
定义和用法
- body 元素定义文档的主体。
- body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
7. style标签
<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
style>
head>
<body>
<h1>Header 1h1>
<p>A paragraph.p>
body>
html>
定义和用法
- style 标签用于为 HTML 文档定义样式信息。
- 在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。
- type 属性是必需的，定义 style 元素的内容。唯一可能的值是 “text/css”。
- 如需链接外部样式表，请使用 link 标签。
- style 标签支持 HTML 中的全局属性。 style 标签支持 HTML 中的事件属性。
8. HTML 标题
<body>
<h1>这是标题 1h1>
<h2>这是标题 2h2>
<h3>这是标题 3h3>
<h4>这是标题 4h4>
<h5>这是标题 5h5>
<h6>这是标题 6h6>
body>
定义和用法
- h1 - h6 标签可定义标题。 h1 定义最大的标题。 h6 定义最小的标题。
- 由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。
- 因此，请不要利用标题标签来改变同一行中的字体大小。
- 相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。
9. HTML 段落
<body>
<p>这是一个段落。p>
<p>这是一个段落。p>
<p>这是一个段落。p>
body>
定义和用法
- p 标签定义段落。
- p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，也可以在样式表中规定。
10. HTML 文本标签
<body>
//文本换行
<br>
//文本加粗
<b>加粗内容b>
<strong>加粗内容strong>
//文本倾斜
<em>em> <i>i>
//水平线
<hr />空标记
//删除线样式
<s>内容s>
body>
11. 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 类型。 |
12. HTML 锚链接
通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：
<body>
1. 使用 “ <a href="#id名"> 链接文本 a> ” 创建链接文本；
2. 使用相应的 id 名标注跳转目标的位置。
body>
13. 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 / % | 设置图像的宽度。 |
14. HTML 特殊字符标签
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | ; | ; | |
| < | 小于号 | < ; | < ; |
| > | 大于号 | > ; | > ; |
| & | 和号 | & ; | & ; |
| " | 引号 | " ; | " ; |
| ’ | 撇号 | &apos ; (IE不支持) | ' ; |
| ￠ | 分（cent） | ¢ ; | ¢ ; |
| £ | 镑（pound） | £ ; | £ ; |
| ¥ | 元（yen） | ¥ ; | ¥ ; |
| € | 欧元（euro） | &euro ; | € ; |
| § | 小节 | § ; | § ; |
| © | 版权（copyright） | © ; | © ; |
| ® | 注册商标 | ® ; | ® ; |
| ™ | 商标 | &trade ; | ™ ; |
| × | 乘号 | × ; | × ; |
| ÷ | 除号 | ÷ ; | ÷ ; |
15. 注释标签
在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>
1. 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>
1. 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>
2. 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>
3. 输入属性
| 属性 | 描述 |
|---|---|
| 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 多媒体标签
1. video 标签
1.1 作用：播放视频
1.2 格式
- 格式1:
<video src="">
video>
- 格式2:
<video>
<source src="" type="">source>
<source src="" type="">source>
video>
1.3 第二种格式存在的意义
- 由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式
- ideo标签的第二种格式存在的意义就是为了解决浏览器适配问题. video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放
1.4 注意点:
- 当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放
- 在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现
1.5 video标签的属性
- src: 告诉video标签需要播放的视频地址
- autoplay: 告诉video标签是否需要自动播放视频
- controls: 告诉video标签是否需要显示控制条
- poster: 告诉video标签视频没有播放之前显示的占位图片
- loop: 告诉video标签循环播放视频. 一般用于做广告视频
- preload: 告诉video标签预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
- muted:告诉video标签视频静音
- width/height: 和img标签中的一模一样
2. audio 标签
1.1 作用: 播放音频
1.2 格式
- 格式:
<audio src="">
audio>
<audio>
<source src="" type="">
audio>
1.3 注意点:
- audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样. 只不过有3个属性不能用, height/width/poster
3. 详情和概要标签
3.1 作用
利用summary标签来描述概要信息, 利用details标签来描述详情信息默认情况下是折叠展示, 想看见详情必须点击
3.2 格式:
<details>
<summary>概要信息summary>
详情信息
details>
4. marquee 标签
4.1 作用: 跑马灯效果
4.2 格式:
<marquee>内容marquee>
4.3 属性:
- direction: 设置滚动方向 left/right/up/down
- scrollamount: 设置滚动速度, 值越大就越快
- loop: 设置滚动次数, 默认是-1, 也就是无限滚动
- behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回
4.4 注意点:
- marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好
8.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 | 定义变量 |
9.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 | 定义视频。 |
10.HTML5 网站布局
HTML5 语义元素
| 元素 | 描述 |
|---|---|
| header | 定义文档或节的页眉 |
| nav | 定义导航链接的容器 |
| section | 定义文档中的节 |
| article | 定义独立的自包含文章 |
| aside | 定义内容之外的内容（比如侧栏） |
| footer | 定义文档或节的页脚 |
| details | 定义额外的细节 |
| summary | 定义 details 元素的标题 |
11.HTML 框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
1. 框架结构标签（ frameset ）
- 框架结构标签（）定义如何将窗口分割为框架
- 每个 frameset 定义了一系列行或列
- rows/columns 的值规定了每行或每列占据屏幕的面积
2. 框架标签（Frame）
<body>
1. 在 frame 标签中加入：noresize="noresize", 可以避免用户拖动边框来改变它的大小。
2. 不能将 <body>(https://www.w3school.com.cn/images/picture.jpg)]body> 标签
与 <frameset>frameset> 标签同时使用
body>
3. 内联框架（iframe）
iframe 用于在网页内显示网页
- iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
- 可以把需要的文本放置在 和 之间，这样就可以应对无法理解 iframe 的浏览器。
- frame 可用作链接的目标（target）。
- frameborder 属性规定是否显示 iframe 周围的边框。设置属性值为 “0” 就可以移除边框。
<iframe src="URL" width="200" height="200" frameborder="0">iframe>
12. HTML 文件路径
文件路径描述了网站文件夹结构中某个文件的位置。
1. 绝对路径
绝对文件路径是指向一个因特网文件的完整 URL
例如：https://www.w3school.com.cn/images/picture.jpg
2. 相对路径
| 路径 | 描述 |
|---|---|
| picture.jpg | 位于与当前网页相同的文件夹 |
| images/picture.jpg | 位于当前文件夹的 images 文件夹中 |
| /images/picture.jpg | 当前站点根目录的 images 文件夹中 |
| …/picture.jpg | 位于当前文件夹的上一级文件夹中 |
13. 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 浏览器)。