當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

（二）html

發布時間：2024/1/8 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了（二）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:指定圖片的位置路徑：相對路徑以*開頭的路徑./：代表當前目錄../：代表上一級目錄

列表標簽

有序列表olli
無序列表ulli

<!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中為了提高程序的可讀性，提供的標簽()并沒有任何的樣式

<header>
<footer>

表格標簽

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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html

上一篇： Appium键盘事件
下一篇： mybatis中的事务------我的笔