HTML+CSS，htmlcss

HTML+CSS，htmlcss

　　做網站開發都知道，Html是網頁開發的基礎，而css是我們設計網頁美感經常使用的布局手法，本篇為大家記錄一下有關兩者的基礎知識，基礎打牢了我們才能走的更遠，不論是jsp還是php都不能脫離html存在。

　一、HTML標籤：

　　1、<strong>加粗標籤</strong>

　　2、<em>傾斜標籤</em>

　　3、<span>單獨樣式</span>

　　4、<q>引號</q>

　　5、<blockquote>長文本引用</blockquote>

　　6、<address>地址資訊</address>

　　7、<ode>單行代碼</ode>

　　8、<pre>多行代碼</pre>

　　9、<ol start="5">從5開始編號</ol>

　　10、<table summary="表格簡介文本">:作用在於有利用搜尋引擎讀懂表格

　　11、<table><caption>表格標題文本</caption></table>

　　12、a標籤的target="_blank":在新的頁面開啟

　　13、a標籤的title="滑鼠滑過顯示文本"

　　14、<img src="圖片地址" alt="圖片標題文字" title="滑鼠經過時顯示文本"/>

　　15、文字標籤：<textarea rows="行數"  cols="列數" />

　　16、stry：樣式標籤 

　　17、Email標籤：

　　

　　

　　18、下拉式清單也可以進行多選操作，在<select>標籤中設定multiple="multiple"屬性，就可以實現多選功能，在 widows 作業系統下，進行多選時按下Ctrl鍵同時進行單擊（在 Mac下使用 Command +單擊），可以選擇多個選項。

　　

　　19、label標籤不會向使用者呈現任何特殊效果，它的作用是為滑鼠使用者改進了可用性。如果你在 label 標籤內點擊文本，就會觸發此控制項。就是說，當使用者單擊選中該label標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制項上（就自動選中和該label標籤相關連的表單控制項上）。

<form>  <label for="male">男</label>  <input type="radio" name="sex" id="male" />  <br />  <label for="female">女</label>  <input type="radio" name="sex" id="female" />  <label for="email">輸入你的郵箱地址</label>  <input type="email" id="email" placeholder="Enter email"></form>

　　對於HTML中的常用標籤就為大家總結到此，這些標籤常用但不太容易記憶，本篇就是方便大家使用是查閱。下面我們一起溫習一下CSS的基礎知識吧。

　二、CSS：

　　1、css的樣式：內聯式、嵌入式、外部式

　　2、css的選取器分為：A、標籤選取器：body{}B、類別選取器：.setGreen{}C、ID選取器：#setGreen{}D、通用選取器：*{}

　　3、文字排版：

　　　　　　　　font-family:"宋體";

　　　　　　　　font-weight:bold;粗體

　　　　　　　　text-decoration:line-through;刪除線

　　　　　　　　text-decoration:underline;底線

　　　　　　　　text-indent:2em;縮排2個位元組

　　　　　　　　line-height:1.5em;行間距為1.5個位元組

　　　　　　　　letter-spacing:1.5em;字間距、字母間距

　　4、三種方法的優先順序：內聯式 > 嵌入式 > 外部式，但是嵌入式>外部式有一個前提：嵌入式css樣式的位置一定在外部式的後面。如右代碼編輯器就是這樣，<link href="style.css" ...>代碼在<style type="text/css">...</style>代碼的前面（實際開發中也是這麼寫的）。感興趣的小夥伴可以試一下，把它們調換順序，再看他們的優先順序是否變化。其實總結來說，就是--就近原則（離被設定元素越近優先順序別越高）。

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

　　6、分組選擇符：當你想為html中多個標籤元素設定同一個樣式時，可以使用分組選擇符（，），如下代碼為右側代碼編輯器中的h1、span標籤同時設定字型顏色為紅色：h1,span{color:red;}它相當於下面兩行代碼：h1{color:red;}span{color:red;}

　　7、權值的規則：標籤的權值為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，所以可以理解為繼承的權值最低。

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

　　常用的塊狀元素有：

　　　　<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

　　常用的內嵌元素有：

　　　　<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

　　常用的內聯塊狀元素有：

　　　　<img>、<input>

　　9、在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是區塊層級元素。內嵌元素設定display:block就是將元素顯示為區塊層級元素。

　　10、在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的內嵌元素（行內元素）（inline）元素。當然塊狀元素也可以通過代碼display:inline將元素設定為內嵌元素。

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

 　　好了對於HTML和CSS的基礎知識總結已經為大家分享完畢，希望對大家的學習有一點的協助。