前端基礎-常用HTML標簽

TMl 的標簽可以分為單個標簽和成對標簽。

單個標簽：html4 規定單個標簽要有一個 / 表示結尾， html5 則不用

<!--單個標簽-->
<meta>
<!--成對標簽 -->
<div></div>

以下是HTMl中常用的一些標簽

div 標簽

div 標簽主要用來將相關的內容組合到一塊，就像菜市場把各個蔬菜分成不同種類區分擺放是一個道理。

div 是最常見也是比較重要的標簽，網頁布局中經常使用的一類標簽。通常布局被稱為 DIV + CSS 布局

<div>
  div 就是一個分類的存儲箱子
</div>

p標簽

p標簽表示段落，在網頁文字中應用的比較多

<!--段落和段落間會換行-->
<p>第一段</p>
<p>第二段</p>

H-標題標簽

h標簽分為六個

標簽	語義
h1	一級標題
h2	二級標題
h3	三級標題
h4	四級標題
h5	五級標題
h6	六級標題

引用標題標簽后，字體會加粗、字號一會變大

ul 無序標簽

無序標簽是沒有顯示順序的列表，無序列表前面通常會有一個“小點”，這個小點可以用type屬性控制。其中有三個展示方式（不過這種方式比較固定，不夠靈活和美觀，已經被CSS的效果代替），如下：

值（type屬性）	描述
disc	默認值，實心圓
circle	空心圓
square	實心方框

舉例:

<!--ul標簽內部只能放置li標簽-->
<!--li標簽內部可以放其他的標簽-->
<ul type=">
    <li>無序列表元素1</li> <!--列表項-->
    <li>無序列表元素2</li>
</ul>




實心圓
<ul type="disc">
  <li>西紅柿</li>
  <li>黃瓜</li>
</ul>
空心圓
<ul type="circle">
  <li>西紅柿</li>
  <li>黃瓜</li>
</ul>
實心方框
<ul type="square">
  <li>西紅柿</li>
  <li>黃瓜</li>
</ul>

ol 有序標簽

ol 前面的標簽是有序的，可以是數字、字母、羅馬數字等。同樣控制這些樣式使用的是type屬性。

type屬性值	意義
a	小寫英文字母編號
A	大寫英文字母編號
i	小寫羅馬數字編號
I	大寫羅馬數字編號
1	數字編號（默認）

設置start屬性，表示從哪個編號開始
加 reversed 表示倒敘排列

有序列表, 從2開始
<ol start="2">
  <li>元素1</li>
  <li>元素2</li>
</ol>


小寫字母表示
<ol type="a">
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ol>


倒敘
<ol reversed>
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ol>

dl 自定義列表

dl標簽表示自定義列表

dt表示數據項，dd表示數據定義， dd是dt標簽的解釋

<dl>
    <dt>西紅柿</dt>
    <dd>紅、酸</dd>
    <dt>黃瓜</dt>
    <dd>綠、澀</dd>
  </dl>

img標簽

img 用來插入圖片，包括但不限于以下圖片格式

圖片格式	備注
.jpg、.jpeg	通常用于照片，是一種有損壓縮格式
.png	通常用于logo、背景，支持透明和半透明。便攜式網絡圖像
.svg	矢量圖片

<!-- src(source)屬性， 圖片地址，可以為相對路徑，也可以為絕對路徑-->
<!-- alt 如果遇到圖片無法加載的情況，網頁上會展示 alt的 值 -->
<!-- width 和 height 表示 寬和高， 如果只設置一個， 那么另外一個就會跟著成比例縮放-->
<img src="./images/images.jpg" alt="星期一" width="120" height="20">

a 標簽

用a標簽來制作超級鏈接

<!-- href 屬性 表示 其他頁面的鏈接，支持相對路徑和絕對路徑，還可以鏈接到其它網站 -->
<!--target 屬性表示 打開其他鏈接的方式-->
<!-- title 屬性表示 鏈接的標題， 當鼠標移動到鏈接上，會展示出來-->
<a href="http://www.baidu.com" target="blank" title="文字標題">百度</a>






<!--也可以用a標簽作為錨點 錨點可以是本頁面的錨點，也可以是其他頁面的錨點-->
<h1 id="title">頭部標題</h1>
... 此處省略一些代碼
<a href="#title">返回標題</a>




<!--下載鏈接，指向 doc， zip， zip等文件格式時，a標簽將成為自動下載鏈接-->
<a href="./download/halou.zip">發郵件</a>
<!-- mailto:前綴的鏈接是郵件鏈接，系統將自動打開email相關軟件-->
<a href="mailto:halouworld@126.com">發郵件</a>
<!-- tel: 前綴鏈接是電話鏈接，系統將自動打開撥號鍵-->
<a href="tel:11111111111">打開撥號鍵盤</a>

audio標簽

audio標簽用來插入音頻標簽

<!--添加 controls 后才會顯示 播放控件-->
<!--常用音頻格式 mp3 和 ogg格式-->
<!--autoplay 自動播放屬性-->
<!--loop 屬性表示循環播放-->
<audio controls src="./video/demo.mp3">
       您的瀏覽器不支持 audio標簽，請升級
</audio>




<audio controls src="./video/demo.mp3" autoplay loop>
     您的瀏覽器不支持 audio標簽，請升級
</audio>

video標簽

video 標簽用于插入一段視頻

<!--有的視頻不能播放 ，詳見 https://blog.csdn.net/weixin_34272308/article/details/94614657 -->
<!-- controls 顯示視頻播放控件  -->
<!-- autoplay 自動播放 -->
<!-- loop 循環播放 -->
<!-- 常見的 視頻格式 mp4 ogv webm 等-->
<video controls autoplay loop src="./video/5-4 RDB2.mp4" >
    您的瀏覽器不支持 video標簽，請升級
</video>

其它區塊標簽

以前的區塊標簽只有div，現在為了更好的方便搜索引擎抓取網站，因此有了以下語義更加明確的區塊標簽

<section>	文檔的區域，比div語義上還要大一點
<header>	頁頭
<main>	網頁核心部分
<footer>	頁腳

其他的語義標簽

span 標記文本標記區域，沒有特殊效果，結合CSS使用

b 標簽加粗文章（可以使用CSS實現同樣效果）

u 加下換線文字

br 換行

i 傾斜文字（可以使用CSS實現同樣效果）

strong 代表特別重要的文字

em 需要強調的文字，有一定的傾斜，也可以用其配置CSS做表情文字

mark 高亮文字

figure 和 figcaption 。figure - 一段獨立的內容 figcaption- figure 內部元素的說明性內容

表單

表單用來收集信息并且可以完成和后端的數據傳輸

表單中大致可以分為三種標簽

form標簽，標識表單區域，內部的元素都可能被表單提取信息
input 標簽，標識輸入、點擊等需要和用戶交互的場景
datalist 下拉框，支持搜索，通常和input一塊使用

一些表單的示例

<!--action 表示要提交到后端的網址-->
<!--method 表示表單提交的方式，通常有 get 、 post 、put、delete等-->


<form action="/save" meththo="post"></form>


<!--<form> 標簽中 input 文本框 type="text" 表示文本框-->
<!-- value 表示文本框中的值 -->
<!--planceholder表示提示文字，在沒任何輸入值的情況下，作為提示信息-->
<!--disabled 表示禁用-->
<input type="text" value="123" planceholder="提示文字" disabled>


<!---單選按鈕，name相等，表示選擇了一個，另一個就不能選擇了-->
<!--checked 表示默認被選中-->
<!-- value 屬性表示要提交到后端服務器的值-->
<input type="radio" name="radio_group" checked>
<input type="radio"  name="radio_group">




<label>
    <input type="radio" name="sex"> 男
</label>
<label> 
    <input type="radio" name="sex"> 女
</label>




<!--html4 中的標簽 通過for 屬性 和 其他標簽的id屬性進行綁定-->


<input type="radio" name="sex" id="nan"> 
<label for="nan">男</label>


<input type="radio" name="sex"   id="nv">
<label for="nv">女</label>


<!--復選框 type="checkbox" 同一組的的復選框，name值應該相同 ，復選框也有value值， 用于向服務器提交數據-->
<input type="checkbox" name="hobby" value="soccer" > 足球
<input type="checkbox" name="hobby" value="basket" > 籃球


<!--密碼框-->
<input type="password" placeholder="請輸入密碼">


<!-- 下拉菜單 -->
<select>
  <option value="alipay">支付寶</option>
  <option value="wxpay">微信支付</option>
</select>


<!--多文本框 rows 和  clos 分別用于設置 行數 和 列數-->
<textarea rows="3" cols="5"></textarea>


<!--三種按鈕 submit 提交按鈕  button 普通按鈕 可以簡寫為  <button></button> reset 按鈕 重置按鈕-->
<input type="button" value="普通按鈕">
    <input type="reset" value="重置按鈕"> 
    <input type="submit" value="提交表單">




<!--像 email 和 url 等格式，如果點擊提交按鈕，不符合格式，會有提示-->
<form>
    日期空間: <input type="date">  <br/>
    時間空間: <input type="time">  <br/>
    日期時間空間 <input type="datetime-local">  <br/>


    文件:<input type="file"> <br/>  <br/>
    數字控件: <input type="number"> <br/>
    拖拽條: <input type="range"> <br/>
    搜索框: <input type="search"> <br/>
    網址控件: <input type="url"> <br/>
    郵箱控件: <input type="email" >
    <input type="submit" value="提交">
</form>




<!-- datalist 備選項示例 -->
<input type="text" list="province">
<datalist id="province">
  <option value="陜西"></option>
  <option value="山西"></option>
  <option value="河北"></option>
  <option value="山東"></option>
</datalist>

表格

可以用html渲染表格

table 標簽表示表格

tr 表示行
td 表示單元格
caption 表格的標題，通常放在表格的第一行
th 表示列標題

<!--表格示例-->
<table border="1">
  <caption>我是標題</caption>
  <tr>
      <th>第一列標題</th>
      <th>第二列標題</th>
  </tr>
  <tr>
      <td>第一行第一列</td>
      <td>第一行第二列</td>
  </tr>
  <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
  </tr>
</table>

單元格的合并, clospan 用來設置td 或者th的列跨度， rowspan屬性用來設置td或者th的行跨度

<!--跨列示例-->
<table border="1">
    <caption>我是標題</caption>
    <tr>
        <th>第一列標題</th>
        <th>第二列標題</th>
    </tr>
    <tr>
        <td colspan="2">跨兩行</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>


<!--跨行示例-->
<table border="1">
        <caption>我是標題</caption>
        <tr>
            <th>第一列標題</th>
            <th>第二列標題</th>
        </tr>
        <tr>
            <td rowspan="2">第一行第一列</td>
            <td>第一行第二列</td>
        </tr>
        <tr>
            <td>第二行第二列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
        </tr>
  </table>

表格的其他標簽， thead 定義表頭， tbody 定義表格的主題內容， tfoot 標簽定義表格底部，通常用來匯總等

tml標簽<

<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>設定卷動時間

<marquee onmouseover="this.stop()">...</marquee>鼠標經過上面時停止滾動

<marquee onmouseover="this.start()">...</marquee>鼠標離開時開始滾動

<!>字體效果

<h1>...</h1>標題字(最大)

<h6>...</h6>標題字(最小)

<b>...</b>粗體字

<strong>...</strong>粗體字(強調) （同上效果略同）

<i>...</i>斜體字

<em>...</em>斜體字(強調)

<dfn>...</dfn>斜體字(表示定義)

<u>...</u>底線

<ins>...</ins>底線(表示插入文字)

<strike>...</strike>橫線

<s>...</s>刪除線

<del>...</del>刪除線(表示刪除)

<kbd>...</kbd>鍵盤文字

<tt>...</tt> 打字體

<xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效)

<plaintext>...</plaintext>固定寬度字體(不執行標記符號)

<listing>...</listing> 固定寬度小字體

<font color=00ff00>...</font>字體顏色

<font size=1>...</font>最小字體

<font style =’font-size:100 px’>...</font>無限增大

區斷標記

<hr>水平線

<hr size=’9’>水平線(設定大小)

<hr width=’80%’>水平線(設定寬度)

<hr color=’ff0000’>水平線(設定顏色)

<br>(換行)

<nobr>...</nobr>水域(不換行)

<p>...</p>水域(段落)

<center>...</center>置中

<!>連結格式

<base href=位址>(預設好連結路徑)

<a href=位址></a>外部連結

<a href=位址 target=’_blank’></a>外部連結(另開新視窗)

<a href=位址 target=’_top’></a>外部連結(全視窗連結)

<a href=位址 target=’頁框名’></a>外部連結(在指定頁框連結)

<!>貼圖/音樂

<img src=圖片位址>貼圖

<img src=圖片位址 width=’180’>設定圖片寬度

<img src=圖片位址 height=’30’>設定圖片高度

<img src=圖片位址 alt=’提示文字’>設定圖片提示文字

<img src=圖片位址’ border=’1’>設定圖片邊框

<bgsound src=MID音樂檔位址>背景音樂設定

<!>表格語法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網址

<table border=邊框大小>...</table>設定表格邊框大小(使用數字)

<table bgcolor=顏色碼>...</table>設定表格的背景顏色

<table borderclor=顏色碼>...</table>設定表格邊框的顏色

<table borderclordark=顏色碼>...</table>設定表格暗邊框的顏色

<table borderclorlight=顏色碼>...</table>設定表格亮邊框的顏色

<table cellpadding=參數>...</table>指定內容與格線之間的間距(使用數字)

<table cellspacing=參數>...</table>指定格線與格線之間的距離(使用數字)

<table cols=參數>...</table>指定表格的欄數

<table frame=參數>...</table>設定表格外框線的顯示方式

<table width=寬度>...</table>指定表格的寬度大小(使用數字)

<table height=高度>...</table>指定表格的高度大小(使用數字)

<td colspan=參數>...</td>指定儲存格合并欄的欄數(使用數字)

<td rowspan=參數>...</td>指定儲存格合并列的列數(使用數字)

分割視窗

<frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會自動調整

<frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會自動調整

<frameset cols="20%,*">分割左右兩個框架

<frameset cols="20%,*,20%">分割左中右三個框架

<分割上下兩個框架

<frameset rows="20%,*,20%">分割上中下三個框架

屬性：

cols 垂直切割窗口（如左右分割兩個窗口）接受整數值，百分數，*（*代表占用余下空間）數值的個數代表分成的部分數目，要以逗號分隔。例：cols="30,*,50%"可以切成三個視窗，第一部分是30像素（pixels）為絕對分割，第二部分是當分配完第一和第三視圖后剩下的空間，第三部分則占整個窗口的50%寬度，為相對分割。

rows 就是橫向切割，將窗口上下分開，數值設置同上。

以上兩屬性盡量不要在同一個<frameset>標記中，因為王井（netscape）不支持，盡量采用多重分割。

frameborder 設置框架的邊框，其值有0不要邊框，1要邊框。

border 設置框架邊框厚度

framespacing 表示框架與框架間保留空白的距離

frame 元素（單標簽）

語法格式：

屬性：

name 框架名稱，指定框架來做連接的目標窗口。

src 框架中要顯示的網頁文當url地址，每個個框架要對應一個html文擋。

scrolling 是否顯示滾動條，yes/no,auto是自動。

noresize 設置不讓使用者改變這個框架的大小，

noframe元素

指定當使用了框架的頁面在不支持框架的瀏覽器中打開時顯示的信息

語法格式：

......

</noframe>

表單<form></form>

語法格式：

....

</form>

method有兩種提交方式get,post

action 是指明處理該表單的程序位置，這樣表單所填的資料才能傳給cgi做處里，可設定此參數為action="mailto:lwr8494@163.com" 這樣此表單所填的資料將會發送到這個郵箱地址。

method 是指傳送信息給cgi等網絡程序的方式。可選post方法， get方法，post方法容許傳送大量信息。get方法只接受低于1k的信息。

申請表單用的是post搜索引擎用的是get

<! - - ... - -> 注解

<A HREF TARGET> 指定超連結的分割視窗

<A HREF=#錨的名稱> 指定錨名稱的超連結

<A HREF> 指定超連結

<A NAME=錨的名稱> 被連結點的名稱

<ADDRESS>....</ADDRESS> 用來顯示電子郵箱地址

<B> 粗體字

<BASE TARGET> 指定超連結的分割視窗

<BASEFONT SIZE> 更改預設字形大小

<BGSOUND SRC> 加入背景音樂

<BIG> 顯示大字體

<BLINK> 閃爍的文字

<BODY TEXT LINK VLINK> 設定文字顏色

<BODY> 顯示本文

<BR> 換行

<CAPTION ALIGN> 設定表格標題位置

<CAPTION>...</CAPTION> 為表格加上標題

<CENTER> 向中對齊

<CITE>...<CITE> 用於引經據典的文字

<CODE>...</CODE> 用於列出一段程式碼

<COMMENT>...</COMMENT> 加上注解

<DD> 設定定義列表的項目解說

<DFN>...</DFN> 顯示"定義"文字

<DIR>...</DIR> 列表文字標簽

<DL>...</DL> 設定定義列表的標簽

<DT> 設定定義列表的項目

<EM> 強調之用

<FONT FACE> 任意指定所用的字形

<FONT SIZE> 設定字體大小

<FORM ACTION> 設定戶動式表單的處理方式

<FORM METHOD> 設定戶動式表單之資料傳送方式

<FRame MARGINHEIGHT> 設定視窗的上下邊界

<FRame MARGINWIDTH> 設定視窗的左右邊界

<FRame NAME> 為分割視窗命名

<FRame NORESIZE> 鎖住分割視窗的大小

<FRame SCROLLING> 設定分割視窗的卷軸

<FRame SRC> 將HTML檔加入視窗

<FRameSET COLS> 將視窗分割成左右的子視窗

<FRameSET ROWS> 將視窗分割成上下的子視窗

<FRameSET>...</FRameSET> 劃分分割視窗

<H1>~<H6> 設定文字大小

<HEAD> 標示文件資訊

<HR> 加上分格線

<HTML> 文件的開始與結束

<I> 斜體字

<IMG ALIGN> 調整圖形影像的位置

<IMG ALT> 為你的圖形影像加注

<IMG DYNSRC LOOP> 加入影片

<IMG HEIGHT WIDTH> 插入圖片并預設圖形大小

<IMG HSPACE> 插入圖片并預設圖形的左右邊界

<IMG LOWSRC> 預載圖片功能

<IMG SRC BORDER> 設定圖片邊界

<IMG SRC> 插入圖片

<IMG VSPACE> 插入圖片并預設圖形的上下邊界

<INPUT TYPE NAME value> 在表單中加入輸入欄位

<ISINDEX> 定義查詢用表單

<KBD>...</KBD> 表示使用者輸入文字

<LI TYPE>...</LI> 列表的項目 ( 可指定符號 )

<MARQUEE> 跑馬燈效果

<MENU>...</MENU> 條列文字標簽

<MULTIPLE> 可同時選擇多項的列表欄

<NOFRame> 定義不出現分割視窗的文字

<OL>...</OL> 有序號的列表

<OPTION> 定義表單中列表欄的項目

<P ALIGN> 設定對齊方向

<P> 分段

<PERSON>...</PERSON> 顯示人名

<PRE> 使用原有排列

<SAMP>...</SAMP> 用於引用字

<select >...</select > 在表單中定義列表欄

<SMALL> 顯示小字體

<STRIKE> 文字加橫線

<STRONG> 用於加強語氣

<SUB> 下標字

<SUP> 上標字

<TABLE BORDER=n> 調整表格的寬線高度

<TABLE CELLPADDING> 調整資料欄位之邊界

<TABLE CELLSPACING> 調整表格線的寬度

<TABLE HEIGHT> 調整表格的高度

<TABLE WIDTH> 調整表格的寬度

<TABLE>...</TABLE> 產生表格的標簽

<TD ALIGN> 調整表格欄位之左右對齊

<TD BGCOLOR> 設定表格欄位之背景顏色

<TD COLSPAN ROWSPAN> 表格欄位的合并

<TD NOWRAP> 設定表格欄位不換行

<TD VALIGN> 調整表格欄位之上下對齊

<TD WIDTH> 調整表格欄位寬度

<TD>...</TD> 定義表格的資料欄位

<TEXTAREA NAME ROWS COLS> 表單中加入多少列的文字輸入欄

<TEXTAREA WRAP> 決定文字輸入欄是自動否換行

<TH>...</TH> 定義表格的標頭欄位

<TITLE> 文件標題

<TR>...</TR> 定義表格美一行

<TT> 打字機字體

<U> 文字加底線

<UL TYPE>...</UL> 無序號的列表 ( 可指定符號 )

<var>...</var> 用於顯示變數

BlockQuotc文本縮進

表示顏色的有三種方式；

1，16進制顏色代碼

語法：#RRGGBB

例：<font color="#ff0000">紅色</font>

2，10進制RGB碼

語法：RGB（RRR，GGG，BBB）

例：<font color="rgb(255,000,000)">紅色</font>

3,直接用顏色的英文名稱

例：<font color="red">紅色</font>

<body>.....</body>屬性可分為三種：

1，背景屬性

包括：bgcolor,background

2,文字屬性：

包括：text,link,alink,vlink,

3,留白屬性：

其中分為：leftmargin,topmargin

.bgcolor背景色

語法格式：<body bgcolor="#ff0000">

.background背景圖案。

語法格式：<body background="url">

.text文本顏色（非連接文字顏色）

.link連接文字顏色（可連接文字顏色）

.alink活動連接文字顏色（正被點擊的可連接文字的顏色）

.vlink已訪問連接文字顏色）（已經點擊訪問過的可連接文字的顏色）

語法格式：<body text="color" link="color" alink="color" vlink="color">

.leftmargin 頁面左側的留白距離

.topmargin 頁面頂部的留白距離

語法格式：<body leftmargin="value" topmargin="value">

注：value為長度值為數字

align 屬性

語法：<h2 align="?">文字</h2>

其屬性有三種：left靠左,center居中,right靠右

〈p〉</p>為段落標記，可利用以上屬性對整個段落進行設置

〈br>為換行標記

<nobr></nobr>為不換行標記放在文字兩邊即可

例：<body>

<h3>江南逢李龜年</h3>

<p>歧王宅里尋常見<br>

催九堂前幾度聞<br>

正是江南好風景<br>

落花時節又逢君</p>

</body>

預格式化：

<pre>......</pre> 瀏覽是效果和編寫是效果格式一樣

列表

1無序列表又稱符號列表

語法格式：

<ul type="">type的屬性可選直disc實心圓點,clrcle空心圓點,square實心方框

</ul>

2有序列表

語法格式：

</ol>

type的值是編號字符可選的有1...,a...,A...,i... ,I...

start為起始值例：如果start為3是那么將從3開始，而且必須是數字。

3定義列表

<dl>定義列表標記

<dt>標示定義條目

<dd>標示定義內容

語法格式：

<dl>

</dl>

連接和圖像

語法格式：

屬性：href 連接目標值可以是url地址也可以是連接錨點

<a href="url">...</a>或者

name 連接名稱

語法格式：<a name="錨點名稱">...</a>

例：<a name="abcdcf">...</a>

連接到該錨點的連接則應是：

target目標窗口語法格式：

-blank打開新窗口

_self當前窗口打開

一下兩個僅在框架葉面中應用

_parent當前窗口的父級窗口（上一級）打開

_top在最高一級的窗口打開

windowname已命名的窗口或框架中打開連接

title連接提示

圖像<img> 語法格式：

border屬性定義圖片邊框的寬度，默認值為0

align屬性設置圖片旁邊文字的位置

語法格式：<img src="" align"">

可選值有：

top圖片和文字頂部對齊

middle圖片和文字居中對齊

bottom圖片和文字底邊對齊（默認）

left圖片居左對齊，文字沿圖片繞排

right圖片居右對齊，文字沿圖片繞排

absmiddle圖片對齊到目前文字行絕對中央

absbottom圖片對齊到目前文字行絕對底部

文字的排版

不換行空白標記

font元素

語法格式：

字體大小可選值為1——7，默認為3

例：〈font face="黑體" size="4" color="#ff00ff">....</font>

水平線<hr>

語法格式：<hr width="寬度" align="對齊方式默認居中center" size="水平線厚度默認為2" color="顏色" noshade>

noshade無陰影，既實線

層〈div><span>兩種元素

<div>是塊級元素，和段落元素<p>相似，不同的是兩個<div>元素之間不會產生兩個<p>元素之間的空行，

<span>是行內元素，可以定義段落中部分文字的屬性

語法格式：

align設置層中元素的水平對齊方式

stule設置元素應用css規范的屬性

表格語法格式：

</table>

border邊框寬度默認值為0，既沒有邊框

cellspacing表格中單元格的邊距大小，默認值為兩個像素

cellpadding表格中單元格之間的間距大小，默認值為兩個像素

tr元素

語法格式：

align屬性對齊方式可選值如下：left,center,tight,默認為left

bgcolor指定該行的背景顏色

td元素

語法格式：

align屬性的可選值有：left,center,right

valign屬性的可選值有：top,middle,bottom

rowspan和colapan跨行和跨列的數量，默認為1

input元素語法格式：

type屬性的可選值有：

text 單行文本框

屬性：name 文本框名稱

value 文本框的初始值

size 文本框的長度

maxlength 可輸入字符串最大的長度

radio 單選框

屬性：name 單選框名稱

value 內部值

checked 默認選定

checkbox 復選框

屬性：name 復選框名稱

value 內部值

checked 默認選定

reset 重置按鈕

submit 確定按鈕

屬性：name 按鈕名稱

value 顯示在按鈕上的文字

password 密碼框

屬性與文本框的屬性完全相同

file 文件域

屬性：name文件域名稱

size 文件域的長度

maxlength 文件域可接受的字符數量的上限

hidden 隱藏域

屬性：name 隱藏域名稱

value 內定值

image 圖片域

屬性：name 所要代表的按鈕，可以是submit,reset,或其他.

src 按鈕圖片的url 地址

列表框<select>

語法格式：

.....

.....

</select>

select元素

語法格式：<select name="" size=""multiple></select>

name 指定列表框的名字

size 指定列表框顯示列表項的條數，如果指定了該參數，select元素是個列表，否則是一個下拉列表框

multiple 指定了這個參數，則表示該列表框可選擇多項，否則只可選擇一項

option屬性

語法格式：<option value="" selected></option>

value 該列表項的值

selected 如果設定了這個參數，默認為選定這一項

多行文本框<textarea>

屬性：

name文本框的名稱

cols文本框的寬度

rows文本框的高度

wrap文本框的折行方式可選值有：

off不保存換行信息

physical強迫瀏覽器在發送信息到web服務器端時必須將多行文本框的文字一行一行的送出，

virtual送出連續成串的字除非使用者按回車。

css 層疊樣式表

引入層疊樣式表的方法包括：

外聯式樣式表

例：<head>

</head>

<body>

....

</body>

</html>

屬性：rel 用來說明<link>元素在這里要完成的任務是連接一個獨立的css文件。而href屬性給出了所要連接css文件的url地址

內嵌式樣式表：

例：<html>

<head>

<!--

td{font:9pt;color:red}

.font105{font:10.5pt;color:blue}

-->

</style>

</head>

</html>

元素內定

格式：<p style="font-size:10.5pt">

導入式樣式表

〈html>

<head>

<!--

@import url(css/home.css);

-->

</style>

<body>

....

</body>

</html>

css的優先級

越接近目標的樣式定義優先級越高，高優先級樣式將繼承低優先級樣式的未重疊定義但覆蓋重疊的定義

如果4種樣式表對同一元素定義了不同的樣式，那么他們的優先級順序從高到低是，元素內定，內嵌樣式表，導入樣式表，外聯樣式表。

css結構

例：td{font-size:10.5pt;color:#666666}

css樣式包含兩個基礎部分，

選擇符<td>和聲明{font-size:10.5pt;color:#666666}

聲明也有兩部分組成：

屬性font-size,color和值10.5pt,#666666

選擇符分為6種

1元素選擇符

當頁面上多個元素的樣式相同時，可以將多個元素放在一起定義，中間以逗號分開例：td,p,li,input,select{font-size:12px;}

2class(類)選擇符

例：〈head>

<!--

.red{font-size:10.5pt;color:#ff0000}

-->

</style>

</head>

<p class="red">士大夫井岡山地方官</p>

<p>九連環離開計劃</p>

</body>

還有一種方法就是限定可以應用它的頁面元素

例：〈head>

<!--

h1.red{color:#ff0000}

-->

</style>

</head>

<p class="red">士大夫井岡山地方官</p>

<h1 class="red">九連環離開計劃</h1>

</body>

3 id選擇符

與class選擇附類似，只是把'.'換成'#'

例：<body>

<head>

<!--

#select{font-size:18px;color:#0000ff}

-->

</style>

</head>

<body>

<tr>

<td align="center" id="select">id選擇符</td>

</tr>

</table>

</body>

</html>

我們看到在調用ID選擇附時與CLASS選擇附類似，只是將class=""換成了id=""，方便頁面腳本語言的調用

關聯選擇符

<body>

<head>

<!--

td p{font-size:18px;color:#0000ff}

-->

</style>

</head>

<body>

<tr>

<td align="center"><p>關聯選擇符</p></td>

</tr>

</table>

<p>關聯選擇符</p>

</body>

</html>

我們設定了在元素中<td>的元素<p>所包含文字的樣式，只有在兩個條件都滿足是，樣式在會起作用，

偽類選擇符

是只能用在css選擇符里，而不能用在html代碼中的選擇符

例：

〈html>

<head>

<!--

a:link{color:#000000}

a:visited{color:#cccccc}

a:hover{color:#ff0000}

a:active{color:#ooooff}

-->

</style>

</head>

<body>

<p><a href="#">關聯選擇符</a><p>

〈/body>

</html>

正確的順序是a:link\a:visited\a:hover否則會引起頁面上連接顏色混亂

偽元素選擇符

與偽類選擇符定義類似，目前被大多數瀏覽器支持的有兩個：首行偽元素（first-line）和首字符偽元素(first-letter)是用來實現首行大寫和首行下沉效果的

例：首行

<html>

<head>

<style>

<!--

p:first-line{color:red;font-size:20pt}

-->

</style>

</hesd>

<body>

<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>

</body>

</html>

長度隨瀏覽器窗口大小而改變

首字

<html>

<head>

<style>

<!--

p:first-letter{color:red;font-size:50pt;float:left;}

-->

</style>

</hesd>

<body>

<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>

</body>

</html>

以上兩種都只能應用于塊狀元素上

css規則

1.繼承

例：<html>

<head>

<!--

td{font-size:12pt}

p{color:red}

-->

</style>

</hesd>

<body>

<tr>

<p>css規則</p>

</td>

</table>

</body>

</html>

<p>為最高級<td>次一級兩種css用在一個屬性元素上，相同的覆蓋，不同的繼承，

2.組合

例:td{font-size:12pt}

p1{font-size:12pt}

組合后

td,.p1{font-size:12pt}

3.層疊

在樣式里定義過后，在表格屬性中又定義一次

<html>

<head>

<!--

red{color:#ff0000 limportant}

-->

</style>

</hesd>

<body>

<tr>

<td align="center" style="color:#0000ff" class="red">決撒地方官</td>

</tr>

</table>

</body>

</html>

css單位

分四大類：

1 長度單位

數值可以是整數，小數，正數，負數，0，后加單位（負值不要輕易使用）

換算關系：

1in(英寸)=6pc(派)

1in(英寸)=72pt(磅)

1in(英寸)=2.54(厘米)

1cm(厘米)=10mm(毫米)

1cm(厘米)=0.3937(英寸)

1pt(磅)=1/72in(英寸)=0.2478mm(毫米)

1pc(派)=1/6in(英寸)=我國新四號鉛字的尺寸

2 百分比單位

3 顏色單位

4 url單位

div屬性

color : #999999 文字顏色

font-family : 宋體文字字型

font-size : 10pt 文字大小

font-style:itelic 文字斜體育

font-variant:small-caps 小字體

letter-spacing : 1pt 文字間距

line-height : 200% 設定行高

font-weight:bold 文字粗體

vertical-align:sub 下標字

vertical-align:super 上標字

text-decoration:line-through 加?h除線

text-decoration:overline 加頂線

text-decoration:underline 加底線

text-decoration:none ?h除連接底線

text-transform : capitalize 首字大寫

text-transform : uppercase 英文大寫

text-transform : lowercase 英文寫

text-align:right 文字*右對齊

text-align:left 文字*左對齊

text-align:center 文字置中對齊

這些是一些簡單的文字效果，可以應用到css的頁面中。　

背景

background-color:black 背景顏色

background-image : url(image/bg.gif) 背景圖片

background-attachment : fixed 固定背景

background-repeat : repeat 重復排列-網頁預設

background-repeat : no-repeat 不重復排列

background-repeat : repeat-x 在x軸重復排列

background-repeat : repeat-y 在y軸重復排列

background-position : 90% 90% 背景圖片x與y軸的位置　

鏈接

A 所有超連接

A:link 超連接文字格式

A:visited 瀏覽過的連接文字格式

A:active 按下連接的格式

A:hover 鼠標移至連接

邊框

border-top : 1px solid black 上框

border-bottom : 1px solid #6699cc 下框

border-left : 1px solid #6699cc 左框

border-right : 1px solid #6699cc 右框

border: 1px solid #6699cc 四邊框

虛線

實線

、列表說明：列表是在頁面上有很多列同時存在的信息，分為無序列表和有序列表。

1、無序列表概念：用來放置一些對于順序無關緊要的內容，例如下面的新聞內容。

2、有序列表概念：有序列表用于存放內容不能錯亂的信息，比如下面的阿里云內容。

3、自定義列表：自定義列表用于正文之外的框框欄欄之類的。

二、列表樣式：

列表樣式2

列表樣式3

三、無序列表 <ul> </ul> 和 <li> </li>標簽

列表標簽是用 ul 表示，但是不是單獨使用的，需要和 li 標簽配合使用，并且列表標簽也有屬性，用法：

<ul type="disc"> ，屬性有多個值：

disc ：小圓點，默認屬性

circle ：小圓圈

square ：實心方塊

none ：不要任何符號

源碼：↓

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<li>這是列表a</li>

<li>這是列表b</li>

<li>這是列表c</li>

</ul>

</body>

在線咨詢

上一篇：javascript cookie小總結前端知識分享
下一篇：2017年最重要的HTML5開發手冊，傳播正能量

您的項目需求

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

整合營銷服務商

前端基礎-常用HTML標簽

div 標簽

p標簽

H-標題標簽

ul 無序標簽

ol 有序標簽

dl 自定義列表

img標簽

a 標簽

audio標簽

video標簽

其它區塊標簽

其他的語義標簽

表單

表格

、列表說明：列表是在頁面上有很多列同時存在的信息，分為無序列表和有序列表。

二、列表樣式：

三、無序列表 <ul> </ul> 和 <li> </li>標簽

您的項目需求