HTML简单语句
目錄
HTML
基本格式
基本結構
常用標簽
基本標簽
表單標簽
超鏈接標簽:a
布局標簽
標題標簽
段落標簽
列表
表格
容器標簽
fieldset
框架標簽
HTML
中文名:超文本標記語句
全稱:Hyper Text Markup Language
超文本:以文本展示非文本的內容
標記:有特殊含義的標簽
基本格式
方式1:<標簽名 屬性區> 內容區 </標簽區>
方式2:<標簽名 屬性區/>
方式1可以在其中嵌套標簽,方式2不可以嵌套別的標簽 多個屬性直接使用空格隔開
注釋語法：
<!--時間：2022-11-07描述：-->基本結構
<!DOCTYPE html> 作用:表示當前文檔類型為html文件<html> html:網頁根標簽包含網頁中的所有內容<head> <meta charset="UTF-8"><title>網頁標題</title></head><body>這塊是給用戶看的 </body> </html>常用標簽
基本標簽
文本展示標簽:font
圖片展示標簽:img
音頻:audio
視頻:video
換行:br
水平分割線:hr
<!--img標簽:支持gif圖src:展示的圖片地址可以是網址也可以是本地圖片地址alt:當圖片加載失敗時顯示的內容--><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" /><br /><img src="img/QQ圖片20220325160444.jpg" width="300px" height="200px"/><br /><img src="img/QQ圖片20220325160444.jpg" width="300px" height="200px" alt="影狐貍" /><!-- br:換行 --><br /><hr /><!--src:資源地址controls:控制器loop:循環播放,有兼容問題autoplay:自動播放,有兼容問題--><audio src="media/horse.mp3" controls autoplay loop></audio><video src="media/movie.ogv" controls autoplay loop></video>表單標簽
input：輸入
? ? ? ? type:輸入類型
????????????????text:文本輸入,默認的類型
????????????????password:密碼輸入
????????????????radio:單選按鈕,注意,name屬性值相同則為一組,要求需要value值,
????????????????checkbox:多選按鈕
????????????????button:按鈕
????????????????submit:提交按鈕
????????????????reset:重置按鈕
????????????????file:文件上傳?
????????????????placeholder:提示字,屬性值自定義
????????????????name:標簽名稱,屬性值自定義
????????????????value:值,在類型為按鈕時,表示按鈕上顯示的內容
例如：
<font>簡單注冊</font><br/>賬號：<input type="text" placeholder="賬號"><br/>密碼：<input type="password" placeholder="密碼"><br/>性別： <input type="radio" value="男" name="sex" ><font>男</font><input type="radio" value="女" name="sex" ><font>女</font><br/><br/><font>愛好</font><br/><input type="checkbox" value="唱" name="like"><font>唱</font><input type="checkbox" value="跳" name="like"><font>跳</font><input type="checkbox" value="RAP" name="like"><font>RAP</font><br/><br/><br/><font>你的國籍:</font><br/><select><option>選擇你的國籍</option><option selected="selected">中國</option><!--描述：selected表示默認--><option>m78</option></select><br/><br/><font>如何評價</font><textarea rows="10" cols="10"></textarea><br/><br/><input type="button" value="注冊" /><input type="submit" value="上傳" /><input type="reset" /><br /><input type="file" /><br /><input type="range" /><br /><input type="date" /><br /><input type="hidden" value="啦啦"/> <!-- 這個hidd--> 是隱藏域，用戶看不見的<br />?select:選擇器
?????????????????????????multiple:設置可以多選（在win系統中需要按住ctrl）
???????????????????????????????? size:展示的子項數量
????????????????????????子項:option
????????????????????????????????屬性: selected:默認選中
<font>你的國籍:</font><br/><select><option>選擇你的國籍</option><option selected="selected">中國</option><!--描述：selected表示默認--><option>m78</option></select>textarea：文本域
????????????????rows:行
???????????????? cols:列? ? ? ? 設置一個文本域，可用行列控制大小
<font>如何評價</font><textarea rows="10" cols="10"></textarea>form：
? ? ? ? ? ? 1. enctype：上傳類型
????????????????????????application/x-www-form-urlencoded不上傳文件就使用該類型,該類型為默認執行
????????????????????????multipart/form-data 上傳文件使用該類型
? ? ? ? ? ? 2.?method:請求方式
????????????????????????get:顯式請求
????????????????????????????????如:http://127.0.0.1:8080/?username=1234&password=123456 注意:不能超過100個字符 經驗:get用于下載
???????????????????????? post:隱式請求
????????????????????????????????注意:上傳數據量無限制 經驗:post用于上傳或密碼相關
? ? ? ? ? ? ?3.action:接收請求的地址
<body><form action="http://127.0.0.1:8000" method="get"enctype="multipart/form-data">賬號<input type="text" placeholder="輸入賬號" name="username" /><br/>密碼<input type="password" placeholder="請輸入賬號" name="password"/><br/><input type="submit" value="登錄"/></form> <br/><form action="http://127.0.0.1:8000" method="post"enctype="application/x-www-form-urlencoded">賬號<input type="text" placeholder="輸入賬號" name="username" /><br/>密碼<input type="password" placeholder="請輸入賬號" name="password"/><br/><input type="submit" value="登錄"/></form>顯式提交
??隱式提交
超鏈接標簽:a
鏈接網頁：語法
?<a href="鏈接">顯示的字</a>
<a href="https://www.baidu.com">百度一下</a> <a href="demo3.html">去demo3</a>點擊即可跳轉到該鏈接
錨點：
<font id="top">最頂</font> ...... <a href="#top">語句</a>如圖點擊 語句 就會在同一個頁面跳轉到 最頂 的位置
例2
<a href="#top01">01</a> ..... <font id="top01">第一個</font>點擊01就會跳到第一個
布局標簽
標題標簽
h1,h2,h3,h4,h5,h6
<h1 align="middle">A</h1><h2>A</h1><h3 align="right">A</h1><h6 align="left">A</h1>效果
段落標簽
<p> 先帝創業未半而中道崩殂，今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣不懈于內，忠志之士忘身于外者，蓋追先帝之殊遇，欲報之于陛下也。誠宜開張圣聽，以光先帝遺德，恢弘志士之氣，不宜妄自菲薄，引喻失義，以塞忠諫之路也。</p><p>宮中府中，俱為一體，陟罰臧否，不宜異同。若有作奸犯科及為忠善者，宜付有司論其刑賞，以昭陛下平明之理，不宜偏私，使內外異法也。</p>?
一個   代表一個空格
列表
ul 無序列表
ol有序列表
<ul><li>第一個選項</li><li>第二個選項</li><li>第三個選項</li><li>第四個選項</li></ul><ol><li>第一個選項</li><li>第二個選項</li><li>第三個選項</li><li>第四個選項</li></ol>效果：
表格
????????????????align="center"居中
table:表格 tr:行 td:單元格th:特殊單元格
<TH>標簽就是Table Heading，意思是表格標題。<TH>標簽在使用時，跟<TD>標簽沒有什么區別，如果非要說有點區別的話，那就是<TH>一般只用在第一個<TR>下。在瀏覽器中顯示時，<TH>標簽被顯示為加粗的字體，其它的跟普通的<TD>也沒有區別。
例：
<table border="1" cellspacing="0" align="center"><tr><td align="center" colspan="4">第一行</td></tr><tr><td>第二行第一個</td><td>第二行第二個</td><td colspan="2">第二行第三個</td></tr><tr><td>第三行第一個</td><td>第三行第二個</td><td>第三行第三個</td><td>第三行第四個</td></tr><tr><td>第四行第一個</td><td>第四行第二個</td><td>第四行第三個</td><td>第四行第四個</td></tr><tr><td>第五行第一個</td><td>第五行第二個</td><td colspan="2" rowspan="2">第五行第三個</td></tr><!--作者：offline時間：2022-11-07描述：rowspan合并列--><tr><td>第六行第一個</td><td>第六行第二個</td></tr></table>?border="1" 黑框框大小
cellspacing="0" 框框之間的距離
容器標簽
<div> <div>
將某個東西包裹起來
例：
<div align="center"><img src="img/QQ圖片20220325160444.jpg"width="30%" height="30%" /></div>?將圖片居中
fieldset
例：
<fieldset style="width: 300px;"> <legend>管理員登錄</legend> <input type="text" placeholder="請輸入賬號" /> <br /> <input type="password" placeholder="請輸入密碼" /> <br /> <input type="button" value="登錄" /> </fieldset>表現出這種格式
框架標簽
frameset
?frame
? ? ? ? ? ? ? ? 上面兩個都過時了，。
iframe
<a hraf="xxx" target="a_frame">鏈接</a> <iframe name="a_frame" > </iframe>也可以 <iframe src = "xxx" > </iframe>iframe標簽可以實現html主頁面嵌套html子頁面，子頁面可以是一個功能頁面
其他細節
1.所有標簽都有id,class屬性，一個網頁中id屬性值不能重復 一個網頁中class屬性值允許重復
2.?所有標簽都有onclick(點擊)事件，意味著所有標簽都可以當做按鈕
總結
- 上一篇： [源码和文档分享]基于JavaFx的多线
- 下一篇： 将查询到的数据库数据显示到html页面