這篇文章主要介紹了HTML基本標簽及結構詳解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
1.HTML概述
1.HTML：超文本標記語言。是一種標識性語言，非編程語言，不能使用邏輯運算。通過標簽將網絡上的文檔格式進行統一，使分散的網絡資源鏈接為一個邏輯整體。
超文本是一種組織信息的方式，通過超級鏈接將多種媒介鏈接起來
標記:標簽。用<>包裹的具有一定含義的內容，比如:…
靜態(tài)網頁:不變
動態(tài)網頁：跟后臺同時改變
2.HTML標簽結構
1.文檔結構：
<!doctype html><!--!表示聲明的意思。這一行代碼意思：下面的文檔標簽將以html5進行解析-->
<html>
<!-頭部.用來完成一個網頁的相關設置->
<head>
<meta charset="utf-8"><!--漢字編碼--><!--meta:元，用來完成對應設置-->
<meta name="keywords" content=""><!--設置一個網站搜索的關鍵字-->
<meta name="description" content=""><!--網站的描述內容-->
<title>我的第一個html網頁</title><!--標題-->
<!--設置網站的小圖標-->
<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標簽,實現鏈接跳轉,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>
//自定義列表 重點每個網站的最下面基本都是通過自定義
<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.表格標簽以及表單標簽
表格標簽結構: 作用:顯示 展示數據
<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.表單標簽:
表單標簽:主要用途:收集用戶信息
表單由表單域 表單控件（元素） 提示信息組成
表單域 實現用戶信息傳遞<form action="" method=""></form>
action跟著的為地址 method提交方式 name名稱
input輸入表單元素:
<input type="text">
type屬性值:text文本 password密碼 button ridio單選框() checkbox(多選按鈕).....
submit(提交按鈕，將表單值提交給服務器) reset 清除表單的所有數據
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ù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
來源：腳本之家
鏈接：https://www.jb51.net/web/753398.html
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
