生活随笔
收集整理的這篇文章主要介紹了
（二）html
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
- html : html文檔的根標簽
- head:頭標簽。用于指定html文檔的一些屬性。引入外部的資源
- title:標題標簽。
- body :體標簽
文本標簽
- 注釋: <!--注釋內容-->
- <h1> ~ <h6>:標題標簽* h1~h6:字體大小逐漸遞減
- <p>:段落標簽
- <br>:換行標簽
- <hr>:展示一條水平線屬性∶color :顏色width :寬度size :高度align ∶對齊方式center:居中left:左對齊right:右對齊
- <b>:字體加粗
- <i>:字體斜體
- <font>:字體標簽屬性：color:顏色size:大小face:字體
- <center>:文本居中
- 屬性定義：color:1.英文單詞：red,green,blue2.rgb(值1，值2，值3）：值的范圍：0~255 如 rgb(0,0,255)3.#值1值2值3：值的范圍：00~FF 如：#FF00FFwidth:1.數值：width='20'，數值的單位，默認是px（像素）2.數值%：占比相對于父元素的比例
- 表示空格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文本標簽
</title>
</head>
<body>白日依山盡，
<br>黃河入海流。
<br>快到圣誕了，圣誕快樂
<br><h1>快到圣誕了，圣誕快樂
</h1><h2>快到圣誕了，圣誕快樂
</h2><h3>快到圣誕了，圣誕快樂
</h3><h4>快到圣誕了，圣誕快樂
</h4><h5>快到圣誕了，圣誕快樂
</h5><h6>快到圣誕了，圣誕快樂
</h6><p>1 今天下了一場雪，雪很大 今天下了一場雪，雪很大 今天下了一場雪，雪很大 今天下了一場雪，雪很大
</p><p>2 今天下了一場雪，雪很大 今天下了一場雪，雪很大 今天下了一場雪，雪很大 今天下了一場雪，雪很大 今天下了一場雪，雪很大
</p><p>3 今天下了一場雪，雪很大 今天下了一場雪，雪很大 今天下了一場雪，雪很大 今天下了一場雪，雪很大 今天下了一場雪，雪很大
</p><hr color="blue" width="200" size="2" align="left"/><hr>白日依山盡
<br><b>白日依山盡
</b>白日依山盡
<br><i>白日依山盡
</i><hr><font color="red" size="5" face="楷體">白日依山盡
</font><br><font color="#3626F1" size="5" face="楷體">白日依山盡
</font><br><hr color="blue" width="50%" size="2" align="left"/> <center><font color="red" size="5" face="楷體">白日依山盡
</font></center><br></body>
</html>
案例：嫦娥5號
效果圖：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>嫦娥5號
</title>
</head>
<body>
<h1>嫦娥五號
</h1>
<hr color="#ffd700"><p><font color="#FF0000">嫦娥五號（Chang'e 5）
</font>由中國空間技術研究院研制，是
<b><i>中國探月工程
</i></b>三期發射的月球探測器，也將是中國首個實施無人月面取樣返回的月球探測器，為中國探月工程的收官之戰。
</p><p>2020年11月24日，中國在中國文昌航天發射場，用長征五號遙五運載火箭成功發射探月工程嫦娥五號探測器，順利將探測器送入預定軌道。11月24日22時06分，嫦娥五號順利完成第一次軌道修正。11月25日，嫦娥五號完成第二次軌道修正。11月28日，嫦娥五號順利進入環月軌道飛行。11月29日，嫦娥五號從橢圓環月軌道變為近圓形環月軌道。11月30日，嫦娥五號合體順利分離。12月1日，嫦娥五號成功在月球正面預選著陸區著陸。12月2日4時，嫦娥五號著陸器和上升器組合體完成了月球鉆取采樣及封裝。12月2日22時，嫦娥五號完成月面自動采樣封裝。12月3日，嫦娥五號上升器將攜帶樣品的上升器送入到預定環月軌道。12月6日5時，嫦娥五號上升器成功與軌道器和返回器組合體交會對接，并于6時將樣12分品容器安全轉移至返回器中。12月6日12時35分，嫦娥五號軌道器和返回器組合體與上升器成功分離，進入環月等待階段，準備擇機返回地球。12月8日，嫦娥五號上升器受控離軌，7時30分左右降落在預定落點。12月12日，嫦娥五號軌道器和返回器組合體實施第一次月地轉移入射。
</p>
<p>嫦娥五號任務是“探月工程”的第六次任務，也是中國航天迄今為止最復雜、難度最大的任務之一，將實現中國首次月球無人采樣返回，助力深化月球成因和演化歷史等科學研究。
</p>
<hr color="#ffd700">
<font color="gray" size="2"><center>嫦娥五號
發射地點：中國文昌航天發射場
<br>登陸地點： 呂姆克山脈
</center>
</font></body>
</html>
圖片標簽
- <img>:展示圖片屬性：src:指定圖片的位置路徑：相對路徑以*開頭的路徑./：代表當前目錄../：代表上一級目錄
列表標簽
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表標簽
</title>
</head>
<body>早上起床干的事情
<ol type="I" start="3"><li>鬧鈴響起
</li><li>睜眼
</li><li>看時間
</li><li>繼續睡覺
</li></ol><ul type="circle"><li>鬧鈴響起
</li><li>睜眼
</li><li>看時間
</li><li>繼續睡覺
</li></ul>
</body>
</html>
鏈接標簽
- a：定義一個超鏈接屬性：href：指定訪問資源的URL（統一資源定位符）target：指定打開資源的方式_self：默認值，在當前頁面打開_blank：在空白頁面打開
塊標簽
- div：每一個div棧滿一整行。塊級標簽
- span：文本信息在一行展示，行內標簽 內聯標簽
語義化標簽：
html5中為了提高程序的可讀性，提供的標簽()并沒有任何的樣式
表格標簽
- table：定義表格width：寬度border：邊框cellpadding：定義內容和單元格之間的距離cellspacing：定義單元格之間的距離。如果指定為0，則單元格的線會合為一條bgcolor：背景色align：對齊方式
- tr：定義行bgcolor：背景色align：對齊方式
- td：定義單元格colspan：合并列rowspan：合并行
- th：定義表頭單元格
- <caption>：表格標題
- <thead>：表示表格的頭部分
- <tbody>：表示表格的體部分
- <tfoot>：表示表格的腳部分
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格標簽
</title>
</head>
<body><table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#f0ffff" align="center"><tr>
<th>編號
</th><th>姓名
</th><th>成績
</th></tr><tr><td>1
</td><td>張三
</td><td>92
</td></tr><tr><td>2
</td><td>王五
</td><td>88
</td></tr></table><hr><table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#f0ffff" align="center"><thead><caption>學生信息表
</caption><tr><th>編號
</th><th>姓名
</th><th>成績
</th></tr></thead><tbody><tr bgcolor="#7fffd4" align="center"><td>1
</td><td>張三
</td><td>92
</td></tr><tr><td>2
</td><td>王五
</td><td>88
</td></tr></tbody><tr><td>3
</td><td>趙易
</td><td>90
</td></tr><tfoot></tfoot></table><hr><table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#f0ffff" align="center"><tr><th rowspan="2">編號
</th><th>姓名
</th><th>成績
</th></tr><tr><td>張三
</td><td>92
</td></tr><tr><td>2
</td><td colspan="2">王五
</td></tr></table></body>
</html>
表單標簽
概念：用于采集用戶輸入的數據的，用于和服務器進行交互。
使用的標簽：form
- form：用于定義表單的。可以定義一個范圍，范圍代表采集用戶數據的范圍屬性：action:指定提交數據庫的URLmethod:指定提交的方式get:1.請求參數會在地址欄中顯示，會封裝在請求行中。2.請求參數的長度是有限制的。3.不太安全post:1.請求參數不會在地址欄中顯示，會封裝在請求體中。2.請求參數的長度沒有限制。3.較為安全==注==表單項中的數據要想被提交：必須指定其name屬性
- 表單項標簽：input：可以通過type屬性值，改變元素展示的樣式placeholder：指定輸入框的提示信息，當輸入框的內容發生變化，會自動清空提示信息type屬性：text：文本輸入框，默認值password:密碼輸入框radio：單選框注意：1.要想讓多個單選框實現單選的效果，則多個單選框的name屬性值必須一樣。2.一般會給每一個單選框提供value屬性，指定其被選中后提交的值。3.checked屬性，可以指定默認值checkbox：復選框注意：1.一般會給每一個復選框提供value屬性，指定其被選中后提交的值。2.checked屬性，可以指定默認值file：文件選擇框hidden：隱藏域，用于提交一些信息按鈕：submit：提交按鈕，可以提交表單botton：普通按鈕image：圖片提交按鈕src屬性指定圖片的路徑label：指定輸入項的文字描述信息注意：1.label的for屬性一般會和input的id屬性值對應。如果對應了，則點擊label區域，會讓inout輸入框獲取焦點。select：下拉列表子元素：option，指定列表項textarea：文本域cols：指定列數，每一行有多少個字符rows：默認多少行
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表單項標簽
</title>
</head>
<body>
<form action="#" method="get"><label for="username1">用戶名
</label>：
<input name="username" placeholder="請輸入用戶名" id="username1"><br>密碼：
<input type="password" name="password" placeholder="請輸入密碼"><br>性別：
<input type="radio" name="gender" value="male" checked="checked">男
<input type="radio" name="gender" value="female">女
<br>愛好：
<input type="checkbox" name="hobby" value="game">游戲
<input type="checkbox" name="hobby" value="java" checked="checked">java
<br>圖片：
<input type="file" name="file"><br>隱藏域：
<input type="hidden" name="id" value="aaa"><br>取色器：
<input type="color" name="color"><br>生日：
<input type="date" name="birthday"><br>生日：
<input type="datetime-local" name="birthday"><br>郵箱：
<input type="email" name="email"> <br>年齡：
<input type="number" name="age"><br>省份：
<select name="province" ><option value="">---請選擇---
</option><option value="1">北京
</option><option value="2">上海
</option><option value="3" selected>陜西
</option></select><br>自我描述：
<textarea cols="20" rows="5" name="dsc"></textarea><br><input type="submit" value="提交"><input type="button" value="普通按鈕"><br><input type="image" src="picture/2.jpg">
</form>
</body>
</html>
案例：注冊頁面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注冊頁面
</title>
</head>
<body><form action="#" method="get"><table border="1" align="center" width="500"><tr><td><label for="username">用戶名
</label></td><td><input type="text" name="username" id="username" placeholder="請輸入賬號"></td></tr><tr><td><label for="password">密碼
</label></td><td><input type="password" name="password" id="password" placeholder="請輸入密碼"></td></tr><tr><td><label for="email">Email
</label></td><td><input type="text" name="email" id="email" placeholder="請輸入Email"></td></tr><tr><td><label for="name">姓名
</label></td><td><input type="text" name="name" id="name" placeholder="請輸入真實姓名"></td></tr><tr><td><label for="tel">手機號
</label></td><td><input type="text" name="tel" id="tel" placeholder="請輸入您的手機號"></td></tr><tr><td>性別
</td><td><input type="radio" name="gender" id="gender">男
<input type="radio" name="name" value="female">女
</td></tr><tr><td><label for="birthday">出生日期
</label></td><td><input type="date" name="birthday" id="birthday"></td></tr><tr><td><label for="checkcode">驗證碼
</label></td><td><input type="text" name="checkcode" id="checkcode"><img src="picture/5.jpg"></td></tr><tr><td colspan="2" align="center"><input type="submit" value="注冊"></td></tr></table></form></body>
</html>
總結
以上是生活随笔為你收集整理的（二）html的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
