HTML基本標簽及結構詳解
發(fā)布時間:2020-11-23 17:05:21 作者:bat丶浪客
我要評論

這篇文章主要介紹了HTML基本標簽及結構詳解,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
1.HTML概述
1.HTML:超文本標記語言。是一種標識性語言,非編程語言,不能使用邏輯運算。通過標簽將網(wǎng)絡上的文檔格式進行統(tǒng)一,使分散的網(wǎng)絡資源鏈接為一個邏輯整體。
超文本是一種組織信息的方式,通過超級鏈接將多種媒介鏈接起來
標記:標簽。用<>包裹的具有一定含義的內容,比如:…
靜態(tài)網(wǎng)頁:不變
動態(tài)網(wǎng)頁:跟后臺同時改變
2.HTML標簽結構
1.文檔結構:
<!doctype html><!--!表示聲明的意思。這一行代碼意思:下面的文檔標簽將以html5進行解析--> <html> <!-頭部.用來完成一個網(wǎng)頁的相關設置-> <head> <meta charset="utf-8"><!--漢字編碼--><!--meta:元,用來完成對應設置--> <meta name="keywords" content=""><!--設置一個網(wǎng)站搜索的關鍵字--> <meta name="description" content=""><!--網(wǎng)站的描述內容--> <title>我的第一個html網(wǎng)頁</title><!--標題--> <!--設置網(wǎng)站的小圖標--> <link rel="shortcut icon" href="" type="image/png"> <style> /*書寫樣式的地方*/ </style> <link rel="stylesheet" href="style.css"><!--用來引入外部樣式文件--> </head> <!--2.主體部分--> <body> <p>這是一個段落</p> </body> <script> //放腳本代碼的地方 </script> </html>
2.常用標簽:
<!--做移動端開發(fā)設置--> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <!--1.div標簽,用于布局,沒有具體含義,分層。層--> <div></div> <!--2.hx:標題,從1級到6級,1級最大,6級最小,自動加粗,有默認字號--> <h1></h1>...<h6></h6> <!--3.p標簽:表示段落。相當與一個回車.--> <p></p> <!--4.br:生成換行符--> <br> <!--6.a標簽,實現(xiàn)鏈接跳轉,target:_blank新窗口/_self當前窗口_parent/top--> <a href="url地址/鏈接" title="B站">文本</a> <a href="url地址" target="_blank">文本</a> <a href="url地址" target="_self">文本</a> <a href="'#href" target="#href">文本</a> 錨點鏈接 href='#href' 目標位置的屬性要設置為與其一直 id='#href' <!--7.img用于加載外部圖片圖像,src用來設計加載的圖片或圖像的路徑,alt當圖片圖像加載不成功時,顯示alt中的內容,否則不會顯示--> src路徑 alt替換文本 title 圖片提示文本 width:圖像寬度 height:圖像高度 border邊框 <img src="" alt="顯示不出的名字"> <!--8.span作用與div一樣,都是用于布局,div會單獨占一行,span不會,span便簽用于行內布局--> <span></span> <!--9.ul和ol,前者無序后者有序,都用的li標簽。--> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> <ol> <li>li1</li> <li>li2</li> <li>li3</li> </ol> //自定義列表 重點每個網(wǎng)站的最下面基本都是通過自定義 <dl> dl中只能有dt和dd 一個dt對應多個dd 為兄弟關系 <dt></dt>名詞1 <dd></dd>名詞1解釋1 <dd></dd>名詞1解釋2 </dl>自定義列表
4.標簽屬性:
<!--標簽屬性: 1.通常由屬性名="屬性值"組成 2.起附加信息的作用。 3.不是所有標簽都有屬性,比如br標簽--> 下面的title class就是屬性名,而后面的就是屬性值 <p title="段落" class="content" id="content">這是一個測試段落</p>
5.部分其他標簽:
<!--文本格式化標簽:就是通過標簽來美化文本外觀-> <!--1.b和strong:都有加粗作用,且都是行級標簽(不會自動換行), 但strong還有強調作用。注:強調主要是用于SEO時,便于提前關鍵字--> <b>加粗</b> <strong>加粗且強調</strong> <!--2 i和em:使文字傾斜,em具有強調作用。且都是行級標簽(不會自動換行), 如果只是簡單傾斜效果,用i標簽就可以了,比如添加圖標等--> <i>傾斜</i> <em>傾斜且強調</em> <!--3.pre預格式化文本,保留換行和空格及寬度。 文字的字號會小一號,塊級標簽(在瀏覽器中會獨占一行)--> <pre> pre預格式化 文本,保留換行和空 格及寬度 </pre> <!--samll和big,將文字縮小或放大一號(行級標簽,不會獨占一行,且不識別寬高)--> <!--瀏覽器支持的最小字號是12px,顯示比12px還小的文字的話,需要進行處理--> <p>我是正常的</p> <small>我是小一號的文字</small> <!--sub和sup:設置文本為下標和上標,用來調整文本正常顯示的基線,且文字會自動小一號--> <p>正常顯示:X1+X2=Y</p> <p>下標:X<sub>1</sub>+X<sub>2</sub>=Y</p> <p>下標:X<sup>1</sup>+X<sup>2</sup>=Y</p> 刪除線 <del></del> <s></s> 下劃線 <ins></ins> <u></u> 轉義字符: 空格 < 小于號 >大于號
6.表格標簽以及表單標簽
表格標簽結構: 作用:顯示 展示數(shù)據(jù) <table> <!--表格標簽--> <th></th> 表頭單元格 <tr> <td></td>單元格 </tr>行 </table> 屬性 align left center right 對齊 border邊框 cellpadding 文字和單元格的距離 cellspacing 單元之間的距離 width 表格結構標簽 <thead></thead> 表頭區(qū)域 <tbody></tbody> 主體區(qū)域 合并單元格:跨行合并:rowspan行和行 跨列合并:colspan列和列 合并代碼:跨行:在最上側單元格為目標單元格,寫合并代碼 跨列:在最左側單元格為目標單元格,寫合并代碼 跨行或跨列步驟: 1.確定跨行還是跨列 2.找到目標單元格 3.刪除多余單元格
7.表單標簽:
表單標簽:主要用途:收集用戶信息 表單由表單域 表單控件(元素) 提示信息組成 表單域 實現(xiàn)用戶信息傳遞<form action="" method=""></form> action跟著的為地址 method提交方式 name名稱 input輸入表單元素: <input type="text"> type屬性值:text文本 password密碼 button ridio單選框() checkbox(多選按鈕)..... submit(提交按鈕,將表單值提交給服務器) reset 清除表單的所有數(shù)據(jù) button 普通按鈕 結合js使用 file 上傳文件 name屬性:表單元素的名字,單選按鈕必須有相同的名字才可以多選1 單選按鈕和復選框都要有相同的name value屬性 定義值 每個元素都應該有的,主要給后臺人員來使用的 checked 針對單選和多選 當頁面打開的時候默認選擇 maxlength 最大長度 select下拉表單元素 使用場景:有多個選項,想節(jié)約空間<select name="" id=""> <option value=""></option> </select> select至少包含一個option 在option中的屬性selected = selected進行默認選擇 <label for=""></label>使用場景 for 和表單元素的id屬性相同就對應上 textarea文本域表單元素 輸入文本較多時 <textarea><textarea>一般規(guī)定長度通過css
到此這篇關于HTML基本標簽及結構詳解的文章就介紹到這了,更多相關HTML基本標簽及結構內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持腳本之家!
相關文章
- HTML是由標志和屬性構成的,它們一起被用來告訴瀏覽器應該如何顯示一頁文檔。標志用來引用一段文字或是一幅圖片等文檔部件,屬性是標志的選項,在標志中修飾,如顏色,對齊2009-04-02
- HTML是由標志和屬性構成的,它們一起被用來告訴瀏覽器應該如何顯示一頁文檔。標志用來引用一段文字或是一幅圖片等文檔部件,屬性是標志的選項,在標志中修飾,如顏色,對齊2008-10-17
- 這篇文章主要為大家詳細介紹了html5組織文檔結構的相關資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-11
- 這篇文章主要介紹了html5頁面結構,對于HTML5來講,在網(wǎng)頁結構上標簽定義與使用更加語義化,有興趣的可以了解一下2017-07-10
- HTML是創(chuàng)建網(wǎng)頁的基礎語言,如果不了解HTML就談不上網(wǎng)頁設計。以下是關于HTML基本結構入門知識的講解2017-06-20
- 這篇文章主要介紹了HTML5的文檔結構和新增標簽完全解析,需要的朋友可以參考下2017-04-21
- 這篇文章給大家介紹了html5文檔結構標簽的相關知識,非常不錯,具有參考借鑒價值,需要的的朋友參考下吧2017-04-21