一篇文章快速學會HTML

注：適合有一定編程基礎的來快速掌握HTML

超文本標記語言

超文本：文本，聲音，圖片，視頻，表格，鏈接

標記：許多的標簽組成

HTML頁面是運行到瀏覽器上的

HTML

文件根標簽

head

編寫頁面相關屬性

title

頁面標題

body

頁面內容展示信息

DOM樹

head , body … 相當于 html 的子標簽

head 和 body是兄弟標簽

head 與 title 是父子標簽

每一個標簽相當于一個對象，可以通過代碼拿到這些對象進行增刪查改。

$0表示標簽像素為0

代碼框架

HTML標簽

注釋標簽

 <!-- 注釋 -->

標題標簽

 <h1>標題</h1><h2>標題</h2><h3>標題</h3><h4>標題</h4><h5>標題</h5><h6>標題</h6>

段落標簽

  <p>段落</p>

換行標簽

<br/>

換行后間隙比段落小

格式化標簽

加粗：

<strong>《星際寶貝史迪奇》</strong>

傾斜：

<em>《皇后》</em>

刪除：

<del>《星際》</del>

下劃線：

<ins>《星際》</ins>

img 標簽

_src 屬性

相對路徑

<img src="img/OIP-C.jfif">

絕對路徑

1.直接寫圖片路徑

<img src="D://img//OIP-C.jfif">

2.網絡上的路徑

<img src="https://cn.bing.com/images/search?view=detailV2&ccid=xOa1rOjw&id=C2E45A49F5440934DFA10B505ABF1E0A26D083BC&thid=OIP.xOa1rOjwWguXauADCE-q4QHaKd&mediaurl=https%3A%2F%2Fpicb.zhimg.com%2Fv2-937b610f123ac83d5a09a220908fc2ff_r.jpg&exph=1188&expw=841&q=%E4%BA%8C%E6%AC%A1%E5%85%83%E8%90%9D%E8%8E%89%E5%9B%BE%E7%89%87&simid=608012321895089100&FORM=IRPRST&ck=C57FF1E75526D6B88BE2B1DE8DC7118A&selectedIndex=0&itb=0&cw=1308&ch=736&ajaxhist=0&ajaxserp=0"

其他屬性

alt 屬性

圖片加載失敗顯示的文字

<img src="img/OIP-C.jfif" alt="蘿莉加載失敗！">

title 屬性

鼠標移動時顯示的文字

<img src="img/OIP-C.jfif" title="這是蘿莉！">

width height 屬性

改變圖片大小

 <img src="img/OIP-C.jfif" width="200" height="300">

border 屬性

給圖片加載邊框

<img src="img/OIP-C.jfif"  border="2px">

超鏈接標簽

href 屬性

 <a href="https://www..wangzhi">跳舞</a>

占位符停留在當前界面

<a href="#">

通過圖片跳轉

 <a href="https://www..wangzhi"><img src="xxxxx"></a>

target 屬性

_self _blank

默認是 _self

 <a href="https://www..wangzhi"target="_blank">跳舞</a>
// 跳轉到新頁面

表格標簽

table標簽

<table border="1" cellspacing="0" cellpadding="10" align="center"> <!-- 默認無邊框border="2px" 加邊框 cellspacing="0" 表格間隙 cellpadding="10" 表格大小align="center" 表格位置 center 居中--><tr> <!-- 行 --><td>姓名</td> <!-- 列 --><td>年齡</td><td>身高</td></tr><tr><td>蘿莉1號</td><td>13</td><td>145cm</td></tr><tr><td>蘿莉2號</td><td>15</td><td>152cm</td></tr><tr><td>蘿莉3號</td><td>16</td><td>156cm</td></tr></table>

thead tbody 標簽

<thead><th><td>姓名</td><td>年齡</td><td>身高</td></th>
</thead>

合并單元格

<td rowspan="2">13</td>
<td>145cm</td>
// 合并兩行

列表標簽

無序列表

 <ul><li type="disc">我愛蘿莉！  </li><li type="square">我愛蘿莉！</li><li type="circle">我愛蘿莉！</li></ul>

有序列表

 <ol><li type="a">我愛蘿莉！</li><li type="1">我愛蘿莉！</li><li type="A">我愛蘿莉! </li></ol>

自定義列表

<dl><dt> 蘿莉yyds  // 自定義標題<dd>我愛蘿莉！</dd><dd>我愛蘿莉！</dd><dd>我愛蘿莉！</dd></dt></dl>

表單標簽

完成和服務器的一次交互

表單域：form

表單控件：input

input

用戶用來輸入的

type 決定類型

<form>文本框 <input type="text">  <!-- 單行--><br>密碼框 <input type="password"><br>單選框 <input type="radio" name="gender" checked="checked"> 蘿莉01<input type="radio" name="gender"> 蘿莉02<!-- name="gender" 區分是否是同一組單選框checked="checked" 設置默認值--><br>復選框 <input type="checkbox"> 蘿莉01<input type="checkbox"> 蘿莉02<input type="checkbox"> 蘿莉03<br>按鈕  <input type="button" value="我要c蘿莉"><br></form>

input 提交

<from action="服務器網址">提交內容：<input type="text" name="course">  <input type="submit"> <!-- 傳服務器--><input type="reset"> <!-- 重置--><br><input type="file"> <!-- 傳文件--></from>

lable

搭配input使用

<!-- 使文字與按鈕關聯起來 --><label for="01"> 蘿莉01</label><input type="radio" name="gender" id="01"> <label for="02"> 蘿莉02</label><input type="radio" name="gender" id="02"> 

select

下拉欄

<select name="" id=""><option value="">請選擇侍寢蘿莉</option><option value="">蘿莉01</option><!-- selected="selected" 設置默認值 --><option value="">蘿莉02</option><option value="">蘿莉03</option></select>

textarea

多行輸入

<textarea name="" id="" cols = "30" rows="5"></textarea><!-- cols = "30" rows="5" 設置高度寬度-->

無語義標簽

沒有固定用途

通常用來對頁面布局進行設計

div

獨占一行的大盒子，可以嵌套div，span，head，body，img…

span

一個小盒子

特殊字符

空格：&nbsp

小于號：&lt

大于號：&gt

按位與：&amp