整合营销服务商

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

免费咨询热线：

「HTML二」 html常用标签

、常用html标签

4.1 常用的 html 标签

<!-- 1、成对出现的标签：-->

<h1>h1标题</h1>
<div>这是一个div标签</div>
<p>这个一个段落标签</p>


<!-- 2、单个出现的标签：-->
<br>
<img src="images/pic.jpg" alt="图片">
<hr>

<!-- 3、带属性的标签，如src、alt 和 href等都是属性 -->
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>

<!-- 4、标签的嵌套 -->
<div>
   <img src="images/pic.jpg" alt="图片">
   <a href="http://www.baidu.com">百度网</a>
</div>

提示:

  1. 标签不区分大小写，但是推荐使用小写。
  2. 根据标签的书写形式，标签分为双标签(闭合标签)和单标签(空标签)2.1 双标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，比如: div标签2.2 单标签是一个标签组成，没有标签内容， 比如: img标签

4.2 小结

  • 学习 html 语言就是学习标签的用法，常用的标签有20多个。
  • 编写 html 标签建议使用小写
  • 根据书写形式，html 标签分为双标签和单标签
  • 单标签没有标签内容，双标签可以嵌套其它标签和承载文本内容

五、资源路径

当我们使用img标签显示图片的时候，需要指定图片的资源路径，比如:

<img src="images/logo.png">

这里的src属性就是设置图片的资源路径的，资源路径可以分为相对路径和绝对路径。

5.1 相对路径

从当前操作 html 的文档所在目录算起的路径叫做相对路径

示例代码:

<!-- 相对路径方式1 -->
<img src="./images/logo.png">
<!-- 相对路径方式2 -->
<img src="images/logo.png">

5.2 绝对路径

从根目录算起的路径叫做绝对路径，Windows 的根目录是指定的盘符，mac OS 和Linux 是/

示例代码:

<!-- 绝对路径 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">

提示:

一般都会使用相对路径，绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题

5.3 小结

  • 相对路径和绝对路径是 html 标签使用资源文件的两种方式，一般使用相对路径。
  • 相对路径是从当前操作的 html 文档所在目录算起的路径
  • 绝对 路径是从根目录算起的路径

六、列表标签

6.1 列表标签的种类

  • 无序列表标签(ul标签)
  • 有序列表标签(ol标签)

6.2 无序列表

<!-- ul标签定义无序列表 -->
<ul>
   <!-- li标签定义列表项目 -->
   <li>列表标题一</li>
   <li>列表标题二</li>
   <li>列表标题三</li>
</ul>

6.3 有序列表

<!-- ol标签定义有序列表 -->
<ol>
   <!-- li标签定义列表项目 -->
   <li><a href="#">列表标题一</a></li>
   <li><a href="#">列表标题二</a></li>
   <li><a href="#">列表标题三</a></li>
</ol>

6.4 小结

  • 列表标签有无序列表标签(ul标签)和有序列表标签(ol标签)
  • 列表项目对顺序有要求的时候使用ol标签
  • 列表项目对顺序无要求的时候使用ul标签

七、表格标签

7.1 表格的结构

表格是由行和列组成，好比一个excel文件

7.2 表格标签

<table>标签：表示一个表格
     <tr>标签：表示表格中的一行
         <td>标签：表示表格中的列
         <th>标签：表示表格中的表头

示例代码:

<table>
   <tr>
       <th>姓名</th>
       <th>年龄</th>
   </tr>
   <tr>
       <td>张三</td>
       <td>18</td>
   </tr>
</table>

表格边线合并:

border-collapse 设置表格的边线合并，如：border-collapse:collapse;

言-START

这是一个给Taobao内部某个神秘的组织（团队）做的一个logo，花了些时间终于设计出来，可喜可贺。

项目简介-INTRODUCTION

因为没有太多的信息，只被告知组织叫“喜乐汇”，故而只好凭借自身想象力去补全了。首先，既然是一个组织，一个团队，那么团结是必不可少的，激情也是必须的，而规矩却也不可缺失，同样的除了工作的团结，激情，认真，生活也必须是精彩缤纷的。

（三条不同颜色的线条表明了各自精彩生活的缤纷交织，而汇聚成了三角形也体现了来自天南地北各种英雄好汉的汇聚一堂，三角形是最稳固的形状也体现了团队内部关系融洽，团结向上。）

关键词-KEYWROD

团队、彩色、合作、稳固、创新、精彩、年轻、激情。

灵感-INSPIRATION

  • 团结

  • 剪纸

  • 绳子

颜色-COLOR

图形-IMAGE

文字-TEXT

周边-OTHER

总结

设计师在设计同类型的LOGO时，也可以参考应用此LOGO元素，此LOGO元素已收录于logofree在线制作平台中，你可以寻找合适的LOGO元素并在线制作属于你的LOGO，此次分享就到这里，请期待我们更精彩的LOGO设计教程。

文章来自logo在线制作平台logofree。原文：

http://www.logofree.cn/news/shejizhishixuexi/xlhlogo.html

LogoFree是一个简单易用的免费LOGO在线制作平台，只需两分钟，就可以设计精美的LOGO，一站式的LOGO设计在线生成就这么简单，而且免费下载。

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

在线咨询
上一篇：什么是SEO网络推广，每天都需要做那些事？
下一篇：CSS 列表样式

您的项目需求

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

推荐阅读
友情链接 良庆区 金台区 白朗县 古城区 渭滨区 高邑县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服