用HTML進行網頁佈局

weixin_43000064發表於2020-12-28
HTML網頁

用HTML進行網頁佈局

表單的初級驗證

表單驗證的好處：
1.減輕伺服器的壓力
2.保證資料的可行性和安全性
表單驗證的方法：
placeholder;文字框底層文字 類似於背景文字
required;規定此框為必填項
pattern;使用者輸入的內容必須符合正規表示式所指的規則，否則就不能提交表單

CSS基本語法

選擇器 { 宣告1;
宣告2;
…… }

h1 {
	font-size:12px;
	color:#F00;
}

style標籤

<style type="text/css">
h1 {
	font-size:12px;
	color:#F00;
}
</style>

CSS級聯樣式表

行內樣式：寫在標籤內部（style中）
內部樣式：style標籤內部（head中）
外部樣式：寫在外部的CSS 檔案中
內部樣式和外部樣式的優先順序：
1.如果有相同標籤，更靠近Body中的HTML優先順序更高
2.如果沒有。內層標籤樣式優先順序更高

1.行內樣式

使用style屬性引入CSS樣式

<h1 style="color:red;">style屬性的應用</h1>
<p style="font-size:14px; color:green;">直接在HTML標籤中設定的樣式</p>

2.內部樣式表

CSS程式碼寫在的

<style>
        h1{color: green; }
</style>

優點
方便在同頁面中修改樣式
缺點
不利於在多頁面間共享複用程式碼及維護，對內容與樣式的分離也不夠徹底

3.外部樣式表

CSS程式碼儲存在副檔名為.css的樣式表中
HTML檔案引用副檔名為.css的樣式表，有兩種方式
連結式
匯入式
連結外部樣式表

<head>
  ……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>

匯入外部樣式表

<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

連結式與匯入式的區別

標籤屬於XHTML，@import是屬於CSS2.1 使用連結的CSS檔案先載入到網頁當中，再進行編譯顯示 使用@import匯入的CSS檔案，客戶端顯示HTML結構，再把CSS檔案載入到網頁當中 @import是屬於CSS2.1特有的，對不相容CSS2.1的瀏覽器是無效的

CSS樣式優先順序：
行內樣式>內部樣式表>外部樣式表
就近原則

CSS基本選擇器

標籤選擇器

基本語法：

p { font-size:16px;}

類選擇器

基本語法：

.class { font-size:16px;}

ID選擇器

基本語法：#id { font-size:16px;}

標籤選擇器直接應用於HTML標籤
類選擇器可在頁面中多次使用
ID選擇器在同一個頁面中只能使用一次

基本選擇器優先順序:
ID選擇器>類選擇器>標籤選擇器

相關文章