前端 HTML（1）
生活随笔
收集整理的這篇文章主要介紹了
前端 HTML（1）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!doctype html>
<!--@@@ 2021/1/23 @@@-->
<html lang="en">
<head><meta charset="UTF-8"><title>html 第一天</title>
</head>
<body><!-- 1. html 文件包括頭部分和身體部分，頭部分的內(nèi)容不會顯示在網(wǎng)頁中，身體部分的內(nèi)容會顯示在網(wǎng)頁中 --><!-- 2. 標(biāo)簽語法：尖括號包圍關(guān)鍵字形成；分類：單標(biāo)簽和雙標(biāo)簽--><p>雙標(biāo)簽</p><!-- 類似 <開始標(biāo)簽></結(jié)束標(biāo)簽> 的是雙標(biāo)簽 --><hr/><!-- 單標(biāo)簽(自閉合標(biāo)簽)--><!-- 3. 基本標(biāo)簽-->
<!-- 標(biāo)題標(biāo)簽(1,2,3,4級)--><h1>我是1級標(biāo)題</h1><h2>我是2級標(biāo)題</h2><h3>我是3級標(biāo)題</h3><h4>我是4級標(biāo)題</h4>
<!-- 一般標(biāo)簽(其 align 屬性可以決定其對齊方式)--><p align="right">我是向右對齊的一般標(biāo)簽</p><p align="left">我是向左對齊的一般標(biāo)簽</p><!-- 特別注意...--><!-- 標(biāo)簽pre中保留空格和換行 --><!-- 一個標(biāo)簽p表示一個段落，在此標(biāo)簽里加上換行br，仍表示一個段落；空格需要用 代替 --><p> 我是豬豬俠.<br/> 我是駒駒波.</p><!-- 標(biāo)簽pre中保留空格和換行 --><pre align="left"> 我是豬
我也是豬</pre><!-- 4. 特殊標(biāo)簽-->
<!-- 加粗(b)/斜體(i)/下標(biāo)(sub)/上標(biāo)(sup)/下劃線(ins)/刪除線(del)/水平線(hr) --><p>i <b>love</b> you!</p><p>i <i>love</i> you!</p><p>i <sub>love</sub> you!</p><p>i <sup>love</sup> you!</p><p>i <ins>love</ins> you!</p><p>i <del>love</del> you!</p><hr/><!-- 5. 特殊符號 -->
<!-- 已注冊(®)/版權(quán)(©)/空格( )/小于號(<)/大于號(>) --><p>i love you!®</p><p>i love you!©</p><p>i love you! </p><p>i love you!<p></p><p>i love you!></p><!-- 6.列表標(biāo)簽 --><!-- 6.1. 無序列表標(biāo)簽 -->
<!-- ul/li；ul 代表無序列表，li 代表列表中的項(xiàng)目-->
<!-- 引領(lǐng)項(xiàng)目的元素默認(rèn)為小黑點(diǎn)(disc)，可以通過 type 參數(shù)修改為正方形(square)和空心圓(circle) --><ul type="circle"><li>lv na is a girl!</li><li>lv pei tong is a girl, too!</li></ul><!-- 6.2. 有序列表標(biāo)簽 -->
<!-- ol/li；ol 代表有序列表，li 代表列表中的項(xiàng)目 -->
<!-- 引領(lǐng)列表的序號默認(rèn)為數(shù)字(1)，可以通過 type 參數(shù)修改為小寫字母(a)、大寫字母(A)、小寫羅馬字母(i)和大寫羅馬字母(I) --><ol type="I"><li>蘋果是圓的.</li><li>香蕉是彎的.</li></ol><!-- 6.3. 自定義列表標(biāo)簽 -->
<!-- dl/dt/dd；dl 代表列表，dt 代表列表中的項(xiàng)目；dd 代表項(xiàng)目描述項(xiàng)--><dl><dt>蘋果</dt><dd>蘋果是紅的.</dd><dd>蘋果可以吃.</dd><dt>鳥</dt><dd>鳥很漂亮.</dd><dd>鳥會飛.</dd></dl><!-- 7. 圖片標(biāo)簽 -->
<!-- 參數(shù) src 代表圖像的路徑；參數(shù) width 和 height 分別代表圖像的寬和高(數(shù)值和百分比表示)；
當(dāng)圖片路徑錯誤或者圖片誤刪，參數(shù) alt 可以添加描述文字 --><img src="images/first.png" alt="圖片沒有找到." width="100px" height="100px"><!-- 8. 超鏈接標(biāo)簽 -->
<!-- 參數(shù) href 表示鏈接地址，參數(shù) title 表示鏈接提示文字，參數(shù) target 表示跳轉(zhuǎn)的窗口(默認(rèn)是_self原窗口跳轉(zhuǎn)，_blank新建窗口跳轉(zhuǎn)) --><a href="http://www.4399.com/" target="_blank" title="這個超鏈接是游戲的.">4399</a><!-- 9. div與span標(biāo)簽 -->
<!-- div 代表塊元素，表示一塊內(nèi)容；唯一的格式就是換行(借助br標(biāo)簽)；常結(jié)合css用于頁面布局 -->
<!-- span 代表行內(nèi)元素，內(nèi)容有多寬就占多寬的空間距離；常用于修飾段落中的布局樣式 --><div>我喜歡你.我喜歡你.我喜歡你.我喜歡你.我喜歡你.我喜歡你.我喜歡你.我喜歡你.我喜歡你.我喜歡你.我喜歡你.我喜歡你.我喜歡你.我喜歡你.我喜歡你.我喜歡你.我喜歡你.我喜歡你.我喜歡你.我喜歡你.我喜歡你.我喜歡你.我喜歡你.</div>
<!-- 利用 span 標(biāo)簽，通過其 style 方法修飾段落標(biāo)簽p的內(nèi)容 --><p>鮮紅色的<span style="color:red">草莓.</span></p><!-- 10. 表格標(biāo)簽 -->
<!-- table/tr/td；table 表示表格，tr 代表行，td 代表列 -->
<!-- 參數(shù) border 代表表格的邊框(單位為像素)-->
<!-- 表格一般都有一個明顯的表頭；如果我們想讓第一行元素標(biāo)黑顯示，我們需要把第一行全部的列標(biāo)簽 td 換成 th 標(biāo)簽 -->
<!-- 表格參數(shù)：width，height；表格列參數(shù)：align(內(nèi)容居中：center；內(nèi)容居左(默認(rèn))：left；內(nèi)容居右：right) -->
<!-- 表格列參數(shù)：valign(內(nèi)容居頂：top；內(nèi)容居中(默認(rèn))：middle；內(nèi)容居底：bottom) --><table border="1px" width="300px" height="200px"><tr><th>1</th><th>2</th><th>3</th></tr><tr><td align="center" valign="top">4</td><td align="center" valign="bottom">5</td><td align="center" valign="middle">6</td></tr></table><br/><br/><br/><br/><br/>
<!-- rowspan/colspan 分別代表垂直合并和水平合并 --><table border="1px solid black" width="300px" height="300px"><tr><th rowspan="2">姓名</th><th colspan="2">愛好</th></tr><tr><td align="center">蘿卜</td><td align="center">青菜</td></tr><tr><td align="center">Susu</td><td align="center">是</td><td></td></tr><tr><td align="center">Nana</td><td></td><td align="center">是</td></tr></table><br><br><br><!-- 11. 表單標(biāo)簽 -->
<!-- form 代表表單標(biāo)簽，label 代表表單文字標(biāo)注標(biāo)簽 input -->
<!-- 表單單標(biāo)簽的 type 屬性：text(明文輸入框)， password(暗文輸入框)，radio(單選框)，checkbox(多選框) -->
<!-- textarea(多行文本輸入框) -->
<!-- select(下拉框) option(選項(xiàng)) -->
<!-- 表單的提交：input 標(biāo)簽的 submit 屬性可以用來提交；其 value 值可以修改提交按鈕的標(biāo)注 --><form action=""><lable>用戶名：</lable><input type="text"><br><!-- 三個空格代表一個漢字的長度 --><label>密 碼：</label><input type="password"><br><!-- 單選框必須選擇 --><!-- 單選框的屬性 name 表示幾個選擇框?yàn)橥唤M單選框，只能選擇其一 --><!-- label 的 for 屬性與單選框的 id 屬性關(guān)聯(lián)可以實(shí)現(xiàn)點(diǎn)擊文字勾上單選框 --><label>喜 歡：</label><input type="radio" name="love" id="apple"><label for="apple">蘋果</label><input type="radio" name="love" id="orange"><label for="orange">橘子</label><br><!-- 多選框的屬性 name 表示幾個選擇框?yàn)橥唤M多選框 --><!-- label 的 for 屬性與多選框的 id 屬性關(guān)聯(lián)可以實(shí)現(xiàn)點(diǎn)擊文字勾上多選框 --><label>喜 歡：</label><input type="checkbox" name="love" id="watermelon"><label for="watermelon">西瓜</label><input type="checkbox" name="love" id="pie"><label for="pie">派</label><br><!-- rows 代表初始高；cols 代表初始寬 --><textarea cols="80px" rows="20px"></textarea><br><select><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option></select><br><input type="submit" value="娜娜催你快提交."></form>
<!-- 需要提交表單時，要用到 name 屬性-->
<!-- 表單的 action 定義表單數(shù)據(jù)提交地址，默認(rèn)為當(dāng)前頁面 -->
<!-- 表單的 method 定義表單數(shù)據(jù)提交方式(get/post)，post 更加安全，采用 http 協(xié)議加密運(yùn)輸 -->
<!-- get 提交會把數(shù)據(jù)返回到指定頁面的 url 上 -->
<!-- post 提交不會把數(shù)據(jù)返回到指定頁面的 url 上 --><form action="" method="get"><lable>用戶名：</lable><input type="text" name="username"><br><br><label>密 碼：</label><input type="password" name="password"><input type="submit" value="憨憨.快提交."></form>
</body>
<!-- 多行文本輸入框 -->
</html>
總結(jié)
以上是生活随笔為你收集整理的前端 HTML（1）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HDU 4833 Best Financ
- 下一篇： 虚幻浏览器插件 加载透明网页