1. 程式人生 > >web前端基礎知識-20170502

web前端基礎知識-20170502

1、注意
p標記不能巢狀塊級元素
塊級:div,p,h1~h6...
2、擴充
<meta chasrset="utf-8">元資料


<meta name="keywords" content="關鍵字1,關鍵字2,...">(關鍵字一般8~10個)
<meta name="description" content="">
以上兩個meta標記,主要面向搜素引擎·
3、影象和連結
1、URL
1、目錄和目錄結構
目錄:web站點中,資料夾的名稱
2、URL :Uniform Resource Locator
統一資源定位器,俗稱:路徑
用來標識網路中任何資源的位置
即:資原始檔所在目錄結構的表現方式
3、URL分類
1、絕對路徑
1、什麼是絕對路徑
從檔案所在的最高階目錄下開始查詢檔案所經過的路徑
2、分類
1、查詢網路資源
1、完整的url主要由
1、協議名稱
https
2、域名(IP)
www.baidu.com
3、目錄路徑
img
4、檔名
bd_logo.png
https://www.baidu.com/img/bd_logo.png
2、查詢本機資源(不推薦)
從碟符位置處開始查詢
2、相對路徑
從當前檔案所在的位置處開始查詢資原始檔所經過的路徑
ex:在a.html中想使用b.jpg
   a.html:當前檔案
b.jpg:資原始檔
1、同目錄下:直接用 b.jpg
2、子目錄下:先進入再引用 img/b.jpg
3、父目錄下:先返回再引用../../b.jpg
ex:1、../../imges/index/logo.jpg
3、根相對路徑
永遠都是從web站點所在的根目錄處開始查詢資原始檔的位置
表現:/ 作為開始
ex:/images/index/logo.jpg (根相對路徑)
imges/index/logo.jpg   (相對路徑)
以上兩種路徑的區別
2、影象
1語法:<img>或<img/>
2、web中所支援的影象格式
1、jpg ***.jpg 採用的是有失真壓縮的技術
2、gif ***.gif 動圖
3、png ***.png 支援透明色
屬性:
1、src
影象的URl
2、title
滑鼠移入到影象上所提示的文字
3、alt
滑鼠移入到影象上所提示的文字
4、width
寬度,以px或%作為單位的數字
如果不寫單位,預設是px
5、height
高度,以px或%作為單位的數字
如果不寫單位,預設是px
注意:
1、在img中,如果只設置寬度或高度中的一個屬性,
  那麼另一個屬性會跟著等比縮放
2、URL嚴格區分大小寫(針對伺服器)
3、連結
1、什麼是連結?
點選後能夠完成頁面跳轉的行為
2、語法
標記:
<a>內容</a>
屬性:
1、href
連結URL
注意:如果不設定href,a標記則表現的與普通元素一樣
2、target
指定開啟新網頁的方式
1、_self:在自身頁面中開啟新頁面,預設值
2、_blank:在新頁面中開啟網頁
3、連結的表現形式
1、實現資源下載
設定href的取值為.rar/.zip/.exe,一律為資源下載
2、實現電子郵件的傳送
<a href="mailto:email地址">聯絡我們<a>
前提:
1、客戶端端必須安裝郵件客戶端
2、在郵件客戶端上配置好賬戶
3、返回頁面頂部的空連結
<a href="#">返回頂部</a>
4、連結到Javascript
<a href="javascript:"></a>
4、錨點
1、作用
用於在頁面中某個位置處做一個記號,方便網頁
允許在任何位置跳轉到記號位置處
2、使用方式
1、定義錨點
1、使用a標記的name屬性
<a name="name1">內容<a/a>
2、使用任意標記的id屬性
<ANY id="name2"></ANY>(ANY為任意標記)
2、連結到錨點
1、跳轉到本頁的錨點處
<a href="#錨點名稱"></a>
2、跳轉到其他頁面的錨點處
<a href="頁面url#a錨點"></a>
4、表格
1、什麼是表格
表格是由一些“單元格”按照從左到右,從上到下的排列順序而形成的一個結構,
主要用於按照一定的方式來顯示網頁的資料
2、表格的語法
1、建立表格:<table></table>
2、建立錶行:<tr></tr>
3、建立單元格:<td></td>
3、表格的屬性
1、table屬性
1、width:寬度
2、height:高度
3、align
表格在其父元素中的水平對齊方式
left/center/right
4、border
邊框,取值為邊框的寬度
5、cellpadding
設定單元格內邊距
單元格邊框與內容之間的距離
6、cellspacing
設定單元格外邊距
單元格與單元格之間的距離
7、bgcolor
設定表格背景顏色
2、tr屬性
1、align
控制該行內容的水平對齊方式
left/center/right
2、valign
控制該行內容的垂直對齊方式
top/middle/bottom
3、bgcolor
背景顏色
3、td屬性
1、align
控制當前單元格內容的水平對齊方式
2、valign
3、width
4、height
5、colspan
設定單元格跨列(合併列)
6、rowspan
   設定單元格跨行(合併行)
4、表格的標題
標記:<caption>標題內容</caption>
表現:
1、預設下,顯示所有行的最上方
2、水平居中對齊
注意:
<caption>必須位於<table>之下的第一行語句,並且表格*****
5、表格的複雜應用
1、行分組
將行分成若干組,分別去管理
1、表頭行分組
將表格中第一行單獨分組時,放在表頭行分組中
標記:<thead></thead>
2、表主體行分組
將表格中除第一行以及最後一行以外的其他行,放在表主體中。
標記:<tbody></tbody>
3、表尾行分組
將表格中最後一行放在表尾行分組中
標記:<tfoot></tfoot>
注意:
如果“不顯示的指定行的行分組的話”,那麼預設所有的行都會被分在tbody中
2、不規則表格
通過單元格的跨行或跨列的屬性來建立不規則的表格
1、跨列
從指定單元格開始,橫向向右合併幾個單元格(包括自己),
被合併的單元格,要從程式碼中刪除出去
屬性:colspan
取值:數字,要合併的列數
2、跨行
從指定單元格開始,縱向向下合併幾個單元格(包括自己),
被合併的單元格,要從程式碼中刪除出去
屬性:rowspan
取值:數字,要合併的列數
3、表格的巢狀
在一個表格中,再放入另一個表格,從而實現複雜的佈局
必須將巢狀的表格放在td中才能實現巢狀結構
任何東西在表格中顯示的話,必須都放在td中
6、display:table的特點
1、自己獨佔一行
2、寬度由內容來決定
5、列表
1、什麼是列表?
列表是將一系列具有相似特徵的內容按照從上到下的方式來進行排列的一種結構
2、列表的語法
1、列表的組成
1、列表型別
1、有序列表<ol></ol>
2、無序列表<ul></ul>
2、列表項
顯示在列表中的內容
<li></li>
2、有序列表
語法:
<ol>
<li></li>
<li></li>
</ol>
屬性:
1、type
型別,指定列表項表示的型別
取值:
1、1:預設值,按數字排列
2、a: 按小寫英文字元排列
3、A: 按大寫英文字元排列
4、i: 按小寫羅馬數字排列
5、I: 按大寫羅馬數字排列
2、start
列表項標識,從幾開始顯示
取值:數字
3、無序列表
標記:
<ul>
<li></li>
<li></li>
</ul>
屬性:
1、type
1、circle:空心圓
2、square:實心方塊
3、disc: 實心圓
4、none:不顯示標識
3、定義列表
1、作用
主要用於定義一類事物的定義情形
如:對專有名詞,專業術語進行解釋時
2、語法:
<dl>
<dt>專業名詞/術語</dt>
<dd>對上述的名詞或術語進行的解釋</dd>
</dl>
3、使用場合
“圖文混排時”,優先使用定義列表