HTML及CSS筆記

語言: CN / TW / HK

目標:Front-end Engineer → Full-stack Engineer

瀏覽器及其核心

HTML

開發工具

sublime

輕量級的ide

1.使用技巧

h${}*6

vsCode

寫大專案時使用

1.使用技巧

SEO-搜尋引擎優化

<html lang= "en">
<head>
	<meta charset="utf-8">
    <!-- charset:編碼字符集-->
    <title>我是title</title>
    <meta content="服裝" name="keywords">
    <meta content="這是一件你穿了就不想脫的衣服" name="description">
</head>
<body>
    <!-- 告訴搜尋引擎爬蟲,我們的網站是關於什麼內容的 -->
    <!-- SEO -->
</body>
</html>

路徑

1. 網上url

<img src="https://xxxxxx.jpg" style="width:200px;">

2.本地的絕對路徑

D:/a/b/test.html

D:/a/b/c/123.jpg

<img src="D:/a/b/c/123.jpg>"

3. 本地的相對路徑

…/來表示上一級目錄

  1. D:/a/b/test.html

    D:/a/b/123.jpg

    <img src="123.jpg>"

  2. D:/a/b/test.html

    D:/a/c/123.jpg

    <img src="../c/123.jpg>"

標籤

♦ 代表h5新標籤

標籤 描述
<!--...--> 定義註釋。
<!DOCTYPE> 定義文件型別。
💎<a> </a> 1. 超連結
2. 定義錨href="#id1" target="_blank"連線有id的元素
3. 打電話href="tel:12345"
4. 協議限定符href="javascript:while(1){alert('1')}"


<abbr> </abbr> 定義縮寫。
<acronym> </acronym> 定義只取首字母的縮寫。
<address> </address> 定義文件作者或擁有者的聯絡資訊。
<applet> </applet> **不贊成使用。**定義嵌入的 applet。
<area /> 定義影象對映內部的區域。巢狀在<map>
<article> </article> 定義文章。
<aside> </aside> 定義頁面內容之外的內容。
<audio> </audio> 定義聲音內容。
<b> </b> 定義粗體字。
<base /> 定義頁面中所有連結的預設地址或預設目標。
<basefont /> **不贊成使用。**定義頁面中文字的預設字型、顏色或尺寸。
<bdi> </bdi> 定義文字的文字方向,使其脫離其周圍文字的方向設定。
<bdo> </bdo> 定義文字方向。
<big> </big> 定義大號文字。
<blockquote> </blockquote> 定義長的引用。
<body> </body> 定義文件的主體。
<br /> 定義簡單的折行。
<button> </button> 定義按鈕 (push button)。
<canvas> </canvas> 定義圖形。
<caption> </caption> 定義表格標題。
<center> </center> **不贊成使用。**定義居中文字。
<cite> </cite> 定義引用(citation)。
<code> </code> 定義計算機程式碼文字。
<col /> 定義表格中一個或多個列的屬性值。
<colgroup> </colgroup> 定義表格中供格式化的列組。
<command> </command> 定義命令按鈕。
<datalist> </datalist> 定義下拉列表。
<dd> </dd> 定義定義列表中專案的描述。來解釋<dt>
<del> </del> 定義被刪除文字。
<details> </details> 定義元素的細節。
<dir> </dir> **不贊成使用。**定義目錄列表。
<div> </div> 定義文件中的節。
<dfn> </dfn> 定義定義專案。
<dialog> </dialog> 定義對話方塊或視窗。
<dl> </dl> 定義無序定義列表。
<dt> </dt> 定義定義列表中的專案。
<em> </em> 定義強調文字。
<embed /> 定義外部互動內容或外掛。
<fieldset> </fieldset> 定義圍繞表單中元素的邊框。
<figcaption> </figcaption> 定義<figure>的標題。
<figure> </figure> 定義媒介內容的分組,以及它們的標題。
<font> </font> **不贊成使用。**定義文字的字型、尺寸和顏色。
<footer> </footer> 定義 section 或 page 的頁尾。
💎<form> </form> 定義供使用者輸入的 HTML 表單。可以傳送資料 method="get/post" action="地址" 裡面的是<input>
<frame /> 定義框架集的視窗或框架。
<frameset> </frameset> 定義框架集。
<h1> </h1> 定義 HTML 標題。
<head> </head> 定義關於文件的資訊。
<header> </header> 定義 section 或 page 的頁首。
<hr /> 定義水平線。
<html> </html> 定義 HTML 文件。
<i> </i> 定義斜體字。
<iframe> </iframe> 定義內聯框架。
💎<img /> 定義影象。src="" style="" alt="" title=""
💎<input /> 定義輸入控制元件。type="text/password/submit/radio/checkbox" value="提交" name="" 傳送資料
radio單選框控制name一致實現多組單選
onfocus="if(this.value=='請輸入使用者名稱'){this.value='';this.style.color='#fff'}"
onblur="if(this.value==''){this.value='請輸入使用者名稱';this.style.color='#999'}"
checked="checked"



<ins> </ins> 定義**入文字。
<isindex /> **不贊成使用。**定義與文件相關的可搜尋索引。
<kbd> </kbd> 定義鍵盤文字。
<keygen /> 定義生成金鑰。
<label> </label> 定義 input 元素的標註。
<legend> </legend> 定義 fieldset 元素的標題。
💎<li> </li> 定義有序ol無序ul列表的專案。
<link /> 定義文件與外部資源的關係。
<map> </map> 定義影象對映。
<mark> <mark> 定義有記號的文字。
<menu> </menu> 定義命令的列表或選單。
<menuitem> </menuitem> 定義使用者可以從彈出選單呼叫的命令/選單專案。
<meta> 定義關於 HTML 文件的元資訊。
<meter> </meter> 定義預定義範圍內的度量。
<nav> </nav> 定義導航連結。
<noframes> </noframes> 定義針對不支援框架的使用者的替代內容。
<noscript> </noscript> 定義針對不支援客戶端指令碼的使用者的替代內容。
<object> </object> 定義內嵌物件。
<ol> </ol> 定義有序列表。type=“1”(a/A/i/I) reversed=“reversed” start=“2”
<optgroup> </optgroup> 定義選擇列表中相關選項的組合。
💎<option> </option> 定義選擇列表中的選項。
<output> </output> 定義輸出的一些型別。
💎<p> </p> 定義段落。
<param /> 定義物件的引數。
<pre> </pre> 定義預格式文字。
<progress> </progress> 定義任何型別的任務的進度。
<q> </q> 定義短的引用。
<rp> </rp> 定義若瀏覽器不支援 <ruby>顯示的內容。
<rt> </rt> 定義 ruby 註釋的解釋。
<ruby> </ruby> 定義 ruby 註釋。
<s> </s> **不贊成使用。**定義加刪除線的文字。
<samp> </samp> 定義計算機程式碼樣本。
<script> </script> 定義客戶端指令碼。
<section> </section> 定義 section。
💎<select> </select> 定義選擇列表(下拉列表)。和<option>組合在一起,<select name= "province"> 而option裡的字預設是value
<small> </small> 定義小號文字。
<source> 定義媒介源。
<span> </span> 定義文件中的節。
<strike> </strike> **不贊成使用。**定義加刪除線文字。
<strong> </strong> 定義強調文字。
<style> </style> 定義文件的樣式資訊。
<sub> </sub> 定義下標文字。
<summary> </summary> <details>定義可見的標題。
<sup> </sup> 定義上標文字。
<table> </table> 定義表格。
<tbody> </tbody> 定義表格中的主體內容。
<td> </td> 定義表格中的單元。在<tr>
<textarea> </textarea> 定義多行的文字輸入控制元件。
<tfoot> </tfoot> 定義表格中的表注內容(腳註)。包裹住<tr>
<th> </th> 定義表格中的表頭單元格。在<tr>
<thead> </thead> 定義表格中的表頭內容。包裹住<tr>
<time> </time> 定義日期/時間。
<title> </title> 定義文件的標題。
<tr> </tr> 定義表格中的行。
<track> 定義用在媒體播放器中的文字軌道。
<tt> </tt> 定義打字機文字。
<u> </u> **不贊成使用。**定義下劃線文字。
💎<ul> </ul> 定義無序列表。type=“disc”(square/circle)
<var> </var> 定義文字的變數部分。
<video> </video> 定義影片。
<wbr> 定義可能的換行符。
<xmp> **不贊成使用。**定義預格式文字。

特殊標籤

&nbsp;

空格

&lt;

小於號 less than

&gt;

大於號 great than

傳送資料

資料名

資料值

傳送資料成功:

網頁導航欄顯示:....test.html?username= sunny&password=123

標籤的歸類

1. 行級元素 inline

內容決定元素所佔位置;

不可以通過css改變寬高

span strong em a del

凡是有inline的,都會帶有文字特性,會以4px分隔

2. 塊級元素 block

獨佔一行;

可以通過css改變寬高

div p ul li ol form address

3.行級塊元素|行內塊元素 inline-block

img

凡是有inline的,都會帶有文字特性,會以4px分隔

CSS

引入方式

1. 行間樣式

<div style="width:100px;"> </div>

2. 頁面級css

<style type="text/css"> </style>

3. 外部css檔案

<link rel="stylesheet" type="text/css" href="地址">

頁面載入

同步非同步問題

開啟一個網頁載入html檔案時,會非同步載入css檔案(非同步是同時的意思)

選擇器

1. id選擇器

一對一對應

<div id="only"> </div>

#only {}

2. class選擇器

多對多對應

<div class="demo demo1"> </div>

.demo {}

3. 標籤選擇器

<div></div>

div {}

4. 萬用字元選擇器

* {}

5. 屬性選擇器

[class] {}

[class="demo"] {}

6. 父子選擇器/派生選擇器

中間以空格隔開 是包括所有的子孫

選擇過程是自右向左的過程

7. 直接子元素選擇器

div > em {}

8. 並列選擇器

<div> <\div> <div class="demo"> </div> <p class="demo"> </p>

div.demo{}

9. 分組選擇器

分開的組,共用一個程式碼塊 公司裡喜歡各組單獨成行

em, strong, span {}

10. 偽類選擇器

a:hover {} [href]:hover {}

權重值

單個的大小比較

!important–>行間樣式–>id–>class | 屬性 | 偽類–>標籤選擇器–>萬用字元

css權重

Infinity<Infinity+1

元素 權重值(進位制256)
!important Infinity
行間樣式 1 0 0 0
id 1 0 0
class|屬性|偽類 1 0
標籤|偽元素 1
萬用字元 0

屬性名:屬性值;

善用字典查詢

註釋

/*我是註釋,只有塊註釋*/

字型相關屬性

font-size: 12px;

設定字型大小(字型的高) 瀏覽器預設是16px,常用是12,14px

font-weight: bold;

lighter normal|400 bold|700 bolder (數字表示100-900),有沒有變得更粗取決於改字型的字型包

font-style: italic;

normal:預設值,瀏覽器會顯示標準的字型樣式,italic: 斜體

font-family: arial;

喬布斯發明的字型:arial

color: #ffffff;
  1. low式:pink; (transparent是透明色)
  2. 顏色程式碼:#ffffff; 可簡化 #fff;
  3. 顏色函式: rgb(255,255,255);
text-align: left;

center: 居中顯示

line-height: 12px;

單行文字所佔高度 line-height = height:單行文字垂直居中

1.2em: font-size*1.2

text-indent: 2em;

首行縮排2個單位

1em= 1* font-size

text-decoration: line-through;

none:這個元素的樣式清除

underline; overline

cursor:pointer;

pointer: 滑鼠在上面變成小手

help:變成問號

copy…有很多

opacity:0.5;

不透明度 (1為預設代表完全不透明)

盒子相關屬性

width: 100px;

內部盒子的寬

height: 100px;

內部盒子的高

border: 1px solid black;

1: 代表border-width 粗細

2: 代表border-style 樣式:

  • none:沒有邊框即忽略所有邊框的寬度(預設值)
  • solid:邊框為單實線(最為常用的)
  • dashed:邊框為條虛線
  • dotted:邊框為點虛線
  • double:邊框為雙實線

3: 代表border-color 顏色

border四個邊還可以拆分為border-left,border-right,border-top,border-bottom

還可以:border-left-color: red;

border是在width height之外的

border-radius: 10px;

盒子的圓角

border-radius: 50% 是一個正圓

display: block;

inline 行級元素

block 塊級元素

inline-block 行內塊元素

margin: padding: border-width:

padding: 100px 150px 100px; 上 左右 下

padding: 上下 左右

padding-top|left|right|bottom

層模型相關屬性(定位 浮動)

position: absolute;

絕對定位

left, right, top, bottom都是對於瀏覽器的哪邊的邊框的距離

  • 脫離原來位置進行定位(每一個absolute都是一個新的層)
  • 子絕父相
  • 最近的有相對定位的父級進行定位,如果沒有相對於文件進行定位
position: relative;
  • 保留原來位置進行定位
  • 相對於原來自己的位置進行定位
position: fixed;

廣告定位

z-index: 1;

z軸觸發點是螢幕,箭頭向人延伸,值越大 層越在上面

overflow: hidden;

溢位部分隱藏

float: left/right;

無論標籤的屬性如何(block,inline,inline-block),都可以讓其站隊(按照父盒子的大小進行自動換行,按次序分配位置),並且也可以修改各個的margin等值

  • 浮動元素產生了浮動流
    • 所有產生了浮動流的元素,塊級元素看不到他們
    • 產生了bfc的元素和文字類屬性(帶有inline屬性包括inline-block)的元素以及文字和帶有浮動流的元素 都能看到浮動元素
    • ===>(比如“123”的文字可以在一個float元素的右面,但是一個div卻和該float元素重疊)

一些佈局

相對於螢幕的居中:
div {
    
    
 position: fixed;
 left: 50%;
 top: 50%;
 width: 100px;
 height: 100px;
 margin-top: -50px;
 margin-left: -50px;
}
兩欄佈局

<div class="right"></div>
<div class="left"></div>要先寫right,不然沒有規定.right的top值會被上面的div頂下來

.right {
    
    
position: absolute;
right: 0;
width: 100px;
height: 100px;
background-color: #fcc;
}
.left {
    
    
margin-right: 100px;
height: 100px;
background-color: #123;
}

CSS語言BUG

1. margin塌陷

父子巢狀 垂直方向的margin會取最大值

解決方法:

  1. 父盒子觸發bfc (block format context) = 特定的盒子設定另一套語法規則【只加了css即可】
  2. 為父元素定義1畫素的上邊框或上內邊距。(不推薦)
如何觸發一個盒子的bfc(觸發後該盒子變成BFC,改變了渲染規則):
  • position: absolute;
  • display: inline-block;
  • float: left/right;
  • overflow: hidden;

2. margin合併

兄弟上下,垂直margin會合並,取其中的最大值

解決方法:

  1. 新建一個盒子,包裹住(下面的)兄弟盒子,新盒子觸發BFC【必須要加一層html再加css】(在開發裡面不能隨意改變html的結構,所以是堅決不允許這種方法的)
  2. 不解決,儘量避免(比如上面的盒子的margin達到目標值)

標籤的初始化

a
a {
   
   
    text-decoration: none;
    color: #424242;
}
em
em {
   
   
    font-style: normal;
    color: #c00;
}
ul
ul {
   
   
    list-style: none;
    padding: 0;
    margin: 0;
}
萬用字元

一般來說瀏覽器的body會有預設的8畫素的margin

* {
   
   
    padding: 0;
    margin: 0;
}

開發經驗

先寫css後面寫html 先寫功能後選配置

eg:

.red {
    
     n
 background-color: red;
}
.green {
    
    
 background-color: green;
}
.size1 {
    
    
 width: 100px;
 height: 100px;
}
.size2 {
    
    
 width: 200px;
 height: 200px;
}

之後寫html就可以根據功能拿相應的class

盒子模型

內 --------------------------------------------------------------------------->外

盒子內容(藍)----->內邊距(綠)------>盒子壁(黃)----->盒子外面的間距(橙)

width+height--------->padding------------->border--------------->margin