標籤：網際網路 郵件 註冊 檔案夾 aci submit password 重設 selected
<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標籤之前。
<!DOCTYPE> 聲明不是 HTML 標籤；它是指示 網頁瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。
html 文檔結構:
1, <!DOCTYPE Hhtml> 聲明為html5 文檔.
2, <html></html> 是文檔的開始標記和結束標記.
是HTML頁面的根項目, 在他們之間是文檔的頭部(head)和主體(body)
3, <head></head> 定義了HTML文檔的開頭部分. 他們之間的內容不會在瀏覽器的文件視窗顯示.
其中包含了文檔的元(meta)資料.
4, <title></tiile> 定義了網頁標題, 在瀏覽器標題顯示.
5, <body></body> 之間的文本是課件的網頁主體內容.
注意: 對於中文網頁需要使用<meta charset="utf-8">聲明編碼, 否則會出現亂碼.
有些瀏覽器會設定GBK為預設編碼, 此時, 你需要設定為<meta charset="gbk">
在必要的時候可以添加一個相容的開原始碼塊.來相容各種瀏覽器
html 標籤是由角括弧包圍的關鍵字, 例如<html>, <div>等
html 標籤通常是成對出現的. 例如<div></div> , 第一個標籤是開始, 第二個標籤是結束. 結束標籤會有斜線.
也有一部分呈現的, 比如<br/>、<hr/>、<img src="1.jpg" />等。
標籤裡面可以有若干屬性,也可以不帶屬性.
標籤文法:
<標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分</標籤名>
<標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />
幾個重要的屬性:
id: 定義標籤的唯一ID, HTML文檔樹中唯一
class: 為html元素定義一個或多個類名(classname)(CSS樣式類名)
style: 規定元素的行內樣式(css樣式)
html 注釋: <!--內容-->
<head></head> 之間的內容是給瀏覽器看的, 不是給使用者看的.
其中可以存放:
標籤意義
<title></title> 定義網頁標題美 /‘ta?tl/
<style></style> 定義內部樣式表英 /sta?l/
<script></script> 定義JS代碼或引入外部JS檔案美 /skr?pt/
<link/> 引入外部樣式表檔案美 /l??k/
<meta/> 定義網頁原資訊英 /‘met?/
Meta
<meta> 元素可提供有關頁面的原資訊(meta-information), 針對搜尋引擎和更新頻度的描述和關鍵詞
<meta> 標籤位於文檔頭部, 不包含任何內容.
<meta> 提供的資訊是使用者不可見的.
meta標籤的組成: meta 標籤共有兩個屬性, 他們分別是 http-equiv屬性和name屬性,
不同的屬性又有不同的參數值, 這些不同的參數值就實現了不同的網頁功能.
1, http-equiv屬性, 相當於http的檔案頭作用, 可以向瀏覽器傳回一些有用的資訊, 以協助
正確的顯示網頁內容, 與之對應的屬性值為content, content 中的內容其實就是哥哥參數的變數值.
<!--2秒後跳轉到對應的網址，注意引號 content 內容 美 /‘kɑnt?nt/ -->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文檔的編碼類別型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告訴IE以最進階模式渲染文檔-->
<meta http-equiv="x-ua-compatible (開啟最進階渲染)" content="IE=edge">
2, name屬性: 主要用於描述網頁, 與之對應的屬性值為content,
content中的內容主要是便於搜尋引擎機器人尋找資訊和分類資訊用的.
<meta name="keywords" content="meta總結, html meta, meta屬性,meta跳轉">
<meta name="description" content="老男孩教育python學院">
<body> </body> 之間內容是給使用者看的
1,其常用標籤:
1,獨佔一行的: 塊級標籤,
1, h1~h6 # 1~6級標題
2, p # 段落標籤
3, div # 定義一個區塊層級元素, 並不實際意義, 主要通過css樣式為期賦予不同表現.
4, hr # 橫線
5, li # 有序列表
<ol>
<li>第一項</li>
<li>第二項</li>
</ol>
6, tr # <tr> 標籤定義 HTML 表格中的行。
2,內容在一行顯示的: 行內標籤
1, a # 匯入連結(可以使網頁連結 也可以是絕對路徑, 圖片在通檔案夾時, 匯入圖片名)
2, span # 標籤用來定義內聯(內行)元素, 並無實際意義, 主要通過css樣式為其賦予不同的表現.
3, img # (圖片匯入).
<img src="圖片路徑" alt="圖片未載入成功時的提示" title="滑鼠懸浮時提示資訊"
width="寬" height="高(高和寬兩個屬性只用一個會自動等比縮放)">
4, b/u/i/s # b 加粗 U 底線 i 傾斜 s 刪除(在文字上有條橫線)
5, input
3, br 換行 hr 橫線(水平線)
特殊字元:
空格:
>: >
<: ⁢
&: &
￥: ¥
著作權: ©
註冊: ®
div標籤 和span標籤
div標籤是用來定義一個區塊層級元素, 並無實際的意義, 主要通過CSS樣式為其賦予不同的表現.
span標籤用來定義內聯(內行)元素, 並無實際的意義, 主要通過CSS樣式為其賦予不同的表現.
區塊層級元素與行內元素的區別:
所謂的區塊層級元素, 是以另起一行開始渲染的元素, 行內元素則不需要另起一行.
如果單獨在網頁中插入這兩個元素, 不會對頁面產生任何的影響.
這兩個元素是專門為定義CSS樣式而生的.
注意:
關於標籤嵌套: 通常區塊層級元素可以包含內嵌元素或者某些區塊層級元素,
但是內嵌元素不能包含區塊層級元素, 它只能包含其他內嵌元素.
p標籤不能包含塊級標籤, p標籤也不能包含p標籤.
2, 標籤的嵌套
1, 標籤可以嵌套標籤(塊級標籤可以包內斂標籤)
注意事項:
盡量不要用內斂標籤嵌套塊級標籤.
P標籤不能嵌套p標籤
p標籤不能嵌套div標籤
<img>標籤: 匯入圖片的標籤
<img src="圖片的路徑" alt="圖片未載入成功的時候的提示" title="滑鼠懸浮是提示的資訊"
width="寬" height="高(寬高兩個屬性只設定一個的時候,自動等比縮放)">
a標籤: 超連結標籤
所謂的超連結是指從一個網頁指向另一個目標的串連關係, 這個目表可以是另一個網頁,
也可以是相同網頁上的不同位置(網址連結),還可以是一個圖片(網址連結), 一個電子郵件地址(emall)
一個檔案(路徑, 不常用), 甚至是一個應用程式.
麼是URL？
URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱為網頁地址，是網際網路上標準的資源的地址。
URL舉例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
URL地址由4部分組成
第1部分：為協議：http://、ftp://等
第2部分：為網站地址：可以是網域名稱或IP地址
第3部分：為頁面在網站中的目錄：stu
第4部分：為頁面名稱，例如 index.html
各部分之間用“/”符號隔開。
<a href="http://www.oldboyedu.com" target="_blank" >點我</a>
href屬性指定目標網頁地址。該地址可以有幾種類型：
絕對URL - 指向另一個網站（比如 href="http://www.jd.com）
相對URL - 指當前網站中確切的路徑（href="index.htm"）
錨URL - 指向頁面中的錨（href="#top"）
target：
_blank表示在新標籤頁中開啟目標網頁
_self表示在當前標籤頁中開啟目標網頁
列表
分為 無序列表(ul)
<ul type="disc">
<li>第一項</li>
<li>第二項</li>
</ul>
disc 實心圓點, 預設值
circle 空心圓圈
square 實心方塊
none 無樣式
有序列表(ol)
<ol type="1" start="2">
<li>第一項</li>
<li>第二項</li>
</ol>
type屬性：
1 數字列表，預設值
A 大寫字母
a 小寫字母
Ⅰ大寫羅馬
ⅰ小寫羅馬
標題列表(dl)(又叫做自訂欄表)
<dl>
<dt>標題1</dt>
<dd>內容1</dd>
<dt>標題2</dt>
<dd>內容1</dd>
<dd>內容2</dd>
</dl>
表格
表格是一個二維資料空間, 一個表格由若干個行組成, 一行又有若干個儲存格組成,
儲存格裡可以包含數字, 列表, 圖案, 表單, 數字記號, 預設文本和其他的表哥等內容.
表格最重要的目的是顯示表格類資料, 表格類資料是指最適合組織為表格格式
(即按行和列組織.)的資料.
表格的基本結構:
<table>
<thead> # 表頭
<tr>
<th>序號</th> # 表格內部標題標籤 th == text head
<th>姓名</th>
</tr>
</thead>
<tbody> # 表格內容
<tr> # 每行
<td>2</td>
<td>Yuan</td>
</tr>
</tbody>
</table>
表格屬性:
border: 表格邊框
cellpadding:內邊距
cellspacing:外邊距
width:像素百分比(最好通過css來設定長寬)
rowspan:儲存格豎跨多少行
colspan:儲存格橫跨多少行(即合併儲存格)
表單 form
表單的功能讓:
表單用於向伺服器傳輸資料,從而實現使用者與web伺服器的互動
表單能夠包含input系欄標籤, 比如文字欄位, 複選框, 單選框, 提交按鈕等等.
表單還可以包含textarea, select, fieldset, label標籤.
表單屬性
屬性描述
accept-charset規定在被提交表單中使用的字元集（預設：頁面字元集）。
action規定向何處提交表單的地址（URL）（提交頁面）。
autocomplete規定瀏覽器應該自動完成表單（預設：開啟）。
enctype規定被提交資料的編碼（預設：url-encoded）。
method規定在提交表單時所用的 HTTP 方法（預設：GET）。
name規定識別表單的名稱（對於 DOM 使用：document.forms.name）。
novalidate規定瀏覽器不驗證表單。
target規定 action 屬性中地址的目標（預設：_self）。
1, action 控制往哪提交資料.
2, method get/post, http 請求的兩種方法.
3, enctype 當
input
<input> 元素會根據不同的type屬性, 變化為多種形態.
type值屬性工作表現形式對應代碼
text單行輸入文本<input type="text"/>
password密碼輸入框<input type="passwor"/>
date日期輸入框<input type="date"/>
checkbox複選框<input type="checkbox" checked="checkde"/>
radio單選框 <input type="radio"/>
submit提交按鈕<input type="submit" value="提交"/> # type 表示提交按鈕,後面的value表示按鈕上顯示的字
reset重設按鈕<input type="reset" value="重設"/>
button普通按鈕<input type="button" value="普通按鈕"/>
hidden隱藏輸入框<input type="hidden"/>
file文本選擇框<input type="file">
屬性說明:
name: 表單提交時的"鍵", 注意和id的區別
value: 表單提交時, 對應項的值.
type="button" , "reset","submit" 時, 為按鈕上顯示的常值內容
type="text", "password", "hidden"時, 為輸入框的初始值
type="checkbox", "radio", "file", 為輸入相關聯的值.
checked: radio和checkbox預設被選中的項
readonly: text和password設定唯讀
disabled: 所有input 均適用.
select 標籤 # 可以用來選擇, (下拉框那種的)
例子:
<form action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">上海</option>
<option value="3">廣州</option>
<option value="4">深圳</option>
</select>
</form>
屬性說明:
multiple: 布爾屬性, 設定後為多選, 否則預設單選
disabled: 禁用
selected: 預設選中該項
value: 定義提交時的選項值
lable標籤
定義<label> 標籤, input 元素定義圖說文字(標記)
說明:
label 元素不會像使用者呈現任何特殊效果.
<label> 標籤的for屬性值應當與相關元素的id 屬性值相同.
例子:
<form action="">
<label for="username">使用者名稱</label>
<input type="text" id="username" name="username">
</form>
textarea多行文本:
<textarea name="memo" id="memo" cols="30" rows="10">
預設內容
</textarea>
屬性說明:
name: 名稱
rows: 行數
cols: 列數
disabled: 禁用
前端基礎------CSS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
