HTML 常用的標籤和屬性

DayDreame發表於2019-02-27
HTML

我們在開發的過程中常用的標籤其實很好理解，我們把京東的首頁拿來一用HTML 常用的標籤和屬性

從圖中我們可以看到：文字、圖片、logo、二維碼...

其中文字可以組成詞語，段落，或者文章；圖片其實就包含了logo、二維碼了

其中詞語（開發中我們也叫標籤）就用<span></sapn>來表示；段落或者文章我們就用<p></p>來表示；圖片我們就用<img>來表示，例如：

<span>這是一個標籤</span>    
<p>這是一段話，一段我想對你說的話，可是一直沒有機會，今天我想借這個時間告訴你，我想成為牛X的人</p>    
<img src="" alt=""> 複製程式碼

我們再來看一個東西，人體圖，雖然有點醜吧，大家湊合看一下:

HTML 常用的標籤和屬性

一個人分為三部分：頭部、身體和尾部，同樣在網站中都含有這三部分，我們分別用下面三個來表示：

<header></header>   頭
<center></center>   身體（中間）
<footer></footer>   尾部複製程式碼

我們拿來一個企業網站來看一下:

HTML 常用的標籤和屬性

看到這個網站想必就比較清楚了，一般頭部包含的都是logo、公司名、聯絡方式、導航等等

接下來引出的這個就是logo的標籤了，logo我們一般用：

<H1></H1>這個標籤了，代表著獨一無二的


當我們看到一些書名，或者excel中的一些資料時，就會想到列表這個概念，在程式設計中也有這個東西，比如說新聞標題就是用列表標籤，我們通常用<ul>和<li>,如下

<ul>
    <li>這是第一條新聞</li>
    <li>這是第二條新聞</li>
    <li>這是第三條新聞</li>
</ul>複製程式碼


HTML 常用的標籤和屬性

其實用的最多的就是段落標籤了，用來排版HTML段落，也用於格式化表，那就是

<div>這是一個div標籤，也是用的最多的</div>複製程式碼

我們在京東首頁按下鍵盤F12就可以看到他們的前端程式碼，我們點選ElementsHTML 常用的標籤和屬性


我這裡對標籤和屬性做了一些整合，希望各位剛入門的小夥伴一定要學會百度，百度是你最好的老師：

基本格式：

<html>…</html>      定義 HTML 文件
<head>…</head>   文件的資訊
<meta>                    HTML 文件的元資訊
<title>…</title>        文件的標題
<link>                      文件與外部資源的關係
<style>…</style>    文件的樣式資訊
<body>…</body>   可見的頁面內容
<!--…-->                 註釋複製程式碼

編輯器中的：

HTML 常用的標籤和屬性

<meta>標籤

<meta>的主要作用，是提供網頁的元資訊。比如：指定網頁的搜尋關鍵字。複製程式碼
<meta http-equiv="refresh" content="5">   //每隔5秒鐘，自動重新整理網頁一次
<meta http-equiv="refresh" content="5;url=https://www.baidu.com/">   //5秒鐘後，跳轉到百度複製程式碼
(1)設定網頁搜尋關鍵字

<meta name="keywords" content="前端學習，UI設計，java程式設計,Python" />
複製程式碼
(2)設定網頁描述資訊
<meta name="description" content="加入小馬，一起學習程式設計，走向人生巔峰，迎娶白富美”>複製程式碼


HTML文字修飾標記

<b></b>：加粗bold。如：<b>HTML檔案</b>
<i></i>：斜體italic。如：<i>HTML文字</i>
<u></u>：下劃線underline。如：<u>HTML文字</u>
<s></s>：刪除線strike。如：<s>刪除線</s>
<sup></sup>上標。
<sub></sub>下標。複製程式碼


HTML排版標記

<p></p>表示一個段落。複製程式碼
<br>換行複製程式碼
<h1></h1>    一級標題   標題標記
<h2></h2>    一級標題
<h3></h3>    一級標題
.......複製程式碼


<div>和<span>

<div>是沒有任何意義的標記，但是，又是使用最多的標記。<div>一般要與CSS配合使用。<div>是一個塊元素。
<span>是沒有任何意義的標記，但是，又是使用最多的標記。<span>要與CSS配合使用。<span>是行內元素。複製程式碼


HTML無序列表

<ul>
    <li>內容1</li>
    <li>內容2</li>
    <li>內容3</li>
</ul>複製程式碼

HTML有序列表

<ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ol>複製程式碼

 經常用到就是這些啦！希望大家還要多多百度去學習，每日都要提醒自己，學習使人進步，一點都不假。同時也希望大家不管是工作中還是學習中多多大論溝通，會對你們的學習生涯和工作生涯會有很大的幫助的！



相關文章