整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Dreamweaver/Html常用标签(代码)含义汇总

本标签: 32

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

格式标签: 16

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

例:

<dl>

<dt>标题1</dt>

<dd>内容11</dd>

<dd>内容12</dd>

<dt>标题2</dt>

<dd>内容21</dd>

<dd>内容22</dd>

</dl>

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

链接标签: 7

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

链接标签注解:

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

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

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

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

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

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

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

表格标签: 21

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

表单标签: 18

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

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

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

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

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

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

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

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

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

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

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

  1. <FIELDSET></FIELDSET>,把相互关联的控件组合成一组;
  2. <ISINDEX>,提示用户输入;
  3. <LABEL></LABEL>,为一个控件提供标签;
  4. <LEGEND></LEGEND>,为FIELDSET元素指定一标题;
  5. <SELECT></SELECT>,为用户做选择创建各个选项;
  6. <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

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

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

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

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

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

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

文档整体属性标签: 10

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

联网给我们带来方便的同时,也时常让我们感到困惑。随便搜搜就出一大堆结果,然而总是有大量的重复和错误。小妖发出的内容,都是自己实测过的,有问题请留言。

前方出现一头牛!

没错,这是一个 gif,但这个 gif 也是从小妖的 Demo 页上录下来的,闻到了原滋原味的 CSS3 的味道了吗?Demo 见:

http://xngeer.frostbelt.cn/itemcss/frame-animation.html

那如何用 CSS3 实现这个帧动画呢?

  • 准备素材

头儿经常说前端应该能做出炫酷的东西,但巧媳妇难为无米之炊,没有好的设计和素材,前端有时候还是只能徒唤奈何呀。本Demo素材来源于网络

  • 怎么让它动起来呢?

有同学已经想到了,把这张图片设为背景,不断修改 background-position 就可以了!对,其实就是这个道理

  • 那有没有更优雅,而且不涉及 JS 的实现方式呢?

我们今天说的 CSS3 帧动画就是用来解决这个问题,上代码:

定义一个简单的 keyframes , 修改 background-position-x,从 0 到 -590(图片宽度)

animation: ox1 1s steps(6, start) 0ms infinite normal backwards

分别说一下各属性的涵义:

animation-name: ox1; /* 使用 keyframes ox1 */

animation-duration: 1s; /* 动画持续时间 1s */

animation-timing-function: steps(6, start); /* 动画函数,分6步执行,每一帧显示帧结束时的状态 */

animation-delay: 0ms; /* 延迟多长时间后开始执行动画 */

animation-iteration-count: infinite; /* 动画执行无限次 */

animation-direction: normal; /* 是否应该轮流反向播放动画 normal/alternate */

animation-fill-mode: backwards; /* 会在向元素应用动画样式时迅速应用动画的初始帧 */

不必计算每一帧具体的偏移,没有 JS!

这里提到了 animation,帧动画是 animation 的一种使用,想了解更多 animation 相关属性请查看以下 Demo 的源码:

http://xngeer.frostbelt.cn/itemcss/animation.html

有了 CSS3 这把利剑,相信你会走得更远~

TML 是网络的基石。 了解这种标记语言的一些鲜为人知但有用的部分可以让您的前端工作更轻松。 HTML 属性提供了多种功能,可以帮助您充分利用 HTML。 它定义了 HTML 元素的附加特征或属性。在本文中,小编将带您了解 11 个您可能还没有听说过的 HTML 属性。

1. multiple

此属性允许用户输入多个值。 您可以将 multiple 属性与 <input> 标签和 <select> 标签一起使用。 此布尔属性仅对电子邮件或文件输入类型有效。

在 <select> 标签中使用 multiple 属性

<label for="language">Select languages:</label>
<select name="language" id="language" multiple>
<option value="C++">C++</option>
<option value="Python">Python</option>
<option value="JavaScript">JavaScript</option>
<option value="Java">Java</option>
</select>

使用 multiple 属性进行文件输入

通过对文件输入使用 multiple 属性,您可以选择多个文件(通过按住 Shift 或 Ctrl 键)。

<input type="file" multiple>

使用 multiple 属性进行电子邮件输入

通过对电子邮件输入使用 multiple 属性,您可以输入以逗号分隔的电子邮件地址列表。 将从列表中的每个地址中删除所有空格。

<input type="email" multiple>

2.contenteditable

您可以使用 contenteditable 属性使网页上的 HTML 内容可编辑。 这是一个全局属性,即它对所有 HTML 元素都是通用的。

<p contenteditable="true">
在这里您可以编辑您想输入的内容
</p>

3.spellcheck

spellcheck 属性指定是否可以检查元素的拼写错误。 您可以对 <textarea> 元素中的文本、可编辑元素中的文本或输入元素中的文本(密码除外)中的文本进行拼写检查。

<p contenteditable="true" spellcheck="true">
在这里输入您想拼写检查的内容
</p>

4.download

您可以使用下载属性下载资源。 download 属性告诉浏览器下载指定的 URL 而不是导航到它。 您可以将下载属性与 <a> 标签和 <area> 标签一起使用。

注意:下载属性仅适用于同源 URL。 它遵循同源策略的规则。

<a href="xyz.png" download="myImage">下载</a>

5. accept

<input> 标签的 accept 属性指定用户可以上传的文件类型。 您可以指定一个或多个文件类型的逗号分隔列表作为其值。

接受音频文件

<input type="file" id="audioFile" accept="audio/*">

接受视频文件

<input type="file" id="videoFile" accept="video/*">

接受图像文件

<input type="file" id="imageFile" accept="image/*">

接受 Microsoft Word 文件

<input type="file" id="docpicker"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">

接受 PNG 或 JPEG 文件

<input type="file" id="imageFile" accept=".png, .jpg, .jpeg">

接受 PDF 文件

<input type="file" id="pdfFile" accept=".pdf">

6. translate

translate 属性告诉浏览器在页面本地化时该元素是否应该被翻译。 它可以有 2 个值:“是”或“否”。

<p translate="no">
输入您想翻译或者不需要翻译的内容
</p>

7.poster

poster 属性用于在视频下载或用户播放视频之前显示图像。

注意:如果您不指定任何内容,则在第一帧可用之前不会显示任何内容。 当第一帧可用时,它显示为海报帧。

<video controls
src="http://www.示例.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
poster="posterImage.png">
</video>

8.inputmode

inputmode 属性指示浏览器在用户选择任何 input 或 textarea 元素时显示哪个键盘。 此属性接受各种值:

None

<input type="text" inputmode="none" />

Numeric

<input type="text" inputmode="numeric" />

Tel

<input type="text" inputmode="tel" />

Decimal

<input type="text" inputmode="decimal" />

Email

<input type="text" inputmode="email" />

URL

<input type="text" inputmode="url" />

Search

<input type="text" inputmode="search" />

9. pattern

<input> 元素的模式属性允许您指定一个正则表达式,元素的值将根据该正则表达式进行验证。 您可以将模式属性与多种输入类型一起使用,例如文本、日期、搜索、URL、电话、电子邮件和密码。

<form>
<input name="username" id="username" pattern="[A-Za-z0-9]+">
</form>

10.autocomplete

autocomplete 属性指定浏览器是否应根据用户输入自动完成输入。 您可以将 autocomplete 属性用于多种输入类型,例如文本、搜索、URL、电话、电子邮件、密码、日期选择器、范围和颜色。 您可以将此属性与 <input> 元素或 <form> 元素一起使用。

<input name="credit-card-number" id="credit-card-number" autocomplete="off">

11.autofocus

autofocus 属性是一个布尔属性,指示元素应该专注于页面加载。 您可以将此属性与 <button>、<input>、<keygen>、<select> 或 <textarea> 元素一起使用。

在 input 元素中使用 autofocus 属性

<input type="text" autofocus>

在 select 元素中使用 autofocus 属性

select name="languages" id="languages">
<option value="C++">
C++
</option>
<option value="Python">
Python
</option>
<option value="JavaScript">
JavaScript
</option>
<option value="Java">
Java
</option>
</select>

在 textarea 元素中使用 autofocus 属性

<textarea autofocus>
输入您想要显示的内容
</textarea>

使用 JavaScript One-Liners 让您的生活更轻松

单行代码有助于以更少的代码实现更多的目标。 您可以像专业人士一样使用多个 JavaScript 单行代码来编写代码。

只需一行代码,您就可以对数组进行混合、求数组的平均值、检查数组是否为空、生成随机十六进制颜色、生成随机 UUID 等等。


上一篇:认识 HTML5
下一篇:初识Flutter中的Layer