黑馬程序員pink老師前端入門教程,零基礎(chǔ)必看的h5(html5)+css3+移

聲明文件類型<!DOCTYPE html>
<meta charset="UTF-8"> 字符類型
<title></title> 網(wǎng)頁名
<body></body> 內(nèi)容
<h1~h6></h1~h6> 由大到小的標(biāo)題
<p></p> 段落標(biāo)簽
<br> 換行
<strong></strong>或<b></b>加粗
<em></em>或<i></i>傾斜
<del></del>或<s></s>刪除線
<ins></ins>或<u></u>下劃線
<div></div>獨(dú)占一行
<span></span>組合文檔中的行內(nèi)元素
<img src="文件地址或輸入圖片網(wǎng)址" alt="可替換的文本" title="鼠標(biāo)移至圖片上顯示的文本" width="寬" height="高"/>
網(wǎng)絡(luò)照片實(shí)例<img src="http://www.itcast.cn/2018czgw/images/logo.png" />
同一級路徑直接輸入文件名,下一級路徑則在前加上文件夾名如img/tianjiao.jpg。上一級路徑則../文件名.jpg 。
<a href="網(wǎng)址或其他文件">文字或圖片</a>超鏈接標(biāo)簽,可做目錄快速移動
<a hred="#id">跳轉(zhuǎn)</a> <h1 id="id">首頁</h1>
  空格符號 <> 分別為<>
表格基礎(chǔ)語法
<table>
<tr><td>姓名</td> <td>性別</td> <td> 年齡 </td></tr>
<tr><td>劉德華</td> <td>男</td> <td> 56 </td></tr>
<tr><td>張學(xué)友</td> <td>男</td> <td> 58 </td></tr>
</table>
表格頭單元格標(biāo)簽<tr><th>姓名</th> <th>性別</th> <th> 年齡 </th></tr>
跨行合并單元格(colspan="...")跨列合并單元格(rowspan=“...”)
無序列表
<ul>
<li></li>
<li></li>
</ul>
有序列表
<ol>
<li></li>
<li></li>
</ol>
自定義列表
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
表單域(是一個(gè)包含表單元素的區(qū)域,會把它范圍內(nèi)的表單元素信息提交給服務(wù)器)
<from action="url地址" method="提交方式" name="表單域名稱"></from>
input 表單元素
<input type="類型" name="類名" value="顯示文本" maxlength="最大字?jǐn)?shù)">
<input type="text" name="username" value="請輸入用戶名" maxlength="6">
<input type="password" name="pwd" >
type="radio" 可實(shí)現(xiàn)單選,name是表單元素名字 單選按鈕必須有相同的名字name 才可以實(shí)現(xiàn)多選1。
checked="checked"屬性, 當(dāng)頁面打開的時(shí)候就可以默認(rèn)選中這個(gè)按鈕
type="reset"重置
type="button"創(chuàng)建按鈕
type="file"選擇文件上傳
label標(biāo)簽
<label for="text"> 用戶名:</label> <input type="text" id="text" >
可使我們在網(wǎng)頁中點(diǎn)擊用戶名可以輸入文本
下拉表單
<select>
<option>選項(xiàng)一</option>
<option>選項(xiàng)二</opti...
</select>
<option selected="selected">火星</option>默認(rèn)選取
textarea文本域:
<form>
今日反饋:
<textarea cols="50" rows="5"> </textarea></form>
cols是寬度 rows是高度
CSS樣式
基礎(chǔ)語法:
在<head></head>中添加<style></style>在其中修改樣式
選擇器 {樣式}
給誰改樣式 {改什么樣式}
p {
color:red; 顏色
font-size:24px; 字體大小
text-alibng:center; 文字居中
}
標(biāo)簽選擇器:
標(biāo)簽 {
修改樣式
}
類選擇器:
.類名{
修改樣式
}
<p class="樣式名">絕世放天驕</p>
<div class="樣式名1 樣式名2">絕世放天驕</div>
id選擇器:
#pink {
color:pink;
}
<div id="pink">邁克爾·杰克遜</div>
同配符選擇器:
*{
color:pink;
}
可將全部內(nèi)容改成pink色
文字屬性
1.字體 font-family: '字體名,字體名,字...';注意用逗號隔開!如有帶空格的字體名則帶引號。
2.大小 font-size: 16px; px=像素