HTML学习使用总结
-
DOCTYPE有什么作用
IE5.5 引入了文档模式的概念，而这个概念是通过使用文档类型（DOCTYPE）切换实现的。 <!DOCTYPE>声明位于 HTML 文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。 DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。告诉浏览器使用哪个版本的HTML规范来渲染文档 -
HTML5为什么只需要写
<!DOCTYPE HTML>1. HTML5不基于SGML（Standard Generalized Markup Language 标准通用标记语言），因此不需要对DTD（DTD 文档类型定义）进行引用，但是需要DOCTYPE来规范浏览器行为。 2. HTML4.01基于SGML，所以需要引用DTD。才能告知浏览器文档所使用的文档类型 -
标准模式与兼容模式各有什么区别？
标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示
，模拟老式浏览器的行为以防止站点无法工作。
-
SGML 、 HTML 、XML 和 XHTML 的区别？
SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。 HTML 是超文本标记语言，主要是用于规定怎么显示网页。 XML 是可扩展标记语言是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多， 而 HTML 的标签都是固定的而且数量有限。 XHTML 也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区别，标签都一样，用法也都一样，就是比 HTML 更严格，比如标签必须都用小写，标签都必须有闭合标签等。 -
DTD 介绍
DTD（ Document Type Definition 文档类型定义）是一组机器可读的规则，它们定义 XML 或 HTML 的特定版本中所有允许元 素及它们的属性和层次关系的定义。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。 DTD 是对 HTML 文档的声明，还会影响浏览器的渲染模式（工作模式）。 -
常见行级元素有哪些
span a b i img em br input label button textarea select strong sub sup 等 -
常见块级元素有哪些
div p ul li table dl dt dd h1-h6 form 等 -
常见行内块元素有哪些
input img select button textarea -
三种元素的区别
块状元素 行级元素 行内块元素 (1)能够识别宽高 (1)设置宽高无效 (1)不自动换行 (2)margin和padding的上下左右均对其有效 (2)对margin，padding仅设置左右方向有效，上下无效 (2)能够识别宽高 (3)独占一行，其宽度自动填满其父元素宽度，其他元素自动换行，总是在新行上开始 (3)行内元素不会独占一行，相邻的行内元素会排列在同一行，直至一行排不下才会换行，遇到父级元素边界才会自动换行 (3)默认排列方式为从左到右 (4)多个块状元素标签写在一起，默认排列方式为从上至下 (4)行内元素不能包含块级元素 (4)margin、padding等样式设置 (5)块级元素可以包含行内元素和块级元素 行内元素的间距问题：
1.重设字体
将行内元素的直接父级设置font-size=0px;再给行内元素设置字体大小就可以解决。
2.借助HTML注释
在两个行内元素之间加入HTML注释，告诉浏览器这中间不是换行也不是空格，而是连接在一起的，这样也可以解决。三者相互转换
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素 -
空(void)元素有那些
<br> <hr> <link> <meta> -
表单
-
表格
-
页面导入样式时，使用link和@import有什么区别？
相同的地方 都是外部引用CSS方式 区别： 1. link是xhtml标签，除了加载css外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS link引用CSS时候，页面载入时同时加载；@import需要在页面完全加载以后加载，而且@import被引用的CSS会等到引用它的CSS文件被加载完才加载 link是xhtml标签，无兼容问题；@import是在css2.1提出来的，低版本的浏览器不支持 link支持使用javascript控制去改变样式，而@import不支持 link方式的样式的权重高于@import的权重 import在html使用时候需要<style type="text/css">标签 （1）从属关系区别。 @import 是 CSS 提供的语法规则，只有导入样式表的作用；link 是 HTML 提供的标签，不仅可以加 载 CSS 文件，还可以定义 RSS、rel 连接属性、引入网站图标等。 （2）加载顺序区别。加载页面时，link 标签引入的 CSS 被同时加载；@import 引入的 CSS 将在页面加载完毕后被加载 （3）兼容性区别。@import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link 标签作为 HTML 元素，不存在兼容性问题。 （4）DOM 可控性区别。可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于 DOM 方法是基于文档的，无法使用 @i mport 的方式插入样式。 -
iframe框架有那些优缺点？
-
优点：
1. iframe能够原封不动的把嵌入的网页展现出来。 2. 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。 3. 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。 4. 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。 -
缺点：
1. 搜索引擎的爬虫程序无法解读这种页面 2. 框架结构中出现各种滚动条 3. 使用框架结构时，保证设置正确的导航链接。 4. iframe页面会增加服务器的http请求
-
-
简述一下你对HTML语义化的理解？
1. HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析 2. 在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的 3. 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO 4. 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解 5. 语义化的主要目的： 1. 用正确的标签做正确的事情。 6. 语义化验证方法： 1. css裸奔--去掉css样式，然后看页面是否还具有很好的可读性。 7. 语义化意义 / 优点： 1. 让页面的内容结构化 2. 利于浏览器解析和SEO搜索引擎优化。 3. 提高代码的可维护和可重用性。 8. 语义化内容： 1. 标签语义化 2. 图片语义化 3. 表单语义化 4. 表格语义化 -
请至少写出5个H5的新标签
1. 定义了8个新的语义化元素，都是块级元素,为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block 2. 所有浏览器对无法识别的元素会作为行级元素自动处理 3. html5新增内容 拖放（Drag 和 drop）是 HTML5 标准的组成部分 SVG 是一种使用 XML 描述 2D 图形的语言，行级元素 HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成 Canvas 通过 JavaScript 来绘制 2D 图形 https://www.runoob.com/html/html5-canvas.html 行级元素 4. 新表单元素 新的 Input 类型 新的表单属性 5. 新的语义和结构元素 6. 已移除的元素 7. MathML 元素 8. 使用 getCurrentPosition() 方法来获得用户的位置 9. 新多媒体元素 `<header>`定义文档的页眉 `<nav>`定义导航链接的部分 `<article>`定义外部的内容，可以是一篇新的文章 `<section>`定义文档的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。 `<aside>`定义article以外的内容，aside的内容可用作文章的侧边栏 `<figure>`用于对元素进行组合，使用figcaption元素为元素组添加标题 `<figcaption>`定义figure元素的标题 `<hgroup>`用于对section或网页的标题进行组合，使用figcaption元素为元素添加标题 `<time>`定义日期或时间，或者两者。 `<footer>`定义section或文档的页脚 -
html5新特性
1. HTML5 是 HTML标准的最新演进版本,它是一个新的 HTML 语言版本包含了新的元素，属性和行为，同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。 这套技术往往被称作 HTML5 和它的朋友们，通常简称为 HTML5 2. 多媒体， 用于媒介回放的 video 和 audio 元素 3. 图像效果，用于绘画的 canvas 元素，svg元素等 4. 离线 & 存储,对本地离线存储的更好的支持,local Store,Cookies等，本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失， sessionStorage的数据在浏览器关闭后自动删除 5. 语义化特性,添加`<header><header/><nav><nav>`等标签 6. 设备兼容特性 ，HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连 7. 连接特性，更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能 8. 性能与集成特性，HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作 9. 表单控件，calendar,date,time,email,url等 10. 新的技术webworker,websockt,Geolocation 11. 移出的元素 1. 纯表现的元素：basefont,big,center,font等 2. 产生负面影响的元素：frame frameset等 3. ie8 7 6 支持通过document.createElemet 方法产生新的标签，可以利用这 一特性让这些浏览器支持html5新标签 4. 新增加了图像、位置、存储、多任务等功能。 12. 新增元素： 1. canvas 用于媒介回放的video和audio元素 本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除 语意化更好的内容元素，比如 article footer header nav section 位置API：Geolocation 表单控件，calendar date time email url search 新的技术：web worker(web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行) web socket 拖放API：drag、drop 移除的元素： 纯表现的元素：basefont big center font s strike tt u 性能较差元素：frame frameset noframes 区分： DOCTYPE声明的方式是区分重要因素 根据新增加的结构、功能来区分 -
img标签的alt和title有什么异同
在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。 -
Label 的作用是什么？是怎么用的？
label 标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。 <label for="Name">Number:</label> <input type=“text“ name="Name" id="Name"/> -
title与h1的区别、b与strong的区别、i与em的区别？
title属性没有明确意义，只表示标题；h1表示层次明确的标题，对页面信息的抓取也有很大的影响 strong标明重点内容，语气加强含义；b是无意义的视觉表示 em表示强调文本；i是斜体，是无意义的视觉表示 视觉样式标签：b i u s 语义样式标签：strong em ins del code -
src与href属性的区别
1. href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系。 2. src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。 3. src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。 4. `<script src="js.js"></script>`当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js饭再底部而不是头部。 5. `<link href="common.css" rel="stylesheet"/>`当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import。 -
Canvas 和 SVG 有什么区别？
Canvas 是一种通过 JavaScript 来绘制 2D 图形的方法。Canvas 是逐像素来进行渲染的，因此当我们对 Canvas 进行缩放时，会出现锯齿或者失真的情况。 SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。我们可以为某个元素附加 JavaScript 事件监听函数。并且 SVG 保存的是图形的绘制方法，因此当 SVG 图形缩放时并不会失真。 -
常用的 meta 标签
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 <meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。 <!DOCTYPE html> H5标准声明，使用 HTML5 doctype，不区分大小写 <head lang=”en”> 标准的 lang 属性写法 <meta charset=’utf-8′> 声明文档使用的字符编码 <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> 优先使用 IE 最新版本和 Chrome <meta name=”description” content=”不超过150个字符”/> 页面描述 <meta name=”keywords” content=””/> 页面关键词者 <meta name=”author” content=”name, email@gmail.com”/> 网页作 <meta name=”robots” content=”index,follow”/> 搜索引擎抓取 <meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport <meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin <meta name=”apple-mobile-web-app-capable” content=”yes”/> 添加到主屏后的标题（iOS 6 新增） 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 <meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”> 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） <meta name=”apple-mobile-web-app-status-bar-style” content=”black”/> <meta name=”format-detection” content=”telphone=no, email=no”/> 设置苹果工具栏颜色 <meta name=”renderer” content=”webkit”> 启用360浏览器的极速模式(webkit) <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 避免IE使用兼容模式 <meta http-equiv=”Cache-Control” content=”no-siteapp” /> 不让百度转码 <meta name=”HandheldFriendly” content=”true”> 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 <meta name=”MobileOptimized” content=”320″> 微软的老式浏览器 <meta name=”screen-orientation” content=”portrait”> uc强制竖屏 <meta name=”x5-orientation” content=”portrait”> QQ强制竖屏 <meta name=”full-screen” content=”yes”> UC强制全屏 <meta name=”x5-fullscreen” content=”true”> QQ强制全屏 <meta name=”browsermode” content=”application”> UC应用模式 <meta name=”x5-page-mode” content=”app”> QQ应用模式 <meta name=”msapplication-tap-highlight” content=”no”> windows phone 点击无高光 设置页面不缓存 <meta http-equiv=”pragma” content=”no-cache”> <meta http-equiv=”cache-control” content=”no-cache”> <meta http-equiv=”expires” content=”0″> -
disabled 和 readonly 的区别？
disabled 指当 input 元素加载时禁用此元素。input 内容不会随着表单提交。 readonly 规定输入字段为只读。input 内容会随着表单提交。 无论设置 readonly 还是 disabled，通过 js 脚本都能更改 input 的 value -
如何让低版本的 IE 支持 HTML5新标签
使用html5shiv可以解决ie低版本不兼容的问题，只需要在head中加上,当版本低于IE9时，浏览器会加载html5.js脚本，使得支持html5的新功能，也可以将脚本文件下载到本地 <head> <!--[if lt IE 9]> <script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'> </script> <![endif]--> </head> -
对于ul 和 li 标签的理解
1. 都是块状元素 2. 都有默认边距 3. 兼容写法 - 用background上传背景 - 用padding设置样式 - 用list-style去掉默认 - 用margin设置样式 -
a标签属性有哪些
-
页面跳转的几种方式
-
请写出table标签下面会包含哪些标签元素
1. 表格由 `<table>` 标签来定义 2. 属性有**border** **cellpadding** **cellspacing** 3. 每个表格均有若干行（由 `<tr>` 标签定义） 4. 每行被分割为若干单元格（由 `<td>` 标签定义）,字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等 5. 表格可以有表头`<th>` ，表头字会显得粗点 6. `<caption>带有标题的表格</caption>` -
很多网站不常用table iframe这两个元素，知道原因吗？
1. 因为浏览器页面渲染的时候是从上至下的，而table 和 iframe 这两种元素会改变这样渲染规则，他们是要等待自己元素内的内容加载完才整体渲染。用户体验会很不友好。 2. 该URL指向不同的网页。 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面 -
简述对HTML结构化的理解
1. 目的：为开发页面时有一套明确的页面结构化实施方案，提高开发效率； 2. HTML结构化指的其实就是使用HTML语义化标签根据web标准书写具有明确结构逻辑的HTML代码的一种思路； 说白了重点就是：页面实际要展现的内容，贴切页面内容的HTML标签，符合web标准，结构逻辑明确； 3. 工作中如何使用结构化？ 从单纯的页面级别来说，页面是由很多个小的结构组成的，这些小的结构都由HTML标签包裹着文字、图片组成的。 4. 结构化整体布局 1. 1、头部head 2、侧栏side 3、主体内容main 4、尾部foot 5. 结构化细则布局 1. 针对UI设计师天马行空的设计理念，作为前端人员必须有一套自己的应对方案；比如在UI还没天马行空完，我们就可以根据原型书写一套良好的HTML代码； 2. 什么才是良好的HTML代码呢？ 1. 1、HTML语义化要有强有力的展现，比如是一段文字的话就用p标签，这没什么可解释的； 2、块级元素和内联元素的嵌套一定要符合web标准，比如内联元素就是不能嵌套块级元素； 3、在写结构的时候不要去考虑样式怎么展现，结构就是结构，跟样式没毛线关系； 4、结构一定要体现出所表达的含义，达到只看结构就能知道该结构是要干嘛的； 6. 结构化的步骤 1. 1、无论是根据原型还是UI设计稿，都要先抽出头尾、侧栏等公用的布局结构进行单独HTML代码的编写； 2、仔细查看原型或者UI设计稿，找出结构一样或者结构相似的，思考结构相似的该如何展现；是求同存异？还是修改成相同的？比如图片在上文字在下和图片在下文字在上； 3、着手编写HTML代码时，将代码以单独结构的形式进行注释； 7. 结构化标准 1. 1、HTML代码必须根据页面的具体内容进行语义化编写； 2、禁止内联元素包含块级元素； 3、禁止超出三层的标签嵌套； 4、相似度70%（拍脑袋拍出来的）的结构必须抽取相同结构或者强制写成完全相同的结构； 5、每一块结构必须加注释，在进行拷贝结构页面拼装时，注释也必须要带上； 6、整站相同的结构必须写在一个页面中； 7、禁止一边写结构一边写样式； 8. 辨别结构化的合理性 1. 1、HTML标签是否和所要展现的内容贴切； 2、内联标签是否只包含文字、图片等需要在页面上展现出来的内容； 3、标签嵌套是否在三层以内； 4、结构与结构之间的相似度是否低于70%； 9. 结构化中重复的工作 1. 一切重复性的工作是应该被消灭的； 其实大部分网站都会存在很多共性的地方；比如某个结构会出现在很多网站当中，毕竟设计师有时也是按套路出牌的； 针对在很多页面乃至很多网站中出现较频繁的结构，我们肯定不能够每次都去梳理结构书写结构，最好的办法就是将这些高频的结构代码封装成代码片段，保存在常用的IDE中，这样就能够提高开发效率消灭重复的工作； -
不间断空格
1. 不间断空格(Non-breaking Space) HTML 中的常用字符实体是不间断空格( )。 浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体 2. 在HTML标签中，文本元素再多空格只显示一个空格 -
html45知识点梳理
1. 基本的几个标签 1. <!DOCTYPE html> 声明为 HTML5 文档 <html> 元素是 HTML 页面的根元素 <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。 <title> 元素描述了文档的标题 <body> 元素包含了可见的页面内容` 2. [速查列表](https://www.runoob.com/html/html-quicklist.html) 3. [HTML 参考手册- (HTML5 标准)](https://www.runoob.com/tags/html-reference.html) 4. https://www.runoob.com/html/html-url.html 1. 简介 标签 元素 html web浏览器 HTML 网页结构 HTML版本 中文编码 2. HTML 编辑器推荐 3. HTML 元素 4. HTML 属性 5. HTML 注释 6. HTML 文本格式化 7. HTML 链接 8. 头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。 9. HTML 样式- CSS基础介绍 10. ## HTML 图像 11. HTML 表格 12. HTML 列表 13. ## HTML 表单和输入 14. HTML 框架 15. ## HTML 字符实体 16. HTML5 浏览器支持 17. ## HTML5 新元素 18. HTML5 Canvas 19. HTML5 内联 SVG 20. ## HTML5 拖放（Drag 和 Drop） 21. HTML5 Geolocation（地理定位） 22. HTML5 Video(视频) 23. HTML5 Audio(音频) 24. ## HTML5 新的 Input 类型 25. ## HTML5 表单元素 26. ## HTML5 表单属性 27. HTML5 语义元素 28. ## HTML5 Web 存储 29. ## HTML5 WebSocket