下载文档原格式
html标记的书写规则HTML（Hypertext Markup Language）是用于创建网页结构和内容的标记语言。
以下是HTML标记的书写规则：1. 标签使用小写字母：HTML标签应使用小写字母进行书写。
HTML是不区分大小写的，但为了代码的统一性和可读性，建议使用小写字母。
2. 使用封闭标签：大部分HTML标记都是成对出现的，即开始标签和结束标签。
开始标签用于表示元素的开头，而结束标签用于表示元素的结尾。
开始标签和结束标签之间包含的内容是元素的内容。
3. 属性使用引号：HTML标记可以包含属性，属性用于提供元素的附加信息。
属性的值应该使用引号包裹，常见的引号有单引号（'）和双引号（"）。
使用引号可以确保属性值正确地被解析，并提高代码的可读性。
4. 标签嵌套正确：HTML标记可以相互嵌套，但必须确保正确的嵌套顺序和层次结构。
嵌套深度应适度，过多的嵌套会使代码难以维护和理解。
5. 使用合适的标记：根据元素的语义和功能，选择合适的HTML标记。
HTML 提供了丰富的标记元素，如标题、段落、列表、链接等，使用适当的标记可以增强页面的可读性和可访问性。
6. 注释代码：在HTML代码中添加注释可以增加代码的可读性和复用性。
注释可以解释代码的用途、目的或特殊注意事项。
注释代码在浏览器中不会被解析和显示。
7. 避免使用过时的标记：HTML标记在不同的HTML版本中会有差异，一些标记已经过时或不推荐使用。
为了保持与最新的HTML标准兼容，尽量避免使用过时的标记。
综上所述，正确书写HTML标记是开发网页的基础。
遵循这些书写规则将帮助我们编写干净、可读和高效的HTML代码，提升网页质量和用户体验。
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。
它使用一系列标签来定义网页的结构和内容。
以下是一些常见的HTML标签及其用法：1. `<!DOCTYPE html>`：声明文档类型，告诉浏览器这是一个HTML5文档。
2. `<html>`：根元素，包含整个HTML文档的内容。
3. `<head>`：包含文档的元数据，如标题、字符集和样式表等。
4. `<title>`：定义文档的标题，显示在浏览器的标题栏或选项卡上。
5. `<body>`：包含可见的页面内容，如文本、图片、链接等。
6. `<h1>` 到`<h6>`：定义不同级别的标题，`<h1>`最高级别，`<h6>`最低级别。
7. `<p>`：定义段落。
8. `<a>`：定义超链接，用于链接到其他网页或同一网页的不同部分。
9. `<img>`：插入图像，可以通过src属性指定图像的URL。
10. `<ul>` 和`<ol>`：定义无序列表和有序列表。
11. `<li>`：定义列表项。
12. `<div>`：定义文档中的一个区块，通常用于布局或组合其他HTML元素。
13. `<span>`：定义文档中的一个内联区块，用于对文本进行分组或应用样式。
14. `<table>`：定义表格，通过`<tr>`（行）、`<th>`（表头单元格）和`<td>`（表格单元格）等标签进行嵌套。
15. `<form>`：定义表单，用于收集用户输入的数据。
Dreamweaver是Adobe公司推出的一款网页制作软件，它广泛应用于网页设计和开发领域。
在Dreamweaver中，表格标记是网页设计中常见的一种元素，它可以用于展示和组织网页上的各种信息。
在这篇文章中，我将介绍在Dreamweaver中使用表格标记的基本结构，希望能帮助读者更好地掌握这一技巧。
在Dreamweaver中，表格标记的基本结构包括表格标签、行标签和单元格标签。
下面我将逐一介绍它们的用法：1. 表格标签在HTML中，表格使用`<table>`标签来定义，其中包括表格的基本属性和整体样式。
在Dreamweaver中，可以通过插入菜单或者直接手动输入`<table>`来插入一个表格标签。
表格标签中可以设置一些基本属性，如边框宽度、背景颜色等。
也可以设置表格的尺寸和对齐方式等属性。
2. 行标签在表格中，使用`<tr>`标签来定义每一行，`<tr>`标签必须包含在`<table>`标签内部。
通过插入行标签，可以在表格中添加新的行，每一行中可以包含若干个单元格。
在Dreamweaver中，可以通过插入菜单或者直接手动输入`<tr>`来插入一个行标签。
3. 单元格标签在每一行中，使用`<td>`标签来定义每个单元格，`<td>`标签也必须包含在`<tr>`标签内部。
通过插入单元格标签，可以在表格中添加新的单元格，并在其中填充文本、图片或者其他元素。
在Dreamweaver 中，可以通过插入菜单或者直接手动输入`<td>`来插入一个单元格标签。
在适当的情况下，也可以使用`<th>`标签来定义表格中的表头单元格，它和`<td>`标签的用法类似，但是会显示为加粗的文本，以示区分。
通过以上介绍，我们可以看到，在Dreamweaver中使用表格标记的基本结构是通过`<table>`标签定义整个表格，然后在其中添加`<tr>`标签和`<td>`标签来定义行和单元格。
html里table的用法HTML中的表格是一种常用的布局工具，它可以用于展示数据、组织信息、展示布局等。
在HTML中，可以使用`<table>`标签来创建表格，并使用其他的HTML 标签来控制表格的外观和行为。
下面我们将介绍如何使用`<table>`标签创建表格、设置表格属性、添加表头和表体、以及控制表格的行为等。
一、创建表格要创建一个表格，可以使用`<table>`标签来包围表格内容。
表格通常由行和列组成，每一行称为一个“行”，每一列称为一个“列”。
可以使用`<tr>`标签来创建行，使用`<td>`或`<th>`标签来创建列。
例如，以下是一个简单的表格示例：```html<table><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>张三</td><td>25</td><td>男</td></tr><tr><td>李四</td><td>30</td><td>女</td></tr></table>```上述代码创建了一个包含三列的表格，其中第一列是表头，第二和第三列是表格的行内容。
二、设置表格属性除了使用`<table>`标签外，还可以使用其他的HTML标签来设置表格的属性，例如边框宽度、单元格边距、单元格间距等。
可以使用`border`属性来设置表格的边框宽度，使用`cellpadding`和`cellspacing`属性来控制单元格的内边距和单元格之间的间距。
html表格的结构HTML表格是网页中常用的一种数据展示方式，通过合理的结构可以清晰地展示数据，并提高页面的可读性和美观性。
本文将介绍HTML表格的结构及相关标签的使用方法。
一、基本结构HTML表格由<table>标签包裹，并包含多个相关的标签来定义表格的各个部分，如表头、表体和表尾等。
1. <table>标签：定义一个表格。
2. <caption>标签：定义表格的标题，位于表格上方。
3. <thead>标签：定义表格的表头部分。
4. <tbody>标签：定义表格的表体部分。
5. <tfoot>标签：定义表格的表尾部分。
二、表头部分表头部分通常用于显示表格的列名，使用<th>标签来定义每一列的表头。
示例代码：```<table><thead><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead></table>```三、表体部分表体部分用于展示数据，使用<tr>标签定义每一行，使用<td>标签定义每一列的内容。
示例代码：```<table><thead><tr><th>姓名</th><th>年龄</th><th>性别</th> </tr></thead><tbody><tr><td>张三</td> <td>25</td> <td>男</td> </tr><tr><td>李四</td> <td>30</td> <td>女</td> </tr></tbody></table>```四、表尾部分表尾部分通常用于显示一些总结性的信息或其他附加内容，如合计数据等。
html所有标签及其作用<HTML>,表示该文件为HTML文件<HEAD>,包含文件的标题,使用的脚本,样式定义等<TITLE>---</TITLE>,包含文件的标题,标题出现在浏览器标题栏中</HEAD>,<HEAD>的结束标志<BODY>,放置浏览器中显示信息的所有标志和属性,其中容在浏览器中显示. </BODY>,<BODY>的结束标志</HTML>,<HTML>的结束标志其它主要标签,以下所有标志用在<BODY></BODY>中:<A,HREF="…"></A>,标志,"…"为的文件地址<IMG,SRC="…">,显示图片标志,"…"为图片的地址<BR>,换行标志<P>,分段标志<B></B>,采用黑体字<I></I>,采用斜体字<HR>,水平画线<TABLE></TABLE>,定义表格,HTML中重要的标志<TR></TR>,定义表格的行,用在<TABLE></TABLE>中<TD></TD>,定义表格的单元格,用在<TR></TR>中<FONT></FONT>,字体样式标志属性:属性是用来修饰标志的,属性放在开始标志.例:属性bgcolor="BLACK"表示背景色为黑色.引用属性的例子:<BODY,bgcolor="BLACK"></BODY>表示页面背景色为黑色;<TABLE,bgcolor="BLACK"></TABLE>表示表格背景色为黑色.常用属性:对齐属性,围属性:ALIGN=LEFT,左对齐(缺省值),WIDTH=象素值或百分比,对象宽度. ALIGN=CENTER,居中,HEIGHT=象素值或百分比,对象高度. ALIGN=RIGHT,右对齐.色彩属性:COLOR=#RRGGBB,前景色,参考色彩对照表.BGCOLOR=#RRGGBB,背景色.<center>表示绝对居中.<table></table>表格标识的开始和结束.属性:cellpadding=数值单位是像素,定义表元距cellspacing=数值单位是像素,定义表元间距border=数值单位是像素,定义表格边框宽度width=数值单位是像素或窗口百分比,定义表格宽度background=图片地址,定义表格背景图<tr></tr>表格中一个表格行的开始和结束;<td></td>表格中行一个单元格的开始和结束属性:Colspan="",单元格跨越多列;Rowspan="",单元格跨越多行;Width="";定义表格宽度Height="";定义表格高度Align="";对齐方式Valign="";Border="",边框宽度;Bgcolor="",背景色;Bordercolor="",边框颜色;Bordercolorlight="",边框明亮面的颜色;Bordercolordark="",边框暗淡面的颜色;Cellpadding="",容与边框的距离(默认为2);Cellspacing="",单元格间的距离(默认为2);<br>强制换行<font></font>文本标识的开始和结束属性:face=字体color=颜色<b></b>加粗文字标识的开始和结束属性:style=font-size:40pt;,用样式表方式控制字体大小,这里是40点<div></div>,分区标识的开始和结束属性:align=|center|left|right|水平对齐方式<marquee></marquee>动态标识的开始和结束,如标识放置贴图格式则可实现图片滚动属性:scrollamount=1~60,滚动速度direction=|left|right|up|down|,滚动方向scrolldelay=滚动延时,单位:毫秒<P>段落标识,空格符,<img>贴图标识属性:src=../../图片地址,贴图标识必备属性style=filter:Alpha(opacity=100,style=2);filter:样式表滤镜;Alpha:透明滤镜,opacity:不透明度100(0~100);style:样式2(0~3),rules="none"不显示框"<embed,src="…">多媒体文件标识属性:SRC="../../FILENAME",设定音乐文件的路径,文件类型除了可以播放.rm;.mp3;.wav等音频,还可播放.swf和.mov等视频.AUTOSTART=TRUE/FALSE,是否要音乐文件传送完就自动播放,TRUE是要,FALSE是不要,默认为FALSELOOP=,设定播放重复次数,LOOP=6表示重复6次,true或-1为无限循环,false为播放一次即停止.STARTIME="分:秒",设定乐曲的开始播放时间,如20秒后播放写为STARTIME=00:20VOLUME=0-100,设定音量的大小.如果没设定的话,就用系统的音量.WIDTH,HEIGHT,设定控制面板的大小,都设为0可隐藏播放器HIDDEN=TRUE,隐藏控制面板CONTROLS=CONSOLE/SMALLCONSOLE,设定控制面板的样子,<bgsound,src="…">,背景音乐标识,只能用于.wav和.mp3格式.属性:LOOP=,设定播放重复次数,LOOP=6表示重复6次,true或-1为无限循环,false为播放一次即停止.表单标签:<form></form>表格标识的开始和结束,表单的容都放在这里.下边的标签放在表单:<select>下拉选择框<option></option></select>属性:Multiple,多选<textarea></textarea>,大量文字输入的编辑块属性:Cols="",行;Rows="",列;<input,type="text">,文本框<input,type="password">,密码框<input,type="submit">,提交按扭<input,type="checkbox">,复选框<input,type="radio">,单选框<input,type="reset">,重置按扭<input,type="image">,图片按扭<input,type="hidden">,隐藏域<input,type="button">,按扭<input,type="file">,浏览文件公共属性:Name="";Value=""Size=""框架标签:<FRAMESET>...</FRAMESET>,定义框架.<FRAME>,放在框架标签,定义每个框架的容. 属性:Cols=""Rows=""Frameborder=""Framespacing=""src=""Scrolling="",滚动条(No,Yes);Noresize,框加大小不可变;Marginhight="",高度空余空间;Marginwidth="",宽度空余空间;Target="",目标框架.其他标签:<bgsound>,背景音乐;Src=""Loop="",循环次数;<embed>,媒体播放块;Src=""Loop="",循环次数;<marquee></marquee>,滚动部分;属性:Bgcolor=""Behavior,设置或获取文本如何在字幕中滚动.Direction="",滚动方向;Height=""Width=""Loop="",环次数;scrollAmount="",设置或获取介于每个字幕绘制序列之间的文本滚动像素数.scrollDelay="",设置或获取字幕滚动的速度.scrollHeight="",获取对象的滚动高度;scrollLeft="",设置或获取位于对象左边界和窗口中目前可见容的最左端之间的距离. scrollTop="",设置或获取位于对象最顶端和窗口中可见容的最顶端之间的距离.trueSpeed="",设置或获取字幕的位置是否使用scrollDelay和scrollAmount属性计算,已过的实际时间来自于时钟计时.<!--...-->,注释标记,在"<!--"与"-->"之间的容将不在浏览器中显示.--基本标签:<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>无限增大.格式标签:<p></p>,创建一个段落;<p,align="">,将段落按左、中、右对齐;<br>,换行,插入一个回车换行符;<blockquote></blockquote>,从两边缩进文本;<dl></dl>,列表标签,定义列表;<dt>,定义列表标题;<dd>,定义列表容;例:<dl><dt>标题1</dt><dd>容11</dd><dd>容12</dd><dt>标题2</dt><dd>容21</dd><dd>容22</dd></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>,水平居中.标签:<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键使元素获得焦点).表格标签:<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>,定义一个表格的页脚;表单标签:<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="...",允许上载的文件类型.帧标签(框架标签):<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="边框".文档整体属性标签:<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 文件<HEAD> 开头提供文件整体资讯<TITLE> 标题定义文件标题，将显示于浏览顶端<BODY> 本文设计文件格式及文所在排版标记<!--注解--> 说明标记为文件加上说明，但不被显示<P> 段落标记为字、画、表格等之间留一空白行<BR> 换行标记令字、画、表格等显示于下一行<HR> 水平线插入一条水平线<CENTER> 居中令字、画、表格等显示于中间反对<PRE> 预设格式令文件按照原始码的排列方式显示<DIV> 区隔标记设定字、画、表格等的摆放位置<NOBR> 不折行令文字不因太长而绕行<WBR> 建议折行预设折行部位字体标记<STRONG> 加重语气产生字体加粗Bold 的效果<B> 粗体标记产生字体加粗的效果<EM> 强调标记字体出现斜体效果<I> 斜体标记字体出现斜体效果<TT> 打字字体Courier字体，字母宽度相同<U> 加上底线加上底线反对<H1> 一级标题标记变粗变大加宽，程度与级数反比<H2> 二级标题标记将字体变粗变大加宽<H3> 三级标题标记将字体变粗变大加宽<H4> 四级标题标记将字体变粗变大加宽<H5> 五级标题标记将字体变粗变大加宽<H6> 六级标题标记将字体变粗变大加宽<FONT> 字形标记设定字形、大小、颜色反对<BASEFONT> 基准字形标记设定所有字形、大小、颜色反对<BIG> 字体加大令字体稍为加大<SMALL> 字体缩细令字体稍为缩细<STRIKE> 画线删除为字体加一删除线反对<CODE> 程式码字体稍为加宽如<TT><KBD> 键盘字字体稍为加宽，单一空白<SAMP> 例字体稍为加宽如<TT><VAR> 变数斜体效果<CITE> 传记引述斜体效果<BLOCKQUOTE> 引述文字区块缩排字体<DFN> 述语定义斜体效果<ADDRESS> 地址标记斜体效果<SUB> 下标字下标字<SUP> 上标字指数（平方、立方等）清单标记<OL> 顺序清单清单项目将以数字、字母顺序排列<UL> 无序清单清单项目将以圆点排列<LI> 清单项目每一标记标示一项清单项目<MENU> 选单清单清单项目将以圆点排列，如<UL> 反对<DIR> 目录清单清单项目将以圆点排列，如<UL> 反对<DL> 定义清单清单分两层出现<DT> 定义条目标示该项定义的标题<DD> 定义容标示定义容表格标记<TABLE> 表格标记设定该表格的各项参数<CAPTION> 表格标题做成一打通列以填入表格标题<TR> 表格列设定该表格的列<TD> 表格栏设定该表格的栏<TH> 表格标头相等于<TD>，但其之字体会变粗表单标记<FORM> 表单标记决定单一表单的运作模式<TEXTAREA> 文字区块提供文字方盒以输入较大量文字<INPUT> 输入标记决定输入形式<SELECT> 选择标记建立pop-up 卷动清单<OPTION> 选项每一标记标示一个选项图形标记<IMG> 图形标记用以插入图形及设定图形属性连结标记<A> 连结标记加入连结<BASE> 基准标记可将相对URL 转绝对及指定连结目标框架标记<FRAMESET> 框架设定设定框架<FRAME> 框窗设定设定框窗<IFRAME> 页框架于网页中间插入框架IE<NOFRAMES> 不支援框架设定当浏览器不支援框架时的提示影像地图<MAP> 影像地图名称设定影像地图名称<AREA> 连结区域设定各连结区域多媒体<BGSOUND> 背景声音于背景播放声音或音乐IE<EMBED> 多媒体加入声音、音乐或影像其他标记<MARQUEE> 走动文字令文字左右走动IE<BLINK> 闪烁文字闪烁文字NC<ISINDEX> 页寻找器可输入关键字寻找于该一页反对<META> 开头定义让浏览器知道这是HTML 文件<LINK> 关系定义定义该文件与其他URL 的关系StyleSheet<STYLE> 样式表控制网页版面<span> 自订标记独立使用或与样式表同用。
HTML基本标签及语法HTML简介什么是HTML本⽂素材来源于⿊马程序员Pink⽼师HTML 指的是超⽂本标记语⾔(Hyper Text Markup Language) ，它是⽤来描述⽹页的⼀种语⾔。
HTML 不是⼀种编程语⾔，⽽是⼀种标记语⾔(markup language)。
标记语⾔是⼀套标记标签(markup tag)。
Web 标准的构成主要包括结构（Structure）、表现（Presentation）和⾏为（Behavior）三个⽅⾯。
结构 --> 结构⽤于对⽹页元素进⾏整理和分类，现阶段主要学的是HTML表现 --> 表现⽤于设置⽹页元素的版式、颜⾊、⼤⼩等外观样式，主要指的是CSS⾏为 --> ⾏为是指⽹页模型的定义及交互的编写，现阶段主要学的是JavascriptWeb 标准提出的最佳体验⽅案：结构、样式、⾏为相分离。
简单理解：结构写到HTML ⽂件中，表现写到CSS ⽂件中，⾏为写到JavaScript ⽂件中。
HTML基本语法HTML基本⾻架标签名定义说明<html><\html>HTML标签页⾯中最⼤的标签，所有内容都包含在该标签内<body><\body>⽂档头部设置⼀些属性，以及引进⽂件样式<title><\title>⽂档标题浏览器所显⽰的⽹页标题<body><\body>⽂档主题基本上⼀个⽹页的所有页⾯元素都放进该标签内⼀个基本的⽹页⾻架<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div>我的第⼀个⽹页</div></body></html>基本语法概述1. HTML 标签是由尖括号包围的关键词，例如<html>。
教学难点教学内容教学目的教学重点教学过程教学内容1、演示并讲解用表格布局制作的网页2、用表格制作网页教学难点教学内容教学目的教学重点教学过程教学目的1、掌握表格的插入2、掌握单元格的相关操作3、用表格布局制作一个网页4、表格嵌套与叠加教学难点教学内容教学目的教学重点教学过程教学重点1、表格的插入2、单元格的相关操作教学难点教学内容教学目的教学重点教学过程教学难点1、表格的插入2、单元格的相关操作3、用表格布局制作一个网页教学难点教学内容教学目的教学重点教学过程引言：在网页设计中适当的使用表格将不同性质和部分加以区分，不但能使整个网页看起来整齐而且可读性增高。
下面我们介绍表格的各种属性设定、如何在表格加入文字、图片等对象、表格标题以及利用表格来配置版面。
（一）演示并讲解用表格布局制作的网页教学内容1、演示学完HTML后要完成的如图3-1中国茶吧网站中的网上商城页面。
教学目的教学重点教学难点教学过程图3-1 中国茶吧网站中网上商城页面教学难点教学内容教学目的教学重点教学过程2、演示本次课要完成的用表格制作如图3-2的页面内容。
教学难点教学内容教学目的教学重点教学过程1、表格的建立语法说明如下表：标记/属性说明<table>标记<table>用来声明这是表格的开始，并负责设定<tr>标记Tr 是table row 缩写，用来声明这是表格中水平线的开始。
</tr>可省略。
<td>标记Td 是table data 的缩写，用来声明这是字段数据的开始，在储存单元内的数据预设靠左且置中。
</td>可略。
<th>标记Th 是table header 的缩写，用来定义表格的字段名称，在标记内的文字预设水平对齐与垂直对齐皆为居中对齐且字体加粗。
在<th>标记内亦可加入align 和valign 两个属性来控制该字段内的对齐方式，有效范围只限该栏的数据。
若在<tr>内，此两属性对该行中的所有字段均有效。
（二）用表格制作图3-2页面的上部分内容，如下图教学难点教学内容教学目的教学重点教学过程Cellpadding设定表格内文字与表格框线之间的间距。
属性值为数值，数值越大，表格内文字与表格框线的间距越大Cellspacing 设定表格内框线宽度，属性值为数值，数值越大，内框线越宽Bgcolor 设置表格内边框的颜色。
语法：<tr bordercolor=“颜色”>Align 行的文字水平对齐方式。
语法：<tr align=left ｜center|right>Valign 行的文字垂直对齐方式。
语法：<trvalign=top|middle|bottom>Width 设定表格宽度Height 设定表格高度Background 设定表格的背景图片Border 属性用来设定表格外框的宽度。
属性值可用数值表示，数值越大表示框线愈粗。
Border 默认值为1，因此<table>标记内出现border 和border=“1”的意义是相同的。
若省略border 或是设border=“0”表示将表格的外框隐藏不显示教学难点教学内容教学目的教学重点教学过程2、制作一个一行三列的表格（1）格式如下：<table border=1><tr><td></td><td></td><td></td></tr></table>教学难点教学内容教学目的教学重点教学过程（2）在表格中加入属性代码如下：<table cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff9933 border=0><tr><td background=index_show.files/eshop_bar01_Y.gif height=25><table cellSpacing=0 cellPadding=0 width="100%" border=0><tr><td align=middle width=30><imgsrc="index_show.files/eshop_list02_Y.gif" > </td><td><font color=#ff6600>今日推荐</font></td><td align=right><font color=#ff6600>>></font><a href="#" target=_blank><font color=#ff6600>更多</font></a></td><td width=10></td></tr>教学难点教学内容教学目的教学重点教学过程</table></td></tr></table>（3）效果如图3-3所示：教学难点教学内容教学目的教学重点教学过程（4）知识点讲解cellSpacing=1：设定表格内框线宽度为1；cellPadding=0：设定表格内文字与表格框线之间的间距为0；bgColor=#ff9933：设定背景颜色为橙色，它是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果；border=“0”：表示将表格的外框隐藏不显示；Tr 是table row 缩写，用来声明这是表格中水平线的开始。
教学难点教学内容教学目的教学重点教学过程（三）制作下图所示的页面教学难点教学内容教学目的教学重点教学过程语法：1、表格的标题与表头大部分的表格都会在表格的上面加上标题文字，让人能够知道该表格的功用。
在HTML 中是通过<caption>标记来设定，语法：<caption valign=“value1”align=“value2”>tblname </caption>功能：当表格的标题或批注使用。
1)<caption>为成对标记，必须置于<table>标记范围内。
2)Tblname 参数代表该表格的标题名称。
3)Valign 属性：用来设定标题位置，可以和align 属性连用，value1值如下：Top ：将标题置于表格的上方（默认值）。
Bottom ：将标题置于表格的下方。
教学难点教学内容教学目的教学重点教学过程4)Align 属性：设定标题对齐方式，和valign 属性一起连用，value2值如下：Left ：将标题置于左方。
Center ：将标题置于中央（默认值）。
Right ：将标题置于右方。
2、跨行合并我们可在<td>或<th>标记中加入colspan （栏展开）的属性来做储存单元的合并，这个属性可用来控制储存单元的数目。
它表示该储存单元要占用栏的宽度。
属性值用数字表示。
3、跨列合并我们可在<td>或<th>标记中加入rowspan （列展开）的属性来做储存单元的合并，这个可用来控制储存单元的数目。
表示该储存单元要占用列（储存单元）的高度。
属性值用数字表示。
教学难点教学内容教学目的教学重点教学过程代码如下：<table cellSpacing=0 cellPadding=0 width="100%" border=0><tbody><tr><td background=index_show.files/eshop_shade02.gif height=5></td></tr><tr><td height=10></td></tr></tbody></table><table cellSpacing=0 cellPadding=0 border=0><tbody><tr><td><a href=“#" target=_blank><img height=120 alt=富贵吉祥src="index_show.files/20066151584775663.jpg" width=160></A></td></tr>教学难点教学内容教学目的教学重点教学过程<tr><td height=6></td></tr><tr><td background=index_show.files/line_h_H02.gif height=1></td></tr><tr><td height=2></td></tr><tr><tr><td><font color=#333333>商城价格：</font><font color=#0000ff>651</FONT> <font color=#999999>(元/盒)</font></td></tr><td><font color=#333333>产品名称：</font><a title=富贵吉祥href=“#" target=_blank><font class=bold color=#ff6600>富贵吉祥</font></a></td></tr><tr><td><font color=#333333>市场价格：</font><fontcolor=#ff0000><STRIKE>1085</strike></font> <font color=#999999>(元/盒)</font></td></tr>教学难点教学内容教学目的教学重点教学过程<tr><td height=2></td></tr><tr><td background=index_show.files/line_h_H02.gif height=1></td></tr><tr><td height=6></td></tr><tr><td align=middle><a href=“#" target=_blank><IMG alt=购买该产品src="index_show.files/eshop_buy01.gif" border=0></a></td></tr></tbody></table></td></tr><tr><td><img src="index_show.files/f0103.gif"></td></tr></tbody></tbody></td><td width=5></td><td width=180></td></tr></table>教学难点教学内容教学目的教学重点教学过程效果如图：教学难点教学内容教学目的教学重点教学过程【小结】最简单的表格仅包括行和列。
