web前端基礎筆記1
<!--整個頁面的根標籤，一個頁面只需要一個，由頭和體組成。-->
<html>
<!--頭標籤，用於引入指令碼、匯入樣式等。一般情況下頭標籤的內容在瀏覽器端都不顯示。-->
<head>
<!--子標籤，用於顯示瀏覽器標題。-->
<title>這是標題</title>
</head>
<!--體標籤，是整個網頁的主體，我們編寫的html程式碼基本都在此標籤體內。-->
<body>
這是正文
</body>
</html>
案例相關的標籤
<h1></h1> 標題標籤
<h1> 定義最大的標題。<h6> 定義最小的標題。
<hn>標題標籤</hn>n的取值1-6
<hr />水平線標籤
<hr /> 標籤在 HTML 頁面中建立一條水平分隔線。
size屬性： 水平線的高度，單位畫素：px
noshade屬性： 沒有陰影，取值：noshade，表示顯示純色
<font>字型標籤
<font size="1">我個子最小</font>
<font size="3">可能的值：從 1 到 7 的數字。瀏覽器預設值是 3。</font>
<font size="8">我個子最大</font>
<font color="#c00FFFF">未知顏色1號</font>
<font color="#F00">未知顏色1號</font>
<font color="blue">我是藍色</font>
<font face="微軟雅黑">微軟雅黑字型</font>
<font face="黑體">黑體</font>
<b></b>加粗標籤
<b>我是粗體標籤</b>
<i></i>斜體標籤
<i>我是斜體標籤</i>
<p></p>段落標籤
<br />換行標籤
<p>前面P與P之間是段落標記<br/>而前面的br/標誌是代表著換行</p>
特殊字元標籤
符號名稱HTML頁面展示
空格符
<小於號<
>大於號>
©版權符©
¥元(yen)¥
圖片標籤
<img src="圖片的路徑地址"/>
1）src：表示圖片的路徑，一般使用當前伺服器，也可以使用其它伺服器。不能使用本地地址。
屬性名稱含義作用
src圖片的路徑地址表示圖片的路徑，一般使用當前伺服器，也可以使用其它伺服器。不能使用本地地址。
width寬度如果只設置其中一項，那麼圖片會等比例縮放
height高度
title提示文字滑鼠懸停在圖片上方會出現的文字資訊
alt替換文字圖片載入失敗的時候才會出現的文字資訊
border邊框只能定義邊框的粗細
5、網站列表頁展示
5.2、相關知識點
5.2.1、列表標籤：<ul><ol>
5.2.1.1、無序列表<ul>
<ul type="disc">
<li>內容一</li>
<li>內容二</li>
</ul>
ul無序列表的屬性：
名稱含義
type="circle"空心圓
type="disc"預設值，實心黑色圓
type="square"實心黑色正方形
5.2.1.2、有序列表<ol>
<ol type="1">
<li>內容一</li>
<li>內容二</li>
</ol>
ol有序列表的屬性：
名稱形式
type="1"預設值，1、2、3...
type="a"小寫的英文字母，a、b、c...
type="A"大寫的英文字母，A、B、C...
type="i"小寫的羅馬數字，i、ii、iii...
type="I"大寫的羅馬數字，I、II、III...
5.2.2、超連結標籤：<a>
<a> 標籤是超連結。頁面中必不可少的一個標籤，網際網路正是因為有了超連結而變得豐富多彩，我們可以通過超連結跳轉頁面、跳轉圖片等相應的操作。
<a href="跳轉的路徑地址"></a>
超連結的屬性：
名稱作用取值
href用於確定需要顯示頁面的路徑（URL）必寫屬性
target確定以何種方式開啟href所設定的頁面_blank 新視窗開啟
_self 在自己的頁面中開啟，將原來頁面覆蓋。
預設開啟方式
5.2.2.2、空連線
如果我們希望這是一個連結，但是使用者單擊之後又不需要跳轉，那麼這種稱之為空連結，也叫做假連結。
<a href="#"></a>
<a href="javascript:;"></a> √建議使用這個
<a href="javascript:"></a> √建議使用這個
<a href="javascript:void(0);"></a>
<a href="javascript:void(0)"></a>
錨點連結
用法：
1、首先建立點選跳轉的連結a標籤，href寫上 #錨點名 實現一個繫結的操作。
2、定義一個錨點a標籤，定義一個name屬性，name的值要與錨點名一致，這個操作也稱之為拋錨。
<a href="#錨點名">點選跳轉</a>
<a name="錨點名">目標區域</a>
6.2.1.1、表格標籤<table><tr><td>
HTML表格由<table>標籤以及一個或多個<tr>、<th>(表頭)或<td>標籤組成
<table> 是父標籤，相當於整個表格的容器。
table標籤的屬性：
名稱作用
border表格邊框的寬度
width表格的寬度
height表格的高度
cellpadding單元格邊沿與其內容之間的空白
cellspacing單元格之間的空白
bgcolor表格的背景顏色
<tr>標籤用於定義行
tr標籤的屬性：
名稱作用
align單元格內容的水平對齊方式,
取值：left 左 、right 右、center 居中
<td>標籤用於定義表格的單元格（一個列）
td標籤的屬性：column 列 row 行
名稱作用
colspan單元格可橫跨的列數(橫向合併單元格)
rowspan單元格可橫跨的行數(縱向合併單元格)
align單元格內容的水平對齊方式,
取值：left 左 、right 右、center 居中
<!--表格的屬性:邊框寬度 表格寬度 表格高度 -->
<table border="1px" width="400px" height="300px"
<!--單元格間距 單元格邊距 背景顏色排列方式 居中-->
cellspacing="0" cellpadding="0" bgcolor="blue" align="center">
注意:表格屬性也可以單獨設定為列屬性行屬性
1）表格預設是沒有邊框的，需要手動新增border的屬性，每一個單元格的大小是根據內容自動適配的，
同樣可以給表格標籤設定整體的大小。
2）改變table表格的背景顏色，在table標籤中新增一個屬性 bgcolor，然後設定屬性值即可。
3）通過新增表格邊框我們發現單元格和單元格之間具有縫隙，如果想把單元格之間的距離以及
單元格和內容之間的距離清除，那麼需要在table表格標籤上加上cellspacing(單元格之間
的空白)和cellpadding(單元格邊沿與其內容之間的空白)分別設定為0。
<tr align="center">
4）另外還有一個屬性align水平對齊方式，加在tr身上是改變這一行裡面所有單元格的內容，
如果加在td身上就是改變這一個單元格內容。
6.2.3、帶有表頭的表格
如果希望某一個單元格是一個標題，可以把單元格標籤td改寫成th，
標題自帶加粗和居中的頁面顯示效果。
6.2.4、合併單元格
表格可以合併單元格的操作，通過跨行和跨列的標籤屬性進行合併，
但是要注意被合併的單元格標籤需要手動刪除才可以。
1)跨行使用td標籤中的rowspan屬性可以實現縱向合併單元格。(合併行)
2)跨列使用td標籤中的colspan(橫向合併單元格)。 (合併列)
<table border="1" width="400" cellspacing="0" cellpadding="10" align="center">
<tr>
<th>姓名</th>
<th colspan="4">手機號</th>
</tr>
<tr>
<td rowspan="2">張三</td>
<td>13800000000</td>
<td>13800000001</td>
</tr>
<tr>
<td>合併行專用</td>
<td>合併行專用</td>
</tr>
<tr>
<td>李四</td>
<td>13800000000</td>
<td>13800000001</td>
</tr>
</table>
6.2.5、關於table表格的標籤補充
標籤名作用
caption整個表格的標題
tbody表格主體，無論有沒有寫tbody，瀏覽器都會在解析的時候生成一個tbody標籤