HTML續
HTML class屬性
定義和用法
class 屬性規定元素的類名（classname）。css
class 屬性大多數時候用於指向樣式表中的類（class）。不過，也能夠利用它經過 JavaScript 來改變帶有指定 class 的 HTML 元素。html
提示和註釋
註釋：class 屬性不能在如下 HTML 元素中使用：base, head, html, meta, param, script, style 以及 title。瀏覽器
提示：能夠給 HTML 元素賦予多個 class，例如：<span class="left_menu important">。這麼作能夠把若干個 CSS 類合併到一個 HTML 元素。安全
提示：類名不能以數字開頭！只有 Internet Explorer 支持這種作法。服務器
class是一個樣式，能夠套在任何結構和內容上，就象一件衣服。app
一.列表標籤
1.ul(unordered list 無序列表,理念每一項是li) 有type屬性,type屬性有disc(實心圓點),square(實心方點),circle(空心遠點)等屬性值,默認是實心圓
<ul type="circle">
<li>lili</li>
<li>安徽省對</li>
<li>阿薩德好看</li>
<li>的工時費</li>
</ul>
li裏能夠繼續嵌套ul,li是一個容器級標籤,嵌套實例:
<ul type="square">
<li>lili</li>
<li>安徽省對</li>
<li>阿薩德好看</li>
<li>
<ul>
<li>kjl</li>
<li>kjl</li>
<li>kjl</li>
</ul>
</li>
</ul>
2.ol(ordered list 有序列表,裏面每一項是li) 有type屬性,屬性值能夠是1,a,A,i,I.結合start屬性,表示從幾開始,oi裏能夠繼續嵌套ul,li是一個容器級標籤
<ol type="a" start="2">
<li>lili</li>
<li>安徽省對</li>
<li>阿薩德好看</li>
<li>
<ol>
<li>kjl</li>
<li>kjl</li>
<li>kjl</li>
</ol>
</li>
</ol>
3.dl(definition list,dl的子元素是dt和dd),沒有屬性
<dt>:列表的標題,必須有,容量及標籤
<dd>:列表的項,能夠沒有,容量及標籤
<div align="center">
<dt >聲明</dt>
<dt>一.紀錄守則</dt>
<dd>不許說話</dd>
<dd>不許睡覺</dd>
<dd>不許遲到</dd>
<dt>二.衛生守則</dt>
<dd>不許亂扔垃圾</dd>
<dd>天天倒垃圾</dd>
</div>
二.表格標籤<table>
表格是由行<tr>組成的,行是由<td>組成的
***一個表格是由行組成的,不是由行和列組成的
<table>
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
</tr>
<tr>
<td>1</td>
<td>麗麗</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>是大V</td>
<td>21</td>
</tr>
</table>
<table>屬性
border：邊框。像素爲單位。
style="border-collapse:collapse;"：單元格的線和表格的邊框線合併
width：寬度。像素爲單位。
height：高度。像素爲單位。
bordercolor：表格的邊框顏色。
align：表格的水平對齊方式。屬性值能夠填：left right center。
注意：這裏不是設置表格裏內容的對齊方式，若是想設置內容的對齊方式，要對單元格標籤<td>進行設置）
cellpadding：單元格內容到邊的距離，像素爲單位。默認狀況下，文字是緊挨着左邊那條線的，即默認狀況下的值爲0。
注意不是單元格內容到四條邊的距離哈，而是到一條邊的距離，默認是與左邊那條線的距離。若是設置屬性dir="rtl"，那就指的是內容到右邊那條線的距離。
cellspacing：單元格和單元格之間的距離（外邊距），像素爲單位。默認狀況下的值爲0
bgcolor="#99cc66"：表格的背景顏色。
background="路徑src/..."：背景圖片。
背景圖片的優先級大於背景顏色。
<table border="2" style="border-collapse:collapse;" width="200" height="150" bordercolor="red" align="center">
<tr>屬性
dir：公有屬性，設置這一行單元格內容的排列方式。能夠取值：ltr：從左到右（left to right，默認），rtl：從右到左（right to left）
bgcolor：設置這一行的單元格的背景色。
注：沒有background屬性，即：沒法設置這一行的背景圖片，若是非要設置，能夠用css實現。
height：一行的高度
align="center"：一行的內容水平居中顯示，取值：left、center、right
valign="center"：一行的內容垂直居中，取值：top、middle、bottom
<tr dir="rtl" bgcolor="#faebd7" height="30">
<td>屬性
align：內容的橫向對齊方式。屬性值能夠填：left right center。
若是想讓每一個單元格的內容都居中，這個屬性太麻煩了，之後用css來解決。
valign：內容的縱向對齊方式。屬性值能夠填：top middle bottom
width：絕對值或者相對值(%)
height：單元格的高度
bgcolor：設置這個單元格的背景色。
background：設置這個單元格的背景圖片。
單元格合併:
colspan：橫向合併。例如colspan="2"表示當前單元格在水平方向上要佔據兩個單元格的位置。
rowspan：縱向合併。例如rowspan="2"表示當前單元格在垂直方向上
<table border="2" style="border-collapse:collapse;" width="200" height="150" bordercolor="red" align="center">
<tr dir="rtl" bgcolor="#faebd7" height="30">
<td>id</td>
<td>name</td>
<td>age</td>
<td rowspan="3">中國人</td>
</tr>
<tr>
<td>1</td>
<td>麗麗</td>
<th>20</td>
</tr>
<tr>
<td>2</td>
<td colspan="2">是大V</td>
</tr>
</table>
<th>:單元格中的數字加粗
<th>20</th>
<caption>:表格的標題
<caption>員工表</caption>
<thead>,<tbody>,<thead>
一、若是寫了，那麼這三個部分的代碼順序能夠任意，瀏覽器顯示的時候仍是按照thead、tbody、tfoot的順序依次來顯示內容。
若是不寫thead、tbody、tfoot，那麼瀏覽器解析並顯示錶格內容的時候是從按照代碼的從上到下的順序來顯示。
二、當表格很是大內容很是多的時候，若是用thead、tbody、tfoot標籤的話，那麼數據能夠邊獲取邊顯示。若是不寫，
則必須等表格的內容所有從服務器獲取完成才能顯示出來。
3.不能夠跨部分合並單元格.
<table border="2" style="border-collapse:collapse;" width="200" height="150" bordercolor="red" align="center">
<caption>員工表</caption>
<thead>
<tr dir="rtl" bgcolor="#faebd7" height="30">
<td>id</td>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tfoot>
<tr>
<td>1</td>
<td>麗麗</td>
<td>njnc</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>2</td>
<td colspan="2">是大V</td>
</tr>
</tbody>
</table>
三.表單標籤<form>
表單標籤用<form>表示，用於與服務器的交互。表單就是收集用戶信息的，就是讓用戶填寫的、選擇的。
屬性:
name:表單的名字
id:表單的惟一標識
action:表單提交到哪裏,填網址
method:表單的提交方式,默認屬性值是get,還有post
Enctype：表單數據的編碼方式(加密方式)，取值能夠是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。
Application/x-www-form-urlencoded：默認加密方式，除了上傳文件以外的數據均可以
Multipart/form-data：上傳附件時，必須使用這種編碼方式。
<input>:輸入標籤
屬性:
text（默認）
password：密碼類型
radio：單選按鈕，名字相同的按鈕做爲一組進行單選（單選按鈕，天生是不能互斥的，若是想互斥，必需要有相同的name屬性。name就是「名字」。）。很是像之前的收音機，按下去一個按鈕，其餘的就擡起來了。因此叫作radio。
checkbox：多選按鈕，名字相同的按鈕做爲一組進行選擇。
checked：將單選按鈕或多選按鈕默認處於選中狀態。當<input>標籤的type="radio"時，能夠用這個屬性。屬性值也是checked，能夠省略。
hidden：隱藏框，在表單中包含不但願用戶看見的信息
button：普通按鈕，結合js代碼進行使用。
submit：提交按鈕，傳送當前表單的數據給服務器或其餘程序處理。這個按鈕不須要寫value自動就會有「提交」文字。這個按鈕真的有提交功能。點擊按鈕後，這個表單就會被提交到form標籤的action屬性中指定的那個頁面中去。
reset：重置按鈕，清空當前表單的內容，並設置爲最初的默認值
image：圖片按鈕，和提交按鈕的功能徹底一致，只不過圖片按鈕能夠顯示圖片。
file：文件選擇框。
提示：若是要限制上傳文件的類型，須要配合JS來實現驗證。對上傳文件的安全檢查：一是擴展名的檢查，二是文件數據內容的檢查。
<value>:文本框中默認的內容
size="50"：表示文本框內能夠顯示五十個字符。一個英文或一箇中文都算一個字符。
注意size屬性值的單位不是像素哦。
readonly：文本框只讀，不能編輯。由於它的屬性值也是readonly，因此屬性值能夠不寫。
用了這個屬性以後，在google瀏覽器中，光標點不進去；在IE瀏覽器中，光標能夠點進去，可是文字不能編輯。
disabled：文本框只讀，不能編輯，光標點不進去。屬性值能夠不寫
<form action="http://www.baidu.com">
<input value="" type="hidden">
<input value="已經寫好了" type="text">
<input value="已經寫好了" type="text" readonly="">
<input value="已經寫好了" type="text" disabled="">
<input value="" type="password">
<input name="01" value="男" type="radio" checked>男
<input name="01" value="女" type="radio">女
<input value="" type="hidden">
<!--<input type="button" value="肯定">普通按鈕-->
<!--<button>肯定</button> 直接提交-->
<!--<input type="submit">不用寫vaule=提交-->
<!--<input type="reset">重置-->
<!--<input type="image" id="as" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537752361&di=eeaea9ec907f0162f3fd1f2e1ebaf9d0&imgtype=jpg&er=1&src=http%3A%2F%2Fpic2.52pk.com%2Ffiles%2F160216%2F5329500_160443_1.png">把圖片當成按鈕-->
<input type="file">
</form>
<select>:下拉列表標籤
<select>標籤裏面的每一項用<option>表示。select就是「選擇」，option「選項」。
屬性:
multiple：能夠對下拉列表中的選項進行多選。沒有屬性值。
size="3"：若是屬性值大於1，則列表爲滾動視圖。默認屬性值爲1，即下拉視圖。
<option>
屬性：
selected：預選中。沒有屬性值。
<form >
<select size="4" >
<option>小學</option>
<option>初中</option>
<option>高中</option>
<option selected="">大學</option>
<option >碩士</option>
<option selected="">博士</option>
<option selected="">博士後</option>
</select>
</form>
<textarea>:多行文本輸入框
屬性:
value：提交給服務器的值。
rows="4"：指定文本區域的行數。
cols="20"：指定文本區域的列數。
readonly：只讀。
<form >
<textarea cols="80" rows="4">請在此輸入意見</textarea>
</form>
<fieldset>:表單的語義化:
<fieldset>
<legend>帳號信息</legend>
姓名：<input value="呵呵" >逗比<br>
密碼：<input type="password" value="pwd" size="50"><br>
</fieldset>
四.css
1.css的三種引入方式
行內樣式:
<p style="color: red; font-size: 30px;">wusir</p>
<span style="color: purple;">alex</span>
內接樣式:
<style type="text/css">
span{
color: green;
font-size: 30px;
}
外界樣式:
<link rel="stylesheet" href="./index.css">
2.css選擇器:
(1)標籤選擇器(選中的是共性的) 語法:標籤名
<style>
p{
color: #1c6fe2;
}
</style>
</head>
<body>
<p>話可真多</p>
(2)類選擇器(選中的是共性的) 語法:點+類名
<style>
.active{
}
.large{
color: #dedede;
}
</style>
</head>
<body>
<div class="active large">
對面的
</div>
(3)id選擇器(選中的是特性的) 語法:#+id
<style>
#a123{
background-color: tomato;
}
</style>
</head>
<body>
<p id="a123">hk你匿名虛擬機</p>
</body>
(4)通配符選擇器 語法:*
<style>
*{
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
五.補充
1.清除a標籤的下劃線
a{
text-decoration: none; #無下劃線
text-decoration: underline; #有下劃線
}
2.顯示小手的狀態
cursor: pointer;
相關文章
- 1. HTML後續
- 2. HTML 5 斷點續上傳
- 3. html基礎知識續
- 4. HTML學習筆記（持續更新）
- 5. HTML & CSS 之小白再續前緣
- 6. HTML、CSS基礎 {未完待續}
- 7. 【HTML+CSS】學習筆記（持續更新）
- 8. 從零開始學HTML&&CSS&&JavaScript（二）——HTML經常使用元素續集
- 9. Flying Saucer實現html轉pdf(一些問題,持續更新)
- 10. Jenkins持續集成輸出html測試報告
- 更多相關文章...
- • HTML 指南 - 網站建設指南
- • W3C HTML 活動 - W3C 教程
- • 適用於PHP初學者的學習線路和建議
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
