html+css布局是web開(kāi)發(fā)的基礎(chǔ),也是好的用戶體驗(yàn)及銜接后端開(kāi)發(fā)的基礎(chǔ).
一.html的基本骨架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 外鏈CSS地址href --> <link rel="stylesheet" href=""> <!-- 外鏈js地址src --> <script src=""></script> <!-- 標(biāo)題圖標(biāo)設(shè)置 href--> <link rel="shortcut icon" href=""> <title>標(biāo)題標(biāo)簽</title> </head> <body> 用戶可見(jiàn)內(nèi)容區(qū)域 </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
二.html標(biāo)簽
1.標(biāo)簽類(lèi)型 單標(biāo)簽(img,br,hr) 雙標(biāo)簽(p,h1-h6,div,span)
2.常用標(biāo)簽
1.標(biāo)題(h1-h6) 段落(p)
<h1>我是h1標(biāo)簽</h1> <h2>我是h1標(biāo)簽</h2> <h3>我是h1標(biāo)簽</h3> <p>我是標(biāo)題p標(biāo)簽</p>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
2.文本修飾(em斜體,strong加粗,u下劃線)
<p><em>我是</em><strong>一段</strong><u>實(shí)例文字</u> </p>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
3.列表(無(wú)序列表ul>li 有序列表ol>li 自定義列表 dl>dt(標(biāo)題)>dd(解釋內(nèi)容)
<ul> <li>吃飯</li> <li>睡覺(jué)</li> <li>打游戲</li> </ul>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
<ol> <li>中國(guó)</li> <li>美國(guó)</li> <li>俄羅斯</li> </ol>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
<DL> <dt>友情鏈接</dt> <dd>百度</dd> <dd>騰訊</dd> <dd>網(wǎng)易</dd> </DL>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
4.表格 table表格 caption標(biāo)題 thead表頭 tbody表體 tfoot tr行 th表頭格 td單元格
<table border="1px"> <caption>購(gòu)物清單</caption> <thead> <th>序號(hào)</th> <th>名稱(chēng)</th> <th>數(shù)量</th> </thead> <tbody> <tr> <td>1</td> <td>蘋(píng)果</td> <td>2</td> </tr> <tr> <td>2</td> <td>筆記本電腦</td> <td>1</td> </tr> <tr> <td>3</td> <td>電視</td> <td>1</td> </tr> </tbody> </table>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
5.表單
1.表單是最重要的交互工具,用戶可以通過(guò)表單,將數(shù)據(jù)提交到后端服務(wù)器上進(jìn)行處理
2.表單涉及:from表單, label特定表單控件關(guān)聯(lián),input輸入數(shù)據(jù)空間(type的值改變輸入方式),select(下拉列表),button(按鈕)標(biāo)簽
<form action="xxx.php" method="GET"> <!-- action 提交地址 method提交方式 --> <!-- lable綁定id關(guān)聯(lián)input組件或內(nèi)嵌 --> <div> <label>用戶名:<input type="text" name="username" placeholder="請(qǐng)輸入賬號(hào)"></label> </div> <div> <label for="password">密碼:</label> <input type="password" id="password" placeholder="請(qǐng)輸入密碼"> </div> <!-- 單選框 關(guān)聯(lián)name值成組 checked默認(rèn)選擇項(xiàng) --> <div> <input type="radio" name="gender" value="male" id="male" checked> <label for="male">男</label> <input type="radio" name="gender" value="female" id="female"> <label for="female">女</label> </div> <!-- 復(fù)選框 name提交值是數(shù)組 --> <div> <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">打游戲</label> <input type="checkbox" name="hobby[]" value="eat" id="eat"><label for="eat">吃東西</label> <input type="checkbox" name="hobby[]" value="lvyou" id="eat" checked><label for="eat" >旅游</label> </div> <!-- 下拉列表 value是提交給服務(wù)器的數(shù)據(jù) --> <label for="map">選擇省份:</label> <select name="map" id="map"> <option value="1">湖北省</option> <option value="2" selected>廣東省</option> <option value="3">湖南省</option> <option value="4">云南省</option> </select> <!-- 文本域 --> <div> <label for="liuyan">留言板</label> <textarea name="liuyan" id="liuyan" cols="30" rows="10" placeholder="請(qǐng)輸入文字"></textarea> </div> <!-- 提交重置按鈕 --> <input type="submit" value="提交"> <input type="reset" value="重置"> <!-- button可與JS交互 --> <button tape="button">提交</button> </form>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
三. css
1.樣式規(guī)則=選擇器+聲明
2.選擇器優(yōu)先級(jí) 標(biāo)簽<class<id<內(nèi)聯(lián) (行內(nèi))樣式
3.選擇器的優(yōu)先權(quán)解釋說(shuō)明
內(nèi)聯(lián)樣式表的權(quán)值最高 1000。
ID 選擇器的權(quán)值為 100。
Class 類(lèi)選擇器的權(quán)值為 10。
HTML 標(biāo)簽(類(lèi)型)選擇器的權(quán)值為 1。
4.盒子模型
1. 盒模型是布局的基礎(chǔ),頁(yè)面上的一切可見(jiàn)元素皆可看做盒子
2. 盒子默認(rèn)都是塊級(jí)元素: 獨(dú)占一行,支持寬度設(shè)置
(根據(jù)盒子模型示意圖分析)
3. 盒子模型分為三個(gè)層級(jí):
1. 內(nèi)容級(jí): 寬高和背景三個(gè)屬性
(1): width
(2): height
(3): background-color (默認(rèn)透明)
2. 元素級(jí)(可視范圍)
(1): 包括內(nèi)容級(jí)(width + height + background)
(2): 內(nèi)邊距: padding
(3): 邊框: border
3. 位置級(jí):margin, 決定當(dāng)前盒子與其它盒子之間的位置與關(guān)
小知識(shí):
<title>與<h>的區(qū)別(h1-h6標(biāo)簽,h1是h標(biāo)簽當(dāng)中權(quán)重最高的(所以這里就拿h1標(biāo)簽來(lái)說(shuō))):
title是用在網(wǎng)頁(yè)當(dāng)中的標(biāo)題,h1標(biāo)簽是用在文章當(dāng)中的標(biāo)題;
title標(biāo)題是給搜索引擎看的,h1標(biāo)簽的內(nèi)容是給用戶看的;
title標(biāo)簽分的seo(Search Engine Optimization搜索引擎優(yōu)化)權(quán)重非常大,因此一般主關(guān)鍵字都是放到title標(biāo)簽內(nèi)優(yōu)化的。h1標(biāo)簽分的seo權(quán)重次于title標(biāo)簽,一般長(zhǎng)尾關(guān)鍵字用此標(biāo)簽,比如文章標(biāo)題(h2-h6以減?。?/p>
總結(jié):
1.學(xué)習(xí)html 就是學(xué)習(xí)標(biāo)簽。
2.多練習(xí)熟悉標(biāo)簽的使用。
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)