、常用html標(biāo)簽
4.1 常用的 html 標(biāo)簽
<!-- 1、成對(duì)出現(xiàn)的標(biāo)簽：-->
<h1>h1標(biāo)題</h1>
<div>這是一個(gè)div標(biāo)簽</div>
<p>這個(gè)一個(gè)段落標(biāo)簽</p>
<!-- 2、單個(gè)出現(xiàn)的標(biāo)簽：-->
<br>
<img src="images/pic.jpg" alt="圖片">
<hr>
<!-- 3、帶屬性的標(biāo)簽，如src、alt 和 href等都是屬性 -->
<img src="images/pic.jpg" alt="圖片">
<a href="http://www.baidu.com">百度網(wǎng)</a>
<!-- 4、標(biāo)簽的嵌套 -->
<div>
<img src="images/pic.jpg" alt="圖片">
<a href="http://www.baidu.com">百度網(wǎng)</a>
</div>
提示:
- 標(biāo)簽不區(qū)分大小寫，但是推薦使用小寫。
- 根據(jù)標(biāo)簽的書寫形式，標(biāo)簽分為雙標(biāo)簽(閉合標(biāo)簽)和單標(biāo)簽(空標(biāo)簽)2.1 雙標(biāo)簽是指由開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽組成的一對(duì)標(biāo)簽，這種標(biāo)簽允許嵌套和承載內(nèi)容，比如: div標(biāo)簽2.2 單標(biāo)簽是一個(gè)標(biāo)簽組成，沒(méi)有標(biāo)簽內(nèi)容， 比如: img標(biāo)簽
4.2 小結(jié)
- 學(xué)習(xí) html 語(yǔ)言就是學(xué)習(xí)標(biāo)簽的用法，常用的標(biāo)簽有20多個(gè)。
- 編寫 html 標(biāo)簽建議使用小寫
- 根據(jù)書寫形式，html 標(biāo)簽分為雙標(biāo)簽和單標(biāo)簽
- 單標(biāo)簽沒(méi)有標(biāo)簽內(nèi)容，雙標(biāo)簽可以嵌套其它標(biāo)簽和承載文本內(nèi)容
五、資源路徑
當(dāng)我們使用img標(biāo)簽顯示圖片的時(shí)候，需要指定圖片的資源路徑，比如:
<img src="images/logo.png">
這里的src屬性就是設(shè)置圖片的資源路徑的，資源路徑可以分為相對(duì)路徑和絕對(duì)路徑。
5.1 相對(duì)路徑
從當(dāng)前操作 html 的文檔所在目錄算起的路徑叫做相對(duì)路徑
示例代碼:
<!-- 相對(duì)路徑方式1 -->
<img src="./images/logo.png">
<!-- 相對(duì)路徑方式2 -->
<img src="images/logo.png">
5.2 絕對(duì)路徑
從根目錄算起的路徑叫做絕對(duì)路徑，Windows 的根目錄是指定的盤符，mac OS 和Linux 是/
示例代碼:
<!-- 絕對(duì)路徑 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">
提示:
一般都會(huì)使用相對(duì)路徑，絕對(duì)路徑的操作在其它電腦上打開(kāi)會(huì)有可能出現(xiàn)資源文件找不到的問(wèn)題
5.3 小結(jié)
- 相對(duì)路徑和絕對(duì)路徑是 html 標(biāo)簽使用資源文件的兩種方式，一般使用相對(duì)路徑。
- 相對(duì)路徑是從當(dāng)前操作的 html 文檔所在目錄算起的路徑
- 絕對(duì) 路徑是從根目錄算起的路徑
六、列表標(biāo)簽
6.1 列表標(biāo)簽的種類
- 無(wú)序列表標(biāo)簽(ul標(biāo)簽)
- 有序列表標(biāo)簽(ol標(biāo)簽)
6.2 無(wú)序列表
<!-- ul標(biāo)簽定義無(wú)序列表 -->
<ul>
<!-- li標(biāo)簽定義列表項(xiàng)目 -->
<li>列表標(biāo)題一</li>
<li>列表標(biāo)題二</li>
<li>列表標(biāo)題三</li>
</ul>
6.3 有序列表
<!-- ol標(biāo)簽定義有序列表 -->
<ol>
<!-- li標(biāo)簽定義列表項(xiàng)目 -->
<li><a href="#">列表標(biāo)題一</a></li>
<li><a href="#">列表標(biāo)題二</a></li>
<li><a href="#">列表標(biāo)題三</a></li>
</ol>
6.4 小結(jié)
- 列表標(biāo)簽有無(wú)序列表標(biāo)簽(ul標(biāo)簽)和有序列表標(biāo)簽(ol標(biāo)簽)
- 列表項(xiàng)目對(duì)順序有要求的時(shí)候使用ol標(biāo)簽
- 列表項(xiàng)目對(duì)順序無(wú)要求的時(shí)候使用ul標(biāo)簽
七、表格標(biāo)簽
7.1 表格的結(jié)構(gòu)
表格是由行和列組成，好比一個(gè)excel文件
7.2 表格標(biāo)簽
<table>標(biāo)簽：表示一個(gè)表格
<tr>標(biāo)簽：表示表格中的一行
<td>標(biāo)簽：表示表格中的列
<th>標(biāo)簽：表示表格中的表頭
示例代碼:
<table>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>張三</td>
<td>18</td>
</tr>
</table>
表格邊線合并:
border-collapse 設(shè)置表格的邊線合并，如：border-collapse:collapse;
言-START
這是一個(gè)給Taobao內(nèi)部某個(gè)神秘的組織（團(tuán)隊(duì)）做的一個(gè)logo，花了些時(shí)間終于設(shè)計(jì)出來(lái)，可喜可賀。
項(xiàng)目簡(jiǎn)介-INTRODUCTION
因?yàn)闆](méi)有太多的信息，只被告知組織叫“喜樂(lè)匯”，故而只好憑借自身想象力去補(bǔ)全了。首先，既然是一個(gè)組織，一個(gè)團(tuán)隊(duì)，那么團(tuán)結(jié)是必不可少的，激情也是必須的，而規(guī)矩卻也不可缺失，同樣的除了工作的團(tuán)結(jié)，激情，認(rèn)真，生活也必須是精彩繽紛的。
（三條不同顏色的線條表明了各自精彩生活的繽紛交織，而匯聚成了三角形也體現(xiàn)了來(lái)自天南地北各種英雄好漢的匯聚一堂，三角形是最穩(wěn)固的形狀也體現(xiàn)了團(tuán)隊(duì)內(nèi)部關(guān)系融洽，團(tuán)結(jié)向上。）
關(guān)鍵詞-KEYWROD
團(tuán)隊(duì)、彩色、合作、穩(wěn)固、創(chuàng)新、精彩、年輕、激情。
靈感-INSPIRATION
顏色-COLOR
圖形-IMAGE
文字-TEXT
周邊-OTHER
總結(jié)
設(shè)計(jì)師在設(shè)計(jì)同類型的LOGO時(shí)，也可以參考應(yīng)用此LOGO元素，此LOGO元素已收錄于logofree在線制作平臺(tái)中，你可以尋找合適的LOGO元素并在線制作屬于你的LOGO，此次分享就到這里，請(qǐng)期待我們更精彩的LOGO設(shè)計(jì)教程。
文章來(lái)自logo在線制作平臺(tái)logofree。原文：
http://www.logofree.cn/news/shejizhishixuexi/xlhlogo.html
LogoFree是一個(gè)簡(jiǎn)單易用的免費(fèi)LOGO在線制作平臺(tái)，只需兩分鐘，就可以設(shè)計(jì)精美的LOGO，一站式的LOGO設(shè)計(jì)在線生成就這么簡(jiǎn)單，而且免費(fèi)下載。
本標(biāo)簽: 32
- <html></html>,創(chuàng)建一個(gè)HTML文檔;
- <head></head>,設(shè)置文檔標(biāo)題和其它在網(wǎng)頁(yè)中不顯示的信息;
- <title></title>,設(shè)置文檔的標(biāo)題;
- <h1></h1>,最大的標(biāo)題;
- <pre></pre>,預(yù)先格式化文本;
- <u></u>,下劃線
- <b></b>,黑體字;
- <i></i>,斜體字;
- <tt></tt>,打字機(jī)風(fēng)格的字體;
- <cite></cite>,引用,通常是斜體;
- <em></em>,強(qiáng)調(diào)文本(通常是斜體加黑體);
- <strong></strong>,加重文本(通常是斜體加黑體);
- <font,size="",color=""></font>,設(shè)置字體大小從1到7,顏色使用名字或RGB的十六進(jìn)制值;
- <BASEFONT></BASEFONT>,基準(zhǔn)字體標(biāo)記;
- <big></big>,字體加大;
- <SMALL></SMALL>,字體縮小;
- <STRIKE></STRIKE>,加刪除線;
- <CODE></CODE>,程式碼;
- <KBD></KBD>,鍵盤字;
- <SAMP></SAMP>,范例;
- <VAR></VAR>,變量;
- <BLOCKQUOTE></BLOCKQUOTE>,向右縮排;
- <DFN></DFN>,述語(yǔ)定義;
- <ADDRESS></ADDRESS>,地址標(biāo)記;
- <sup></SUP>,上標(biāo)字;
- <SUB></SUB>,下標(biāo)字;
- <xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效)
- <plaintext>...</plaintext>固定寬度字體(不執(zhí)行標(biāo)記符號(hào));
- <listing>...</listing>,固定寬度小字體;
- <font,color=00ff00>...</font>字體顏色;
- <font,size=1>...</font>最小字體;
- <font,style,='font-size:100,px'>...</font>無(wú)限增大.
格式標(biāo)簽: 16
- <p></p>,創(chuàng)建一個(gè)段落;
- <p,align="">,將段落按左、中、右對(duì)齊;
- <br>,換行,插入一個(gè)回車換行符;
- <blockquote></blockquote>,從兩邊縮進(jìn)文本;
- <dl></dl>,列表標(biāo)簽,定義列表;
- <dt>,定義列表標(biāo)題;
- <dd>,定義列表內(nèi)容;
例:
<dl>
<dt>標(biāo)題1</dt>
<dd>內(nèi)容11</dd>
<dd>內(nèi)容12</dd>
<dt>標(biāo)題2</dt>
<dd>內(nèi)容21</dd>
<dd>內(nèi)容22</dd>
</dl>
- <ol></ol>,列表標(biāo)簽,定義一個(gè)標(biāo)有數(shù)字的列表;
- <ul></ul>,列表標(biāo)簽,定義一個(gè)標(biāo)有圓點(diǎn)的列表;
- <li>,放在每個(gè)列表項(xiàng)之前; 放在<ol></ol>之間則每個(gè)列表項(xiàng)加上一個(gè)數(shù)字,放在<ul></ul>之間則每個(gè)列表項(xiàng)加上一個(gè)圓點(diǎn);
- <div,align=""></div>,分區(qū)標(biāo)簽,用來(lái)排版大塊HTML段落,也用于格式化表;
- <MENU>,選項(xiàng)清單;
- <DIR>,目錄清單;
- <nobr></nobr>,強(qiáng)行不換行;
- <hr,size='9',width='80%',color='ff0000'>水平線(設(shè)定寬度);
- <center></center>,水平居中.
鏈接標(biāo)簽: 7
- <a,href="URL"></a>,創(chuàng)建超文本鏈接;
- <a,href="mailtEMAIL">
- </a>,創(chuàng)建自動(dòng)發(fā)送電子郵件的鏈接;
- <a,name="name"></a>,創(chuàng)建位于文檔內(nèi)部的書簽;
- <a,href="#name"></a>,創(chuàng)建指向位于文檔內(nèi)部書簽的鏈接;
- <BASE>,文檔中不能被該站點(diǎn)辨識(shí)的其它所有鏈接源的URL;
- <LINK>,定義一個(gè)鏈接和源之間的相互關(guān)系;
鏈接標(biāo)簽注解:
target="...",決定鏈接源在什么地方顯示(用戶自定義的名字,_blank,_parent,_self,_top);
rel="...",發(fā)送鏈接的類型;
rev="...",保存鏈接的類型;
accesskey="...",指定該元素的熱鍵;
shape="...",允許我們使用已定義的形狀定義客戶端的圖形鏡像(default,rect,circle,poly);
coord="...",使用像素或者長(zhǎng)度百分比來(lái)定義形狀的尺寸;
tabindex="...",使用定義過(guò)的tabindex元素設(shè)置在各個(gè)元素之間的焦點(diǎn)獲取順序(使用tab鍵使元素獲得焦點(diǎn)).
表格標(biāo)簽: 21
- <table></table>,創(chuàng)建一個(gè)表格;
- <tr></tr>,表格中的每一行;
- <td></td>,表格中一行中的每一個(gè)格子;
- <th></th>,設(shè)置表格頭:通常是黑體居中文字;
- <table,cellspacing="">,設(shè)置表格格子之間空間的大小;
- <table,border="">,設(shè)置邊框的寬度;
- <table,cellpadding="">,設(shè)置表格格子邊框與其內(nèi)部?jī)?nèi)容之間空間的大小;
- <table,width="">,設(shè)置表格的寬度.用絕對(duì)像素值或總寬度的百分比;
- <table,align="">,設(shè)置表格格子的水平對(duì)齊方式(left,center,right,justify);
- <tr,align="">,設(shè)置表格格子的水平對(duì)齊方式(left,center,right,justify);
- <tr,valign="">,設(shè)置表格格子的垂直對(duì)齊方式(baseline,bottom,middle,top);
- <td,colspan="">,設(shè)置一個(gè)表格格子跨占的列數(shù)(缺省值為1);
- <td,rowspan="">,設(shè)置一個(gè)表格格子跨占的行數(shù)(缺省值為1);
- <td,nowrap>,禁止表格格子內(nèi)的內(nèi)容自動(dòng)斷行;
- <CAPTION></CAPTION>,表格的標(biāo)題;
- <COLGROUP></COLGROUP>,定義多個(gè)列為一組列;
- <TABLE></TABLE>,創(chuàng)建一個(gè)表格;
- <THEAD></THEAD>,定義表格的頁(yè)眉;
- <COL>,定義一個(gè)列組中的列，以便對(duì)它們能夠同時(shí)設(shè)置有關(guān)屬性;
- <TBODY></TBODY>,定義一個(gè)表格的實(shí)體;
- <TFOOT></TFOOT>,定義一個(gè)表格的頁(yè)腳;
表單標(biāo)簽: 18
- <form></form>,創(chuàng)建表單;
action="...",接收數(shù)據(jù)的服務(wù)器的URL;
method="...",HTTP的方法(get,,post),其中g(shù)et是被反對(duì)使用的;
enctype="...",指定MIME(Internet媒體類型);
onsubmit="...",當(dāng)提交表單時(shí)發(fā)生的內(nèi)部事件;
noreset="...",在重新設(shè)置表單時(shí)發(fā)生的內(nèi)部事件;
target="...",決定把內(nèi)容顯示在什么地方(_blank,_parent,_self,_top)
- <select,multiple,name="name",size=""></select>,創(chuàng)建滾動(dòng)菜單,size設(shè)置在需要滾動(dòng)前可以看到的表單項(xiàng)數(shù)目;
- <option>,設(shè)置每個(gè)表單項(xiàng)的內(nèi)容;
- <select,name="name"></select>,創(chuàng)建下拉菜單;
- <textarea,name="name",cols=40,rows=8></textarea>,創(chuàng)建一個(gè)文本框區(qū)域,列的數(shù)目設(shè)置寬度,行的數(shù)目設(shè)置高度;
- <input,type="checkbox",name="name">,創(chuàng)建一個(gè)復(fù)選框,文字在標(biāo)簽后面;
- <input,type="radio",name="name",value="">,創(chuàng)建一個(gè)單選框,文字在標(biāo)志后面;
- <input,type=text,name="foo",size=20>,創(chuàng)建一個(gè)單行文本輸入?yún)^(qū)域,size設(shè)置以字符串的寬度;
- <input,type="submit",value="name">,創(chuàng)建提交(submit)按鈕;
- <input,type="image",border=0,name="name",src="name.gif">,創(chuàng)建一個(gè)使用圖象的提交(submit)按鈕;
- <input,type="reset">,創(chuàng)建重置(reset)按鈕;
- <BUTTON></BUTTON>,創(chuàng)建一個(gè)按鈕;
disabled="...",把按鈕的狀態(tài)設(shè)置為不能;
name="...",按鈕的控制名,value="...",按鈕的值;
type="...",按鈕的類型(button,,submit,,reset);
- <FIELDSET></FIELDSET>,把相互關(guān)聯(lián)的控件組合成一組;
- <ISINDEX>,提示用戶輸入;
- <LABEL></LABEL>,為一個(gè)控件提供標(biāo)簽;
- <LEGEND></LEGEND>,為FIELDSET元素指定一標(biāo)題;
- <SELECT></SELECT>,為用戶做選擇創(chuàng)建各個(gè)選項(xiàng);
- <TEXTAREA></TEXTAREA>,創(chuàng)建一個(gè)允許用戶多行輸入的區(qū)域.
表單標(biāo)簽注解:
type="...",用于輸入控件的類型(text,password,checkbox,radio,submit,reset,file,hidden,image,button);
name="...",控件的控制名(要求是除了submit和reset之外的任何名字);
value="...",控件的初始值;
checked="...",把一個(gè)單選鈕設(shè)置為選中的狀態(tài);
disabled="...",把控件的狀態(tài)設(shè)置為不能使用;
readonly="...",只對(duì)輸入密碼的文本框使用;
size="...",表示以像素為單位的除了文本框和密碼框控件之外的其它控件的寬度,它是用來(lái)指定字符的數(shù)目;
src="...",一個(gè)圖像控件的URL;
maxlength="...",指定可以輸入的最多的字符數(shù)目;
alt="...",另外一種文本描述;
usemap="...",到客戶端圖形鏡像的URL;
align="...",被反對(duì).控制對(duì)齊方式(left,,center,,right,,justify);
tabindex="...",通過(guò)定義的tabindex值確定在不同元素之間獲得焦點(diǎn)的順序;
onfocus="...",當(dāng)元素獲得焦點(diǎn)時(shí)發(fā)生的事件;
onblur="...",當(dāng)元素失去焦點(diǎn)時(shí)發(fā)生的事件;
onselect="...",當(dāng)元素被選中時(shí)發(fā)生的事件;
onchang="...",當(dāng)元素狀態(tài)被改變時(shí)發(fā)生的事件;
accept="...",允許上載的文件類型.
幀標(biāo)簽(框架標(biāo)簽): 27
- <frameset></frameset>,放在一個(gè)幀文檔的<body>標(biāo)簽之前,也可以嵌在其他幀文檔中;
- <frameset,rows="value,value">,定義一個(gè)幀內(nèi)的行數(shù),可用像素值或高度百分比;
- <frameset,cols="value,value">,定義一個(gè)幀內(nèi)的列數(shù),可用像素值或?qū)挾劝俜直?
- <frame>,定義一個(gè)幀內(nèi)的單一窗或窗區(qū)域;
- <noframes></noframes>,定義在不支持幀的瀏覽器中顯示什么提示;
- <frame,src="URL">,規(guī)定幀內(nèi)顯示的HTML文檔;
- <frame,name="name">,命名幀或區(qū)域以便別的幀可以指向它;
- <frame,marginwidth="">,定義幀左右邊緣的空白大小,必須大于等于1;
- <frame,marginheight="">,定義幀上下邊緣的空白大小,必須大于等于1;
- <frame,scrolling="">,設(shè)置幀是否有滾動(dòng)欄,其值可以是"yes","no",或"auto";
- <frame,noresize>,禁止用戶調(diào)整一個(gè)幀的大小;
- <IFRAME></IFRAME>,創(chuàng)建一個(gè)內(nèi)聯(lián)的幀;
scr="...",定義在幀中顯示的內(nèi)容的來(lái)源;
frameborder="...",定義幀之間的邊界(0或1);
align="...",被反對(duì),控制對(duì)齊方式(left,,center,,right,,justify);
height="...",幀的高度,width="..."幀的寬度;
- <marquee>...</marquee>,普通卷動(dòng);
- <marquee,behavior=slide>...</marquee>,滑動(dòng);
- <marquee,behavior=scroll>...</marquee>,預(yù)設(shè)卷動(dòng);
- <marquee,behavior=alternate>...</marquee>,來(lái)回卷動(dòng);
- <marquee,direction=down>...</marquee>,向下卷動(dòng);
- <marquee,direction=up>...</marquee>,向上卷動(dòng);
- <marquee,direction=right></marquee>,向右卷動(dòng);
- <marquee,direction='left'></marquee>,向左卷動(dòng);
- <marquee,loop=2>...</marquee>,卷動(dòng)次數(shù);
- <marquee,width=180>...</marquee>,設(shè)定寬度;
- <marquee,height=30>...</marquee>,設(shè)定高度;
- <marquee,bgcolor=FF0000>...</marquee>,設(shè)定背景顏色;
- <marquee,scrollamount=30>...</marquee>,設(shè)定卷動(dòng)距離;
- <marquee,scrolldelay=300>...</marquee>,設(shè)定卷動(dòng)時(shí)間;
- <img,src="">,插入圖片,參數(shù)有:width="寬",alt="說(shuō)明文字",height="高",boder="邊框".
文檔整體屬性標(biāo)簽: 10
- <body,bgcolor="">,設(shè)置背景顏色.使用名字或RGB的十六進(jìn)制值;
- <body,background="">,設(shè)置背景圖片;
- <body,bgsound="">,設(shè)置背景音樂(lè);
- <body,bgproperties="fixed">,固定背景圖片(IE適用);
- <body,text="">,設(shè)置文本顏色.使用名字或RGB的十六進(jìn)制值;
- <body,link="">,設(shè)置鏈接顏色.使用名,字或RGB的十六進(jìn)制值;
- <body,vlink="">,設(shè)置已使用的鏈接的顏色.使用名字或RGB的十六進(jìn)制值;
- <body,alink="">,設(shè)置正在被擊中的鏈接的顏色.使用名字或RGB的十六進(jìn)制值;
- <body,topmargin="">,設(shè)置頁(yè)面的上邊距;
- <body,leftmargin="">,設(shè)置頁(yè)面的左邊距.
