H5學習筆記

阿新 • • 發佈：2018-12-17

<html></html>所有超文字檔案都得放入此標籤中

<q></q>引用文字標籤

<hx></hx> （x 1-6）標題文字一級到六級標題

<span></span>用於css自定義樣式

<p></p>段落樣式

<strong></strong>文字加粗樣式

<enm></enm>斜體樣式

<blockquote></blockquote>縮排樣式

<br />換行注意：在 html 中是忽略回車

和空格的，你輸入的再多回車和空格也是顯示不出來的。與以前我們學過的標籤不一樣，<br />標籤是一個空標籤，沒有HTML內容的標籤就是空標籤，空標籤只需要寫一個開始標籤，這樣的標籤有<br />、<hr />和<img />。

  在html程式碼中自動忽略空格輸入空格應該應用這個

<hr />分割樣式

<address></address>斜體地址資訊

<code></code>以程式碼格式展示標籤

<pre>標籤為你的網頁加入大段程式碼

<ul> 列表標籤列表標籤無序

......

</ul>

<ol> 列表標籤有順序
   <li>資訊</li>
   <li>資訊</li>
   ......
</ol>

<div></div>容器可以用id屬性來標記該容器

例如<div id = "">

<table>標記表格的開始

<caption></caption>標題文字

<tbody> 如果有該標籤表示該標籤下載完成後才會顯示，而不是下載一點顯示一點注意表格的列數取決於單元格的單元數

<th>表格的頭部

</th>

<tr>表格的一行

<td>表格的一列

</td>

</tr>

</tbody>

<table>標記表格的結束

<table summary= "表格簡介"> summary為表格的摘要

<a href = “目標網址” target = "_balnk"//在新的視窗頁面中開啟 title = "滑鼠移動到這裡的描述">""</a>可實現超連結,中間為可點選的文字

http://img.mukewang.com/52da4f2a000150b714280550.jpg

<form method="請求方式post/get action="目標地" "> </form> 1、所有表單控制元件（文字框、文字域、按鈕、單選框、複選框等）都必須放在<form></form>標籤之間（否則使用者輸入的資訊可提交不到伺服器上哦！）。

<textarea rows="行數" cols="列數">文字</textarea> 文字域

<selected multiple="mutiple">調整選框為多選

<label for="控制元件id的名稱">內容</label>和id看見關聯起來

註釋程式碼：html 中為

css中為 /*註釋內容*/

CSS樣式

p選擇符{color屬性:blue值}

內聯

<style>

<link href="base.css" rel="stylesheet" type="text/css" />

1、css樣式檔名稱以有意義的英文字母命名，如 main.css。

2、rel="stylesheet" type="text/css" 是固定寫法不可修改。

3、<link>標籤位置一般寫在<head>標籤之內。

因為這三種樣式是有優先順序的，記住他們的優先順序：內聯式//標籤內 > 嵌入式//head內 > 外部式//外部檔案

內聯樣式表（標籤內部）> 嵌入樣式表（當前檔案中）> 外部樣式表（外部檔案中）

.類選器名稱{css樣式程式碼;}

注意：

1、英文圓點開頭

2、其中類選器名稱可以任意起名（但不要起中文噢）

第一步：使用合適的標籤把要修飾的內容標記起來，如下：

<span>膽小如鼠</span>

第二步：使用class="類選擇器名稱"為標籤設定一個類，如下：

<span class="stress">膽小如鼠</span>

第三步：設定類選器css樣式，如下：

.stress{color:red;}/*類前面要加入一個英文圓點*/

在很多方面，ID選擇器都類似於類選擇符，但也有一些重要的區別：

1、為標籤設定id="ID名稱"，而不是class="類名稱"。

2、ID選擇符的前面是井號（#）號，而不是英文圓點（.）。

右側程式碼編輯器中就是一個ID選擇符的完整例項。

id選擇器為#類選擇器為.
二者的區別
1、ID選擇器只能在文件中使用一次。與類選擇器不同，在一個HTML文件中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
2、可以使用類選擇器詞列表方法為一個元素同時設定多個樣式。我們可以為一個元素同時設多個樣式，但只可以用類選擇器的方法實現，ID選擇器是不可以的（不能使用 ID 詞列表）。

還有一個比較有用的選擇器子選擇器，即大於符號(>),用於選擇指定標籤元素的第一代子元素。如右側程式碼編輯器中的程式碼：

包含選擇器，即加入空格,用於選擇指定標籤元素下的後輩元素。如右側程式碼編輯器中的程式碼：

總結：>作用於元素的第一代後代，空格作用於元素的所有後代

通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標籤元素，如下使用下面程式碼使用html中任意標籤元素字型顏色全部設定為紅色：

更有趣的是偽類選擇符，為什麼叫做偽類選擇符，它允許給html不存在的標籤（標籤的某種狀態）設定樣式，比如說我們給html中一個標籤元素的滑鼠滑過的狀態來設定字型顏色：

當你想為html中多個標籤元素設定同一個樣式時，可以使用分組選擇符（，），如下程式碼為右側程式碼編輯器中的h1、span標籤同時設定字型顏色為紅色：

h1,span{color:red;}

權值解釋(特殊性):

有的時候我們為同一個元素設定了不同的CSS樣式程式碼，那麼元素會啟用哪一個CSS樣式呢?我們來看一下面的程式碼：

p{color:red;}
.first{color:green;}
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>

p和.first都匹配到了p這個標籤上，那麼會顯示哪種顏色呢？green是正確的顏色，那麼為什麼呢？是因為瀏覽器是根據權值來判斷使用哪種css樣式的，權值高的就使用哪種css樣式。

下面是權值的規則：

標籤的權值為1，類選擇符的權值為10，ID選擇符的權值最高為100。例如下面的程式碼：

p{color:red;} /*權值為1*/
p span{color:green;} /*權值為1+1=2*/
.warning{color:white;} /*權值為10*/
p span.warning{color:purple;} /*權值為1+1+10=12*/
#footer .note p{color:yellow;} /*權值為100+10+1=111*/

注意：還有一個權值比較特殊--繼承也有權值但很低，有的文獻提出它只有0.1，所以可以理解為繼承的權值最低

注意：!important要寫在分號的前面

p{color:red!important;}

這裡注意當網頁製作者不設定css樣式時，瀏覽器會按照自己的一套樣式來顯示網頁。並且使用者也可以在瀏覽器中設定自己習慣的樣式，比如有的使用者習慣把字號設定為大一些，使其檢視網頁的文字更加清楚。這時注意樣式優先順序為：瀏覽器預設的樣式 < 網頁製作者樣式 < 使用者自己設定的樣式，但記住!important優先順序樣式是個例外，權值高於使用者自己設定的樣式。

設定字型

body{font-family:"Microsoft Yahei";font-size:20px;font-weight:bold;font-style:italic;text-decoration:underline/line-through刪除線;text-indent:2em縮排兩個空格;line-height:2em行高;letter-spacing:30px字母間隔；text-align:center}

在講解CSS佈局之前，我們需要提前知道一些知識，在CSS中，html中的標籤元素大體被分為三種不同的型別：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。

常用的塊狀元素有：

常用的內聯元素有：

常用的內聯塊狀元素有：

塊級元素特點：

1、每個塊級元素都從新的一行開始，並且其後的元素也另起一行。（真霸道，一個塊級元素獨佔一行）

2、元素的高度、寬度、行高以及頂和底邊距都可設定。

3、元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

內聯元素特點：

1、和其他元素都在一行上；

2、元素的高度、寬度及頂部和底部邊距不可設定；

3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。

內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點，程式碼display:inline-block就是將元素設定為內聯塊狀元素。(css2.1新增)，<img>、<input>標籤就是這種內聯塊狀標籤。

inline-block 元素特點：

1、和其他元素都在一行上；

2、元素的高度、寬度、行高以及頂和底邊距都可設定。

例：

display:inline-block;

width:20px;/*在預設情況下寬度不起作用*/

height:20px;/*在預設情況下高度不起作用*/

background:pink;/*設定背景顏色為粉色*/

text-align:center; /*設定文字居中顯示*/

}

盒子模型

盒子模型的邊框就是圍繞著內容及補白的線，這條線你可以設定它的粗細、樣式和顏色(邊框三個屬性)。

1、border-style（邊框樣式）常見樣式有：

dashed（虛線）| dotted（點線）| solid（實線）。

2、border-color（邊框顏色）中的顏色可設定為十六進位制顏色。

3、border-width（邊框寬度）中的寬度也可以設定為：

thin | medium | thick（但不是很常用），最常還是用象素（px）。

border-top:1px solid red;
border-right:1px solid red; 
border-left:1px solid red;
元素內容與邊框之間是可以設定距離的，稱之為“填充”。填充也可分為上、右、下、左(順時針)

塊狀元素有一個特點之一：在不設定寬度的情況下，顯示為父容器的100%。）

盒子模型示意圖

佈局模型

清楚了CSS 盒模型的基本概念、盒模型型別，我們就可以深入探討網頁佈局的基本模型了。佈局模型與盒模型一樣都是 CSS 最基本、最核心的概念。但佈局模型是建立在盒模型基礎之上，又不同於我們常說的 CSS 佈局樣式或 CSS 佈局模板。如果說佈局模型是本，那麼 CSS 佈局模板就是末了，是外在的表現形式。

CSS包含3種基本的佈局模型，用英文概括為：Flow、Layer 和 Float。
在網頁中，元素有三種佈局模型：
1、流動模型（Flow）
2、浮動模型 (Float)
3、層模型（Layer）

先來說一說流動模型，流動（Flow）是預設的網頁佈局模式。也就是說網頁在預設狀態下的 HTML 網頁元素都是根據流動模型來分佈網頁內容的。

流動佈局模型具有2個比較典型的特徵：

第一點，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，因為在預設狀態下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式佔據位置。如右側程式碼編輯器中三個塊狀元素標籤(div，h1，p)寬度顯示為100%。

第二點，在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分佈顯示。（內聯元素可不像塊狀元素這麼霸道獨佔一行）

右側程式碼編輯器中內聯元素標籤a、span、em、strong都是內聯元素。

塊狀元素這麼霸道都是獨佔一行，如果現在我們想讓兩個塊狀元素並排顯示，怎麼辦呢？不要著急，設定元素浮動就可以實現這一願望。

任何元素在預設情況下是不能浮動的，但可以用 CSS 定義為浮動，如 div、p、table、img 等元素都可以被定義為浮動。如下程式碼可以實現兩個 div 元素一行顯示。

什麼是層佈局模型？層佈局模型就像是影象軟體PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作，但在網頁設計領域，由於網頁大小的活動性，層佈局沒能受到熱捧。但是在網頁上區域性使用層佈局還是有其方便之處的。下面我們來學習一下html中的層佈局。

如何讓html元素在網頁中精確定位，就像影象軟體PhotoShop中的圖層一樣可以對每個圖層能夠精確定位操作。CSS定義了一組定位（positioning）屬性來支援層佈局模型。

層模型有三種形式：

1、絕對定位(position: absolute)

2、相對定位(position: relative)

3、固定定位(position: fixed)

如果想為元素設定層模型中的絕對定位，需要設定position:absolute(表示絕對定位)，這條語句的作用將元素從文件流中拖出來，然後使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器視窗。

如果想為元素設定層模型中的相對定位，需要設定position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文件流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(並且元素像層一樣浮動了起來)，然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。

fixed：表示固定定位，與absolute定位型別類似，但它的相對移動的座標是檢視（螢幕內的網頁視窗）本身。由於檢視本身是固定的，它不會隨瀏覽器視窗的滾動條滾動而變化，除非你在螢幕中移動瀏覽器視窗的螢幕位置，或改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置，不會受文件流動影響，這與background-attachment:fixed;屬性功能相同。以下程式碼可以實現相對於瀏覽器檢視向右移動100px，向下移動50px。並且拖動滾動條時位置固定不變。

相對定位規範:

1、參照定位的元素必須是相對定位元素的前輩元素：

2、參照定位的元素必須加入position:relative;

3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了。

關於顏色的css樣式也是可以縮寫的，當你設定的顏色是16進位制的色彩值時，如果每兩位的值相同，可以縮寫一半。

p{color: #336699;}

可以縮寫為：

p{color: #369;}

網頁中的字型css樣式程式碼也有他自己的縮寫方式，下面是給網頁設定字型的程式碼：

body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋體",sans-serif;
}

這麼多行的程式碼其實可以縮寫為一句：

body{
    font:italic  small-caps  bold  12px/1.5em  "宋體",sans-serif;
}

注意：

1、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其他的屬性(如 font-weight、font-style、font-varient、line-height)如未指定將自動使用預設值。

2、在縮寫時 font-size 與 line-height 中間要加入“/”斜扛。

長度值

長度單位總結一下，目前比較常用到px（畫素）、em、% 百分比，要注意其實這三種單位都是相對單位。

1、畫素

畫素為什麼是相對單位呢？因為畫素指的是顯示器上的小點（CSS規範中假設“90畫素=1英寸”）。實際情況是瀏覽器會使用顯示器的實際畫素值有關，在目前大多數的設計者都傾向於使用畫素（px）作為單位。

2、em

就是本元素給定字型的 font-size 值，如果元素的 font-size 為 14px ，那麼 1em = 14px；如果 font-size 為 18px，那麼 1em = 18px。如下程式碼：

p{font-size:12px;text-indent:2em;}

上面程式碼就是可以實現段落首行縮排 24px（也就是兩個字型大小的距離）。

下面注意一個特殊情況：

但當給 font-size 設定單位為 em 時，此時計算的標準以 p 的父元素的 font-size 為基礎。如下程式碼：

html:

<p>以這個<span>例子</span>為例。</p>

css:

p{font-size:14px}
span{font-size:0.8em;}

結果 span 中的字型“例子”字型大小就為 11.2px（14 * 0.8 = 11.2px）。

3、百分比

p{font-size:12px;line-height:130%}

設定行高（行間距）為字型的130%（12 * 1.3 = 15.6px）。

如果被設定元素為文字、圖片等行內元素時，水平居中是通過給父元素設定 text-align:center 來實現的。如下程式碼：

當被設定元素為塊狀元素時用 text-align：center 就不起作用了，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素。這一小節我們先來講一講定寬塊狀元素。
margin-left:auto;
margin-right:auto;

不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都比多）：
加入 table 標籤
設定 display;inline 方法
設定 position:relative 和 left:50%;

父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line-height 高度一致來實現的。如下程式碼：

父元素高度確定的多行文字、圖片、塊狀元素的豎直居中的方法有兩種：

方法一：使用插入 table (包括tbody、tr、td)標籤，同時設定 vertical-align：middle。

說到豎直居中，css 中有一個用於豎直居中的屬性 vertical-align，但這個樣式只有在父元素為 td 或 th 時，才會生效。所以又要插入 table 標籤了。

有一個有趣的現象就是當為元素（不論之前是什麼型別元素，display:none 除外）設定以下 2 個句之一：

1.position : absolute

2.float : left 或 float:right

元素會自動變為以 display:inline-block 的方式顯示，當然就可以設定元素的 width 和 height 了且預設寬度不佔滿父元素。

H5學習筆記

長度值

h5學習筆記 ul和li組合

h5學習筆記 vuethink 配置

H5學習筆記1

h5 學習筆記：記錄一些前端用到後臺和移動樣式庫

H5學習筆記

h5學習筆記 Table

h5學習筆記： css佈局案例練習

h5學習筆記（4）居中

h5學習筆記：layui table

H5學習筆記之Transform

h5學習筆記：居中

h5學習筆記：flex

h5學習筆記：使用fis的前端構建工具記錄

h5學習筆記：vue 路由部署伺服器子目錄問題

h5學習筆記：UI庫

h5學習筆記：http-server小工具

H5學習筆記——基本知識

h5學習筆記：下拉選單

h5語義化標簽學習筆記

Egret 學習筆記 h5牛牛源碼 h5牛牛源碼搭建教程

H5學習筆記

長度值

相關推薦