html有哪些標簽-前端之路學習總結

天分享的文章和大家講過了，html就是超文本標記語言，標記其實指的就是html的那些標簽，標簽才是每一個網頁的靈魂，今天就來和大家談談html有哪些常用的主要標簽及其用途。

我們按字母順序來寫：

1、,這個是注釋標簽，中間的‘.......’省略號代表被注釋的內容。

2、<!doctype>,這個是定義文檔的類型。

3、<a>,這個叫a標簽，定義超文本鏈接，什么叫超文本鏈接呢，還有什么是注釋，何為定義文本類型，這些以后的文章里都會專門給大家談一談。

4、<body>,這個是定義文檔的主體。

5、<br/>,這個是起換行作用的標簽。

6、<button>,這個是定義一個點擊按鈕。

7、<div>,定義文檔中的節。

8、<form>,定義html文檔的表單。

9、<h1><h2><h3><h4><h5><h6>,這六個是定義html的標題，其中h1的標題顯示出來的字體最大，以其類推，h6最小。

10、<head>,定義關于文檔的信息。

11、<html>,定義html文檔。

12、<iframe>,定義內聯框架。

13、<img>,定義圖像。

14、<input>,定義輸入控件。

15，<label>,定義input元素的標注。

16、<li>,定義列表的項目。

17、<link>,定義文檔與外部資源的關系。

18、<meta>,定義關于文檔的元信息。

19、<ol>,定義有序列表。

20、<option>,定義選擇列表中的選項。

21、<p>,定義段落。

22、<pre>,定義預格式文本。

23、<script>,定義客戶端腳本。

24、<select>,定義選擇列表（下拉列表）。

25、<span>,定義文檔中的節，注意和<div>標簽的區別。

26、<style>,定義文檔的樣式信息。

27、<table>,定義表格。

29、<td>,定義表格中的單元。

30、<textarea>,定義一個多行的文本輸入控件。

31、<title>,定義文檔的標題。

32、<tr>,定義表格中的列。

33、<ul>，定義無序列表。

上面這些就是比較常見的html標簽和它們的用途了。

今天就整理到這里了，明天再和大家談一下標簽的一些其他相關信息。

三部分附錄（因為暫時不支持插入超鏈接所以部分內容無法顯示）

附錄一 DIV命名規范

企業DIV使用頻率高的命名方法
網頁內容類
標題: title
摘要: summary
箭頭： arrow
商標： label
網站標志： logo
轉角/圓角：corner
橫幅廣告： banner
子菜單： subMenu
搜索： search
搜索框： searchBox
登錄： login
登錄條：loginbar
工具條： toolbar
下拉： drop
標簽頁： tab
當前的： current
列表： list
滾動： scroll
服務： service
提示信息： msg
熱點：hot
新聞： news
小技巧： tips
下載： download
欄目標題： title
熱點： hot
加入：joinus
注冊： regsiter
指南： guide
友情鏈接： friendlink
狀態： status
版權： copyright
按鈕： btn
合作伙伴： partner
投票： vote
左右中：left right center

注釋的寫法: /* Footer */ 內容區/* End Footer */
id的命名:
頁面結構
容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center

導航
導航：nav
主導航：mainbav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
標題: title
摘要: summary

功能
標志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：regsiter
搜索：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標簽頁：tab
文章列表：list
提示信息：msg
當前的:current
小技巧：tips
圖標: icon
注釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情鏈接：link
版權：copyright

class的命名:
顏色:使用顏色的名稱或者16進制代碼,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
字體大小,直接使用”font+字體大小”作為名稱,如
.font12px { font-size: 12px; }
.font9px {font-size: 9pt; }
對齊樣式,使用對齊目標的英文名稱,如
.left { float:left; }
.bottom { float:bottom; }
標題欄樣式,使用”類別+功能”的方式命名,如
.barnews { }
.barproduct { }

注意事項::
一律小寫;
盡量用英文;
不加中杠和下劃線;
盡量不縮寫，除非一看就明白的單詞.

推薦的 CSS 書寫順序：
顯示屬性
display
list-style
position
float
clear
自身屬性
width
height
margin
padding
border
background
文本屬性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content

附錄二 CSS精靈

CSS精靈原理以及應用
CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。
該圖片使用CSS background和background-position屬性渲染，這也就意味著你的標簽變得更加復雜了，圖片是在CSS中定義，而非<img>標簽。
一個簡單的例子：
一張圖片作出一個按鈕的三個狀態
一個鏈接用CSS做成按鈕的樣式，我們可以使用同一張圖片，完成按鈕的三個狀態，a:link，a:hover，a:active <a class="button" href="#">鏈接</a>
加入右側的圖片為：200px 65px的三個按鈕圖拼合而成的圖片button.png，從上到下一次為按鈕的普通、鼠標滑過、鼠標點擊的狀態。則可以使用CSS進行定義。

a {
 display:block; 
 width:200px; 
 height:65px; 
 line-height:65px; /*定義狀態*/
 text-indent:-2015px; /*隱藏文字*/
 background-image:url(button.png); /*定義背景圖片*/
 background-position:0 0;
 /*定義鏈接的普通狀態，此時圖像顯示的是頂上的部分*/
}
a:hover {
 background-position:0 -66px;
 /*定義鏈接的滑過狀態，此時顯示的為中間部分，向下取負值*/
}
a:active {
 background-position:0 -132px; 
 /*定 義鏈接的普通狀態，此時顯示的是底部的部分，向下取負值*/
}

更多的CSS雪碧，圖片更復雜，背景定位更精確。可能會用到大量的數值
如：background:url(nav.png) -180px 24pxno-repeat; 來達到更精確的定位
優點：
減少加載網頁圖片時對服務器的請求次數
可以合并多數背景圖片和小圖標，方便在任何位置使用，這樣不同位置的請求只需要調用一個圖片，從而減少對服務器的請求次數，降低服務器壓力，同時提高了頁面的加載速度，節約服務器的流量。
提高頁面的加載速度
sprite技術的其中一個好處是圖片的加載時間(在有許多 sprite 時，單張圖片的加載時間)。由所需圖片拼成的一張 GIF圖片的尺寸會明顯小于所有圖片拼合前的大小。單張的 GIF只有相關的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張 JPEG 或者 PNGsprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
減少鼠標滑過的一些bug
IE6不會主動預加載鼠標滑過即a:hover中的背景圖片，所以，如果使用多張圖片，鼠標滑過會出現閃白的現象。使用CSS雪碧，由于一張圖片即可，所以不會出現這種現象。
不足：
CSS雪碧的最大問題是內存使用
影響瀏覽器的縮放功能
拼圖維護比較麻煩
使CSS的編寫變得困難
CSS 雪碧調用的圖片不能被打印
錯誤得使用 Sprites 影響可訪問性

附錄三一些tips解決方案

頁面優化實踐

從下面的幾個方面可以進行頁面的優化：
減少請求數
圖片合并
CSS文件合并
減少內聯樣式
避免在 CSS中使用 import
減少文件大小
選擇適合的圖片格式
圖片壓縮
CSS 值縮寫（Shorthand Property)
文件壓縮
頁面性能
調整文件加載順序
減少標簽數量
調整選擇器長度
盡量使用CSS 制作顯示表現
增強代碼可讀性與可維護性
規范化
語義化
模塊化

寫DIV+CSS 的一些常識

不要使用過小的圖片做背景平鋪
這就是為何很多人都不用 1px 的原因，這才知曉。寬高 1px 的圖片平鋪出一個寬高 200px 的區域，需要 200200=40, 000 次，占用資源
無邊框
推薦的寫法是 border:none;，哈哈，我一直在用這個。 border:0; 只是定義邊框寬度為零，但邊框樣式、顏色還是會被瀏覽器解析，占用資源
慎用通配符
所謂通配符，就是將CSS 中的所有標簽均初始化，不管用的不用的，過時的先進的，一視同仁，這樣，大大的占用資源。要有選擇的初始化標簽。
CSS的十六進制顏色代碼縮寫
習慣了縮寫及小寫，這才知道，原來不是推薦的寫法，為的是減少解析所占用的資源。但同時會增加文件體積。孰優孰劣，有待仔細考證。
樣式放頭上，腳本放腳下。不內嵌，只外鏈
堅決不用 CSS表達式
使用引用樣式表，而不是通過@import 導入。
一般來說，PNG比 GIF 要小，小得多。再者，GIF 中有多少顏色是被浪費的，很值得優化。
千萬不要在 HTML中縮放圖片，一者不好看，二者占資源。
正文字體最好用偶數
12px、14px、16px，效果非常好。特例，15px。
block、ul、ol等上下留出至少一倍行距，左側至少兩倍行距，右側隨意。
段落之間，至少要有一倍行距
強行指定某些元素的 line-height，正文 1.6倍于文字大小，標題1.3倍。
中文標點用全角
英文夾雜在中文中，左右空格，半角。
中文字體的粗體和斜體，遠離較好

常用代碼片段

雅虎工程師提供的CSS初始化示例代碼【僅供參考】
可以在html頭文件中直接引用，從而避免瀏覽器的不兼容帶來的錯誤。

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td { 
 margin:0; padding:0; 
}
body {
 background:#fff; 
 color:#555; 
 font-size:14px; 
 font-family: Verdana, Arial, Helvetica, sans-serif; 
}
td,
th,
caption { 
 font-size:14px;
}
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
 font-weight:normal; 
 font-size:100%; 
}
address, 
caption,
cite, 
code, 
dfn, 
em, 
strong,
th, 
var { 
 font-style:normal; 
 font-weight:normal;
}
a { 
 color:#555; 
 text-decoration:none; 
}
a:hover { 
 text-decoration:underline; 
}
img {
 border:none;
}
ol,ul,li { 
 list-style:none; 
}
input, 
textarea, 
select, 
button { 
 font:14px Verdana,Helvetica,Arial,sans-serif; 
}
table { 
 border-collapse:collapse; 
}
html {
 overflow-y: scroll;
} 
.clearfix:after {
 content: "."; 
 display: block; 
 height:0; 
 clear:both; 
 visibility: hidden;
}
.clearfix { 
 *zoom:1; 
}

mobile meta標簽

<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>

表格不被撐開

table-layout: fixed; word-break: break-all;;border-collapse: collapse

不設寬高居中

<div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”>
 <span style=”background:#f00; display:table-cell; vertical-align:middle;”>
 <input type=”button” value=”item1″ />
 </span>
</div>

透明度的兼容代碼

filter:alpha(opacity=50); /*1-100*/
-moz-opacity:0.5; /*0-1.0*/
-khtml-opacity:0.5; /*0-1.0*/
opacity:0.5; /*0-1.0*/

文字溢出點點省略

white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;

清除浮動的幾種方法
方法一：投機取巧法 – 不推薦
直接一個放到當作最后一個子標簽放到父標簽那兒，此方法屢試不爽，兼容性強
方法二：overflow + zoom方法 –不推薦
.fix{overflow:hidden; zoom:1;}
此方法優點在于代碼簡潔，涵蓋所有瀏覽器
方法三：after + zoom方法 -推薦–此方法可以說是綜合起來最好的方法了
clearfix只應用在包含浮動子元素的父級元素上

.fix{zoom:1;}
.fix:after{
 display:block; 
 content:'clear'; 
 clear:both;
 line-height:0; 
 visibility:hidden;
}

更多代碼片段詳情
實用的60個CSS代碼片段

一些總結

自動繼承屬性：
color
font
text-align
list-style
…
非繼承屬性：
background
border
position
…
具有破壞性的元素：
float
display:none;
position:absoblute/fixed/sticky;
具有包裹性的元素：
display:inline-block/table-cell
position:absolute/fixed/sticky
overflow:hidden/scroll
消除圖片底部間隙的方法
圖片塊狀化-無基線對齊
img{display:block;}
圖片底線對齊
img{vertical-align:bottom;}
行高足夠小 - 基線位置上移
.box{line-height:0;}

一些概念

BFC
BFC全稱”Block Formatting Context” 中文為“塊級格式化上下文”
記住這么一句話：BFC元素特性表現原則就是，內部子元素再怎么翻江倒海，翻云覆雨都不會影響外部的元素
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此
優雅降級(graceful degradation)
一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容
漸進增強 progressive enhancement：
是在瀏覽器開啟JavaScript功能后，如果瀏覽器版本不支持某些 JavaScript 能力，我們解決這種問題的方式
平穩退化
是在瀏覽器沒有JavaScript功能，或沒有開啟JavaScript功能情況下，我們解決這種問題的方式；

學習從來不是一個人的事情，要有個相互監督的伙伴，想要學習或交流前端問題的小伙伴可以私信“學習”小明加群獲取2019web前端最新入門資料，一起學習，一起成長！

上大學時，c語言似乎很流行，很多專業的人都開這個課，所以從那時候開始接觸計算機語言之類的東西。可惜的是在學校時根本沒有時間去深究它，一直是自己的一個遺憾。

一直到2011年的時候，才又拿起書來自學，當時一個大學最要好的同學剛好在自學網站開發，我們在一起探討的時候，向我推薦了前端開發，所以從那時候開始學習html,css,div,javascript,jquery,mysql,php,http...再到后來的bootstrap,vue,angular...從現在開始，我準備從最簡單的開始一步步地給大家分享一下，今天就先簡單的介紹一下html相關知識。

html英語全稱是HyperText Markup Language,中文意思是超文本標記語言。從字面上的意思我們也能理解，這是一種采用標記來進行表達的語言，并且不是普通隨便的標記，而是定義了一系列特定的有規范的字母，數字，符號做為標記，所以說把它稱為超文本。然后通過html我們可以做出一個個所需要的網頁頁面來。

今天就簡單說到這里，明天再和大家分享一下具體的標記及相關知識。

在線咨詢

上一篇：webstorm純干貨-包括永久激活和日常開發技巧
下一篇：爬蟲爬取動態網頁（爬取動態網頁數據）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html有哪些標簽-前端之路學習總結

您的項目需求