HTML相關知識

阿新 • • 發佈：2017-06-22

正常隱藏元素加粗密碼 bmi 十六進制 for 1.5 hid

1 Day01HTML

HTML5聲明：<!doctype html>
1. <html>

1.1 HTML基本結構：

<head>

</head>

<body>

............

</body>

</html>

1.2meta(元元素):

編碼格式設置：<meta charset=”UTF-8”>
設置當前HTML頁面的關鍵字：<meta name=”keywords” content=”….”>
設置當前HTML頁面的描述：

<meta name=”description” content=”….”>
設置當前頁面的作者：<meta name=”author” content=”….”>
標簽只關註語義化, 一般HTML頁面只包含一個<h1>元素
<h1></h1>標簽用得最多，搜索引擎也會抓取h1裏面的內容
<h2>用的較多，最多用到<h3>
屬性:<h1 align=”center”>這是一個1級標題</h1>
1. “這是一個1級標題” 會在瀏覽器中間顯示
2. 有關樣式和位置都是有CSS控制, align一般不使用
3. 常用屬性
  
  :id, class, style…
4. 事件屬性會是以後學習的重點
5. 段落的效果和標題很像，只是字體不一樣
6. 瀏覽器兼容問題：相同的內容在不同的瀏覽器顯示不同
7. 編寫文本是有空格的，但是無論使用多少個空格瀏覽器只能識別一個，所以在實際開發中空格的作用幾乎可以忽略不計
8. 編寫文本的時候換行，但是在瀏覽器中顯示仍然是沒有換行的，需要加<br>命令換行如下：
  1. <p>

1.3標題<h1></h1>

1.4段落<p></p>:

這是一個段落<br>

這是一個段落

</p>

1.4 鏈接

<a></a>:

基本格式:<a href=”www.baidu.com”>百度一下</a>
target屬性：
1. <a href=”www.baidu.com” target=”_self” >百度一下</a>:鏈接會在當前窗口打開
2. <a href=”www.baidu.com” target=”_blank” >百度一下</a>:鏈接會在新窗口打開
3. <a href=”www.baidu.com” target=”_parent” >百度一下</a>:鏈接會在父級窗口打開
4. 有序列表<ol></ol>:
  1. 默認排序1,2,3,4,5…..
  2. 容器元素<ol>, 列表項:<li>
    1. <ol>

1.5列表：

</ol>

設置排序類型:
1. <ol type=”a”></ol> 以a,b,c,d….排序
2. <ol type=”A”></ol>以A,B,C,D…..排序
3. <ol type=”i”></ol>以I,ii,iii…..排序
4. 無序列表<ul></ul>:
  1. 排序使用小黑點
  2. 容器元素<ul>, 列表項<li>
    1. <ul><li></li>

</ul>

設置排序類型:
1. <ul type=”circle”></ul> 使用小圓圈排序
2. <ul type=”disc”></ul> 使用小黑點排序
3. <ul type=”square”></ul> 使用方形小黑點排序
4. 有序列表和無序列表可以互相嵌套
5. 定義列表<dl>,<dt>,<dd>
  1. <dl>容器; <dt>名稱; <dd>內容;
    1. <dl>
      <dt>
      名字
      </dt>
      <dd>1.內容</dd>
      <dd>2.內容</dd>
      <dd>3.內容</dd>
      </dl>
    2. dt和dd不嵌套, 面試可能會問道

2 Day02HTML

2.1鏈接<a>

2.1.1連接的地址:

test.html存在於當前頁面所在的test文件中

絕對地址：<a href=” http://localhost:63342/Day02/test.html”>鏈接1</a> (鏈接地址是由Webstorm默認生成的server地址)
相對地址:<a href=”test/test.html”>
代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鏈接</title>
</head>
<body>
<a href="test.html">鏈接1</a><br>
<a href="http://localhost:63342/Day02/test.html">鏈接2</a><br>
</body>
</html>

2.1.2回到頂部

先在body的最開始設置一個<a>標簽,然後定義他的name屬性：<a name=”top”></a> 為了讓這個a標簽不顯示不設置他的href屬性值和名稱
設置主要內容
最後在設置一個href屬性為#top的a標簽:<a href=”#top”>回到頂部</a>
代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鏈接</title>
</head>
<body>
<a name="top"></a>
<a href="test.html">唐詩</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#top">回到頂部</a>
</body>
</html>

2.2圖片元素<img>

<img>標簽定義HTML頁面的圖像
<img>標簽有兩個固定屬性

src:和href屬性類似，設置需要顯示在瀏覽器中的圖片的地址

alt(在國內很少用)：設置瀏覽器不顯示圖片的文本內容

<img>可選屬性
1. width：設置瀏覽器顯示圖片的寬度
2. height：設置瀏覽器顯示圖片的高度
3. 當只設置寬度或者高度時，圖片的高度或寬度會在瀏覽中等比例顯示，當設置兩個屬性時瀏覽器顯示的圖片可能會被拉伸
4. 瀏覽器加載圖片時會從HTML頁面跳出，圖片越多瀏覽器加載越慢，所以可以瀏覽器每次加載幾個圖片
5. 代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片元素</title>
</head>
<body>
<img src="../img/1.jpg" width="300"/>
</body>
</html>

2.3表格<table></table>

table標簽表示表格-容器元素
屬性：
1. border設置表格邊框的寬度，如果border的值較大時只改變表格邊框的寬度，裏面的邊框始終為1.
2. width表格的寬度，如果設置成100%表格大小會隨著瀏覽器界面的變化而變化
3. <tr></tr>表格的行
4. <td></td>單元格
5. <th></th>第一行表頭的單元格，顯示字體加粗，居中
6. <thead></thead>表示表頭在表格的第一行
7. <tbody></tbody>表格的數據在第一行和最後一行的中間
8. <tfoot></tfoot>表格的結尾在表格的最後一行
9. colspan=”2”合並2行, rowspan=”2”合並2列
10. <form>定義表單容器
11. 必要屬性：
  1. action類似於a標簽的href屬性，地址需要編寫服務器的某個資源
  2. method設置當前表單提交的方式
    1. get-容易把用戶信息顯示在瀏覽器地址中
    2. post-一般情況下都是這種方式
12. 標準屬性：
  1. id設置當前標簽的標識, 唯一
  2. name設置當前標簽的名稱, 可重復
13. 表單中所使用的輸入框，按鈕等組件
  1. <input>組件, 必要屬性type, 設置當前input的類型
    1. text文本輸入框,屬性有value readonly

2.4表單<form></form>

password密碼框,屬性有value disabled readonly

<input type=”password” value=”number” disabled=”disabled”>不能輸入密碼

submit提交按鈕,屬性有value

<input type=”submit” value=”登錄”>提交用戶名, 密碼

reset重置按鈕,屬性value

<input type=”reset” value=”重置信息”>重置用戶名, 密碼

圖片<input type = “image” src = “1.jpg” width = “200”>

6. radio單選框,屬性name checked

<input type=”radio” name=”group” checked=”checked”> 同屬於group組的單選框, 在瀏覽器中默認是checked

7. checkbox復(多)選框,屬性name checked

<input type=”checkbox” name=”group” checked=”checked”> 同屬於group組的單選框, 在瀏覽器中默認是checked

8. file文件域默認選擇一個文件, 設置multiple

<input type=”file” multiple>可以同時選擇多個文件

9. hidden隱藏域【面試題隱藏域的作用是設置一些不想讓用戶看的數據】

<input type=”hidden” value=”值”>不需要在瀏覽器中顯示的值可以使用的到

10. email

<input type = “email”>email地址

<input type = “submit”>提交

<select>組件
1. 下拉單選列表, 屬性id, name

</select>

下拉多選列表

</select>

3 Day03 CSS

3.1 CSS含義

3.1.1什麽是CSS

：Cascading Style Sheet，層疊樣式表；能夠真正做到網頁表現與內容分離的一種樣式設計語言

3.1.2版本歷史

CSS1：發布於1996年
CSS2：發布於1998或者1999年（不確定）
CSS3：現在
內聯樣式
1. 直接在元素裏寫入屬性style=”CSS屬性:CSS屬性值;”， eg:<p style=”font-weight: bold ; color: red ;”>內容</p>
2. 通過HTML頁面的<style>元素來設置CSS，

3.1.3如何使用CSS

eg: <style>
選擇器{
CSS屬性: CSS屬性值 ;
CSS屬性: CSS屬性值 ;
}
</style>

外聯樣式
1. 通過HTML頁面的<link>元素來引入外部的CSS樣式

eg:<link rel=”stylesheet” href=”外部CSS文件路徑” type=”text/css”>

外部CSS樣式內容格式

選擇器{
CSS屬性: CSS屬性值 ;
CSS屬性: CSS屬性值 ;
}

3.2 CSS語法

3.2.1 語法特點

CSS的聲明總是以鍵值對的形式出現
聲明總是以分號(;)結束(註意區分輸入法,一定是英文輸入法的分號)
聲明組以大括號括起來({})
每行只描述一個屬性

3.2.2語法格式

選擇器{
CSS屬性: CSS屬性值 ;
CSS屬性: CSS屬性值 ;
}

3.3 CSS註釋

不同於HTML, CSS的註釋是以/*開始,以*/結束; 即:/* 註釋內容 */
CSS註釋同樣不能嵌套

3.4 選擇器

- 常見的選擇器：

元素選擇器

- 作用：可以選中頁面指定標簽名的元素

- 語法：標簽名 {}

- 例子：div{} span{} p{} h1{}

id選擇器

- 作用：根據元素的id屬性值選中一個元素

- 語法：#id屬性值{}

- 例子：#box1{} #p1{}

類選擇器

- 作用：根據元素的class屬性值選中元素

- 語法：.class屬性值{}

- 例子：.box2{} .p2{}

分組選擇器（並集選擇器）

- 作用：可以同時選中多個選擇器對應的元素

- 語法：選擇器1 , 選擇器2 , 選擇器N {}

- 例子：div , #box1 , .hello , span {}

交集選擇器

- 作用：可以選中同時符合多個選擇器的元素

- 語法：選擇器1選擇器2選擇器N {}

- 例子：p.hello{}

通配選擇器

- 作用：選中頁面中的所有元素

- 語法：*{}

- 註意：通配選擇器性能較差，盡量避免使用

後代元素選擇器

- 作用：選中指定的後代元素

- 語法：祖先後代{}

- 例子：div p span{}

子元素選擇器

- 作用：選中指定的子元素

- 語法：父元素 > 子元素{}

- 例子：div > p > span{}

偽類選擇器

- 偽類表示的元素的一種特殊狀態

:link

- 正常的超鏈接（沒有訪問過的鏈接）

:visited

- 訪問過的超鏈接

:hover

- 鼠標移入的元素

:active

- 鼠標正在點擊的元素

- 元素之間的關系

- 父元素

- 直接包含子元素的元素

- 子元素

- 直接被父元素包含的元素

- 祖先元素

- 直接或間接包含後代元素的元素（父元素也是祖先元素）

- 後代元素

- 直接或間接被祖先元素包含的元素（子元素也是後代元素）

- 兄弟元素

- 擁有相同父元素的元素

3.4.6 選擇器的優先級

選擇器的優先級

- 當使用不同的選擇器為同一個元素設置相同的樣式時，此時會發生樣式沖突。

這時候，顯示哪個樣式由選擇器的優先級決定，優先級高的優先顯示。

選擇器的優先級：

內聯樣式1000 style

id選擇器100 #box1{} #p1{}

類和偽類選擇器10 .box2{} .p2{}

元素選擇器 1 div{} span{} p{} h1{}

通配選擇器 0 *{}

- 當比較兩個選擇器的優先級時，如果是復合選擇器則需要將多個選擇器的優先級進行相加，

然後再比較，優先級較高的優先顯示，優先級相加時不會超過其最大的數量級

如果兩個選擇器的優先級一樣，則優先顯示靠下的。

- 如果在樣式的最後添加了 !important 則此時樣式會取得一個最高的優先級，將會優先於所有的樣式顯示

在開發中 !important 盡量不用。

3.5 顏色設置

英文名稱, eg: red, yellow, blue, green…..
十進制,三原色, eg: RGB(255,0,250)紅, RGB(0,255,0)綠, RGB(0,0,255)藍…
百分比, eg: RGB(100%,0%,0%)紅, RGB(0%,100%,0%)綠, RGB(0%,0%,100%)藍
十六進制, eg: #ff0000紅, #00ff00綠, #0000ff藍, 兩兩相同可以寫成#f00等
<h1>, <p>, <ul>, <table>, <div>
<div>元素沒有特定的語義, 由於它屬於塊級元素, 瀏覽器會在其前後顯示折行, 和CSS一同使用可以對大的內容塊設置樣式屬性, <div>一個常見的用途就是文檔布局
<div>取代了使用<table>進行頁面布局的老式方法
<td>, <img>, <a>, <span>
<span>:是內聯元素, 無語義, 可作為文本的容器, 結合CSS可以對部分文本設置樣式屬性

3.6 塊級元素

3.7內聯元素

4 Day04 CSS

4.1其他類型選擇器

4.1.1 後代選擇器: 祖先元素後代元素{CSS屬性:CSS屬性值;}

4.1.2子元素選擇器: 祖先元素 > 子元素{CSS 屬性:CSS屬性值;}

4.1.3相鄰元素選擇器:指定元素+兄弟元素{CSS 屬性:CSS屬性值;}

4.2 偽類

a:link; 向未被訪問過的鏈接添加樣式

a:visited; 向已被訪問過的鏈接添加樣式

a:hover; 當鼠標懸浮在鏈接上方時，向元素添加樣式

可用於任何元素

a:active;向被激活的元素添加樣式

可用於任何元素

a:focus; 像擁有鍵盤輸入焦點的的元素添加樣式

a:first-child; 向元素的第一個子元素添加樣式

4.3 盒子模型

content:顯示盒子的內容和圖像
padding:內邊距, 會受到盒子填充背景顏色影響
1. padding: 50px;上下左右內編劇全是50px
2. padding:20px 50px;上下20px 左右50px
3. padding:20px 30px 50px;上20px,左右30px,下50px
4. padding:20px 30px 50px 70px, 上右下左分別是20,30,50,70px
5. padding-top, padding-right, padding-bottom, padding-left
6. border: 邊框, 會受到盒子填充背景顏色影響
  1. 常見屬性
    1. border-width
    2. border-color
    3. border-style
    4. 邊框設置:border: width值 color值 style值;
    5. 上下邊框樣式設置規律和padding一樣
7. margin:外邊距,沒有背景顏色, 完全透明
  1. margin上下左右邊框設置可padding大致一樣
  2. 外邊距重疊:
    1. 當上下相鄰兩個盒子設置了margin-bottom和margin-top邊框時盒子之間的距離是兩個外邊距最大的值
    2. 如果定義兩個 <div> 標簽是父子關系的話，當為作為子元素的 <div> 設置上外邊距，該上外邊距會傳遞給父元素的 <div>

5 Day05 CSS

5.1 Css盒子模型

content 內容區：定義顯示在瀏覽器的標簽。

主要的三個樣式：

border-width

border-color

border-style

簡寫設置：

border-top/right/bottom/left

padding內邊距：內容到邊框的距離。

簡寫設置：

padding-top/right/bottom/left

border邊框：盒子的邊框。

margin外邊距：盒子與盒子之間的距離

① 設置上、左（改變當前標簽的顯示位置）

② 設置下、右（改變當前標簽的下一個兄弟元素的顯示位置）

問題：①外邊距的重疊

* 場景

* 兩個相鄰兄弟塊級元素

* 上一個塊級元素設置下外邊距

* 下一個塊級元素設置上外邊距

* 結果

* 兩個兄弟元素之間的距離取外邊距的最大值

* 解決 - 結果等於兩個外邊距之和

* 只設置上一個塊級元素設置下外邊距或者只下一個塊級元素設置上外邊距

* 外邊距的值允許是負值

* 值大於零 - 正常設置的外邊距效果

* 值等於零 - 沒有外邊距效果

* 值小於零 - 兩個標簽之間出現覆蓋效果

* 註意 - 在實際開發中，不要設置負值

* 默認樣式

* 頁面默認給<body>增加外邊距

5.2 外邊距的問題

1.子元素的外邊距會傳遞給父元素

解決方案：只設置父元素的內邊距，不設置子元素的外邊距。

5.3外邊距問題

為子元素設置上外邊距時，子元素div和父元素div全部向下移動
1. 解決辦法：為父元素設置邊框，為父元素設置上內邊距
2. 由於不同瀏覽器顯示的默認樣式不同，為了使顯示效果相同，可以講瀏覽器顯示效果重置eg:body{margin:0;}，也可以使用第三方提供的重置樣式
3. display:隱藏某個元素時不會占用任何空間，不影響布局
  1. 屬性值
    1. none;當設置display屬性為none是元素會被隱藏且不占用空間
    2. block;主要作用於內聯元素，當將一個內聯元素的display設置成block，該內聯元素在瀏覽器中顯示為塊元素效果
    3. inline;和block相反，主要作用於塊元素，將一個塊元素設置display:inline，塊元素在瀏覽器中顯示為內聯元素的效果
    4. inline-block;當講一個元素設置成display:inline-block;是該元素在瀏覽器中顯示為內聯塊級效果
4. visibility:隱藏某個元素時仍會占用空間
  1. 屬性值
    1. visible;默認的，元素可見
    2. hidden;隱藏元素
5. overflow;
  1. visible;默認值，內容不會修剪，會呈現在元素框之外
  2. hidden;隱藏，內容多出來的部分會被隱藏
  3. scroll;內容會被修剪，但瀏覽器會顯示滾動條用來查看溢出的內容
  4. auto;一旦內容溢出，被修剪，瀏覽器會顯示滾動條用來查看溢出的內容
6. 將窗體自上而下分為一行一行，並在每行中按從左至右的挨次排放元素，即為文檔流。HTML創建的元素默認都在文檔流中。
  1. 塊級元素：自上而下排列，子集元素寬度是父元素100%，
  2. 內聯元素：從左到右依次排列，自動換行，寬度和高度都是有內容決定。

5.4默認樣式

5.5 CSS顯示與隱藏

5.6 元素內容溢出

5.7文檔流

5.8 浮動（會從文檔流中脫離）

float

none；默認值元素不浮動
left；元素左浮動
right；元素右浮動
塊級元素浮動
1. 塊級元素浮動不會獨占HTML頁面一行，所以多個塊級元素可以處在同一行，塊級元素的高度和寬度等於所有後代元素的總和
2. 內聯元素浮動會呈現塊級元素的效果
3. 所有浮動元素的層級都要高於文檔流中元素的層級，但文字是個例外，文字不會被浮動元素覆蓋，而是會環繞在浮動元素的周圍

HTML相關知識

正常隱藏元素加粗密碼 bmi 十六進制 for 1.5 hid 1 Day01HTML HTML5聲明：<!doctype html> <html> 1.1 HTML基本結構： <head> <title>題目&l

HTML相關知識

1 Day01HTML

1.1 HTML基本結構：

1.2meta(元元素):

1.3標題<h1></h1>

1.4段落<p></p>:

1.4 鏈接 <a></a>:

1.5列表：

2 Day02HTML

2.1鏈接<a>

2.1.1連接的地址:

2.1.2回到頂部

2.2圖片元素<img>

2.3表格<table></table>

2.4表單<form></form>

3 Day03 CSS

3.1 CSS含義

3.1.1什麽是CSS

3.1.2版本歷史

3.1.3如何使用CSS

3.2 CSS語法

3.2.1 語法特點

3.2.2語法格式

3.3 CSS註釋

3.4 選擇器

3.4.6 選擇器的優先級

3.5 顏色設置

3.6 塊級元素

3.7內聯元素

4 Day04 CSS

4.1其他類型選擇器

4.2 偽類

4.3 盒子模型

5 Day05 CSS

5.1 Css盒子模型

5.2 外邊距的問題

5.3外邊距問題

5.4默認樣式

5.5 CSS顯示與隱藏

5.6 元素內容溢出

5.7文檔流

5.8 浮動（會從文檔流中脫離）

相關推薦

1.4 鏈接

<a></a>: