初步認(rèn)識(shí)html標(biāo)簽

作為一個(gè)零基礎(chǔ)入門的小白，應(yīng)該先從基本的html標(biāo)簽開始認(rèn)起。熟悉后再進(jìn)行下一步學(xué)習(xí)。

HTML 標(biāo)題

HTML 標(biāo)題（Heading）是通過 <h1> - <h6> 等標(biāo)簽進(jìn)行定義的。

<h1>www.861lll.com</h1>

HTML 段落

HTML 段落是通過 <p> 標(biāo)簽進(jìn)行定義的。

<p>www.861lll.com</p>

HTML 鏈接

HTML 鏈接是通過 <a> 標(biāo)簽進(jìn)行定義的。

<a href="http://www.861lll.com">www.861lll.com</a>

HTML 圖像

HTML 圖像是通過 <img> 標(biāo)簽進(jìn)行定義的。

<img src="http://www.861lll.com" width="104" height="142" />

HTML 元素以開始標(biāo)簽起始
HTML 元素以結(jié)束標(biāo)簽終止
元素的內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容
某些 HTML 元素具有空內(nèi)容（empty content）
空元素在開始標(biāo)簽中進(jìn)行關(guān)閉（以開始標(biāo)簽的結(jié)束而結(jié)束）
大多數(shù) HTML 元素可擁有屬性

TML常用標(biāo)簽

1. web標(biāo)準(zhǔn)

1.1 web標(biāo)準(zhǔn)的構(gòu)成

主要包括 結(jié)構(gòu) 、 表現(xiàn) 和行為三個(gè)方面。

標(biāo)準(zhǔn)說明結(jié)構(gòu)用于對(duì) 網(wǎng)頁元素 進(jìn)行整理和分類（HTML）表現(xiàn)用于設(shè)置網(wǎng)頁元素的 外觀樣式 （CSS）行為網(wǎng)頁模型的定義及交互的編寫（JavaScript）

如果將web標(biāo)準(zhǔn)比喻為一只鳥，則

結(jié)構(gòu)=身體
表現(xiàn)=羽毛
行為=動(dòng)作（飛行、站立等）

1.2 標(biāo)簽關(guān)系

雙標(biāo)簽關(guān)系分為：

包含關(guān)系（父子）
并列關(guān)系（兄弟）

(1)包含關(guān)系

<!--head標(biāo)簽包含title標(biāo)簽-->
<head>
    <title></title>
</head>

(2)并列關(guān)系

<!--head標(biāo)簽與body標(biāo)簽并列-->
<head></head>
<body></body>

2. HTML基本結(jié)構(gòu)

標(biāo)簽名定義<html></html>html標(biāo)簽<head></head>文檔的頭部<title></title>文檔的標(biāo)題<body></body>文檔的主體

<!DOCTYPE html>   <!--文檔類型聲明標(biāo)簽-->  
<html lang="en">    <!--en:英語，zh-CN:中文-->
    
    <head>
        <!--字符集，UTF-8為萬國(guó)碼，統(tǒng)一使用-->
        <meta charset="UTF-8">
        <title></title>
    </head>
    
    <body>
        
    </body>
    
</html>

3. HTML常用標(biāo)簽

3.1 標(biāo)題標(biāo)簽

一個(gè)標(biāo)題獨(dú)占一行。（塊級(jí)元素）

<h1>
    一級(jí)標(biāo)題（字號(hào)最大）
</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6>
    六級(jí)標(biāo)題（字號(hào)最小）
</h6>

3.2 段落標(biāo)簽

用于將HTML文檔分割為若干段落。

特點(diǎn)：

文本在一個(gè)段落中會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)換行
段落之間有空隙

<p>
    這是一個(gè)段落
</p>

3.3 換行標(biāo)簽

用于強(qiáng)制換行。

特點(diǎn)：

單標(biāo)簽
換行沒有像段落那樣的空隙

<br>這是換行標(biāo)簽

3.4 文本格式化標(biāo)簽

語義標(biāo)簽加粗<strong></strong>傾斜<em></em>刪除線<del></del>下劃線<ins></ins>

3.5 盒子標(biāo)簽

用于界面布局。

特點(diǎn)：

div一行只能放一個(gè)（塊級(jí)元素）
span一行可以放多個(gè)（行級(jí)元素）

<div>
    這是大盒子
</div>
<span>這是小盒子</span>

3.6 圖像標(biāo)簽和路徑

(1)圖像標(biāo)簽

用于定義頁面中的圖像。

<!--屬性與屬性之間用空格分開-->
<img src="圖像的url" alt="" title="">

屬性說明src圖片路徑（ 必須屬性 ）alt圖像不能顯示時(shí)的替換文本title鼠標(biāo)放到圖像上顯示的提示文本width設(shè)置圖像的寬度height設(shè)置圖像的高度border設(shè)置圖像的邊框粗細(xì)（在CSS中修改）

注：圖像的寬和高一般只修改其中一個(gè)，另一個(gè)會(huì)隨之調(diào)整。

(2)路徑

相對(duì)路徑：文件相對(duì)于HTML頁面的位置

相對(duì)路徑分類符號(hào)說明同一級(jí)src="文件名"下一級(jí)/src="同一級(jí)文件夾名稱/文件名"上一級(jí)../src="../文件名"

絕對(duì)路徑：完整的路徑名稱（一般很少用）。eg. C:\xxx\xxxx.jpg

注意：絕對(duì)路徑用“\”分隔，相對(duì)路徑用“/”分隔。

3.7 超鏈接標(biāo)簽和鏈接分類

(1)超鏈接標(biāo)簽

<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a>

屬性作用href鏈接目標(biāo)的url（ 必須屬性 ）target鏈接頁面的打方式。_self：在當(dāng)前窗口打開（默認(rèn)值），_blank：在新窗口打開

(2)鏈接分類

外部鏈接：例如http://www.bilibili.com
內(nèi)部鏈接：網(wǎng)站內(nèi)部頁面之間的相互鏈接，例如index.html
空鏈接：#
下載鏈接：地址里是一個(gè)文件或壓縮包
網(wǎng)頁元素鏈接：在網(wǎng)頁中的各種網(wǎng)頁元素都可以添加超鏈接
錨點(diǎn)鏈接：可以快速定位到頁面中的某個(gè)位置鏈接：<a href="#名字"></a>找到目標(biāo)位置標(biāo)簽，里面添加一個(gè)id屬性，<h2 id="名字"></h2>返回頂部：<a href="#"></a>

3.8 注釋和特殊字符

(1)注釋

<!--這是一行注釋-->

(2)特殊字符

特殊字符描述字符的代碼空格符<小于號(hào)<>大于號(hào)>&和號(hào)&￥人民幣¥?版權(quán)©?注冊(cè)商標(biāo)®°攝氏度°±正負(fù)號(hào)±?乘號(hào)×?除號(hào)÷2平方²3立方³

注：重點(diǎn)記住前三個(gè)。

大家平時(shí)學(xué)習(xí)web前端的時(shí)候肯定會(huì)遇到很多問題，小編我為大家準(zhǔn)備了web前端學(xué)習(xí)資料，將這些免費(fèi)分享給大家！如果想要的可以找我領(lǐng)取

領(lǐng)取方式：

如果想獲取這些學(xué)習(xí)資料，先關(guān)注我然后私信小編“01”即可免費(fèi)領(lǐng)取！（私信方法：點(diǎn)擊我頭像進(jìn)我主頁右上面有個(gè)私信按鈕）

如果這篇文章對(duì)你有幫助，請(qǐng)記得給我來個(gè)評(píng)論+轉(zhuǎn)發(fā)噢

本標(biāo)簽: 32

<html></html>,創(chuàng)建一個(gè)HTML文檔;
<head></head>,設(shè)置文檔標(biāo)題和其它在網(wǎng)頁中不顯示的信息;
<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>,述語定義;
<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>無限增大.

格式標(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>

</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)簽,用來排版大塊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)度百分比來定義形狀的尺寸;

tabindex="...",使用定義過的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>,定義表格的頁眉;
<COL>,定義一個(gè)列組中的列，以便對(duì)它們能夠同時(shí)設(shè)置有關(guān)屬性;
<TBODY></TBODY>,定義一個(gè)表格的實(shí)體;
<TFOOT></TFOOT>,定義一個(gè)表格的頁腳;

表單標(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="...",表示以像素為單位的除了文本框和密碼框控件之外的其它控件的寬度,它是用來指定字符的數(shù)目;

src="...",一個(gè)圖像控件的URL;

maxlength="...",指定可以輸入的最多的字符數(shù)目;

alt="...",另外一種文本描述;

usemap="...",到客戶端圖形鏡像的URL;

align="...",被反對(duì).控制對(duì)齊方式(left,,center,,right,,justify);

tabindex="...",通過定義的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)容的來源;

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>,來回卷動(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="說明文字",height="高",boder="邊框".

文檔整體屬性標(biāo)簽: 10

<body,bgcolor="">,設(shè)置背景顏色.使用名字或RGB的十六進(jìn)制值;
<body,background="">,設(shè)置背景圖片;
<body,bgsound="">,設(shè)置背景音樂;
<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è)置頁面的上邊距;
<body,leftmargin="">,設(shè)置頁面的左邊距.

在線咨詢

上一篇：如何使用Web Storage對(duì)頁面中數(shù)據(jù)進(jìn)行監(jiān)聽？
下一篇：原創(chuàng)｜前端緩存引發(fā)的生產(chǎn)問題和解決方案

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

初步認(rèn)識(shí)html標(biāo)簽

HTML 標(biāo)題

HTML 段落

HTML 鏈接

HTML 圖像

1. web標(biāo)準(zhǔn)

1.1 web標(biāo)準(zhǔn)的構(gòu)成

1.2 標(biāo)簽關(guān)系

(1)包含關(guān)系

(2)并列關(guān)系

2. HTML基本結(jié)構(gòu)

3. HTML常用標(biāo)簽

3.1 標(biāo)題標(biāo)簽

3.2 段落標(biāo)簽

3.3 換行標(biāo)簽

3.4 文本格式化標(biāo)簽

3.5 盒子標(biāo)簽

3.6 圖像標(biāo)簽和路徑

(1)圖像標(biāo)簽

(2)路徑

3.7 超鏈接標(biāo)簽和鏈接分類

(1)超鏈接標(biāo)簽

(2)鏈接分類

3.8 注釋和特殊字符

(1)注釋

(2)特殊字符

格式標(biāo)簽: 16

鏈接標(biāo)簽: 7

鏈接標(biāo)簽注解:

表格標(biāo)簽: 21

表單標(biāo)簽: 18

表單標(biāo)簽注解:

幀標(biāo)簽(框架標(biāo)簽): 27

文檔整體屬性標(biāo)簽: 10

您的項(xiàng)目需求