HTML+CSS 基礎知識
阿新 • • 發佈：2018-12-03
Web前端技術
- web前端技術是由
w3c組織制定的一系列技術的集合包含：
- HTML — 結構標準：負責頁面內容。
- CSS — 樣式標準/表現標準：負責頁面美化。
- js — 行為標準：負責網頁行為動作、表單驗證、資料互動。
html
- 超文字標記語言。
- 超文字：帶符號的文字。
html 發展歷史
html-1.0 —1993年起草了一個草案，純文字格式，靈感來源於報紙。
html-2.0 — 沒有發生太大的改動。
html-3.0 — 沒有發生太大的改動。
html-4.0 — 意識到之前的版本問題：語法鬆散 Aa(大小寫不統一)。
- 後來就出現了—xhtml-1.0(嚴格型的 html-相對嚴格：相容之前的版本)。
html-5.0 — 是由瀏覽器廠商提出的構想，最終w3c研發。
html 標記語法
- <標記名字>
預設程式碼作用
- html — 作用：表示整個網頁文件。
- head — 網頁頭部 作用：存放所有需要瀏覽器渲染的程式碼、css、js。
- body — 網頁主題 作用：存放所有給使用者看的資訊。
- title — 網頁標題。
- < DOCTYPE html>：文件宣告，規定文件DTD格式：規定好所有瀏覽器都取一個html版本解決接下來的所有程式碼 — 為了解決相容性。
- < mate> 標籤基本上是給seo：搜尋引擎優化用的。
常用的佈局標籤
html屬性：
- html屬性 鍵值對規則 k=”v” 一個標籤可以寫多個鍵值對，用空格隔開
常用標籤：
- < h1>標題
- < p>段落
- < div>佈局常用的標籤：劃分模組劃分區域的地方都是佈局 – 都用div標籤：裡面可以放任何內容任何標
以下標籤不自動換行：
- < span>span不欄位換行，放一些小的圖示，存放特殊的效果文字
- < b>字型加粗
- < i>字型傾斜
- < u>字型新增下劃線
- < s>刪除線
強調語氣的標籤 —搜尋引擎優先抓取這種帶有強調語義標籤的內容：
- < strong>加粗帶有強調語義
- < em>傾斜帶有強調語義
- < ins>下劃線帶有強調語義
- < del>刪除線帶有強調語義
圖片標籤：
- < img src=”icon.jpg” alt=”替換文字，圖片無法顯示的時候顯示的文字” title=”提示文字”>
- src：放在專案中儲存圖片的路徑
- alt：1、替換文字；2、支援盲人讀屏軟體
- title：1、提示資訊；2、seo放搜尋關鍵字
超連結標籤：
- < a href=”在本地專案目錄中儲存的檔案.html” target=”_blank” >跳轉到本地檔案
- target=”_blank” 新視窗開啟頁面
- href=’#’ 不知道跳轉地址，假連線
在html標籤中寫尺寸不需要加px(畫素)：
- 比如： border=”1”
<!-- 標題標籤 標記 == 標籤 共6級 h1 -- h6 -->
<!-- 經驗： 一個網頁只能出現一次h1，h1是主標題，這個h1用來放網頁的logo -->
<h1>h1標題</h1>
<h2>h2標題</h2>
<h3>h3標題</h3>
<h4>h4標題</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>段落</p>
<div>佈局常用的標籤：劃分模組劃分區域的地方都是佈局 -- 都用div標籤：裡面可以放任何內容任何標</div>
<!-- span作用：存放特殊效果的文字、小圖片 這個標籤不自動換行-->
<span>span</span>
<span>span</span>
<!-- 這些標籤不自動換行 -->
<b>加粗</b>
<i>傾斜</i>
<u>下劃線</u>
<s>刪除線</s>
<!-- 所有標籤都自帶語義 -->
<!-- 帶有強調語義 搜尋引擎優先抓取這種帶有強調語義標籤的內容 -->
<strong>加粗帶有強調語義</strong>
<em>傾斜帶有強調語義</em>
<ins>下劃線帶有強調語義</ins>
<del>刪除線帶有強調語義</del>
<!-- html屬性 鍵值對規則 k="v" 一個標籤可以寫多個鍵值對，用空格隔開 -->
<!-- src：放在專案中儲存圖片的路徑 -->
<!-- alt：1、替換文字；2、支援盲人讀屏軟體 -->
<!-- title：1、提示資訊；2、seo放搜尋關鍵字 -->
<img src="icon.jpg" alt="替換文字，圖片無法顯示的時候顯示的文字" title="提示文字">
<!-- 超連結標籤的作用 -->
<a href="http://www.baidu.com">百度</a>
<a href="在本地專案目錄中儲存的檔案.html">跳轉到本地檔案</a>
<a href="#">不知道跳轉地址 假連結</a>
<!-- target="_blank" 新視窗開啟頁面 -->
<a href="http://www.taobao.com" target="_blank"><img src="1.jpg" alt="圖片無法顯示的img"></a>CSS嵌入式寫法
- 就是在html中 引入< style>標籤 把css的屬性引入到<相對應標籤中>。
< style>標籤的作用：
- < style type=”text/css”> 寫css樣式的標籤
- 格式：純文字的css
- type: 屬性可有可無
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
/* 格式：純文字的css type屬性可有可無 */
/* logo文字變紅色 -- h1的文字顏色是紅色 */
h1{
/* css鍵值對 k:v; */
color:red;
}
</style>
</head>
<body>
<!-- -->
<h1>fe_cow嵌入式測試</h1>
</body>
</html>CSS外鏈式寫法
- 建立一個.css的檔案，將css的樣式寫入裡面，然後在html 通過< link>把.css檔案匯入到html中。
- 簡單的解釋就是html和css分開單獨檔案存放。
外鏈式的< meta>標籤和< link>標籤：
- < meta>標籤大多數都是seo在做搜尋引擎需要的多一些，這裡不介紹詳細的解釋
- < link rel=”stylesheet” href=”mycss.css”> :
- href 寫css檔案在本地的地址
- rel:html和css檔案的關係：stylesheet 樣式表、樣式單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="mycss.css">
<!-- href 寫css檔案在本地的地址 -->
<!-- rel:html和css檔案的關係：stylesheet 樣式表、樣式單 -->
</head>
<body>
<!-- html和css分開單獨檔案存放 -->
<div>fe_cow外鏈式測試</div>
</body>
</html>CSS行內式寫法
- 將css屬性 直接寫入<標籤中 style=’xx:xx’>這個寫法不好，會出現重複程式碼，而且易讀性較差。載入速度慢。
- css鍵值對中允許一個k對應多個v，各個值之間用空格隔開。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 標籤身上加style=“css鍵值對” html屬性 -->
<p style="color:blue;">fe_cow行內式</p>
<!-- 嵌入式：提高載入速度 -->
</body>
</html>常用文字控制屬性
這裡寫在css的樣式裡面
P{} ：
- p就是代表標籤名，這裡指的是p標籤
- {} 裡面寫css的程式碼
字號大小：
font-size: 30px;
px是畫素 css尺寸必須帶單位
字型型別（中文得加”“雙引號）：
- font-family: “宋體”
字型是否加粗：
- font-weight: bold;
取消字型的加粗狀態：
- font-weight: normal;
字型是否傾斜：
- font-style: italic;
取消字型的傾斜狀態：
- font-style: normal;
文字修飾線：
- text-decoration: underline;
行間距 行高：
- line-height: 100px;
首行縮排：
- text-indent: 2em;
- 首行縮排
取消超連結字型下面的_橫線：
- text-decoration: none;
給超文字字型加刪除線：
- text-decoration: line-through
給一個標籤框描邊：
border: red 1px solid ；
border:顏色 粗細 線段種類; – 值不分順序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
color: blue;
/* px是畫素 css尺寸必須帶單位 */
/* 字號大小 */
font-size: 30px;
/* 字型型別（中文得加""雙引號） */
font-family: "宋體";
/* 字型是否加粗 */
font-weight: bold;
/* 字型是否傾斜 */
font-style: italic;
/* 文字修飾線 */
text-decoration: underline;
/* 行間距 行高 */
line-height: 100px;
/* em 一個字的大小 */
/* 首行縮排 */
text-indent: 2em;
}
b{
/* 取消字型的加粗狀態 */
font-weight: normal;
}
i{
/* 取消字型的傾斜狀態 */
font-style: normal;
}
a{
/* 取消超連結字型下面的_橫線 */
text-decoration: none;
/* 給超文字字型加刪除線 */
/* text-decoration: line-through; */
/* 給超文字字型上面新增橫線 一般用不到 */
/* text-decoration: overline; */
}
</style>
</head>
<body>
<p>fe_cow 希望大家多多關注我哦，我會每天都更新的。熱愛技術，學無止境！</p>
<b>加粗</b>
<i>傾斜</i>
<a href="#">超連結</a>
</body>
</html>基礎佈局屬性
- 可以執行下面程式碼，檢視一下最基本的佈局屬性
- 設定寬度：
- width: 300px;
- 設定高度：
- height: 200px;
- 設定背景顏色：
- background: green;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 300px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>類選擇器
定義：以
點開頭，後面緊跟類選擇器的名字,名字自定義，滿足規則：不要用特殊符號，不能數字開頭，然後跟大括號寫鍵值對。下面我們舉個更簡單易懂的栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 類選擇器：定義 使用 */
/* 定義：以點開頭，後面緊跟類選擇器的名字,名字自定義，滿足規則：不要用特殊符號，不能數字開頭，然後跟大括號寫鍵值對 */
/* 使用：在標籤身上新增html屬性 class=“類選擇器的名字” */
.app{
color: red;
}
</style>
</head>
<body>
<div>Au_cow</div>
<div class="app">Ag_cow</div>
<div>Cu_cow</div>
<div class="app">Fe_cow</div>
<div>Al_cow</div>
</body>
</html>id選擇器
定義id ：要求
#開頭，後面緊跟名字id要求：一個頁面同一個id名
只能使用一次：前端不用id選擇器寫css，用id選擇器做資料互動。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* div{} */
/* 定義id ：要求#開頭，後面緊跟名字 */
/* id要求：一個頁面同一個id名只能使用一次：前端不用id選擇器寫css，用id選擇器做資料互動 */
#red{
color: red;
}
</style>
</head>
<body>
<div>au_cow</div>
<div id="red">ag_cow</div>
<div id="red">fe_cow</div>
</body>
</html>層級選擇器
- 重點 ： 父
子{} – 有空格的就是層級選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* li{
color: red;
} */
/* 重點*** ： 父 子{} -- 有空格的就是層級選擇器 */
/* ul li{
color: red
} */
.box .aa{
color: green;
}
div .bb{
color: blue;
}
</style>
</head>
<body>
<ul class="box">
<li class="aa">ul li</li>
</ul>
<ol>
<li>ol li</li>
</ol>
</body>
</html>組選擇器
- 組選擇器符號
逗號隔開
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* body{} */
/* *{} */
/* *** 組選擇器符號 逗號 */
div,h1,span,p{
color: red;
}
</style>
</head>
<body>
<div>div</div>
<h1>h1</h1>
<span>span</span>
<p>ppppp</p>
</body>
</html>偽類選擇器
偽類表示的是狀態，所有偽類選擇器都是
冒號開頭後面緊跟一個w3c定義好的表示狀態的單詞。偽類一共有4個：
a代表的是< a>標籤
點選前的顏色：
- a:link{
color: red;
} - 點選後的顏色：
- a:visited{
color: green;
} - 滑鼠滑過的顏色：
- a:hover{
color: blue;
} - 滑鼠點住不放的顏色：
- a:active{
color: yellow;
}
以上4種都不是很常見，常見的如下栗子：
- 點選前預設的顏色：
- a{ color:red;}
- 滑鼠滑過的顏色：
- a:hover{
color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* a的偽類一共有4個 */
/* a:link{
color: red;
}
a:visited{
color: green;
}
a:hover{
color: blue;
}
a:active{
color: yellow;
} */
a{ color:red;}
a:hover{
color: blue;
}
</style>
</head>
<body>
<!-- 偽類表示的是狀態，所有偽類選擇器都是冒號開頭 後面緊跟一個w3c定義好的表示狀態的單詞 -->
<a href="#">於鍵</a>
</body>
</html>選擇器權重
標籤選擇器<類選擇器<id選擇器外鏈式和嵌入式誰在下誰生效<行內式想讓一個css樣式權重最大的話，就在css樣式裡面，加
!important 提權功能，提高權重到最高
列表
- 無序列表、有序列表、自定義列表
- 去掉ul(無序列表)標籤中每個li前面的點:
- list-style: none;
- 去掉ol(有序列表)標籤中每個li前面的序號：
- list-style:none;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul{
/* 去掉每個li前面的點 */
list-style: none;
}
ol{
/* 去掉每個li前面的序號 */
list-style:none;
}
</style>
</head>
<body>
<!-- **** 無序列表 結構：ul巢狀（包含）li，ul表示無序列表整體，li是列表的某一項 -->
<ul>
<li>fe_cow_01</li>
<li>fe_cow_02</li>
<li>fe_cow_03</li>
</ul>
<!-- **** 有序列表 結構：ol巢狀（包含）li，ul表示無序列表整體，li是列表的某一項 -->
<ol>
<li>fe_cow_01</li>
<li>fe_cow_02</li>
<li>fe_cow_03</li>
</ol>
<!-- 專案列表/自定義列表：dl巢狀dt和dd，dl是自定義列表整體，dt是列表的標題，dd是列表的描述 -->
<dl>
<dt>列表標題</dt>
<dd>描述文字................</dd>
</dl>
</body>
</html>表格
- 國內2005年網際網路網站大量改變從表格(瀏覽器載入完所有表格才顯示頁面效果)，佈局改成
div+css瀏覽器讀取一行程式碼顯示一行程式碼的效果。 - < table>標籤：
- table巢狀tr，tr巢狀td，table是整個表格，tr是行，td是單元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table{
/* font-size: 30px; k:v;
width: 500px; */
/* css鍵值對中允許一個k對應多個v，各個值之間用空格隔開 */
/* border:顏色 粗細 線段種類; -- 值不分順序 */
border: red 1px solid;
/* 合併邊框線 -- 單線表格 */
/* border-collapse: collapse; */
}
td{
border: 1px red solid;
}
</style>
</head>
<body>
<!-- ******* 結構：table巢狀tr，tr巢狀td，table是整個表格，tr是行，td是單元格 -->
<!-- th 表頭 -->
<!-- html寫尺寸不加單位 border="1" -->
<!-- cellpadding：來開內容和td邊緣的距離 cellspacing：拉開td之間的距離 -->
<table cellpadding="30" cellspacing="50">
<tr>
<!-- colspan 橫向和格子 -->
<th colspan="2">1</th>
<!-- <td>2</td> -->
<th>3</th>
</tr>
<tr>
<td>1</td>
<!-- rowspan 豎向和格子 -->
<td rowspan="2">2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<!-- <td>2</td> -->
<td>3</td>
</tr>
</table>
</body>
</html>表單
- 應用場景：註冊、登入、搜尋
- form表單標籤：收集資料寫傳送地址: 表單域：
- < form action=”提交地址” method=”post”>
- 文字框：
- < input type=”text” value=”請輸入使用者名稱” placeholder=‘’>
- placeholder html5.0新增
- 密碼框：
- < input type=”password”>
- 單選框：
- < input type=”radio” name=”sex” id=”nan”>< label for=”nan”>男 < input type=”radio” name=”sex” id=”nv” checked> < label for=”nv”>女
- 1、實現單選功能：新增name=“”，且取值相同
- 2、擴大觸發區域：文字新增< label>標籤，保證label標籤的
for屬性和input標籤的id屬性取值完全相同 - 3、預設選中：
checked="checked"； - html5.0，如果k和v的值相等，可以省略只保留一個單詞
- 複選框/多選:
- < input type=”checkbox”>讀書 < input type=”checkbox”>旅遊 < input type=”checkbox” checked>lol
- 上傳檔案：
- < input type=”file”>
- 下拉選單：
- < select>
< option>中國臺灣
< option selected=”selected”>中國香港
< option value=”“>中國澳門
< /select> - 預設選中：
selected="selected"
- < select>
- 文字域：
- < textarea>
- css樣式：
- 禁止任意拖拽：
- resize: none;
- 去掉焦點框：
- outline: none;
- 提交按鈕：
- < input type=”submit” value=”註冊”>
- 普通按鈕：
- < input type=”button” value=”普通按鈕”>
- 重置按鈕：
- < input type=”reset”>
- 按鈕：
- < button>普通按鈕
- 換行標籤：
- < br>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
textarea{
/* 禁止任意拖拽 */
resize: none;
width: 500px;
height: 300px;
/* 去掉焦點框 */
outline: none;
}
</style>
</head>
<body>
<!-- form表單標籤：收集資料寫傳送地址: 表單域 -->
<!-- 支援使用者輸入的都得繼續寫功能性的標籤：表單控制元件 -->
<form action="提交地址" method="post">
<!-- placeholder html5.0新增 -->
文字框：<input type="text" value="請輸入使用者名稱">
<br><br>
密碼框：<input type="password">
<br><br>
單選框：<input type="radio" name="sex" id="nan"><label for="nan">男</label> <input type="radio" name="sex" id="nv" checked> <label for="nan">女</label>
<!--
1、實現單選功能：新增name=“”，且取值相同
2、擴大觸發區域：文字新增label標籤，保證label標籤的for屬性和input標籤的id屬性取值完全相同
3、預設選中： checked="checked"；
html5.0，如果k和v的值相等，可以省略只保留一個單詞
-->
<br><br>
複選框/多選: <input type="checkbox">讀書 <input type="checkbox">旅遊 <input type="checkbox" checked>lol
<br><br>