html基礎標籤(一)

 

１.1 單標籤

◆ 註釋

快捷鍵：Ctrl+/

◆文本換行<br>

◆水平線標籤   <hr>

１.2 雙標籤

◆段落標籤    <p></p>

◆h1-h6  值只能取到6   h1在頁面中只能出現一次。

◆文本標籤  <font></font>

◆圖片標籤

<img src=」圖片的來源」  alt=」替換文本」 title=」提示文本」   width=」寬」 height=」高」>

◆  <strong></strong>  <b></b>

    <em></em>   <i></i>

    <ins></ins>   <u></u>

     <del></del>    <s></s>

     ^上標   _下標

１.3 圖片標籤

<img  src=」圖片的來源」  alt=」替換文本」  title=」提示文本」  width=」寬」

Height=」」>

◆相對路徑

  ★文件和圖片（html）在同一文件夾（目錄）時，直接寫文件名
      ★圖片在上一級目錄，..+/+文件名

  ★圖片在下一級目錄，文件夾名+/+文件名

◆絕對路徑

１.4 超連接

１.4.1             <a href=」去往的路徑」  title=」提示文本」 target=」_blank」>連接文本</a>

１.4.2      超連接優化寫法 <base target=」_blank」>

１.4.3    <a href=」#」>連接文本</a>

１.4.4    錨點

         <p id=」xd」></p>

     <a href=」#xd」>連接文本</a>

1.5特殊字符

&nbsp;  空格

&lt;    <

&gt;    >

&copy; 

&yen;

２.1 無序列表

type=」square」      小方塊

Type=」disc」       實心小圓圈

Type=」circle」      空心小圓圈

<ul type=」square」>     disc     circle

<li></li>

<li></li>

</ul>

２.2 有序列表

<ol type=」1」 start=」3」>

<li></li>

</ol>

 

２.3 自定義列表

<dl>

 <dt></dt>    小標題

  <dd></dd>   解釋標題

  <dd></dd>   解釋標題

</dl>

３.1 Html5標籤結構

!+tab   能夠寫成html5結構

３.2 字符編碼

  Ascll

  Ansi

  Unicode

  Gbk

  Gb2321

  Big5

  Utf-8    通用編碼

３.3 Meta

 

◆關鍵字

<meta name=」keywords」 content="web攻城獅">

◆網頁描述

<meta name="description" content="這家公司不錯哦">

◆網頁重定向

<meta http-equiv="refresh" content="5; http://www.baidu.cn">

◆其餘用法

<meta name='author' contect='你的姓名'>告訴搜索引擎你的站點的製做的做者

<meta name='Robots' contect='all | none | index | noindex | follow | nofollow'>

設定爲all:文件將被檢索,且頁面上的連接能夠被查詢;

設定爲none:文件將不被檢索,且頁面上的連接不能夠被查詢;

設定爲index : 文件將被檢索;

設定爲follow: 頁面上的連接能夠被查詢;

設定爲noindex: 文件將不被檢索,但頁面上的連接能夠被查詢;]

設定爲nofollow: 頁面上的連接將不被查詢;但文件能夠被檢索;

 

３.4 Link標籤

◆ 調用外部樣式表

<link  rel=」stylesheet」  href=」1.css」>

◆icon圖標

<link  rel=」icon」 href=」1.ico」>

４ 表格

用來存放數據，表格對網頁重構（css+div）一個有益補充。

◆簡單結構

<table>

<tr>

<td></td>

</tr>

</table>

表格

<table></table>

行

<tr></tr>

列

<td></td>

屬性介紹：

◆邊框

border=」1」

◆寬度

width=」500」

◆高度

height=」300」

◆單元格間距

cellspacing=」2」  默認值爲2

◆內容到邊框的距離

cellpadding=」2」 

◆align   left   |   center  |  right

若是align放到tr或td裏，內容的對齊方式，若是放到table裏，表格的對齊方式。

◆背景顏色

bgcolor=」red」

◆表格標題

<th></th>   用法和td同樣。

◆表頭

<caption>表頭文字</caption>

<strong></stong>

４.1 表格的標準結構

<table>

<thead></thead>   頭部

<tbody></tbody>   主體

<tfoot></tfoot>  底部

</table>

 

 

４.2 單元格合併

    colspan=」2」  同一行單元格合併

 

rowspan=」2」 同一列單元格合併

１.1 表格標題、邊框顏色、內容垂直對齊

◆表格標題 <th></th>用法和td同樣

標題的文字自動加粗水平居中對齊

◆邊框顏色

bordercolor = 'red';

◆內容垂直對齊方式

<td valign='bottom'>張三</td>

Valign=」top   |  middle   |  bottom」

４.3 一個像素表格案例

主要是利用一個像素的單元格間距來實現，將表格背景和行背景設置爲不同的背景顏色，顯示的是顏色爲表格背景的一個像素的邊框。

 

 

５ 表單(form)

<form action='1.php' method='post'>

action:處理信息（把文件提交給那個文件處理）

method: get |  post傳遞信息的方法

Get:經過瀏覽器地址欄傳遞信息，安全性低。

Post:經過action文件來處理文件，安全性高。

表單的做用就是用來收集信息。

◆提示信息

 

◆表單控件

★單行文本輸入框

<input type=」text」>

Name=」」文本框的名字

Value=」」 文本框的值

Maxlength=」」最多字符長度

Readonly=」readonly」 輸入框爲只讀狀態

Disabled=」disabled」  輸入框爲未激活狀態

★密碼輸入框

<Input  type=」password」>

 

注意：單行文本輸入框的全部屬性對於密碼輸入框都適用。

★單選框

<input type=」radio」>

注意：當將單選框name值設置相同的時候，才能實現單選效果。

Checked=」checked」  設置默認選中項。

★下拉列表

<select>

<option>下拉列表選項</option>

<option>下拉列表選項</option>

</select>

Selected=」selected」 設置下拉列表默認選中項。

multiple=」multiple」  設置下拉列表爲多選項。

<optgroup></optgroup>   對下拉列表進行分組。

Label=」」  分組名稱。

★多選框

<input type=」checkbox」 >

Checked=」checked」  設置默認選擇項。

★多行文本框

<textarea cols='50' rows='10'></textarea>

Cols=」50」   輸入字符的長度

Rows=」10」  輸入字符的行數

★上傳文件控件

<input type=」file」>

★提交按鈕

<input type='submit'>實現表單提交效果

★普通按鈕

<input type='button' value='普通按鈕'>  注意:普通按鈕不能實現表單信息提交，常配合js使用。

★重置按鈕

<input type='reset' value='重置信息'>

將表單信息初始化。

★圖片按鈕

<input type='image'  src='../按鈕.jpg'>   注意：圖片按鈕也能夠實現表單信息提交。

★表單信息分組

<fieldset></fieldset>    對錶單信息進行分組

<legend></legend>     分組名稱

 

５.1 Html5表單控件

◎判斷網址控件

<input type='url'>

◎判斷郵件控件

<input type='email">

◎日期控件

<input type='date'>

◎時間控件

<input type='time'>

 

◎數字控件

<input type='number'>

◎滑塊控件

<input type='range' max='100' step='5'>

 

◆表單域

5.2 滾動

5.3 音樂標籤

６ 標籤語義化

好的語義化的網站標準就是去掉樣式表文件以後，結構依然很清晰。

標籤語義化概念：根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）

-標籤語義化意義：

       1:網頁結構合理

        2:有利於seo:和搜索引擎創建良好溝通，有了良好的結構和語義你的網頁內容天然容易被搜索引擎抓取；

        3:方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）

        4:便於團隊開發和維護

1：儘量少的使用無語義的標籤div和span；

2：在語義不明顯時，既可使用div或者p時，儘可能用p, 由於p在默認狀況下有上下間距，對兼容特殊終端有利；

3：不要使用純樣式標籤，如：b、font、u等，改用css設置。

4：須要強調的文本，能夠包含在strong或者em標籤中strong默認樣式是加粗（不要用b），em是斜體（不用i）；