HTML基本文件， CSS基礎

 

    HTML

 

1、HTML基本文件

    【meta標籤】
        一、charset屬性：單獨使用。設置文檔字符集編碼格式。
        >>>寫法：<meta charset="utf8">
        >>>常見的中文編碼格式：
        GB-2312:國標碼，簡體中文
        GBK：擴展的國際碼，簡體中文
        UTF-8:萬國碼 Unicode碼 基本兼容各國語言 

 
二、http-equiv屬性：需配合content屬性使用。主要聲明瀏覽器如何解釋編譯文件
>>>寫法：<meta http-equiv="屬性值"content="屬性值詳細內容">
>>>經常使用屬性值：Content-Type HTML4.01以前的文檔內容編碼內容
refresh 網頁刷新 set-Cookie設置瀏覽器cookie緩存

三、name屬性：需配合content屬性使用。主要用於給搜索引擎提供必要信息。
>>>寫法：<meta name="屬性值" content="屬性值詳細內容">
>>>重要屬性值： author 做者，聲明網站做者，經常使用公司網址表示
keywords 網站關鍵字，多個關鍵字，用英文逗號分隔
description 網頁描述，搜索引擎顯示在title下的描述內容

*http-equiv和name屬性，必須與content屬性配合使用。前二者只是用於聲明即將修改那些屬性值，而實際的屬性內容，在content中描述

 

   描述：一、做用：用於爲網頁鏈接各類文件。
二、經常使用屬性：
rel：用於標明被鏈接文件與當前文件的關係。此處選icon，代表被連接圖片是當前網頁的icon圖標
type：代表被鏈接文件時什麼類型。能夠省略。
href：代表鏈接文件的地址

 

2、常見的塊級標籤

<!--[HTML的標籤分類]
一、塊級標籤：自動換行，先後隔一行。
二、行級標籤：按行逐一顯示。
（是否自動換行使咱們斷定塊級標籤的重要指標）
-->
<!-- [常見的塊級標籤]
標題標籤<h1></h1>……<h6></h6>
水平線<hr/>
段落<p></p>
換行<br/>
引用<blockquote></blockquote >
預格式<pre></pre>
-->
<!--
標題標籤<1><2><3><4><5><6>：默認加粗，H1最大，H6最小

<!--水平線標籤<hr />-->
<hr />

<!--段落<p></p>-->
<!--換行<br/>-->

1代表標籤中的文字，爲因用戶的內容。瀏覽器顯示爲段落縮進
2cite屬性，代表引用的來源，通常爲引用的網址URL
-->

<!--預格式<pre></pre>
預格式:在瀏覽器解析式，會按照等寬字體顯示，而且保留標籤內的空格和回車。經常使用於保留代碼格式。
-->

<!--[有序列表ol order list]-->
<ol>

一、

二、

三、

</ol>
<!--[無序列表ul unorder list]-->
<ul>

.

.

.

</ul>
<!--[定義描述列表]
<dl>
<dt>標題</dt>
<dd>描述項</dd>
</dl>

通常狀況下，標題dt只有一項。描述項dd能夠有N多項。
瀏覽器顯示時，標題頂格顯示，dd會縮進顯示。

-->
<dl>
<dt>這是dl列表的標題</dt>
<dd>列表第一項</dd>
<dd>列表第二項</dd>
<dd>列表第三項</dd>
<dd>列表第四項</dd>
</dl>

<!--[圖片組合標籤figure]
一、<figure></figure>標籤有兩個子標籤
<img src>"">：一幅圖片,表示圖片的路徑。
<figcaption></figcaption>：圖片的標題
二、瀏覽器顯示爲：圖片與標題上線排列，且總體向後縮進一個單位。
-->
<figure>
<img src="img/logo.png" />
<figcaption>折是圖片的標題</figcaption>
</figure>

<!--[分區標籤div]
常配合CSS使用，爲網頁中的經常使用分區標籤，經常使用於網頁佈局使用
-->

<div style="width: 100%;height: 100px;background-color: red;">
這是div裏面的文字
<h1>這是div裏面的標題</h1>

3、常見的行級標籤

<!-- [常見的行級標籤]
span（文本）
img（圖片）
em（強調）
strong（強調）
q（短引用）
a（超連接）
i（傾斜）
b（加粗）
small（縮小字體）
sub 上標
sup 下標
br 換行

span（文本）：用於包裹一部分文字，進行特定樣式的修改。
-->
我<span style="color: red;font-size: 36px;">愛</span>我家
<!--
em(強調)：瀏覽器會顯示爲傾斜
strong（強調）：瀏覽器會顯示爲加粗
i（傾斜）
b（加粗）
s(有誤文本)
u(標註，下劃線)
[Strong/em/i/b標籤的區別]
一、em和strong都表示強調，而strong的 強調程度要大於em，strong和em標籤都可多層嵌套，表示強調程度的遞增。
二、em和i都能切斜，Strong和b都能加粗。可是Strong和em多了一層強調的語義。能夠幫助搜索引擎快速抓取網絡重點。並且HTML5要求開發者，儘量地實現代碼的語義化。
-->
<em>我被em標籤強調了！！！！！</em><br />

<strong>我被strong標籤強調了!!! </strong><br />

<i>我被i標籤傾斜了。</i><br />

<b>我被b標籤加粗了。</b><br />
<!--
q（短引用）：經常使用於一句話的引用，cite屬性表示引用來源
瀏覽器解析時，會在內容的先後插入雙引號
-->
<q cite="http：www.baidu.com">我是被q標籤聲明的一句引用的話</q>
<br />

smll(縮小字體)：smll標籤能夠多層嵌套，表示比默認字體小一號，直到字號小到最小號爲止。
big（放大字體）：同small能夠多層嵌套，直到字號最大爲止。

可是，在最新規範中，small和big標籤，不被倜儻使用。提倡使用style="font-size：11px；"CSS樣式替代。

<small>我被small縮小了</small><br />

<small><small>我被small縮小了</small></small><br />

<big>我被big放大了</big> <br />

<!-- [img 圖片標籤]
一、src屬性:表示圖片引用路徑
>>>常見路徑的方法：
① 相對路徑：
·當圖片在當前文件下一層時：文件夾名/圖片名 img/logo.png
·當圖片在當前文件同一層時：圖片名 src=logo.png
·當圖片在當前文件前一層時：../img/logo.png
② 絕對路徑：寫法file：///E：/aaa。png 可是嚴禁使用
③ 網絡路徑：直接使用圖片的網絡地址，可是因爲圖片在別人服務器，不可控。（因此不建議使用）

二、title：當鼠標指上時，顯示的提示文字

三、alt：當圖片沒法加載時，顯示的文字

四、width/height：圖片的快讀高度，至關於css中的style="width：；height：；"

五、align：圖片周圍的漢字，相對於圖片的排列方式。可選值：top/center/bottom
<!--①案例-->

<img src="img/logo.png" />
<img src="logo.png" />
<img src="../img/logo.png" />

<!--③案例-->

<img src="https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=3225200470,3369676538&fm=73"

<!--[超連接a]屬性
一、href:超連接的跳轉地址。或者本地html文件的相對路徑，肯定方式同img的src路徑
二、target：設置超連接打開窗口的位置_slef 自身頁面打開（默認）_blank 新頁面打開
三、title：鼠標之上後的文字
四、rel:代表即將跳轉的頁面與當前頁面的關係
rel="prev" 即將跳轉頁面，是當前文檔的前一篇文章
rel="next" 即將跳轉頁面，是當前文檔的後一篇文章
rel="prefetch"預加載，當前文檔加載完成後，利用空餘網速，預加載即將跳轉的頁面
[功能性鏈接]
mailto：//jianghao@jerei.com
Tencent：//message/?uin=1554553848
[錨鏈節]
一、本頁面錨鏈節
設置一個錨點：<a name="top"></a> 用name屬性錨點命名
在超連接的href屬性中，使用#name 跳轉到制定錨點的位置
二、其餘頁面連接
需跳轉的頁面設置錨連接
在超連接的href屬性，文件名.html#name
<a href="aaaa.html#top">
注：因爲谷歌/IE兼容性問題，需在錨點中加一個空格&nbsp;才能生效：
<a name="top">&nbsp;</a>

<a herf="tencent://message/?uin=1554553848" title="鼠標指上後顯示的文字"target="_self" >

<!--s有誤文本：刪除線-->
<s>這是s標籤中的文字</s>

<!--cite標籤：瀏覽器顯示爲傾斜，經常使用於書、畫做、做品的引用-->
<cite>這是cite標籤</cite>

<!--code：只是表示計算機代碼。可是瀏覽器只會顯示等寬字體，不會保留代碼格式，需配合pre標籤使用-->
<pre>
<code>
StringBuffer sb = new StringBuffer();
for(String s : arr){
sb.append(s);
}
</code>
</pre>

<!--bdo：表示文本方向，dir="ltr" 從左往右 dir="rtl" 從右往左-->
<bdo dir="ltr">1234567</bdo>

<!--kbd:表示須要用戶用鍵盤輸入的內容。瀏覽器顯示爲等寬字體-->
請輸入「<kbd>Esc</kbd>」退出系統。

<!--sup：上標文本 sub：下標文本-->
X²
X²
<!--版權符號 空格-->
&copy; 空格 &nbsp;

<!--u:下劃線-->
<u>這是u標籤</u>

<!--mark:高亮或標記文本 瀏覽器顯示爲黃色背景-->
<mark>哈哈哈哈哈</mark>

表格

【表格table】
表格<table></table>
表格的行<tr></tr>
表格的列<td></td>
表格的表頭列<th></th>(將tr中的td，替換爲th,表示本行爲表頭)
th 默認加粗，且在單元格中居中顯示

【table的經常使用屬性】
一、Border:表格的邊框屬性；當時用boder=""設置邊框時，會在全部td及table上嵌套邊框，當border加大是，
只有table最外框加粗td線框不會變
二、Cellspacing：單元格與單元格之間的間隙，當=cellspacing"0"時單元格間隙爲0，但邊框線並無合併（邊框線還
是兩條線寬度）
[合併邊框的寫法]style="border-collaspe:collapse;" 使用邊框合併後無需設置 cellspacing
三、Cellpadding:單元格內邊距，單元格邊框與文字的距離
四、Width/Height:表格的寬高
五、Align:設置表格在父容器的對齊方式：left/居左 ceter/居中 right/居右
【注意：當表格使用alight屬性時至關於使表格浮動，可能會致使表格後面元素受影響，致使佈局錯亂】
六、Bgcolor：背景色
七、Background：背景圖片，後接相對路徑。背景圖片與背景色同時生效時，背景圖覆蓋背景色
八、Bordercolor：邊框顏色
text-align:center 居中
text-decoration:underline 下劃線

[<tr><td><th>標籤屬性]<tr style=width>
>>>當表格屬性與行列屬性衝突時，會以行列屬性爲準
屬性設置優先級：td >tr >table
一、width、height：給單個的行列設置寬度高度;
二、bgcoler：背景色
三、align：設施單元格中的文字在單元格中的水平對齊方式 left center right
四、valign：設置單元格中的文字在單元格中的垂直對齊方式 top center bottom
五、nowrap:nowrap="nowrap" 設置單元格文字行末不斷行
-->
<!--[表格的跨行與跨列]
一、跨列：colspan ，某單元格跨N列，則該單元格右邊的N-1個td就不須要了。
二、跨行：rowspan，某單元格跨N行，則該元格右邊的N-1個tr就不須要了。

字變大：font-size xp
字體顏色：color：
字體背景色：background-color:
去掉邊框：border: hidden

四表單

<!--[form表單] [input:屬性/type：類型/] 使用方法： <td>你好<input-type=""><>
一、兩個重要屬性：
action；表單須要提交的服務器地址
method；表單提交數據使用的方法，get/post
>>>get和post的區別
1\get傳參使用URL傳遞，全部參數在地址欄可見，不安全。get傳參數據量有限
二、post傳參使用http請求傳遞，比較安全，能夠傳遞大量數據；可是get請求的傳輸速率比post快。
>>>url傳參的形式；連接url地址?name1=value1&name2=value2
value是手動輸入的值 ?必須是英文狀態下的

二、input 經常使用屬性 <td>你好<input-type=""><>
一、type；設置input的輸入類型
二、name；給input輸入框起名。通常狀況下，name屬性必不可少。由於傳遞數據時使用name=value(輸入內容)
的形式傳遞。
三、value是input輸入框的默認值。
四、placeholder；輸入框的提示內容，當iput有默認的value或者輸入值時，placeholder消失

三、input-type屬性的經常使用屬性值：
一、text：文本輸入框
二、password：密碼輸入框，輸入內容默認顯示小黑點。
三、radio:單選框"圓" /checkbox:複選框 "框"
>>使用radio/checkbox時，value必填。提交時提交的爲value默認值
>>radio/checkbox憑藉name屬性，肯定是否屬於同一組，name相同爲同組，只能選一個
>>使用cheecked="checked"屬性，設置默認選項
四、file：文件上傳
>>使用accpet ="類型"，設置只能上傳文件類型 image/*任意格式圖片
5 、submit：提交按鈕，將全部表單數據提交至後臺服務器。
六、 reset：重置表單數據，，將表單數據恢復默認狀態
七、image：圖形提交按鈕，跟submit同樣，具備表單提交功能
>>使用src屬性，選擇圖片路徑
八、button：普通按鈕
四、屬性名等於屬性值的狀況：
一、checked="cheecked" 設置radio或checkbox的默認選中項
二、multiple="multiple" 設置select控件爲多選
三、selected="selected":設置select控件，默認選中的option選項
四、readonly="readonly" 設置爲只讀模式，不容許編輯
五、disabled="disabled" 禁用控件
>>當input被disabled時，該input將沒法向後臺傳遞
六、hidden="hidden" 隱藏控件。等效於<input type="hidden"/>

五、【下拉選擇控件 select】
① 寫法：<select>
<option></option> //能夠有N多個
</select>
② name屬性，應該寫在<select>上，全部選項只有一個name
③ multiple="multiple" 設置select控件爲多選，可在界面使用Ctrl+鼠標，進行多選。通常不用。
④ option經常使用屬性：
value="":當option沒有value屬性時，日後臺傳遞的是<option></option>標籤中的文字；
當option有value屬性時，日後臺傳遞的是value屬性的值。
title="":鼠標指上後顯示的文字。
selected="selected":默認選中。
⑤ <optgroup label="山東省"></optgroup> :用於將option標籤進行分組，label屬性表示分組名。
六、 【文本域 textarea】
① 寫法：<textarea></textarea>
② 設置寬高style="width: 200px; height: 150px;" 自身有cols="" rows=""兩個屬性，但不經常使用
③ readonly="readonly" 設置爲只讀模式，不容許編輯。
④ style="resize: none;" 設置爲寬高不容許修改。
⑤ style="overflow: ;" 設置當文字超出區域時，如何處理。
>>> 也能夠經過overflow-x/overflow-y分別設置水平垂直方向的顯示方式。
>>> 經常使用屬性值:hidden 超出區域的文字，隱藏沒法顯示
scroll 不管文字多少，均會顯示滾動
auto 自動，根據文字多少自動決定是否顯示滾動條（默認樣式）
七、表格的邊框與標題
<fieldset>
<legend>聯繫方式</legend> 表格的標題
....N多個表單元素（input/select/textarea）
</fieldset>

{HTML5智能表單}
一、H5新增input的form屬性，用於指向特定form表單的id，實現input無需放在form標籤之中，便可經過表單進行提交
<FORM id=foo>
...
</FORM>
<input...form="foo">
二、圖片
三、新增input的屬性：
Autocomplete：自動完成功能,
>記憶以前輸入過的內容，在下次輸入時，根據之前內容提示，自動完成，絕大多數
瀏覽器自動完成。有兩個屬性：off/on
>>能夠在<form>標籤上設置Autocomplete，控制整張表單的自動完成開關，但能夠在個別input上單獨設置
覆蓋form的總體設置.
Autofocus：自動得到焦點 autofocu s="autofocus"
Form：所屬表單，經過form表單的id，指向特定表單
Required：必填 required=「required」 設置input爲必填
Pattern：驗證input的模式
Placeholder：提示

   CSS

1、css經常使用選擇器

/*css語法必須寫在<style>標籤中*/
/*css註釋*/
/*【通用選擇器】
* 1.寫法：*{}
* 2.做用：選中頁面中全部的html標籤
* li{}
*
* 3.優先級：最低
*/
/*【選擇器命名規範】
一、寫法：只能有字母數字、下劃線組成
二、開頭不能是數*/
.ul_l

/*【選擇器優先級】
一、就近原則：近者優先
二、看成用於同一級時：可用權重計算
權重劃分：標籤選擇器1
class選擇器10
id選擇器100
行級樣式表style="" 1000
#u.li.li1.li2.li1{} 優先級權重121
li.li1.li2.lis2{} 優先級3*/

/*【標籤選擇器】
*1 寫法:HTML標籤名{}
*2.做用:選中全部對應的html標籤,並修改*/
li{color: red;}

/*【類選擇器 class選擇器】
*1.寫法:class名{}
*2.調用:在須要修改的標籤上,使用class="選擇器名"
*3.優先級：看成用於同一層時 class選擇器>標籤選擇器
*/
.list{}
/*【ID選擇器】
1.寫法：#選擇器名{}
2.調用：在須要修改的html標籤上，使用id="選擇器名"
3.優先級：同一層時，id選擇器>class選擇器
4.id選擇器是惟一的同一頁面嚴禁出現同名ID
*/
#first{color: green;}

/* 【後代選擇器】
* 1.寫法： 選擇器1 選擇器2....選擇器n{}
* 二、生效規則：選擇器2必須是選擇器1的【後代】……以此類推
*
* 【子代選擇器】
* 一、寫法：選擇器1>選擇器2>選擇器3>……選擇器n{}
* 二、生效規則：選擇器2必須是選擇器1【直接子代】
*/
div ul {background: yellow;}
div >ul >li{background: yellow;}


/*【交集選擇器】
* 一、寫法：選擇器1選擇器2……選擇器n{}
* 二、生效規則：必須同時知足全部選擇器纔會生效
*/
li.list#first{background-color: -webkit-link;}
/*【並集選擇器】
* 一、寫法：選擇器1,選擇器2,……,選擇器n{}
* 二、生效規則：知足任何一個選擇器都可生效
*
*/
/*【僞類選擇器】
* 一、寫法：選擇器名：僞類狀態{}
* 二、常見狀態：
* link：未訪問
* visitted:已訪問
* hover：鼠標移上
* active：激活選定（鼠標點擊未釋放）
* 注：當超連接同時具備以上狀態，則選擇器必須按照上述順序排列
* focus:得到焦點，經常使用於input
*
*
* input:hover
* div:hover
* iput:focus
*/

.list,#first{}
</style>
<!--【三種使用css的方式】
一、行內樣式表：直接在html開始標籤中使用style=""的方式。
特色：將css代碼與html代碼徹底糅雜在一塊兒，不符合w3c關於內容與表現分離的要求。不利於樣式複用
優先級：最高
二、內部樣式表：在<head></head>中使用<style type="text/css"></style>方式引用。
特色：將css代碼與html代碼分離，可是沒有完全分離css文件與html文件，不利於多頁面複用樣式。
三、外部樣式表：使用link標籤連接css文件
<link rel="stylesheet" type="text/css"href="css/01css.css"/>
特色：實現了css與html的完全分離，有利於樣式複用及後期維護。

 

2、css經常使用的文本屬性

/*【顏色經常使用單位】
十六制：#ffffff
顏色名稱：red
RGB顏色：RGB（255，255，255）
RGBA：第四位數，表示透明度。可選值0-1
*/

/*【css經常使用文本屬性 stlye=""】
一、字體，字號
font-weight:字體的粗細，可選屬性值：bold加粗 lighter細體 100~900數值(400正常，700 bold)

font-size:字體大小 **PX **%（瀏覽器默認字體大小的百分比，絕大部分默認16px）

font-family:字體族，設置字體。
>>>多個字體樣式間用逗號分隔，瀏覽器解析時，會從左往右依次解析，選擇可用字體。
>>>通常前面使用具體字體名稱，最後一個使用字體族類名稱。
（經常使用字體族名稱：襯線體serif 非襯線體sans-serif(經常使用) 等寬體Monospace）
>>>例如：font-family:Arial, 'Microsoft Yahei', sans-serif;

font-style:字體樣式,正常(normal) 斜體(italic)

* font-variant：small-caps; 將字母轉爲小型大寫字體。

(瞭解)font縮寫形式：font-style font-variant font-weight font-size line-height font-family
>>> 使用注意事項 ：
① 順序必須嚴格按照上述順序；
② 多個樣式之間用空格分割，並且font-size/line-height 必須做爲一對用/分割
③ font-size和font-family必須指定，其餘樣式不指定將採用默認樣式顯示；
>>> 例如：font:italic bold 75%/1.8 'Microsoft Yahei', sans-serif;
斜體 加粗 字號/行高 字體族(微軟雅黑，非襯線字體族)

二、字體顏色：
color:字體顏色
opacity:透明度,0~1之間的數字。 調整時控件以及子控件均會透明，而使用rgba調整時，只會時本控件透明，
子控件不會發生透明度變化。

三、行距、對齊等：
line-height:行高 ① 像素單位 48px ② 不帶px 正常行高的倍數 ③百分數 同2
>>> 典型應用，調整控件中文垂直居中的方式：控件的height=控件的line-height

text-align:塊級元素的行級元素中的水平對齊方式 left center right

letter-spacing:字符間距,字與字之間的間距

text-decoration:文本修飾 下劃線underline、刪除線line-through、上劃線overline、none

overflow:控制超出範圍文本的顯示方式(auto 根據文字多少自動顯示滾動條，scroll始終顯示滾動條，
hidden 超出範圍文本隱藏) 能夠經過overflow-x overflow-y分別設置水平垂直方向

text-overflow:設置多餘文字的顯示方式 clip裁剪掉 ellipsis省略號
>>>【重點】讓每行多餘文字顯示省略號：
① white-space: nowrap; 需設置行末不斷行
② overflow: hidden; 設置控件超出範圍隱藏
③ text-overflow: ellipsis; 設置多餘文本省略號顯示

white-space: nowrap; 設置行末不斷行顯示

word-break: 瀏覽器默認在空格處斷行，當一個單詞長度超出範圍時，會不斷行顯示， break-all 容許在單詞內換行。

text-shadow:文本陰影，有四個屬性值：
①水平陰影距離 必選，數值越大，陰影右移
②垂直陰影距離 必選，數值越大，陰影下移
③陰影模糊距離 可選，數值越大，陰影越模糊。默認爲0，不模糊
④陰影顏色 可選，默認爲黑色

text-indent:首行縮進，可用像素值調整縮進大小

* text-stroke: -webkit-text-stroke: 0.2px #008000; 描邊的粗細，描邊的顏色

3、css經常使用的背景屬性

 

/* 【CSS經常使用背景屬性】
background

background-color:背景色

background-image:背景圖,background-image: url(圖片地址相對路徑);背景圖和背景色同時存在時，背景圖會覆蓋背景色

background-repeat：背景圖重複方式 ，no-repeat不平鋪 repeat平鋪(默認) repeat-x水平平鋪 repeat-y垂直平鋪

background-size:背景圖大小。

【指定寬度高度】

>>> 寬高的寫法，第一個屬性值爲寬度，第二個屬性值爲高度，能夠：①直接寫像素 ②寫百分比（父容器寬高的百分比）
>>> 當只有一個屬性值時，默認爲寬度。高度等比縮放。
當有兩個屬性值時，會按照指定的高度寬度進行壓縮/拉伸顯示。

【其餘屬性值】

>>> contain:圖片等比縮放，縮放到寬或高的某一邊等於父容器的寬高，另外一邊按照圖片大小縮放（可能致使部分空餘區域沒法覆蓋） >>> cover:圖片等比縮放，使背景圖像徹底覆蓋背景區域。(可能致使背景圖部分區域沒法顯示) background-position：位置座標、偏移量 >>> 指定位置：left/center/right top/center/bottom 當只寫一個屬性值時，另外一個默認居中 >>> 填寫座標：水平位置 垂直位置 (像素或百分比形式) ① 當只寫一個屬性值時，默認寫的爲水平方向，則垂直居中 ② 當使用像素時：圖片的左上角往各個方向移動的實際距離 水平方向：正數右移 負數左移 垂直方法：正數下移 負數上移 (左負有正 上負下正) ③ 當使用百分數時，通常只能是正數。表明去掉圖片後，剩餘空白距離的分佈比例。例如 background-position：30%; 水平方向去掉圖片後，剩餘區域3:7分 */ /* float-left:使快級變成一行*/