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="">,设置页面的左边距.

马逊产品上传时描述中常用的HTML代码

亚马逊描述中支持的常用HTML代码：

1. 换行 <br>

第一行内容<br>

第二行内容<br>

第三行内容

2. 加粗 <b> </b>

<b>需要加粗的内容</b>

3. 文字大小

<p style="font-size:10px">需要设置文字大小的内容</p>

（通过改变10px来改变字体大小，如：14px就比10px字体显示大）

4. 文字颜色

<p style="color:#fff000">需要设置文字颜色的内容</p>

具体颜色的HTML代码请参照这个链接： http://www.w3school.com.cn/tags/html_ref_colornames.asp

（通过改变替换#fff000代码来改变文字颜色)

5.文字斜体

<p style="font-style:italic">需要设置文字斜体的内容</p>

6. 文字下划线代码

<p style="text-decoration:underline">需要设置文字下划线的内容</p>

7. 文字删除线代码

<p style="text-decoration:line-through">需要设置文字删除线的内容</p>

题

CSS 类或 ID 命名时单词间连接通常有这几种写法：

驼峰式： solutionTitle、solutionDetail
用横杠连接： solution-title、solution-detail
下划线连接： solution_title、solution_detail

应该采用哪种写法呢？选择的时候是出于个人习惯还是有别的考虑？
看了下豆瓣，美团，淘宝的源码，都是采用 solution_title 的写法。

我的回答

首先定个性，这是个纯粹的“代码风格”问题。

什么是“代码风格”问题？有一些特征：

技术规范不会硬性规定。虽然规范有时可能会提供指导性的建议，或者有时会有行业大牛出来鼓吹最佳实践。
个性化十分明显。也就是萝卜青菜各有所爱、公说公有理婆说婆有理，永无定论。

扯完之后说一下我自己的习惯：

以前用下划线

主要原因是在编辑器中双击可以选中；另外自己觉得下划线好看（纯个人喜好）。除此以外可能还有一点“小白式谨慎”（避免与 CSS 属性名/值弄混、避免与减号弄混），或者我的启蒙教材就是使用下划线的。

现在主要使用连字符

后来逐渐接手或参与了一些别人的项目，接触过各种代码风格。在老外的一些项目中接触到大量的使用连字符的命名，看多了感觉也不难看。在编辑器中也可以通过“双击并拖动”来选中，所以就逐渐过渡到了连字符。

在特殊场合用驼峰式

驼峰式写法输入不方便、引入了大小写的复杂度、可读性无优势，因此很少在日常开发中使用。而正因为如此，我目前主要在一些框架级的类名中使用，以便于日常开发的命名习惯区分开，避免无意中污染框架级样式的可能性。

关于标准

有网友提到：

HTML 和 CSS 语法中，无论是属性名和值，用到连接符的地方都是 - 没有 _。Follow 标准有益无害。

这种说法我并不赞同。因为“follow 标准”一说没有根据，而且逻辑不清。

我们很容易理清一件事——给元素的 class 和 id 命名，本质上是给 HTML 标签的 class 与 id 属性写入值。HTML 的标签属性值的合法性与 HTML 标签属性名、CSS 属性的名/值的命名习惯有关系吗？

说到“标准”，其实我也完全不知道 class 和 id 的合法值是什么、不知道下划线是否合法，甚至记不太清楚 class 与 id 的值是否是大小写敏感的。为此，我查阅了现行规范 HTML 4.01 和 CSS 2.1 的部分章节。CSS 2.1 是这样说的：

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); ...

也就是说，用下划线来连接多个单词作为 class 或 id 的值，是合法的。

（贺师俊老师提示道：CSS 1 和 2 的规范在这一点上有错误，没有把下划线加进去；直到 CSS 2.1 中，这个问题才被修正。）

其它观点

关于可读性

贺师俊老师（@hax）提出了一个容易被忽略但实际上很重要的因素：

- 比 _ 有一点好的地方是 _ 有时候会难以分辨，就好像空格一样。而 class 里面有没有空格是挺重要的。比较以下三种用法：

<div class="a_very_very_very_long long_class short_class">
<div class="a-very-very-very-long long-class short-class">
<div class="aVeryVeryVeryLong longClass shortClass">

关于编辑器

很多同学提到了不同的单词连接方式对选择操作的影响，比如双击可以直接选中用 _ 连接的多个单词，但用 - 连接的多个单词则无法全部选中，选区会在 - 处终止，即只能选中一个单词。

Sublime Text

对此，一丝同学（@yisibl）在微博做了科普：

CSS 命名用连字符 - 不能双击选中的问题一直是一个伪命题，这是编辑器的问题，因为这个而选用下划线 _ 实在有些牵强。在 Sublime Text 2 的全局配置文件 Preferences.sublime-settings 中找到 word_separators 字段，删掉其中的 - 即可双击选中一连串的多个单词。

Vim

也有一位潘魏增同学提供了 Vim 的配置方法：

如果使用 vim，可以设置 set iskeyword+=-，这样就可以匹配选中以 - 连接的关键词，search 和 mark 的时候会比较方便。

（抱歉，这里只是纯转发，暂时无法验证。）

UltraEdit

我在 Windows 下一般用 UltraEdit 干活，它有一种操作叫作 Ctrl + 双击。而且我们可以设置此操作的分界符，很灵活。

鼠标选择

如果你的编辑器不支持上述配置或操作，要想一次性选中以 - 连接的多个单词，其实也是有解决方案的：双击的最后一击先不要松开，再左右拖动就可以以单词为单位扩张选区。（这种选择方式几乎适用于所有编辑器，而且 Windows 和 Mac 通吃。）

实际上我并不建议像前面几种方法那样在编辑器中取消 - 的分界符身份，而是建议使用这种“双击 + 拖动”的方法来选择任意数量的单词。因为，某些时候你只想选中 one-two-three 中的 one-two 或 two-three 或单个单词，那么这种方法显然更自由更精确——想选少选少，想选多选多。

--- Bonus Track ---

如果你在使用 WebStorm（或它的兄弟 IDE），就不要用鼠标点来点去了，不优雅。

你可以把光标移到某个单词上，用 Ctrl + W（在 Mac 下是 Cmd + W）快捷键就可以选中当前单词；更神奇的是，这个快捷可以连续使用，可以不断把选区扩张到更大的语法单元：单词 → 一串单词 → 整个字符串（或语句） → 对象（或函数作用域） → …… → 整个文件。

（唯一不便的是，这个快捷键在其它程序中是关闭当前窗口的操作，容易混淆，建议在 IDE 中给这个操作分配其它的快捷键。）

希望本文能帮助到您！

点赞+转发，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）

关注｛我｝，享受文章首发体验！

每周重点攻克一个前端技术难点。更多精彩前端内容私信我回复“教程”

原文链接：https://github.com/cssmagic/blog/issues/42

在线咨询

上一篇：java将html转为pdf
下一篇：vue3-渲染机制

您的项目需求

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

整合营销服务商