Dreamweaver/Html常用标签（代码）含义汇总

本标签: 32

<html></html>,创建一个HTML文档;
<head></head>,设置文档标题和其它在网页中不显示的信息;
<title></title>,设置文档的标题;
<h1></h1>,最大的标题;
<pre></pre>,预先格式化文本;
<u></u>,下划线
<b></b>,黑体字;
<i></i>,斜体字;
<tt></tt>,打字机风格的字体;
<cite></cite>,引用,通常是斜体;
<em></em>,强调文本(通常是斜体加黑体);
<strong></strong>,加重文本(通常是斜体加黑体);
<font,size="",color=""></font>,设置字体大小从1到7,颜色使用名字或RGB的十六进制值;
<BASEFONT></BASEFONT>,基准字体标记;
<big></big>,字体加大;
<SMALL></SMALL>,字体缩小;
<STRIKE></STRIKE>,加删除线;
<CODE></CODE>,程式码;
<KBD></KBD>,键盘字;
<SAMP></SAMP>,范例;
<VAR></VAR>,变量;
<BLOCKQUOTE></BLOCKQUOTE>,向右缩排;
<DFN></DFN>,述语定义;
<ADDRESS></ADDRESS>,地址标记;
<sup></SUP>,上标字;
<SUB></SUB>,下标字;
<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)
<plaintext>...</plaintext>固定宽度字体(不执行标记符号);
<listing>...</listing>,固定宽度小字体;
<font,color=00ff00>...</font>字体颜色;
<font,size=1>...</font>最小字体;
<font,style,='font-size:100,px'>...</font>无限增大.

格式标签: 16

<p></p>,创建一个段落;
<p,align="">,将段落按左、中、右对齐;
<br>,换行,插入一个回车换行符;
<blockquote></blockquote>,从两边缩进文本;
<dl></dl>,列表标签,定义列表;
<dt>,定义列表标题;
<dd>,定义列表内容;

例:

<dl>

</dl>

<ol></ol>,列表标签,定义一个标有数字的列表;
<ul></ul>,列表标签,定义一个标有圆点的列表;
<li>,放在每个列表项之前; 放在<ol></ol>之间则每个列表项加上一个数字,放在<ul></ul>之间则每个列表项加上一个圆点;
<div,align=""></div>,分区标签,用来排版大块HTML段落,也用于格式化表;
<MENU>,选项清单;
<DIR>,目录清单;
<nobr></nobr>,强行不换行;
<hr,size='9',width='80%',color='ff0000'>水平线(设定宽度);
<center></center>,水平居中.

链接标签: 7

<a,href="URL"></a>,创建超文本链接;
<a,href="mailtEMAIL">
</a>,创建自动发送电子邮件的链接;
<a,name="name"></a>,创建位于文档内部的书签;
<a,href="#name"></a>,创建指向位于文档内部书签的链接;
<BASE>,文档中不能被该站点辨识的其它所有链接源的URL;
<LINK>,定义一个链接和源之间的相互关系;

链接标签注解:

target="...",决定链接源在什么地方显示(用户自定义的名字,_blank,_parent,_self,_top);

rel="...",发送链接的类型;

rev="...",保存链接的类型;

accesskey="...",指定该元素的热键;

shape="...",允许我们使用已定义的形状定义客户端的图形镜像(default,rect,circle,poly);

coord="...",使用像素或者长度百分比来定义形状的尺寸;

tabindex="...",使用定义过的tabindex元素设置在各个元素之间的焦点获取顺序(使用tab键使元素获得焦点).

表格标签: 21

<table></table>,创建一个表格;
<tr></tr>,表格中的每一行;
<td></td>,表格中一行中的每一个格子;
<th></th>,设置表格头:通常是黑体居中文字;
<table,cellspacing="">,设置表格格子之间空间的大小;
<table,border="">,设置边框的宽度;
<table,cellpadding="">,设置表格格子边框与其内部内容之间空间的大小;
<table,width="">,设置表格的宽度.用绝对像素值或总宽度的百分比;
<table,align="">,设置表格格子的水平对齐方式(left,center,right,justify);
<tr,align="">,设置表格格子的水平对齐方式(left,center,right,justify);
<tr,valign="">,设置表格格子的垂直对齐方式(baseline,bottom,middle,top);
<td,colspan="">,设置一个表格格子跨占的列数(缺省值为1);
<td,rowspan="">,设置一个表格格子跨占的行数(缺省值为1);
<td,nowrap>,禁止表格格子内的内容自动断行;
<CAPTION></CAPTION>,表格的标题;
<COLGROUP></COLGROUP>,定义多个列为一组列;
<TABLE></TABLE>,创建一个表格;
<THEAD></THEAD>,定义表格的页眉;
<COL>,定义一个列组中的列，以便对它们能够同时设置有关属性;
<TBODY></TBODY>,定义一个表格的实体;
<TFOOT></TFOOT>,定义一个表格的页脚;

表单标签: 18

<form></form>,创建表单;

action="...",接收数据的服务器的URL;

method="...",HTTP的方法(get,,post),其中get是被反对使用的;

enctype="...",指定MIME(Internet媒体类型);

onsubmit="...",当提交表单时发生的内部事件;

noreset="...",在重新设置表单时发生的内部事件;

target="...",决定把内容显示在什么地方(_blank,_parent,_self,_top)

<select,multiple,name="name",size=""></select>,创建滚动菜单,size设置在需要滚动前可以看到的表单项数目;
<option>,设置每个表单项的内容;
<select,name="name"></select>,创建下拉菜单;
<textarea,name="name",cols=40,rows=8></textarea>,创建一个文本框区域,列的数目设置宽度,行的数目设置高度;
<input,type="checkbox",name="name">,创建一个复选框,文字在标签后面;
<input,type="radio",name="name",value="">,创建一个单选框,文字在标志后面;
<input,type=text,name="foo",size=20>,创建一个单行文本输入区域,size设置以字符串的宽度;
<input,type="submit",value="name">,创建提交(submit)按钮;
<input,type="image",border=0,name="name",src="name.gif">,创建一个使用图象的提交(submit)按钮;
<input,type="reset">,创建重置(reset)按钮;
<BUTTON></BUTTON>,创建一个按钮;

disabled="...",把按钮的状态设置为不能;

name="...",按钮的控制名,value="...",按钮的值;

type="...",按钮的类型(button,,submit,,reset);

<FIELDSET></FIELDSET>,把相互关联的控件组合成一组;
<ISINDEX>,提示用户输入;
<LABEL></LABEL>,为一个控件提供标签;
<LEGEND></LEGEND>,为FIELDSET元素指定一标题;
<SELECT></SELECT>,为用户做选择创建各个选项;
<TEXTAREA></TEXTAREA>,创建一个允许用户多行输入的区域.

表单标签注解:

type="...",用于输入控件的类型(text,password,checkbox,radio,submit,reset,file,hidden,image,button);

name="...",控件的控制名(要求是除了submit和reset之外的任何名字);

value="...",控件的初始值;

checked="...",把一个单选钮设置为选中的状态;

disabled="...",把控件的状态设置为不能使用;

readonly="...",只对输入密码的文本框使用;

size="...",表示以像素为单位的除了文本框和密码框控件之外的其它控件的宽度,它是用来指定字符的数目;

src="...",一个图像控件的URL;

maxlength="...",指定可以输入的最多的字符数目;

alt="...",另外一种文本描述;

usemap="...",到客户端图形镜像的URL;

align="...",被反对.控制对齐方式(left,,center,,right,,justify);

tabindex="...",通过定义的tabindex值确定在不同元素之间获得焦点的顺序;

onfocus="...",当元素获得焦点时发生的事件;

onblur="...",当元素失去焦点时发生的事件;

onselect="...",当元素被选中时发生的事件;

onchang="...",当元素状态被改变时发生的事件;

accept="...",允许上载的文件类型.

帧标签(框架标签): 27

<frameset></frameset>,放在一个帧文档的<body>标签之前,也可以嵌在其他帧文档中;
<frameset,rows="value,value">,定义一个帧内的行数,可用像素值或高度百分比;
<frameset,cols="value,value">,定义一个帧内的列数,可用像素值或宽度百分比;
<frame>,定义一个帧内的单一窗或窗区域;
<noframes></noframes>,定义在不支持帧的浏览器中显示什么提示;
<frame,src="URL">,规定帧内显示的HTML文档;
<frame,name="name">,命名帧或区域以便别的帧可以指向它;
<frame,marginwidth="">,定义帧左右边缘的空白大小,必须大于等于1;
<frame,marginheight="">,定义帧上下边缘的空白大小,必须大于等于1;
<frame,scrolling="">,设置帧是否有滚动栏,其值可以是"yes","no",或"auto";
<frame,noresize>,禁止用户调整一个帧的大小;
<IFRAME></IFRAME>,创建一个内联的帧;

scr="...",定义在帧中显示的内容的来源;

frameborder="...",定义帧之间的边界(0或1);

align="...",被反对,控制对齐方式(left,,center,,right,,justify);

height="...",帧的高度,width="..."帧的宽度;

<marquee>...</marquee>,普通卷动;
<marquee,behavior=slide>...</marquee>,滑动;
<marquee,behavior=scroll>...</marquee>,预设卷动;
<marquee,behavior=alternate>...</marquee>,来回卷动;
<marquee,direction=down>...</marquee>,向下卷动;
<marquee,direction=up>...</marquee>,向上卷动;
<marquee,direction=right></marquee>,向右卷动;
<marquee,direction='left'></marquee>,向左卷动;
<marquee,loop=2>...</marquee>,卷动次数;
<marquee,width=180>...</marquee>,设定宽度;
<marquee,height=30>...</marquee>,设定高度;
<marquee,bgcolor=FF0000>...</marquee>,设定背景颜色;
<marquee,scrollamount=30>...</marquee>,设定卷动距离;
<marquee,scrolldelay=300>...</marquee>,设定卷动时间;
<img,src="">,插入图片,参数有:width="宽",alt="说明文字",height="高",boder="边框".

文档整体属性标签: 10

<body,bgcolor="">,设置背景颜色.使用名字或RGB的十六进制值;
<body,background="">,设置背景图片;
<body,bgsound="">,设置背景音乐;
<body,bgproperties="fixed">,固定背景图片(IE适用);
<body,text="">,设置文本颜色.使用名字或RGB的十六进制值;
<body,link="">,设置链接颜色.使用名,字或RGB的十六进制值;
<body,vlink="">,设置已使用的链接的颜色.使用名字或RGB的十六进制值;
<body,alink="">,设置正在被击中的链接的颜色.使用名字或RGB的十六进制值;
<body,topmargin="">,设置页面的上边距;
<body,leftmargin="">,设置页面的左边距.

架是将一个页面划分为若干个窗口, 每一个窗口都是独立;

要实现框架必须使用框架型的DTD;

框架就像一个窗户是由窗格和玻璃组成;

框架中不能有body及body子标记;

框架是由框架集(frameset)和框架页(frame)组成;

格式：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<frameset>
<frame />
<frame />
</frameset>
</html>

框架标签:

<frameset></frameset> 放在一个框架文档的<body>标签之前, 也可以嵌在其他框架文档中;

框架中不能有body及body子标记, 框架是由框架集(frameset)和框架页(frame)组成;

<frameset rows="value,value"> 定义一个框架内的行数, 可用像素值或高度百分比;

<frameset cols="value,value"> 定义一个框架内的列数, 可用像素值或宽度百分比;

frameborder 框架边框显示属性

该属性用于指定框架周围是否显示边框, 取值有1(显示边框, 默认值)和0(不显示边框)。

framespacing 该属性用于指定框架之间的间隔, 以像素为单位。

如果不设置该属性，则框架之间没有间隔。

border 指定边框宽度属性

该属性用于指定边框的宽度, 只有在frameborder属性为1时有效。

bordercolor 指定边框颜色

<noframes></noframes> 定义在不支持框架的浏览器中显示什么提示;

<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.html"/>
<frame src="frame_b.html"/>
<frame src="frame_c.html"/>
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
</frameset>
</html>

<frame> 定义一个框架内的单一窗或窗区域;

<frame src="url"> 规定框架内显示的html文档;

<frame name="name"> 命名框架或区域以便别的框架可以指向它;

<frame marginwidth=""> 定义框架左右边缘的空白大小,必须大于等于1;

<frame marginheight=""> 定义框架上下边缘的空白大小,必须大于等于1;

<frame scrolling=""> 设置框架是否有滚动栏,其值可以是"yes","no",或"auto";

<frame noresize> 禁止用户调整一个框架的大小;其值只有一个"noresize"

<frame src="frame_a.htm" longdesc="w3school.txt" /> longdesc属性指向了带有框架内容长描述的页面：

src 定义在框架中显示的内容的来源;

frameborder 规定是否显示框架周围的边框。(0或1);

align 控制对齐方式(left、right、middle、top、bottom);

height 框架的高度,

width 框架的宽度;

marginheight 定义 iframe 的顶部和底部的边距。

marginwidth 定义 iframe 的左侧和右侧的边距。

scrolling 规定是否在 iframe 中显示滚动条(yes、no、auto)。

name 规定 iframe 的名称。

bordercolor 指定边框颜色

<p>Your browser does not support iframes.</p>

</iframe>

关于框架集<frameset></frameset>中属性cols rows分割方法理解

<frameset cols="40%,2*,*"> 将窗口分为40%，40%，20%

<frameset cols="100,200,*"> 将窗口分为100像素，200像素和剩下的700像素

<frameset cols="100,*,*"> 　　将100像素以外的窗口平均分配

<frameset cols="*,*,*"> 　　　将窗口分为三等份

<frameset rows="*,*,*"> 总共有三个按列排列的帧,每个帧占整个浏览器窗口的1/3

<frameset cols="40%,*,*"> 总共有三个按行排列的帧,第一个帧占整个浏览器窗口的40%,剩下的空间平均分配给另外两个帧

以上"*"表示剩余部分

总共有六个帧,先是在第一行中从左到右排列三个帧,然后在第二行中从左到右再排列三个帧,即两行三列,

所占空间依据rows和cols属性的值,其中200的单位是像素

属性汇总:

frameset(框架集)

rows 它是将框架集划分为上下型

cols 它是将框架划分为左右型

border 是用于设置框架的边框粗细

frameborder 是用于设置是否显示边框, 取值：yes|no或1|0

bordercolor 用于设置框架边框的颜色

frame(框架页)

noresize 是否可以调整小窗口的大小

name 用于设置小窗口的名称

src 小窗口的url

scroll 是否显示滚动条 yes|no|auto

实例: iframe满屏方案

、网络加载

DNS预加载

通过dns-prefetch属性可以让浏览器提前解析资源或接口对应的服务器IP地址，避免在请求中发起DNS解析请求，节省请求时间

资源预加载

利用preload，prefetch，preconnect属性我们可以在<head>内部声明式的书写资源获取请求，提前加载非首屏但又较重要的资源，避免在满足首屏优先加载的情况下，反而忽略了其他次重要资源的加载

使用CDN资源，并且注意http缓存头的设定

HTTP缓存包括强缓存（Cache-Control，Expire）和协议缓存（Last-modified, Etag）两种。其中，协议缓存资源每次都会向服务端发送请求来判断资源是否过期，未过期则返回304，在网络极其卡顿的情况下，这个304请求有可能堵塞整个页面的资源加载

对JS资源按照模块和首屏需求进行优先加载，不需要的模块按需加载

移动端的网络资源有限，为了尽快让用户看到有意义的首屏，我们需要尽可能的保持首屏需要加载的资源越小越好

内联首屏关键CSS

将首屏关键样式内联至页面中，保证最快速度看到带有基本样式的首屏，避免用户端出现较长时间的白屏时间

内联关键JS代码

内联关键代码也是为了让用户第一时间感受到页面已经加载成功，但是内联代码不能将所有代码都内联至HTML中，因为这些代码每次都会伴随HTML下载下来，加大HTML文件的体积，也无法让代码在不同的网页间提供复用的功能

检查服务端下发的资源是否使用GZIP压缩

GZIP对于文本资源（JS，CSS文件）有较高的压缩效率，通常可以减少70%的体积

避免资源的重定向

增大加载时间，用户体验较差

异步延迟加载第三方非关键代码

移动端网络资源有限，为了让这些不重要的代码不影响首屏渲染，可以延迟一小段时间再加载

合理的使用本地缓存，避免把不必要的数据全部放到COOKIE当中

每一次AJAX请求都会将当前域名中的所有COOKIE值传递给服务端

使用service worker，增加页面的离线体验和页面的加载体验

页面发送请求时，会先经过SW的脚本，这样可以让我们通过编程的方式来制定我们需要缓存的文件，同时，缓存在service worker中的文件，可以让用户离线访问

在条件允许的情况下，可以使用HTTP2.0协议

HTTP2.0协议可以提升网络链路的复用性，提升资源加载效率

二、HTML

注重标签的语义化，保持用最简洁的标签完成所需的功能

标签的语义化提高代码的可维护性，在页面加载CSS失败时也不至于很难看。同时，需要保持标签最小化，无意义的标签可以利用伪类表示

CSS放到head中，JS到body尾部，JS,CSS都需要放在head中时，JS放在前面

CSS会阻塞页面的渲染，不阻塞DOM的解析；
JS会阻塞DOM的解析，但是，浏览器会预先下载资源；
浏览器在遇到script标签时会触发页面渲染，如果这时CSS尚未加载完成，页面将会等待CSS加载完成后在执行

HTML代码压缩，去除注释、空白符

减少网络传输的文件大小

尽量避免使用iframe

iframe 内资源的下载进程会阻塞父页面静态资源的下载与 CSS 及 HTML DOM 的解析

三、CSS

压缩CSS代码，排除重复的CSS样式

减少网络传输的文件大小

根据组件打包CSS文件

按需加载，减少网络传输的文件大小

避免使用CSS的@import语法

可能阻塞页面的加载

使用Sass、Stylus、Less等预编译语言时，编码CSS嵌套不超过3层

提高解析css的效率

使用autoprefixer给CSS代码自动增加前缀

自动帮助我们添加浏览器头，避免意想不到的浏览器兼容性问题

尽量少使用css通配符，特别是多层嵌套的末尾使用通配符

CSS的解析过程是从右往左逆向匹配，使用CSS通配符会增加解析的计算量

不要滥用高消耗的样式

box-shadow、border-radius、filter这些属性绘制前都需要浏览器进行大量的计算

四、动画

简单动画尽量只使用transform、opacity、transition等属性完成

width、height、top、left、right、bottom、margin等属性的变更都会触发页面的重排，在移动端环境中频繁的重排会导致动画卡顿

较复杂动画可以使用css帧动画

在移动端兼容性好、性能好、更具有可操控性

js动画不要使用setTimeout、setInterval，使用requestAnimationFrame

setTimeout和setInterval在动画执行存在性能问题，且无法准确的控制帧数

对将要使用动画的部分，开启GPU硬件加速（注意不要滥用）

对开启GPU硬件加速的标签，浏览器将把它提升到一个单独的图层，并通过GPU进行预处理

使用will-change属性（注意不要滥用）

will-change的作用告诉浏览器哪些属性将要变化，让他可以提前做好准备

五、JavaScript

JS代码压缩，代码分模块加载

减少代码大小，根据页面需求按需加载资源，最下化用户需要加载的资源大小加快页面展示的速度

处理长列表或者大量DOM元素时，不要绑定太多的事件监听函数

节省内存和减少监听事件的注册

利用throttle和debounce函数去处理频发触发，但是不需要频发执行的函数，例如scroll,touchmove

避免频繁的无效的操作，避免页面的卡顿

利用setTimeout代替setInterval

setInterval可能存在指令堆积的问题，导致页面卡顿

尽量避免大批量的重排重绘

页面的重排重绘很耗性能，尤其是重排

六、图片

使用工具压缩图片

移动端网络条件有限，图片越大加载时间越长，合理使用工具压缩图片，可以兼顾图片质量和图片大小

使用较高压缩比格式的文件webp

减少文件传输的大小，避免出现图片尺寸使用不当的问题，小icon用大图

使用雪碧图

减少http请求数，不过当我们的http协议升级至1.1，2.0之后，雪碧图减少http请求数的效果并不明显

图片懒加载

避免用户提前加载过多无用的资源，浪费用户流量

根据不同的屏幕像素比加载不同尺寸的图片

在较大像素比的屏幕下加载小尺寸的图片，图片会模糊；在较小像素比的屏幕下加载大尺寸的图片，会浪费用户流量和cdn流量

小于2KB的图片可以尝试使用base64格式去替换

将图片转换成base64格式可以减少http请求数量，但是，不能对较大尺寸的图片使用base64格式，因为base64算法会提升三分之一的文件大小

七、字体

压缩字库大小，避免加载过多无用的资源，推荐工具字蛛

我们只需要页面需要的字体文件即可，不需要浪费流量加载用户不需要的资源

优化字体的展示策略

使用font-display属性可以避免在字体加载过程中，不显示文字的问题

当特殊文字量较少且内容固定时，可以尝试使用图片代替

快速完美的还原界面

八、其他

对于整个页面资源需求量较大时，可以使用骨架屏或者增加loading效果

加强用户体验，加速首屏体验，通过有意义的ui让用户提前得到反馈

lighthouse性能跑分

Google推出的网页性能跑分工具，可以较全面的了解网站的性能

通过Chrome的控制面板code coverage部分，找到未使用代码的比例

帮助我们快速找到首屏未使用的代码

通过构建工具中使用Scope Hoisting

这里以webpack举例，使用Scope Hoisting后打包的文件，文件体积更小，代码运行时创建的函数作用域更少，提升JS的启动速度

参考

web-performance-made-easy
rail模型讲解
Yahoo性能优化
Google PageSpeed Insights规则
Google IO web性能优化笔记
14 Rules for Faster-Loading Web Sites
2018前端性能优化清单
2017前端性能优化清单
美团感官性能优化
前端性能优化相关
PWA简介
css性能优化

关于我

我是一个莫得感情的代码搬运工，每周会更新1至2篇前端相关的文章，有兴趣的老铁可以扫描下面的二维码关注或者直接微信搜索前端补习班关注。

精通前端很难，让我们来一起补补课吧！

在线咨询

上一篇：用HTML制作一个简单页面（代码阅读练习）-零基础自学网页制作
下一篇：0基础的python爬虫

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商