html-面试题

什么是 XHTML?

XHTML 是以 XML 格式编写的 HTML。

XHTML 指的是可扩展超文本标记语言

XHTML 与 HTML 4.01 几乎是相同的

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

XHTML 是以 XML 应用的方式定义的 HTML

XHTML 是 2001 年 1 月发布的 W3C 推荐标准

XHTML 得到所有主流浏览器的支持

html与xhtml的区别

XHTML DOCTYPE 是强制性的

XHTML 元素必须正确嵌套

XHTML 元素必须始终关闭

空元素必须包含关闭标签，单标签也应该用“/”来结束*5. XHTML 元素必须小写

XHTML 文档必须有一个根元素

属性名称必须是小写

属性值必须有引号

不允许属性简写

如何将 HTML 转换为 XHTML

添加一个 XHTML <!DOCTYPE> 到你的网页中

添加 xmlns 属性添加到每个页面的html元素中。

改变所有的元素为小写

关闭所有的空元素

修改所有的属性名称为小写

所有属性值添加引号

DOCTYPE有什么作用

告诉浏览器使用哪个版本的HTML规范来渲染文档

IE5.5 引入了文档模式的概念，而这个概念是通过使用文档类型（DOCTYPE）切换实现的。
声明位于 HTML 文档中的第一行，处于标签之前。告知浏览器的解析器用什么文档标准解析这个文档。
DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。告诉浏览器使用哪个版本的HTML规范来渲染文档

HTML5为什么只需要写 `<!DOCTYPE HTML>`

HTML5不基于SGML（Standard Generalized Markup Language 标准通用标记语言），因此不需要对DTD（DTD 文档类型定义）进行引用，但是需要DOCTYPE来规范浏览器行为。
HTML4.01基于SGML，所以需要引用DTD。才能告知浏览器文档所使用的文档类型

行级元素有哪些

 span a i label img input button textarea select 等

块级元素有哪些

div p ul li table h1 h2 h3 … h6 form 等

空(void)元素有那些

<br> <hr> <link> <meta>

常用浏览器有哪些，内核都是什么？

浏览器	内核
IE	Trident
火狐(firefox)	Gecko
chrome	Webkit
safari	Webkit
360，搜狗	极速模式用的Webkit的内核
360，搜狗	兼容模式用的Trident的内核

Trident( MSHTML )：IE MaxThon TT The World 360 搜狗浏览器

Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey

Presto：Opera7及以上(Opera内核原为：Presto，现为：Blink)

Webkit：Safari Chrome

介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
（1）渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
（2）JS引擎则：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

iframe框架有那些优缺点？

优点：

iframe能够原封不动的把嵌入的网页展现出来。

如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。

如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

缺点：

搜索引擎的爬虫程序无法解读这种页面

框架结构中出现各种滚动条

使用框架结构时，保证设置正确的导航链接。

iframe页面会增加服务器的http请求

简述一下你对HTML语义化的理解？

HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析

在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的

搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

语义化的主要目的：

用正确的标签做正确的事情。

语义化验证方法：

css裸奔--去掉css样式，然后看页面是否还具有很好的可读性。

语义化意义 / 优点：

让页面的内容结构化
利于浏览器解析和SEO搜索引擎优化。
提高代码的可维护和可重用性。

语义化内容：

标签语义化
图片语义化
表单语义化
表格语义化

请至少写出5个H5的新标签

<header>定义文档的页眉
<nav>定义导航链接的部分

<article>定义外部的内容，可以是一篇新的文章
<section>定义文档的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<aside>定义article以外的内容，aside的内容可用作文章的侧边栏

<figure>用于对元素进行组合，使用figcaption元素为元素组添加标题

<figcaption>定义figure元素的标题

<hgroup>用于对section或网页的标题进行组合，使用figcaption元素为元素添加标题

<time>定义日期或时间，或者两者。
<footer>定义section或文档的页脚

html5新特性

HTML5 是 HTML标准的最新演进版本,它是一个新的 HTML 语言版本包含了新的元素，属性和行为，同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。这套技术往往被称作 HTML5 和它的朋友们，通常简称为 HTML5

多媒体，用于媒介回放的 video 和 audio 元素

图像效果，用于绘画的 canvas 元素，svg元素等

离线 & 存储,对本地离线存储的更好的支持,local Store,Cookies等，本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失， sessionStorage的数据在浏览器关闭后自动删除

语义化特性,添加<header><header/><nav><nav>等标签

设备兼容特性，HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连

连接特性，更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能

性能与集成特性，HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作

表单控件，calendar,date,time,email,url等

新的技术webworker,websockt,Geolocation

移出的元素

纯表现的元素：basefont,big,center,font等

产生负面影响的元素：frame frameset等

ie8 7 6 支持通过document.createElemet 方法产生新的标签，可以利用这一特性让这些浏览器支持html5新标签

新增加了图像、位置、存储、多任务等功能。

新增元素：

canvas

用于媒介回放的video和audio元素

本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除

语意化更好的内容元素，比如 article footer header nav section

位置API：Geolocation

拖放API：drag、drop

img标签的alt和title有什么异同

在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。

title与h1的区别、b与strong的区别、i与em的区别？

title属性没有明确意义，只表示标题；h1表示层次明确的标题，对页面信息的抓取也有很大的影响
strong标明重点内容，语气加强含义；b是无意义的视觉表示
em表示强调文本；i是斜体，是无意义的视觉表示
视觉样式标签：b i u s
语义样式标签：strong em ins del code

src与href属性的区别

写代码的时候就经常把这两个属性弄混淆，到底是href还是src。

href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系。

src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。

src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。

<script src="js.js"></script>当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js饭再底部而不是头部。

<link href="common.css" rel="stylesheet"/>当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import。

link和@import的区别

两者都是外部引用CSS的方式，但是存在一定的区别：

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

ink支持使用Javascript控制DOM去改变样式；而@import不支持。

如何让低版本的 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 标签的理解

都是块状元素

都有默认边距

兼容写法

用background上传背景

用padding设置样式

用list-style去掉默认

用margin设置样式

a标签属性有哪些

<a target="_blank">链接</a>

请写出table标签下面会包含哪些标签元素

表格由 <table> 标签来定义

属性有border cellpadding cellspacing

每个表格均有若干行（由 <tr> 标签定义）

每行被分割为若干单元格（由 <td> 标签定义）,字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

表格可以有表头<th> ，表头字会显得粗点

<caption>带有标题的表格</caption>

很多网站不常用table iframe这两个元素，知道原因吗？

因为浏览器页面渲染的时候是从上至下的，而table 和 iframe 这两种元素会改变这样渲染规则，他们是要等待自己元素内的内容加载完才整体渲染。用户体验会很不友好。

form标签属性

HTML 表单用于收集不同类型的用户输入。
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签
来设置:

表单标签（`<form>`）

在这里插入图片描述

输入标签（`<input>`）

常用属性type name value
文本域通过<input type="text"> 标签来设定
密码字段通过标签<input type="password"> 来定义
<input type="radio"> 标签定义了表单单选框选项
<input type="checkbox"> 定义了复选框
<input type="submit"> 定义了提交按钮.

seo优化

优化方案

H5新增标签和属性

新增标签和属性

标准模式与兼容模式各有什么区别？

标准模式的渲染方式和 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框架有那些优缺点？

优点：

iframe能够原封不动的把嵌入的网页展现出来。

如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。

如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

缺点：

搜索引擎的爬虫程序无法解读这种页面

框架结构中出现各种滚动条

使用框架结构时，保证设置正确的导航链接。

iframe页面会增加服务器的http请求

简述一下你对HTML语义化的理解？

HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析

在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的

搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

语义化的主要目的：

用正确的标签做正确的事情。

语义化验证方法：

css裸奔--去掉css样式，然后看页面是否还具有很好的可读性。

语义化意义 / 优点：

让页面的内容结构化

利于浏览器解析和SEO搜索引擎优化。

提高代码的可维护和可重用性。

语义化内容：

标签语义化

图片语义化

表单语义化

表格语义化

请至少写出5个H5的新标签

定义了8个新的语义化元素，都是块级元素,为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block

所有浏览器对无法识别的元素会作为行级元素自动处理

html5新增内容
拖放（Drag 和 drop）是 HTML5 标准的组成部分
SVG 是一种使用 XML 描述 2D 图形的语言，行级元素
HTML5

新表单元素
新的 Input 类型
新的表单属性

新的语义和结构元素

已移除的元素

MathML 元素

使用 getCurrentPosition() 方法来获得用户的位置

新多媒体元素
<header>定义文档的页眉
<nav>定义导航链接的部分
<article>定义外部的内容，可以是一篇新的文章
<section>定义文档的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside>定义article以外的内容，aside的内容可用作文章的侧边栏
<figure>用于对元素进行组合，使用figcaption元素为元素组添加标题
<figcaption>定义figure元素的标题
<hgroup>用于对section或网页的标题进行组合，使用figcaption元素为元素添加标题
<time>定义日期或时间，或者两者。
<footer>定义section或文档的页脚

html5新特性

HTML5 是 HTML标准的最新演进版本,它是一个新的 HTML 语言版本包含了新的元素，属性和行为，同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。这套技术往往被称作 HTML5 和它的朋友们，通常简称为 HTML5

多媒体，用于媒介回放的 video 和 audio 元素

图像效果，用于绘画的 canvas 元素，svg元素等

离线 & 存储,对本地离线存储的更好的支持,local Store,Cookies等，本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失， sessionStorage的数据在浏览器关闭后自动删除

语义化特性,添加<header><header/><nav><nav>等标签

设备兼容特性，HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连

连接特性，更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能

性能与集成特性，HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作

表单控件，calendar,date,time,email,url等

新的技术webworker,websockt,Geolocation

移出的元素

纯表现的元素：basefont,big,center,font等

产生负面影响的元素：frame frameset等

ie8 7 6 支持通过document.createElemet 方法产生新的标签，可以利用这一特性让这些浏览器支持html5新标签

新增加了图像、位置、存储、多任务等功能。

新增元素：

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声明的方式是区分重要因素
根据新增加的结构、功能来区分

Label 的作用是什么？是怎么用的？

label 标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
Number:

Canvas 和 SVG 有什么区别？

Canvas 是一种通过 JavaScript 来绘制 2D 图形的方法。Canvas 是逐像素来进行渲染的，因此当我们对 Canvas 进行缩放时，会出现锯齿或者失真的情况。

SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。我们可以为某个元素附加 JavaScript 事件监听函数。并且 SVG 保存的是图形的绘制方法，因此当 SVG 图形缩放时并不会失真。

常用的 meta 标签

元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。
H5标准声明，使用 HTML5 doctype，不区分大小写标准的 lang 属性写法声明文档使用的字符编码优先使用 IE 最新版本和 Chrome 页面描述页面关键词者网页作搜索引擎抓取为移动设备添加 viewport iOS 设备 begin 添加到主屏后的标题（iOS 6 新增）是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）设置苹果工具栏颜色启用360浏览器的极速模式(webkit) 避免IE使用兼容模式不让百度转码针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓微软的老式浏览器 uc强制竖屏 QQ强制竖屏 UC强制全屏 QQ强制全屏 UC应用模式 QQ应用模式 windows phone 点击无高光设置页面不缓存

disabled 和 readonly 的区别？

disabled 指当 input 元素加载时禁用此元素。input 内容不会随着表单提交。
readonly 规定输入字段为只读。input 内容会随着表单提交。
无论设置 readonly 还是 disabled，通过 js 脚本都能更改 input 的 value

页面跳转的几种方式

请写出table标签下面会包含哪些标签元素

表格由 <table> 标签来定义

属性有border cellpadding cellspacing

每个表格均有若干行（由 <tr> 标签定义）

每行被分割为若干单元格（由 <td> 标签定义）,字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

表格可以有表头<th> ，表头字会显得粗点

<caption>带有标题的表格</caption>

很多网站不常用table iframe这两个元素，知道原因吗？

因为浏览器页面渲染的时候是从上至下的，而table 和 iframe 这两种元素会改变这样渲染规则，他们是要等待自己元素内的内容加载完才整体渲染。用户体验会很不友好。

该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中，这样就能够提高开发效率消灭重复的工作；

不间断空格

不间断空格(Non-breaking Space)
HTML 中的常用字符实体是不间断空格( )。
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用字符实体

在HTML标签中，文本元素再多空格只显示一个空格

html45知识点梳理

基本的几个标签

<!DOCTYPE html> 声明为 HTML5 文档
    <html> 元素是 HTML 页面的根元素
        <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
            <title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容

速查列表

HTML 参考手册- (HTML5 标准)

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

posted @ 2021-12-25 20:14 有风吹过的地方丨阅读(68) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

有风吹过的地方丨

html-面试题

什么是 XHTML?

html与xhtml的区别

如何将 HTML 转换为 XHTML

DOCTYPE有什么作用

HTML5为什么只需要写 <!DOCTYPE HTML>

行级元素有哪些

块级元素有哪些

空(void)元素有那些

常用浏览器有哪些，内核都是什么？

介绍一下你对浏览器内核的理解？

iframe框架有那些优缺点？

简述一下你对HTML语义化的理解？

语义化的主要目的：

语义化验证方法：

语义化意义 / 优点：

语义化内容：

请至少写出5个H5的新标签

html5新特性

img标签的alt和title有什么异同

title与h1的区别、b与strong的区别、i与em的区别？

src与href属性的区别

link和@import的区别

如何让低版本的 IE 支持 HTML5新标签

对于ul 和 li 标签的理解

a标签属性有哪些

请写出table标签下面会包含哪些标签元素

很多网站不常用table iframe这两个元素，知道原因吗？

form标签属性

表单标签（<form>）

输入标签（<input>）

seo优化

H5新增标签和属性

标准模式与兼容模式各有什么区别？

SGML 、 HTML 、XML 和 XHTML 的区别？

DTD 介绍

常见行级元素有哪些

常见块级元素有哪些

常见行内块元素有哪些

三种元素的区别

空(void)元素有那些

表单

表格

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

iframe框架有那些优缺点？

简述一下你对HTML语义化的理解？

请至少写出5个H5的新标签

html5新特性

Label 的作用是什么？是怎么用的？

Canvas 和 SVG 有什么区别？

常用的 meta 标签

disabled 和 readonly 的区别？

页面跳转的几种方式

请写出table标签下面会包含哪些标签元素

很多网站不常用table iframe这两个元素，知道原因吗？

简述对HTML结构化的理解

不间断空格

html45知识点梳理

基本的几个标签

HTML 参考手册- (HTML5 标准)

https://www.runoob.com/html/html-url.html

HTML5为什么只需要写 `<!DOCTYPE HTML>`

表单标签（`<form>`）

输入标签（`<input>`）