????????????????????????????????????最基礎(chǔ)的的HTML
基本標簽
< h1> 與 <
/h1> 之間的文本被顯示為標題 < p> 與 < /p> 之間的文本被顯示為段落
HTML標題 Heading 是通過 < h1> - < h6> 等標簽進行定義的。
HTML段落 paragraph 是通過 < p> 標簽進行定義的。?
HTML鏈接 鏈接 是通過 <a> 標簽進行定義的。
HTML圖像 image是通過 <img> 標簽進行定義的。 示例：
<h1 align=”center”>----------------------設(shè)置位置為中間
--------------設(shè)置body背景顏色
Style 可以用來設(shè)置格式<p>，<h>。
Eg: <h1 style="color:
aqua;font-size:px;">hhhhhhh</h1>-------設(shè)置顏色
??? ----------------------------設(shè)置位置
HTML標題 Heading 是通過 < h1> - < h6> 等標簽進行定義的。 示例：
This?is?first?heading
This?is?second?heading
This?is?third?heading
HTML段落 paragraph 是通過 < p> 標簽進行定義的。 示例：
This?is?a?paragraph.
This?is?another?paragraph.
HTML鏈接 鏈接 是通過 < a> 標簽進行定義的。 示例：
This?is?a?link
HTML圖像 image是通過 <img> 標簽進行定義的。 示例：
用圖片添加鏈接
<a >
<img src="https://eduimage.nosdn.127.net/5B8826377EE623C7B6328E8F8B8D2871.png?imageView&thumbnail=510y288&quality=100&thumbnail=223x125&quality=100">
</a>
打開連接之后是否新建窗口
打開方式分為在本頁打開和在新的瀏覽器窗口打開，默認情況下，超級鏈接打開新頁面的方式是自我覆蓋（就是在本頁打開）。根據(jù)瀏覽者的不同需要，讀者可以指定超級鏈接的其他打開新窗口的方式。超級鏈接標簽提供了target屬性進行設(shè)置，取值分別為_self（自我覆蓋，默認）、_blank（創(chuàng)建新窗口打開新頁面）。下面我們就來動手區(qū)分下這兩個屬性的區(qū)別（由于我們已近寫過默認的情況，這里我們就只添加_blank屬性）
在前面的基礎(chǔ)上我們在< a>標簽加入target屬性：target="_blank"
超鏈接添加提示文字
有些時候超鏈接文字不足以說明點擊以后所要鏈接的內(nèi)容，所以這個時候我們就需要給超鏈接添加提示文字，加以描述下一個鏈接的內(nèi)容，當光標停留在超鏈接上時，提示語言就會顯現(xiàn)，會讓頁面顯現(xiàn)的很簡介。設(shè)計到的屬性就是title，下面我們再來動手實驗一把 下面就是實驗內(nèi)容和效果
HTML表格
每個表格均有若干行（由 < tr> 標簽定義），每行被分割為若干單元格（由 < td> 標簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。< th>標簽用來定義表頭。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
border="1"定義的是最外面邊框粗細，為1，你也可以設(shè)置為0，就是不顯示邊框（默認就是沒有邊框）
標簽：< th>表頭<
/th>：設(shè)置表頭
標簽：< caption>標題< /caption>：設(shè)置表的標題
屬性：cellpadding="..."設(shè)置單元格邊距
屬性：bgcolor="..."設(shè)置表格背景顏色
屬性：background="..." 以某張圖片作為表格背景
??? 定義表格???
??? 定義表格標題。???
??? 定義表格的表頭。???
??? 定義表格的行。???
??? 定義表格單元。???
??? 定義表格的頁眉。???
??? 定義表格的主體。???
??? 定義表格的頁腳。???
??? 定義用于表格列的屬性。???
??? 定義表格列的組。???
HTML圖片
下面是設(shè)置圖片的對齊方式：
???image test
???
let's have an example
???
???
???
align left
下面是創(chuàng)建圖片超鏈接范圍
涉及到的標簽就是< map>標簽，用來指定圖片,< area>用來指定超鏈接區(qū)域
這里以一張圖片作為地圖， 在< area>標簽中我們會涉及到shape ，coords， href屬性，分別用來指定超鏈接區(qū)域形狀，超鏈接區(qū)域坐標，還有超鏈接跳轉(zhuǎn)地。
這是具體實現(xiàn)內(nèi)容
image?test
tap?the?li?zi?
然后，當我們點擊小松鼠舉起的栗子，你就會看見跟多栗子
[if !vml]
[endif]
shape屬性的取值可以是：rect(矩形)、circle(圓形)、poly(多邊形)和default(整個圖像區(qū)域)。這里采用的是矩形。
coords屬性對于矩形而言，coords有4個值，分別用逗號隔開，表示矩形區(qū)域左上角x坐標、左上角y坐標、右下角x坐標和右下角y坐標，這里獲取坐標的方式，就用截圖工具幫忙就好。
Html布局
這里是具體實現(xiàn)內(nèi)容：
div#container{width:1000px}
div#header?{background-color:?royalblue?;height:?100px;text-align:center;font-size:?20px}
div#sidebar{background-color:?darkorange;height:400px;width:300px;float:left;}
div#mainbody?{background-color:?forestgreen;height:400px;width:700px;float:left;}
div#footer?{background-color:?powderblue;height:?100px;clear:both;text-align:center;}
????????<h1>php中文網(wǎng)
list?of?book
the?summary?of?the?book
i?will?lead?you?to?travel?in?the?season?of?linux
good?good?study?day?day?up
只要將上面的style里的div定義和下面的div塊對應(yīng)就很好理解，這里的邏輯表達的很清晰，就不再贅述。直接來看看效果截圖吧
CSS背景
內(nèi)聯(lián)塊狀元素（inline-block）就是同時具備內(nèi)聯(lián)元素、塊狀元素的特點，代碼display:inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素。(css2.1新增)，<img>、<input>標簽就是這種內(nèi)聯(lián)塊狀標簽。
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
<title>內(nèi)聯(lián)塊狀元素
a{
display:inline-block;
?????????width:20px;/*在默認情況下寬度不起作用*/
?????????height:20px;/*在默認情況下高度不起作用*/
?????????background:pink;/*設(shè)置背景顏色為粉色*/
?????????text-align:center;?/*設(shè)置文本居中顯示*/
}
Css盒模型
下面我們就用一張圖來描述下他們的結(jié)構(gòu)：
均可進行設(shè)置
CSS邊框
border-top-width
border-right-width
border-bottom-width
border-left-width
border-style: dashed;
?border-top-width: 15px;
?border-right-width: 5px;
?border-bottom-width: 15px;
?border-left-width: 5px;
盒模型寬度和高度：
盒模型寬度和高度
盒模型寬度和高度和我們平常所說的物體的寬度和高度理解是不一樣的，css內(nèi)定義的寬（width）和高（height），指的是填充以里的內(nèi)容范圍。
因此一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界。
[if !vml]
[endif]
元素的高度也是同理。
CSS定位
1.CSS 定位
定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應(yīng)該出現(xiàn)的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。
CSS 有三種基本的定位機制：
普通流:
元素按照其在 HTML 中的位置順序決定排布的過程
浮動:
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
絕對定位:
絕對定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。
定位屬性:
position,將元素放在一個靜態(tài)的,相對的,絕對的,或固定的位置
通過對 top,left,right,bottom 這四個屬性的賦值讓元素向?qū)?yīng)的方向偏移
overflow 設(shè)置元素溢出其區(qū)域發(fā)生的事情
clip 設(shè)置元素的顯示形狀,多用于圖片
vertical-align 設(shè)置元素的垂直對其方式
z-index 設(shè)置元素的堆疊順序
接下來就著重來看看 position 屬性: 為了形象,我們先建立一個 html 文件和 CSS 文件
html:
<p>this?is?php中文網(wǎng)
<p>this?is?php中文網(wǎng)
<p>this?is?php中文網(wǎng)
<p>this?is?php中文網(wǎng)
CSS:
.position1{
width:?100px;
height:?100px;
background-color:?cornflowerblue;
}
接下來我們就可以看到普通流的效果:
當我們在 CSS 中加入 position 賦值為相對的,向左偏移60px
position:?relative;
left:?60px;
接下來我們會看見:
下面我們再將 position 設(shè)置為絕對的:
position:?absolute;
效果就變成了這樣:
通過比較我么就能理解 position 這兩個值的區(qū)別,還有兩個屬性就是 fixed,和 static,fixed 是將元素固定下來,就算滾動屏幕,它也會在同一個地方不會動;而 static 設(shè)置以后,偏移量什么的就沒用了.
下面我們接著來看其他的屬性
當我們再加一個塊在前面 div 后面的時候: HTML
CSS 添加:
.position2{
width:?100px;
height:?100px;
background-color:?aquamarine;
position:?relative;
left:10px;
top:?10px;
}
?接下來我們就可以通過 z-index 來控制哪一塊在最前面:
接下來我們就修改下 CSS 文件來交換他們的前后順序: position1 中加入
z-index: 2;
position2 中加入:
z-index: 1;
就可以達到交換的效果:
CSS尺寸
CSS 尺寸
尺寸屬性允許你控制元素的高度和寬度。同樣，它允許你增加行間距。 涉及到的屬性有
height-- 設(shè)置元素的高度。 line-height --設(shè)置行高。 max-height-- 設(shè)置元素的最大高度。 max-width --設(shè)置元素的最大寬度。 min-height --設(shè)置元素的最小高度。 min-width --設(shè)置元素的最小寬度。 width --設(shè)置元素的寬度。
下面我們就寫個 html 和 CSS 文件來具體比較下
.p1{????line-height:?normal;????width:?400px;
}.p2{????line-height:?50%;????width:?400px;
}.p3{????line-height:?200%;???width:?400px;
}
CSS導航欄
下面我們就來定制下自己的導航欄.
垂直導航欄:
首先我們以列表的形式作為最基礎(chǔ)的承載,然后我們再其中加入本地或外部的鏈接,就像下面這樣:
????<li><a?>php中文網(wǎng)link
然后我們就會得到這樣的效果:
我們一般看見的導航欄都沒有下劃線,和前面的帶點,并且當我們的鼠標移到鏈接上面時鏈接的顏色會發(fā)生相應(yīng)的變化,這就是我們現(xiàn)在要讓 CSS 實現(xiàn)的效果.
首先,我們要去掉前面的點
ul{????list-style:?none;
}
接下來我們就去掉下劃線(不管是未被點擊的狀態(tài)還是已被點擊的狀態(tài)都去掉),然后加上個背景顏色,再將其顯示作為塊來顯示:
a:link,a:visited{???text-decoration:?none;???background-color:?lightgray;????display:?block;
}
最后我們再給導航欄加個鼠標移動到上面時,改變背景顏色:
a:active,a:hover{????background-color:?cadetblue;
}
下面就是效果圖
垂直的效果圖講完之后,我們再來講講水平的導航欄,我們就只需要修改 CSS 文件就可以了.
首先我們要將前面的顯示效果刪除,就是這句:
display:?block;
然我們只需要在 li 標簽中改變顯示方式就可以:
li{????display:?inline;
}
這樣就可以實現(xiàn)水平導航欄
CSS圖片操作
首先我們先引入一張圖片,加上一句描述語,使用 div 承載.
就是下面的效果:
接下來我們就開始定制圖片的顯示:
圖片加邊框,修改描述字體中對其,修改字體大小,將整個 div 向左浮動,使邊框與圖片進行貼合:
.image{????border:?2px?solid?darkgrey;????width:?auto;????height:?auto;????float:?left;????text-align:?center;????padding:?5px;
}img{????padding:?5px;
}.text{????font-size:?20px;????margin-bottom:?5px;
}
這就是處理過后的的效果
[if !vml]
[endif]
之后我么再設(shè)計圖片的透明度: 這個比較簡單,就只需要在圖片 CSS 設(shè)置中加入:
opacity: 0.5;
這個屬性的值范圍為 0-1 設(shè)置透明度,0 為完全透明,1 代表完全不透明.
下面就是半透明的效果圖:
[if !vml]
[endif]
選擇器
在很多方面，ID選擇器都類似于類選擇符，但也有一些重要的區(qū)別：
1、為標簽設(shè)置id="ID名稱"，而不是class="類名稱"。
2、ID選擇符的前面是井號（#）號，而不是英文圓點（.）
HTML?表單和輸入
HTML 表單用于收集不同類型的用戶輸入。
[if !vml]
[endif]
在線實例
創(chuàng)建文本字段(Text field)本例演示如何在 HTML 頁面創(chuàng)建文本域。用戶可以在文本域中寫入文本。
創(chuàng)建密碼字段本例演示如何創(chuàng)建 HTML 的密碼域。
（在本頁底端可以找到更多實例。）
HTML 表單
表單是一個包含表單元素的區(qū)域。
表單元素是允許用戶在表單中輸入內(nèi)容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。
表單使用表單標簽 <form> 來設(shè)置:
.
input
元素
.
HTML 表單 - 輸入元素
多數(shù)情況下被用到的表單標簽是輸入標簽（<input>）。
輸入類型是由類型屬性（type）定義的。大多數(shù)經(jīng)常被用到的輸入類型如下：
文本域（Text Fields）
文本域通過<input type="text"> 標簽來設(shè)定，當用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時，就會用到文本域。
First name:
Last name:
瀏覽器顯示如下：
First name:
Last name:
注意:表單本身并不可見。同時，在大多數(shù)瀏覽器中，文本域的默認寬度是 20 個字符。
密碼字段
密碼字段通過標簽<input type="password"> 來定義:
Password:
瀏覽器顯示效果如下:
Password:
注意:密碼字段字符不會明文顯示，而是以星號或圓點替代。
單選按鈕（Radio Buttons）
<input type="radio"> 標簽定義了表單單選框選項
Male
Female
瀏覽器顯示效果如下:
Male
Female
復選框（Checkboxes）
<input type="checkbox"> 定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。
I have a bike
I have a car
瀏覽器顯示效果如下:
I have a bike
I have a car
提交按鈕(Submit Button)
<input type="submit"> 定義了提交按鈕.
當用戶單擊確認按鈕時，表單的內(nèi)容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進行相關(guān)的處理。:
Username:
瀏覽器顯示效果如下:
Username:
假如您在上面的文本框內(nèi)鍵入幾個字母，然后點擊確認按鈕，那么輸入數(shù)據(jù)會傳送到 "html_form_action.php" 的頁面。該頁面將顯示出輸入的結(jié)果。
????????????????????????????????????????tp實際操作
Href=網(wǎng)站鏈接
Alert（）?? 是用來在站點顯示出一個彈窗
???表示跳轉(zhuǎn)到out.js文件
????????????????????????????????????暫時進度（截止至2019.8.4）
