HTML及CSS筆記

語言: CN / TW / HK

時間 2021-02-08 09:02:10 osc_75pcgicm

主題: ruby red pink solid pushbutton openssl sublime text

目標：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="http://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. 本地的相對路徑

…/來表示上一級目錄

D:/a/b/test.html

D:/a/b/123.jpg

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

D:/a/c/123.jpg

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

標籤	描述
`<!--...-->`	定義註釋。
`<！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>`	不贊成使用。定義預格式文字。

特殊標籤

` `

空格

`<`

小於號 less than

`>`

大於號 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;`

low式：pink; (transparent是透明色)

顏色程式碼：#ffffff; 可簡化 #fff;

顏色函式: 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會取最大值

解決方法:

父盒子觸發bfc (block format context) = 特定的盒子設定另一套語法規則【只加了css即可】

為父元素定義1畫素的上邊框或上內邊距。(不推薦)

如何觸發一個盒子的bfc(觸發後該盒子變成BFC,改變了渲染規則):

position: absolute;
display: inline-block;
float: left/right;
overflow: hidden;

2. margin合併

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

解決方法：

新建一個盒子，包裹住(下面的)兄弟盒子，新盒子觸發BFC【必須要加一層html再加css】(在開發裡面不能隨意改變html的結構，所以是堅決不允許這種方法的)

不解決，儘量避免（比如上面的盒子的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

「其他文章」

HTML及CSS筆記

瀏覽器及其核心

HTML

開發工具

sublime

1.使用技巧

vsCode

1.使用技巧

SEO-搜尋引擎優化

路徑

1. 網上url

2.本地的絕對路徑

3. 本地的相對路徑

標籤

特殊標籤

&nbsp;

&lt;

&gt;

傳送資料

傳送資料成功：

標籤的歸類

1. 行級元素 inline

2. 塊級元素 block

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

CSS

引入方式

1. 行間樣式

2. 頁面級css

3. 外部css檔案

頁面載入

同步非同步問題

選擇器

1. id選擇器

2. class選擇器

3. 標籤選擇器

4. 萬用字元選擇器

5. 屬性選擇器

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

7. 直接子元素選擇器

8. 並列選擇器

9. 分組選擇器

10. 偽類選擇器

權重值

單個的大小比較

css權重

屬性名：屬性值；

註釋

字型相關屬性

font-size: 12px;

font-weight: bold;

font-style: italic;

font-family: arial;

color: #ffffff;

text-align: left;

line-height: 12px;

text-indent: 2em;

text-decoration: line-through;

cursor:pointer;

opacity:0.5;

盒子相關屬性

width: 100px;

height: 100px;

border: 1px solid black;

border-radius: 10px;

display: block;

margin: padding: border-width:

層模型相關屬性（定位 浮動）

position: absolute;

position: relative;

position: fixed;

z-index: 1;

overflow: hidden;

float: left/right;

一些佈局

相對於螢幕的居中：

兩欄佈局

CSS語言BUG

1. margin塌陷

如何觸發一個盒子的bfc(觸發後該盒子變成BFC,改變了渲染規則):

2. margin合併

` `

`<`

`>`

`font-size: 12px;`

`font-weight: bold;`

`font-style: italic;`

`font-family: arial;`

`color: #ffffff;`

`text-align: left;`

`line-height: 12px`;

`text-indent: 2em;`

`text-decoration: line-through;`

`cursor:pointer;`

`opacity:0.5;`

`width: 100px;`

`height: 100px;`

`border: 1px solid black;`

`border-radius: 10px;`

`display: block;`

`margin:` `padding:` `border-width:`

層模型相關屬性（定位浮動）

`position: absolute;`

`position: relative;`

`position: fixed;`

`z-index: 1;`

`overflow: hidden;`

`float: left/right;`

`a`

`em`

`ul`

`萬用字元`