「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>

提示:

標簽不區分大小寫，但是推薦使用小寫。
根據標簽的書寫形式，標簽分為雙標簽(閉合標簽)和單標簽(空標簽)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

<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="">,設置頁面的左邊距.

在線咨詢

上一篇：什么是SEO網絡推廣，每天都需要做那些事？
下一篇：CSS 列表樣式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「HTML二」 html常用標簽

、常用html標簽

4.1 常用的 html 標簽

4.2 小結

五、資源路徑

5.1 相對路徑

5.2 絕對路徑

5.3 小結

六、列表標簽

6.1 列表標簽的種類

6.2 無序列表

6.3 有序列表

6.4 小結

七、表格標簽

7.1 表格的結構

7.2 表格標簽

格式標簽: 16

鏈接標簽: 7

鏈接標簽注解:

表格標簽: 21

表單標簽: 18

表單標簽注解:

幀標簽(框架標簽): 27

文檔整體屬性標簽: 10

您的項目需求