一份代码了解html常用label
生活随笔
收集整理的這篇文章主要介紹了
一份代码了解html常用label
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><!-- 設置網(wǎng)頁的字符集格式 --><meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- name：指定數(shù)據(jù)的名稱，指定元數(shù)據(jù)的名稱 --><!-- keywords:網(wǎng)站的關鍵字,可以指定多個關鍵字，中間用,隔開 content：指定數(shù)據(jù)的內容 --><meta name="keywords" content="前端，html，css"><!-- description:網(wǎng)站的描述，會顯示在搜索引擎的搜索結果中 --><meta name="description" content="這是科小勒學習的一個記錄">
<!-- 將網(wǎng)頁重定向到另一個網(wǎng)站，content表示經(jīng)過多長時間跳轉到另一個界面 --><!-- <meta http-equiv="refresh" content="3;url=https://www.baidu.com"> --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>科小勒</title></head>
<body><br> <!-- 換行 --><h1>html學習總結</h1><h2>一、字體、格式</h2><hr> <!--添加分割線--><!-- 跳轉到指定位置，給底部的標簽設置id，通過超鏈接指定跳轉到的位置 --><a href="#first_bottom">跳轉到底部</a><p> Hello everybody,My name is kele,Welcome to my web! Hope you have fun!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem facilis laborum exercitationem cum veniam totam inventore vel expedita iusto error assumenda non illo ipsum, alias perferendis quam nam at minima.</p><p>加粗：<strong>img</strong> </p> <!--b 加粗--><p>斜體：<i>audio</i></p> <!--i 斜體--><p>下劃線：<u>video</u></p> <!--u 下劃線--><p>刪除線：<del>刪除了...</del></p><p>原始值：original</p> <!-- p:段落 --><!-- 表示一個長引用，會換行 -->古人說：<blockquote>書山有路勤為徑，學海無涯苦作舟</blockquote><!-- 表示一個短引用,不會換行 -->杜甫說: <q>安得廣廈千萬間,大庇天下寒士俱歡顏</q><h2>二、圖片，音頻，視頻，超鏈接</h2><h3>圖片</h3><img src="lib/R.jpg" alt="閱讀證" title="閱讀證" width="500"><!-- 可以通過base64的方式加載，和網(wǎng)頁同時加載 --><h3>音頻</h3><audio src="lib/最偉大的作品.mp3" controls loop></audio><!-- MP3 和 ogg兩種格式 --><audio controls> 該瀏覽器不支持插件顯示<source src="lib/最偉大的作品.mp3"></audio><!-- controls:顯示音樂的控件 --><!-- autoplay：自動播放 --><!-- loop：循環(huán)播放 --><h3>視頻</h3><video src="lib/最偉大的作品.mp4" controls autoplay muted loop width="500"></video><!-- 上傳的視頻通過分享，選擇源代碼的方式放入自己的網(wǎng)頁中 --><iframe width="600" height="400" src="//player.bilibili.com/player.html?aid=57280599&bvid=BV1ux411R7Jv&cid=100014800&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe><!-- 谷歌瀏覽器可以使視頻自動播放，通過muted實現(xiàn)靜音自動播放 --><h3>超鏈接</h3><!-- ------超鏈接------ --><!-- a href：跳轉到連接， target屬性：_self：在當前窗口跳轉，_blank：在新窗口中跳轉（保留原網(wǎng)頁） --><a href="https://www.bilibili.com/video/BV1Kg411T7t9?p=20&spm_id_from=pageDriver&vd_source=905c37f35ab330c3a98ea289ff899742" target="_blank">go to bilibili --前端學習</a><!-- 通過#直接回到頂部 --><a href="#">回到頂部</a><!-- 一般作為占位符，點擊無任何操作 --><a href="javascript:;"></a><h3>引入其他網(wǎng)頁作為一個小窗口</h3><iframe width="1000" height="400" src="https://www.bilibili.com/?spm_id_from=333.337.0.0" frameborder="0"></iframe><h2>三、列表使用</h2><!-- ul標簽，用于無序列表的整體，只能包含li --><!-- li標簽：無序列表中的每一項 可以包含加粗--><h3>無序列表</h3><ul><li>vivo</li><li>oppo</li><li>華為</li><li><u>諾基亞</u></li></ul><h3>有序列表</h3><!-- ol標簽，用于有序列表的整體，只能包含li，默認會加序號 --><ol><li>第一名</li><li>第二名</li><li>第三名</li></ol><h3>自定義列表</h3><!-- dl：自定義列表的整體，dt：自定義的主題 dd:針對主題的每一項內容（dd默認顯示縮進） --><dl><dt>幫助中心</dt><dd>賬戶管理</dd><dd>購物指南</dd><dd>訂單操作</dd></dl><h2>四、表格</h2><!-- table：表格整體，tr：表格每行，td：表格的單元格 --><table border="1" width="500" height="200"> <!--border：表格線框的寬度 一般不在html中設置表格的寬度，高度 --><!-- 表格標題 --><caption><b>學生成績</b></caption><!-- thead：用于包裹表頭，tbody：用于包裹表的內容，tfoot：用于包裹表的總結等 注：可省略 --><thead><tr> <!-- 表頭 --><th>學號</th><th>姓名</th><th>性別</th><th>得分</th></tr></thead><tbody><tr><td>001</td><td>張三</td><td rowspan="2">男</td> <!-- rowspan：上下合并 --> <td>80</td></tr><tr><td>002</td><td>李四</td><td>90</td></tr><tr><td>003</td><td>王五</td><td>女</td><td>70</td></tr></tbody><tfoot><tr><td>平均分</td><td colspan="3">80</td> <!-- colspan : 左右合并 --> </tr></tfoot></table><h2>五、表單標簽</h2><!-- input標簽 type屬性不同，效果不同 --><!-- type類型1、text：文本框2、password：密碼框，用于輸入密碼3、radio：單選框4、checkbox：多選框5、file：文件選擇，用于之后上傳文件6、submit：提交按鈕，用于提交7、reset：重置按鈕，用于重置button：普通按鈕，之后配合js用于添加功能 --><h3>input 標簽</h3>文本框：<input type="text" placeholder="請輸入姓名/郵箱"> <br><br> <!--placeholder：框中顯示的內容，用來提示用戶-->密碼框：<input type="password" placeholder="密碼"> <br><br><!--1、同一個name是一個組，2、checked：默認選中-->單選框：<input type="radio" name="genser" checked>男 <input type="radio" name="genser">女 <br><br>多選框：<input type="checkbox" name="phone">vivo <input type="checkbox" name="phone">oppo <input type="checkbox" name="phone"> HuaWei <br><br><!--默認只能上傳一個文件，-multiple：可以上傳多個文件-->上傳框：<input type="file" multiple> <br><br>提交框：<input type="submit"> <br><br>重置框：<input type="reset"> <br><br><!-- value：給按鈕添加提示 -->普通框：<input type="button" value="按鈕提示內容"> <br><br><!-- form：標簽域地址，例如點擊重置按鈕可以重置該域的數(shù)據(jù)，action是如果有提交按鈕，將數(shù)據(jù)提交的地址 --><form action="">密碼重置 <br>密碼框：<input type="password" placeholder="密碼"> <input type="reset"> <br></form><h3>button標簽</h3><!-- button：submit：提交按鈕reset：重置按鈕button：普通按鈕 --><button type="submit"> button的提交按鈕</button><button type="reset"> button的重置按鈕</button><button type="button"> button的普通按鈕</button><h3>下拉菜單</h3><!-- sellect：下拉菜單整體，option：下拉菜單的每一項 --><select name="" id=""><option>北京</option><option selected>深圳</option> <!--sellected：默認選中--><option>上海</option><option>廣州</option></select><h3>文本域標簽</h3><!-- textarea：文本域cols：規(guī)定文本域內可見寬度rows：規(guī)定了文本域的可見行數(shù) --> 在界面可以修改文本框的大小，可以通過css禁用<br><textarea cols="10" rows="3"></textarea> <h3>label標簽</h3> <!-- 效果：通過點擊說明選中 --><!-- 方式1：1、label標簽包裹內容，2、在表單標簽中加id屬性3、在label標簽的for屬性設置對應id的值 -->性別：<input type="radio" name="general" id="1"> <label for="1">男</label><!-- 方式二：直接將label將表單標簽包裹，刪除for --><label><input type="radio" name="general"> 女</label><h2>語義化標簽</h2><!-- div：一行只顯示一個span：一行可以顯示多個 --><div>div標簽</div><div>div標簽</div><span>span標簽</span><span>span標簽</span><!-- 手機端常用的語義化標簽 --><!-- header：網(wǎng)頁頭部nav：網(wǎng)頁導航footer：網(wǎng)頁底部aside：網(wǎng)頁側邊欄section：網(wǎng)頁區(qū)塊article：網(wǎng)頁文章 --><header>手機端網(wǎng)頁頭部：header</header><nav>手機端網(wǎng)頁導航：nav</nav><footer>手機端網(wǎng)頁底部：footer</footer><aside>手機端網(wǎng)頁側邊欄：aside</aside><section>手機端網(wǎng)頁區(qū)塊：section</section><article>手機端網(wǎng)頁文章：article</article><h2>字符實體</h2><!-- 網(wǎng)頁不支持多個空格 -->字符 實體 <!--空格 --> <br>字符 實體<h3>標題3</h3><a href="#">回到頂部</a><h4 id="first_bottom">標題4</h4>
</body>
</html>
總結
以上是生活随笔為你收集整理的一份代码了解html常用label的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 4、一次改变风水的经历
- 下一篇： html+css:display:fle