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