整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
eb前端技术由html、css和 javascript三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。
HTML 篇
1、BOM
BOM 是 Browser Object Model
的缩写，即浏览器对象模型，当一个浏览器页面初始化时，会在内存创建一个全局的对象，用以描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型，即BOM。BOM的核心对象就是window，window
对象也是BOM的顶级对象，其中包含了浏览器的 6个核心模块：
document -
即文档对象，渲染引擎在解析HTML代码时，会为每一个元素生成对应的DOM对象，由于元素之间有层级关系，因此整个HTML代码解析完以后，会生成一个由不同节点组成的树形结构，俗称DOM树，document
用于描述DOM树的状态和属性，并提供了很多操作DOM的API。
frames - HTML 子框架，即在浏览器里嵌入另一个窗口，父框架和子框架拥有独立的作用域和上下文。
history - 以栈(FIFO)的形式保存着页面被访问的历史记录，页面前进即入栈，页面返回即出栈。
location - 提供了当前窗口中加载的文档相关信息以及一些导航功能。
navigator - 用来描述浏览器本身，包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息。
screen - 提供了浏览器显示屏幕的相关属性，比如显示屏幕的宽度和高度，可用宽度和高度。
2、DOM 系统
DOM 是 Document Object Model 的缩写，即 文档对象模型，是所有浏览器公共遵守的标准，DOM
将HTML和XML文档映射成一个由不同节点组成的树型结构，俗称DOM树。其核心对象是document，用于描述DOM树的状态和属性，并提供对应的DOM操作API。随着历史的发展，DOM
被划分为1级、2级、3级，共3个级别：
1级DOM - 在1998年10月份成为W3C的提议，由DOM核心与DOM
HTML两个模块组成。DOM核心能映射以XML为基础的文档结构，允许获取和操作文档的任意部分。DOM
HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。
2级DOM - 鉴于1级DOM仅以映射文档结构为目标，DOM
2级面向更为宽广。通过对原有DOM的扩展，2级DOM通过对象接口增加了对鼠标和用户界面事件（DHTML长期支持鼠标与用户界面事件）、范围、遍历（重复执行DOM文档）和层叠样式表（CSS）的支持。同时也对DOM
1的核心进行了扩展，从而可支持XML命名空间。
3级DOM -
通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展，DOM3包含一个名为“DOM载入与保存”的新模块，DOM核心扩展后可支持XML1.0的所有内容，包括XML
Infoset、 XPath、和XML Base。
浏览器对不同级别DOM的支持情况如下所示：
从图中可以看出，移动端常用的 webkit 内核浏览器目前只支持DOM2，而不支持DOM3 。
新手福利获取方式：
1.在你手机的右上角有【关注】选项，或点击我的头像，点击关注！（关注我）
2.关注后，手机客户端点击我的主页面，右上角有私信，请私信发我：html
其实作为一个开发者，有一个学习的氛围跟一个交流圈子特别重要这里请私信我“html”不管你是小白还是大牛欢迎入住大家一起交流成长。小编会在里面不定期分享干货源码，包括我精心整理的一份零基础教程。欢迎各位感兴趣的的小伙伴。
学习思路：
3、事件系统
事件是用户与页面交互的基础，到目前为止，DOM事件从PC端的 鼠标事件(mouse) 发展到了 移动端的 触摸事件(touch) 和
手势事件(guesture)，touch事件描述了手指在屏幕操作的每一个细节，guesture 则是描述多手指操作时更为复杂的情况，总结如下：
第一根手指放下，触发 touchstart，除此之外什么都不会发生
手指滑动时，触发touchmove
第二根手指放下，触发 gesturestart
触发第二根手指的 touchstart
立即触发 gesturechange
任意手指移动，持续触发 gesturechange
第二根手指弹起时，触发 gestureend，以后将不会再触发 gesturechange
触发第二根手指的 touchend
触发touchstart (多根手指在屏幕上，提起一根，会刷新一次全局touch) _ ___
弹起第一根手指，触发 touchend
更多关于手势事件的介绍请参考：
gesture事件处理复杂手势
DOM2.0 模型将事件处理流程分为三个阶段，即 事件捕获阶段 、 事件处理阶段 、 事件冒泡阶段， 如图所示：
事件捕获 ：当用户触发点击事件后，顶层对象document 就会发出一个事件流，从最外层的DOM节点向目标元素节点传递，最终到达目标元素。
事件处理 ：当到达目标元素之后，执行目标元素绑定的处理函数。如果没有绑定监听函数，则不做任何处理。
事件冒泡 ：事件流从目标元素开始，向最外层DOM节点传递，途中如果有节点绑定了事件处理函数，这些函数就会被执行。
利用事件冒泡原理可以实现 事件委托
，所谓事件委托，就是在父元素上添加事件监听器，用以监听和处理子元素的事件，避免重复为子元素绑定相同的事件。当目标元素的事件被触发以后，这个事件就从目标元素开始，向最外层元素传递，最终冒泡到父元素上，父元素再通过event.target
获取到这个目标元素，这样做的好处是，父元素只需绑定一个事件监听，就可以对所有子元素的事件进行处理了，从而减少了不必要的事件绑定，对页面性能有一定的提升。
4、HTML解析过程
浏览器加载 html 文件以后，渲染引擎会从上往下，一步步来解析HTML标签，大致过程如下：
用户输入网址，浏览器向服务器发出请求，服务器返回html文件；
渲染引擎开始解析 html 标签，并将标签转化为DOM节点，生成 DOM树；
如果head 标签中引用了外部css文件，则发出css文件请求，服务器返回该文件，该过程会阻塞后面的解析；
如果引用了外部 js 文件，则发出 js 文件请求，服务器返回后立即执行该脚本，这个过程也会阻塞html的解析；
引擎开始解析 body 里面的内容，如果标签里引用了css 样式，就需要解析刚才下载好的css文件，然后用css来设置标签的样式属性，并生成渲染树；
如果 body 中的 img 标签引用了图片资源，则立即向服务器发出请求，此时引擎不会等待图片下载完毕，而是继续解析后面的标签；
服务器返回图片文件，由于图片需要占用一定的空间，会影响到后面元素的排版，因此引擎需要重新渲染这部分内容；
如果此时 js 脚本中运行了 style.display="none"，布局被改变，引擎也需要重新渲染这部分代码；
直到 html 结束标签为止，页面解析完毕。
5、重绘 和 回流
当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。比如上面的img文件加载完成后就会引起回流，每个页面至少需要一次回流，就是在页面第一次加载的时候。
当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如 background-color。则就叫称为重绘。
从上面可以看出，回流必将引起重绘，而重绘不一定会引起回流。会引起重绘和回流的操作如下：
添加、删除元素(回流+重绘)
隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)
移动元素，比如改变top,left的值，或者移动元素到另外一个父元素中。(重绘+回流)
对style的操作(对不同的属性操作，影响不一样)
还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)
另外，transform
操作不会引起重绘和回流，是一种高效率的渲染。这是因为transform属于合成属性，对合成属性进行transition/animation
动画时将会创建一个合成层，这使得动画元素在一个独立的层中进行渲染，当元素的内容没有发生改变，就没必要进行重绘，浏览器会通过重新复合来创建动画帧。
6、本地存储
本地存储最原始的方式就是 cookie,cookie 是存放在本地浏览器的一段文本，数据以键值对的形式保存，可以设置过期时间。 但是 cookie
不适合大量数据的存储，因为每请求一次页面，cookie 都会发送给服务器，这使得 cookie
速度很慢而且效率也不高。因此cookie的大小被限制为4k左右(不同浏览器可能不同,分HOST)，如下所示：
Firefox和Safari允许cookie多达4097个字节，包括名(name)、值(value) 和 等号。
Opera允许cookie多达4096个字节，包括：名(name)、值(value) 和 等号。
Internet Explorer允许cookie多达4095个字节，包括：名(name)、值(value) 和 等号。
在所有浏览器中，任何cookie大小超过限制都被忽略，且永远不会被设置。
html5 提供了两种在客户端存储数据的新方法：localStorage 和 sessionStorage, 它们都是以key/value
的形式来存储数据，前者是永久存储，后者的存储期限仅限于浏览器会话(session)，即当浏览器窗口关闭后，sessionStorage中的数据被清除。
localStorage的存储空间大约5M左右(不同浏览器可能不同，分
HOST)，这个相当于一个5M大小的前端数据库，相比于cookie，可以节约带宽，但localStorage在浏览器隐私模式下是不可读取的，当存储数据超过了localStorage
的存储空间后会抛出异常。
此外，H5还提供了逆天的websql和
indexedDB，允许前端以关系型数据库的方式来存储本地数据，相对来说，这个功能目前应用的场景比较少，此处不作介绍。
7、浏览器缓存机制
浏览器缓存机制是指通过 HTTP 协议头里的 Cache-Control (或 Expires) 和 Last-Modified (或 Etag)
等字段来控制文件缓存的机制。
Cache-Control 用于控制文件在本地缓存有效时长。最常见的，比如服务器回包：Cache-Control:max-age=600
表示文件在本地应该缓存，且有效时长是600秒 (从发出请求算起)。在接下来600秒内，如果有请求这个资源，浏览器不会发出 HTTP
请求，而是直接使用本地缓存的文件。
Last-Modified 是标识文件在服务器上的最新更新时间。下次请求时，如果文件缓存过期，浏览器通过 If-Modified-Since
字段带上这个时间，发送给服务器，由服务器比较时间戳来判断文件是否有修改。如果没有修改，服务器返回304告诉浏览器继续使用缓存；如果有修改，则返回200，同时返回最新的文件。
Cache-Control 通常与 Last-Modified 一起使用。一个用于控制缓存有效时间，一个在缓存失效后，向服务查询是否有更新。
Cache-Control 还有一个同功能的字段：Expires。Expires 的值一个绝对的时间点，如：Expires: Thu, 10 Nov
2015 08:45:11 GMT，表示在这个时间点之前，缓存都是有效的。
Expires 是 HTTP1.0 标准中的字段，Cache-Control 是 HTTP1.1
标准中新加的字段，功能一样，都是控制缓存的有效时间。当这两个字段同时出现时，Cache-Control 是高优化级的。
Etag 也是和 Last-Modified 一样，对文件进行标识的字段。不同的是，Etag
的取值是一个对文件进行标识的特征字串。在向服务器查询文件是否有更新时，浏览器通过 If-None-Match
字段把特征字串发送给服务器，由服务器和文件最新特征字串进行匹配，来判断文件是否有更新。没有更新回包304，有更新回包200。Etag 和
Last-Modified 可根据需求使用一个或两个同时使用。两个同时使用时，只要满足基中一个条件，就认为文件没有更新。
另外有两种特殊的情况：
手动刷新页面(F5)，浏览器会直接认为缓存已经过期(可能缓存还没有过期)，在请求中加上字段：Cache-Control:max-age=0，发包向服务器查询是否有文件是否有更新。
强制刷新页面(Ctrl+F5)，浏览器会直接忽略本地的缓存(有缓存也会认为本地没有缓存)，在请求中加上字段：Cache-Control:no-cache
(或 Pragma:no-cache)，发包向服务重新拉取文件。
8、History
用户访问网页的历史记录通常会被保存在一个类似于栈的对象中，即history对象，点击返回就出栈，跳下一页就入栈。 它提供了以下方法来操作页面的前进和后退：
window.history.back( ) 返回到上一个页面
window.history.forward( ) 进入到下一个页面
window.history.go( [delta] ) 跳转到指定页面
HTML5 对History Api 进行了增强，新增了两个Api 和一个事件，分别是pushState、replaceState 和
onpopstate：
pushState是往history对象里添加一个新的历史记录，即压栈。
replaceState 是替换history对象中的当前历史记录。
当点击浏览器后退按钮或 js调用history.back 都会触发 onpopstate 事件。
与其类似的还有一个事件：onhashchange，onhashchange是老API，浏览器支持度高，本来是用来监听hash变化的，但可以被利用来做客户端前进和后退事件的监听，而onpopstate是专门用来监听浏览器前进后退的，不仅可以支持hash，非hash的同源
url 也支持。
9、HTML5离线缓存
HTML5离线缓存又叫Application
Cache，是从浏览器的缓存中分出来的一块缓存区，如果要在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。manifest 文件可分为三个部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
离线缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
10、Web语义化 和 SEO
Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。
SEO是指在了解搜索引擎自然排名机制的基础之上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中关键词的自然排名，获得更多的展现量，吸引更多目标客户点击访问网站，从而达到互联网营销及品牌建设的目标。
搜索引擎通过爬虫技术获取的页面就是由一堆 html 标签组成的代码，人可以通过可视化的方式来判断页面上哪些内容是重点，而机器做不到。
但搜索引擎会根据标签的含义来判断内容的权重，因此，在合适的位置使用恰当的标签，使整个页面的语义明确，结构清晰，搜索引擎才能正确识别页面中的重要内容，并予以较高的权值。比如h1~h6这几个标签在SEO中的权值非常高，用它们作页面的标题就是一个简单的SEO优化。
年以来，随着疫情方面的数据逐渐增多，一些互联网公司也纷纷发布一些可视化的数据产品服务，让用户可以实时并直观了解最新情况，可谓一个便民利器。而本文，则通过丁香医生、以及腾讯新闻推出的“疫情实时动态”可视化服务，总结分享其中运用到的一些常见的数据可视化经验。
阅读指南：
（1）受众人群：初级产品经理
（2）阅读收获
首先，需要先简单澄清下数据可视化的基本概念。数据可视化，实质上是把一些概要信息（数据、关键内容），并结合动静态的图像视频等形式进行展示，从而清晰传递核心信息。较为注重视觉层面的触达。
所以我们需要在数据之中挖掘一些重要的价值信息，并以一个可观的方式呈现。而“重要”的定义是十分明显的，核心数据、用户感兴趣、有决策意义，都可称之为重要。
根据马斯洛五层次需求理论，那么数据可视化在其中属于什么层次的需求？
受疫情影响，生命安全成了最重要的社会需求。那么满足大众对这方面的广泛需求，推出这样的数据可视化产品是十分有必要，满足用户对疫情情况、资讯信息、医疗信息等方面的获取，从而保障自己基本的需求。
（1）脉络
初始，丁香医生率先推出一个H5的可视化页面，汇总披露病例数据。随后，一些大厂也开始陆续推出，包括头条、腾讯等等。
而为什么大家都纷纷推出这样的数据服务，从战略层来说：一是做好企业责任，满足用户的知情需求；其二是满足自己的平台用户，并吸引流量，这都是拉新、促活的宝贵方式。
而展示的信息，主要包括每日的新增、累计病例数，各地区的病例分布，以及疫情新闻、医学知识等方面的内容。
（2）价值
而接下来，也将依据用户体验五要素中的范围层、框架层、表现层，分别对这个疫情数据可视化的产品服务进行分析。
范围层的定义是决定这样的产品服务需要提供什么范围内的功能服务，什么是不做的。以及要做的数据指标，哪些是关键的，哪些是次要的。所以我们可以罗列一下这样数据可视化产品，基于用户的需求是需要准备什么样的数据指标。
上图摘自国家卫健委某日的全日数据，在制作可视化的时候，需要考虑数据源的出处以及能提供什么样的指标及口径。
从中可以看出，大致可以划分两类关键数据：一个是病例的数据，一个是辅助性的数据。我们需要从中挑出其适合展示同时也是用户需要关心的数据。
通常做这种可视化产品，总结性的数据是十分关键的。而基于用户的关注点，每日新增、累计，就是其中的关键。
另外，基于“时间”和“地区”，代表了数据的“属性”。而属性则反应了这个数据可以以什么样的特点进行展现。而“时间”和“地区”是，最适合以数据趋势和数据分布的两种主要数据可视化表达形式。
从下表可以看出，3家平台的数据指标在展示上是比较一致的，核心指标都一一罗列展示。
其中在时间的“小时”级别，以及“解除医学观察”等细分指标都不做展示，我认为主要出于以下目的：
框架层的定义是指根据要做的功能范围，应该确定如何正确布局和设计，可以简单理解为PPT的排版一样，以什么样的方式来排列展现这些元素。
首先，我们需要先看看上文提及到的几类数据指标，重新分类一下,并标记相应的优先级。
显然按照合理的布局应该是：
大致的布局是已经清晰了，那么接下来就需要基于数据类型采用合理的可视化展示形式。
前面也提过，由于是时间和地区下的各类数据，基于这样的属性，是可以做趋势、地域、列表等分布的展示方式。支持趋势的图形则主要为折线、柱状图，支持地域分布类型则为地图，而列表则为常规的类报表方式等。
其中，由于时间跨度较长和地区明细较多，如果使用柱状图，则会显得横轴较长，所以在有限的手机屏幕尺寸下，是不适宜展示的。
（Echarts部分地图特性截图）
所以在这里，更倾向于采用粗一些的2D省级行政地图形式，开发周期短，且满足最基本需求。
（1）汇总数据
相同点：
差异点：
评价：正常应遵循“标题+具体数值+较昨日变化”这样的排列比较合适，上下顺序先从标题了解该指标的含义，居中放大具体数值，突出关键信息，其次显示较昨日变化对比，感知变化情况。
（2）各指标趋势
相同点：
差异点：
（3）国内各省市分布
相同点：统一以常规列表分布展示国内各省市的疫情数据情况，并集中以地区、确诊、死亡、治愈等字段。
差异点：
评价：
（4）海外各国分布
展示方式如国内疫情一致，这里不多说。而唯一不同的是，丁香医生在全球各国的基础做了“洲”单位的分类。这样的好处是，分类显得更有层次性，了解某个范围内的地区更有显著性。
表现层所关注的，是页面各个元素组件的形状、色彩和大小比例搭配。同时数据可视化十分重视图形色彩的表达，一个好的视觉设计，能够为数据的信息传递起到十分重要的作用。
从上图可以看出，3家平台都展示了4个关键指标“确诊”、“疑似”、“死亡”和“治愈”，以及在色彩选择上，尽管有具体色值的差别，但是理念是都较为接近的。
地图分布通常是以颜色深浅代表数据的“密集程度”，那么就要确定2个关键的地方，1个是色系，另外1个是合理的刻度比例。前者根据数据内涵确定合适的色系进行表达，后者是做色系的层次区分。
以上就是此次疫情数据下，在可视化应用上的一些体验总结，3家都遵循了一些基本原则，同时也有各自的一些风格。而数据可视化的应用需要兼顾不同的因素，达到最佳效果。
一个理想的可视化设计流程，需要经历“数据指标的范围筛选、页面的布局抉择、可视化的视觉设计“等关键步骤。
3家平台地址：
丁香医生：https://ncov.dxy.cn/ncovh5/view/pneumonia
：https://i.snssdk.com/ugc/hotboard_fe/hot_list/template/hot_list/forum_tab.html?activeWidget=1&city_code=440300&city_name=%E6%B7%B1%E5%9C%B3&tt_from=weixin&utm_source=weixin&utm_medium=toutiao_ios&utm_campaign=client_share&wxshare_count=1
腾讯新闻：https://news.qq.com/zt2020/page/feiyan.htm?devid=EB886059-83CA-4F1F-AB3A-B64FCD87D7F7&qimei=eb886059-83ca-4f1f-ab3a-b64fcd87d7f7
作者：A.D，数据产品一枚；公众号：吾某
本文由 @A.D. 原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议。
TML是一种用来描述网页的标记性语言。学习HTML可能并不难，主要是要记一些HTML标签和标签代表的含义。下面PHP程序员雷雪松根据使用的情况，整理出平时常用的HTML标签。
HTML基础之HTML常用标签-PHP程序员雷雪松的博客
<!--<!DOCTYPE> 是HTML5声明，<!DOCTYPE> 必须是 HTML 文档的第一行，位于 <html> 标签之前。<!DOCTYPE>是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。-->
<!DOCTYPE html>
<html>
<!-- head标签是所有头部元素的容器。head标签内的元素可包含脚本、样式表和提供页面的元信息等等。以下标签都可以添加到 head 部分：title、base、link、meta、script 以及style。头部的内容不会显示在浏览器的。 -->
<head>
<!-- 设置字符集，如果字符集不对，可能导致乱码。一般建议utf-8国际编码 -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />
<!-- SEO相关标签，title定义文档的标题,百度建议一般不要超过32位,meta定义页面关键词和页面的描述-->
<title>网页标题</title>
<meta name="keywords" content="PHP程序员,技术博客,个人博客,雷雪松" />
<meta name="description" content="PHP程序员，雷雪松（Raykaeso）的博客是一个优秀的个人技术博客。PHP程序员雷雪松的博客记录了Linux学习，PHP开发与编程，Web前端开发，MySQL学习和教程，NoSQL数据库教程以及个人的人生经历和观点。" />
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="main.js"></script>
</head>
<!-- 正文部分，所有在浏览器上可见的内容必须写在body标签内部 -->
<body>
</body>
</html>
a、布局标签
div标签定义文档中的分区或节（division/section），可以把文档分割为独立的、不同的部分，主要用于布局。
aside标签的内容可用作文章的侧栏，<span style="color: #ff0000;">html5新增标签</span>。
header标签定义页面的头部（介绍信息），<span style="color: #ff0000;">html5新增标签</span>。
section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，<span style="color: #ff0000;">html5新增标签</span>。
footer 标签定义文档或节的页脚，通常包含文档的作者、版权信息、使用条款链接、联系信息等等，<span style="color: #ff0000;">html5新增标签</span>。
article标签规定文章独立的其他内容，比如：标题、内容、评论，<span style="color: #ff0000;">html5新增标签</span>。
b、文本标签
h1-h6标签可定义标题
p标签定义段落
b/strong标签加粗
em标签来表示强调的文本，斜体
strong标签表示重要文本
u标签下划线
s标签删除线
br标签表示回车换行
hr标签表示水平线
span标签被用来组合文档中的行内元素。
blockquote标签表示块引用
pre标签可定义预格式化的文本，保持原有格式的一种标签。
sub标签下标，
sup>标签上标
表示一个空格
©表示版权符
<表示<
>表示>
c、a标签定义超链接，指定页面间的跳转。链接可以指向外部链接或者页面内部id锚点，可以在当前页面打开，新开窗口。
<a href="指向的链接地址或者网址#ID名" target="_blank|_self|_top|_parent">百度</a>
d、多媒体标签
img标签主要在网页中插入图像，可以定义图片替换文本、显示宽度和高度、是否带边框，建议等比例设置，否则图像会变形。
<img src="图片地址" alt="替换文本，图片打不开的时候显示" width="图片宽度" height="高度" border="0" />
audio标签定义声音，比如音乐或其他音频流。<span style="color: #ff0000;">html5新增标签</span>。
<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>
video标签定义视频，比如电影片段或其他视频流。<span style="color: #ff0000;">html5新增标签</span>。
<video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>
e、序列化标签
ul和li无序列表标签
<ul>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ul>
ol和li有序列表标签，可以使用type属性规定有序列表符号的类型。1 按数字有序排列，为默认值，（1、2、3、4）；a 按小写字母有序排列，（a、b、c、d）；A 按字母大写有序排列，（A、B、C、D）。i 按小写罗马字母有序，（i, ii, iii, iv）；I 按小写罗马字母有序，（I, II, III, IV）。
<ol>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ol>
dl标签定义了定义列表（definition list），dl标签用于结合 dt（定义列表中的项目）和 dd（描述列表中的项目）。
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
</dl>
f、表格标签
table标签和tr标签，th标签和td标签，合并单元格。
<table width="100%" height="193" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#000000" background="">
<tr>
<th>标题</th>
<th>标题</th>
</tr>
<tr>
<!-- 合并横向单元格 -->
<td colspan="2" nowrap="nowrap">&nbsp;</td>
</tr>
<tr>
<td></td>
<!-- 合并纵向单元格 -->
<td rowspan="2"> </td>
</tr>
<tr>
<td height="16"> </td>
</tr>
</table>
g、表单标签
form标签定义提交方式、提交地址、表单字符集以及如何对其进行编码，需要提交的表单一定要放在form标签内。
<form id="form1" name="form1" method="post|get" enctype="multipart/form-data" action="提交到的地址"></form>
input标签用于搜集用户信息
<input name="userName" type="text" maxlength="5" size="100" value="asdfasdfasfd" />
密码，输入的字符会被掩码（显示为星号或原点）
<input name="pwd" type="password" maxlength="5" size="100" value="" />
文件类型的表单，上传文件时，form表单一定要设置为enctype="multipart/form-data"
<input type="file" name="file" />
隐藏表单
<input type="hidden" name="country" value="China" />
提交
<input type="submit" name="Submit" value="提交" disabled="disabled" />
重置
<input type="reset" name="Submit2" value="重置" />
radio单选
<input name="sex" type="radio" value="1" />男
<input name="sex" type="radio" value="2" checked="checked" />女
checkbox多选
<input name="skill" type="checkbox" value="1" checked="checked" />PHP
<input name="skill" type="checkbox" value="2" />前端
<input name="skill" type="checkbox" value="2" />数据库
<span style="color: #ff0000;">注：checked="checked"可以简写成checked</span>
label标签为input元素定义标注，如果您点击label元素文本，就会触发此input控件。
textarea标签，设置文本区内的可见行数和宽度
<textarea name="content" cols="30" rows="10">大段文本输入框</textarea>
button标签定义一个按钮
提交按钮
<button type="submit" value="提交">提交</button>
重置按钮
<button type="reset" value="重置">重置</button>
select标签和option标签下拉列表
单选菜单列表框
<select name="user">
<option value="1">ray</option>
<option value="2" selected="selected">raykaeso</option>
</select>
多选列表下拉框，shift加鼠标单击，可以连续选择多个选择，CTRL+鼠标点击，可以点击多个。
<select name="user" size="10" multiple="multiple">
<option value="1">雷雪松</option>
<option value="2" selected="selected">ray</option>
<option value="3">raykaeso</option>
</select>
注:selected="selected"可简写成selected，表示选中
a、HTML标签和属性是不区分大小写的，建议HTML标签和属性都小写，属性值必须用双引号包围。
b、HTML标签都是以开始标签起始，以结束标签终止。大部分HTML标签都是成对出现的，称为双标签，比如：p标签、div标签，也有的HTML标签在开始标签中结束的标签，称为单标签，比如：hr标签、br标签。大多数 HTML 元素可拥有属性，文本内容都是写在开始标签与结束标签之间。
c、HTML标签之间尽量缩进与换行，每行代码不要过长，方便阅读和维护。
d、HTML标签使用必须符合标签嵌套规则。禁止a标签嵌套a标签，p标签嵌套div标签。
e、建议不使用HTML已经废弃的或者不赞成使用的标签，少使用table布局、iframe框架嵌套以及flash播放器。
来源：PHP程序员雷雪松的博客 -HTML基础之HTML常用标签（http://www.leixuesong.cn/2045）
*请认真填写需求信息，我们会在24小时内与您取得联系。
