web前端开发——HTML学习
生活随笔
收集整理的這篇文章主要介紹了
web前端开发——HTML学习
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
WEB前端開發
W3C學習網站
MDN學習網站
HTML
從語義角度，描述頁面結構
語言不區分大小寫，特殊字符要求全小寫
html5文件結構
快速編輯：Tab鍵
<!DOCTYPE html> 文檔類型：符合HTML5標準 <htmml lang="en"> lang屬性：搜索引擎 en英文 zh中文 <head><meta charset="UTF-8"/> <meta>:元數據charset屬性：字符集編碼方式瀏覽器：UTF-8 是國際編碼 </head>字符集與編碼
ASCII：數字、英文字母、符號
GB2312：簡體中文
Unicode：所有語言
UTF-8：所有語言，占用空間更小
對亂碼問題的解釋：源文件保存時的編碼方式跟源文件聲明不同
標簽
標題h
1、<h1>一級標題</h1>.....6、<h6>到六級標題</h6>段落p
<p>我是段落標簽</p> 內容拓展：p{段落內容}兩個段落標簽框定為一個段落，每個段落自動換行
段落內部文字忽略連續空格，也不顯示空行，不會換行
段內換行 <p>段內<br/>換行</p>單獨出現，直接結束QAQ我都不能在它旁邊打字
空格字符”?“可多個出現 & n b s p ;
預留格式pre
<pre>我是預留格式標簽。 我保留了空格和空行 </pre>定義預格式化文本
文本中的空格和換行符會被保留
行內組合span
組合行內元素，以便通過CSS樣式來格式化
<p>標簽<span>我是內容</span>這里</p> <!--格式化了容器內的文字內容--> <style type="text/css"> span{color: blue;font-weight: bold; /*bold是字體加粗*/ } </style> /*css代碼內對span的格式化內容的定義*/水平線hr
單獨出現 <p>正文</p> <hr /> <p>正文</p>超鏈接a
- 文字超鏈接
- 圖片超鏈接
- 導航欄
百度
如果鏈接到本站其他網頁，直接放網頁名
虛擬超鏈接
<a href="#"
圖像img
圖像格式：
- JPG有損壓縮，色彩豐富
- GIF簡單動畫、背景透明
- PNG無損壓縮、透明、交錯（清晰度從小變大）
src屬性：路徑+文件名
“images/logo.png”
絕對路徑與相對路徑：
絕對路徑：以根目錄為基準“C:/site/logo.gif ”
相對路徑：以文檔所在位置為基準“logo.gif ”
區域div
<div id="container" align="center"> <!--id屬性起名--><h1>該屬性跟css樣式作用效果一般</h1> <div id="nav">第二區域</div> </div>區域的劃分，便于布局，便于后期用css對區域進行作用。
列表ul ol li
- 無序列表ul
li標簽是列表項
表格table tr td
行：tr 單元格：td <table><tr><td></td><td></td></tr><tr><td></td><td></td></tr> </table> <!-- 快速生成：table>tr*n>td*m --> 表格邊框屬性border="1" 表頭單元格：<th>屬性</th>| 1 | 2 |
表單與表單元素form
<import type=""> text、password、submit、reset、radio、checkbox <select><option></option></select> </import><form>賬戶：<input type="text" name="userName" /><br />密碼：<input type="password" name="userPsd" /> </form> <form>賬戶：<input type="text" name="userName" /><br />密碼：<input type="password" name="userPsd" /><input type="submit" value="提交" name="submitPsd" /> </form> <form>賬戶：<input type="text" name="userName" /><br />密碼：<input type="password" name="userPsd" /><input type="submit" value="確定" name="submitPsd" /><input type="reset" value="重置" > </form> <form>性別：男 <input type="radio" value="boy" name="gender" checked="checked" /> <!--radio表示單選框，單選name要相同，checked屬性表示默認勾選-->女 <input type="radio" value="girl" name="gender" /><br />愛好：<imput type="checkbox" value="1" name="music" checked="checked"/>音樂<imput type="checkbox" value="2" name="sport" />運動<!--checkbox表示多選,name可以不同--> </form> 下拉列表框select option <select><option selected="selected">選項1</option><option>選項2</option><option>選項3</option> </select> 文本域textarea <form><textarea rows="行數" cols="列數">文本</textarea><br /><input type="submit" value="確定" /><input type="reset" value="重置" /> </form> 個人簡介：請在這里輸入內容...
同級拓展：(div>p)+(div>img)
文字拓展：lorem2
段落拓展：lorem
Web語義化
<div id="header"><header>頁眉部分</header> </div> <em>強調</em> <i>斜體，無語義</i> <strong>重點強調</strong> <b>粗體，無語義</b>強調
斜體，無語義
重點強調
粗體，無語義
實際效果：
HTML總結
以上是生活随笔為你收集整理的web前端开发——HTML学习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Liunx 中tr的用法
- 下一篇： html前端论文参考文献,web前端论文