整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML前端開發(fā)最終取決于掌握標(biāo)簽的多少
HTML大概有七八百個(gè)標(biāo)簽
樓主這里給大家總結(jié)了下HTML常用標(biāo)簽
標(biāo)簽描述
<!--...-->定義注釋。
<!DOCTYPE> 定義文檔類型,所有H5都是這玩意打頭。
<a>定義錨。
<abbr>定義縮寫。
<acronym>定義只取首字母的縮寫。
<address>定義文檔作者或擁有者的聯(lián)系信息。
<applet>不贊成使用。定義嵌入的 applet。
<area>定義圖像映射內(nèi)部的區(qū)域。
<article>定義文章。
<aside>定義頁面內(nèi)容之外的內(nèi)容。
<audio>定義聲音內(nèi)容。
<b>定義粗體字。
<base>定義頁面中所有鏈接的默認(rèn)地址或默認(rèn)目標(biāo)。
<basefont>不贊成使用。定義頁面中文本的默認(rèn)字體、顏色或尺寸。
<bdi>定義文本的文本方向，使其脫離其周圍文本的方向設(shè)置。
<bdo>定義文字方向。
<big>定義大號文本。
<blockquote>定義長的引用。
<body>定義文檔的主體。
<br>定義簡單的折行。
<button>定義按鈕 (push button)。
<canvas>定義圖形。
<caption>定義表格標(biāo)題。
<center>不贊成使用。定義居中文本。
<cite>定義引用(citation)。
<code>定義計(jì)算機(jī)代碼文本。
<col>定義表格中一個(gè)或多個(gè)列的屬性值。
<colgroup>定義表格中供格式化的列組。
<command>定義命令按鈕。
<datalist>定義下拉列表。
<dd>定義定義列表中項(xiàng)目的描述。
<del>定義被刪除文本。
<details>定義元素的細(xì)節(jié)。
<dir>不贊成使用。定義目錄列表。
<div>定義文檔中的節(jié)。
<dfn>定義定義項(xiàng)目。
<dialog>定義對話框或窗口。
<dl>定義定義列表。
<dt>定義定義列表中的項(xiàng)目。
<em>定義強(qiáng)調(diào)文本。
<embed>定義外部交互內(nèi)容或插件。
<fieldset>定義圍繞表單中元素的邊框。
<figcaption>定義 figure 元素的標(biāo)題。
<figure>定義媒介內(nèi)容的分組，以及它們的標(biāo)題。
<font>不贊成使用。定義文字的字體、尺寸和顏色。
<footer>定義 section 或 page 的頁腳。
<form>定義供用戶輸入的 HTML 表單。
<frame>定義框架集的窗口或框架。
<frameset>定義框架集。
<h1> to <h6>定義 HTML 標(biāo)題。
<head>定義關(guān)于文檔的信息。
<header>定義 section 或 page 的頁眉。
<hr>定義水平線。
<html>定義 HTML 文檔。
<i>定義斜體字。
<iframe>定義內(nèi)聯(lián)框架。
<img>定義圖像。
<input>定義輸入控件。
<ins>定義被插入文本。
<isindex>不贊成使用。定義與文檔相關(guān)的可搜索索引。
<kbd>定義鍵盤文本。
<keygen>定義生成密鑰。
<label>定義 input 元素的標(biāo)注。
<legend>定義 fieldset 元素的標(biāo)題。
<li>定義列表的項(xiàng)目。
<link>定義文檔與外部資源的關(guān)系。
<map>定義圖像映射。
<mark>定義有記號的文本。
<menu>定義命令的列表或菜單。
<menuitem>定義用戶可以從彈出菜單調(diào)用的命令/菜單項(xiàng)目。
<meta>定義關(guān)于 HTML 文檔的元信息。
<meter>定義預(yù)定義范圍內(nèi)的度量。
<nav>定義導(dǎo)航鏈接。
<noframes>定義針對不支持框架的用戶的替代內(nèi)容。
<noscript>定義針對不支持客戶端腳本的用戶的替代內(nèi)容。
<object>定義內(nèi)嵌對象。
<ol>定義有序列表。
<optgroup>定義選擇列表中相關(guān)選項(xiàng)的組合。
<option>定義選擇列表中的選項(xiàng)。
<output>定義輸出的一些類型。
<p>定義段落。
<param>定義對象的參數(shù)。
<pre>定義預(yù)格式文本。
<progress>定義任何類型的任務(wù)的進(jìn)度。
<q>定義短的引用。
<rp>定義若瀏覽器不支持 ruby 元素顯示的內(nèi)容。
<rt>定義 ruby 注釋的解釋。
<ruby>定義 ruby 注釋。
<s>不贊成使用。定義加刪除線的文本。
<samp>定義計(jì)算機(jī)代碼樣本。
<script>定義客戶端腳本。
<section>定義 section。
<select>定義選擇列表（下拉列表）。
<small>定義小號文本。
<source>定義媒介源。
<span>定義文檔中的節(jié)。
<strike>不贊成使用。定義加刪除線文本。
<strong>定義強(qiáng)調(diào)文本。
<style>定義文檔的樣式信息。
<sub>定義下標(biāo)文本。
<summary>為 <details> 元素定義可見的標(biāo)題。
<sup>定義上標(biāo)文本。
<table>定義表格。
<tbody>定義表格中的主體內(nèi)容。
<td>定義表格中的單元。
<textarea>定義多行的文本輸入控件。
<tfoot>定義表格中的表注內(nèi)容（腳注）。
<th>定義表格中的表頭單元格。
<thead>定義表格中的表頭內(nèi)容。
<time>定義日期/時(shí)間。
<title>定義文檔的標(biāo)題。
<tr>定義表格中的行。
<track>定義用在媒體播放器中的文本軌道。
<tt>定義打字機(jī)文本。
<u>不贊成使用。定義下劃線文本。
<ul>定義無序列表。
<var>定義文本的變量部分。
<video>定義視頻。
<wbr>定義可能的換行符。
<xmp>不贊成使用。定義預(yù)格式文本。
標(biāo)簽描述
<!DOCTYPE> 定義文檔類型。
<html>定義 HTML 文檔。
<title>定義文檔的標(biāo)題。
<body>定義文檔的主體。
<h1> to <h6>定義 HTML 標(biāo)題。
<p>定義段落。
<br>定義簡單的折行。
<hr>定義水平線。
<!--...-->定義注釋。
格式
標(biāo)簽描述
<acronym>定義只取首字母的縮寫。
<abbr>定義縮寫。
<address>定義文檔作者或擁有者的聯(lián)系信息。
<b>定義粗體文本。
<bdi>定義文本的文本方向，使其脫離其周圍文本的方向設(shè)置。
<bdo>定義文字方向。
<big>定義大號文本。
<blockquote>定義長的引用。
<center>不贊成使用。定義居中文本。
<cite>定義引用(citation)。
<code>定義計(jì)算機(jī)代碼文本。
<del>定義被刪除文本。
<dfn>定義定義項(xiàng)目。
<em>定義強(qiáng)調(diào)文本。
<font>不贊成使用。定義文本的字體、尺寸和顏色
<i>定義斜體文本。
<ins>定義被插入文本。
<kbd>定義鍵盤文本。
<mark>定義有記號的文本。
<meter>定義預(yù)定義范圍內(nèi)的度量。
<pre>定義預(yù)格式文本。
<progress>定義任何類型的任務(wù)的進(jìn)度。
<q>定義短的引用。
<rp>定義若瀏覽器不支持 ruby 元素顯示的內(nèi)容。
<rt>定義 ruby 注釋的解釋。
<ruby>定義 ruby 注釋。
<s>不贊成使用。定義加刪除線的文本。
<samp>定義計(jì)算機(jī)代碼樣本。
<small>定義小號文本。
<strike>不贊成使用。定義加刪除線文本。
<strong>定義語氣更為強(qiáng)烈的強(qiáng)調(diào)文本。
<sup>定義上標(biāo)文本。
<sub>定義下標(biāo)文本。
<time>定義日期/時(shí)間。
<tt>定義打字機(jī)文本。
<u>不贊成使用。定義下劃線文本。
<var>定義文本的變量部分。
<wbr>定義可能的換行符。
表單
標(biāo)簽描述
<form>定義供用戶輸入的 HTML 表單。
<input>定義輸入控件。
<textarea>定義多行的文本輸入控件。
<button>定義按鈕。
<select>定義選擇列表（下拉列表）。
<optgroup>定義選擇列表中相關(guān)選項(xiàng)的組合。
<option>定義選擇列表中的選項(xiàng)。
<label>定義 input 元素的標(biāo)注。
<fieldset>定義圍繞表單中元素的邊框。
<legend>定義 fieldset 元素的標(biāo)題。
<isindex>不贊成使用。定義與文檔相關(guān)的可搜索索引。
<datalist>定義下拉列表。
<keygen>定義生成密鑰。
<output>定義輸出的一些類型。
框架
標(biāo)簽描述
<frame>定義框架集的窗口或框架。
<frameset>定義框架集。
<noframes>定義針對不支持框架的用戶的替代內(nèi)容。
<iframe>定義內(nèi)聯(lián)框架。
圖像
標(biāo)簽描述
<img>定義圖像。
<map>定義圖像映射。
<area>定義圖像地圖內(nèi)部的區(qū)域。
<canvas>定義圖形。
<figcaption>定義 figure 元素的標(biāo)題。
<figure>定義媒介內(nèi)容的分組，以及它們的標(biāo)題。
音頻/視頻
標(biāo)簽描述
<audio>定義聲音內(nèi)容。
<source>定義媒介源。
<track>定義用在媒體播放器中的文本軌道。
<video>定義視頻。
鏈接
標(biāo)簽描述
<a>定義錨。
<link>定義文檔與外部資源的關(guān)系。
<nav>定義導(dǎo)航鏈接。
列表
標(biāo)簽描述
<ul>定義無序列表。
<ol>定義有序列表。
<li>定義列表的項(xiàng)目。
<dir>不贊成使用。定義目錄列表。
<dl>定義定義列表。
<dt>定義定義列表中的項(xiàng)目。
<dd>定義定義列表中項(xiàng)目的描述。
<menu>定義命令的菜單/列表。
<menuitem>定義用戶可以從彈出菜單調(diào)用的命令/菜單項(xiàng)目。
<command>定義命令按鈕。
表格
標(biāo)簽描述
<table>定義表格
<caption>定義表格標(biāo)題。
<th>定義表格中的表頭單元格。
<tr>定義表格中的行。
<td>定義表格中的單元。
<thead>定義表格中的表頭內(nèi)容。
<tbody>定義表格中的主體內(nèi)容。
<tfoot>定義表格中的表注內(nèi)容（腳注）。
<col>定義表格中一個(gè)或多個(gè)列的屬性值。
<colgroup>定義表格中供格式化的列組。
樣式/節(jié)
標(biāo)簽描述
<style>定義文檔的樣式信息。
<div>定義文檔中的節(jié)。
<span>定義文檔中的節(jié)。
<header>定義 section 或 page 的頁眉。
<footer>定義 section 或 page 的頁腳。
<section>定義 section。
<article>定義文章。
<aside>定義頁面內(nèi)容之外的內(nèi)容。
<details>定義元素的細(xì)節(jié)。
<dialog>定義對話框或窗口。
<summary>為 <details> 元素定義可見的標(biāo)題。
元信息
標(biāo)簽描述
<head>定義關(guān)于文檔的信息。
<meta>定義關(guān)于 HTML 文檔的元信息。
<base>定義頁面中所有鏈接的默認(rèn)地址或默認(rèn)目標(biāo)。
<basefont>不贊成使用。定義頁面中文本的默認(rèn)字體、顏色或尺寸。
編程
標(biāo)簽描述
<script>定義客戶端腳本。
<noscript>定義針對不支持客戶端腳本的用戶的替代內(nèi)容。
<applet>不贊成使用。定義嵌入的 applet。
<embed>為外部應(yīng)用程序（非 HTML）定義容器。
<object>定義嵌入的對象。
<param>定義對象的參數(shù)。
屬性描述
accesskey規(guī)定激活元素的快捷鍵。
class規(guī)定元素的一個(gè)或多個(gè)類名（引用樣式表中的類）。
contenteditable規(guī)定元素內(nèi)容是否可編輯。
contextmenu規(guī)定元素的上下文菜單。上下文菜單在用戶點(diǎn)擊元素時(shí)顯示。
data-*用于存儲(chǔ)頁面或應(yīng)用程序的私有定制數(shù)據(jù)。
dir規(guī)定元素中內(nèi)容的文本方向。
draggable規(guī)定元素是否可拖動(dòng)。
dropzone規(guī)定在拖動(dòng)被拖動(dòng)數(shù)據(jù)時(shí)是否進(jìn)行復(fù)制、移動(dòng)或鏈接。
hidden規(guī)定元素仍未或不再相關(guān)。
id規(guī)定元素的唯一 id。
lang規(guī)定元素內(nèi)容的語言。
spellcheck規(guī)定是否對元素進(jìn)行拼寫和語法檢查。
style規(guī)定元素的行內(nèi) CSS 樣式。
tabindex規(guī)定元素的 tab 鍵次序。
title規(guī)定有關(guān)元素的額外信息。
translate規(guī)定是否應(yīng)該翻譯元素內(nèi)容。
自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費(fèi)獲取
Html5-CSS之五大居中方式
你是不是也對元素居中的知識點(diǎn)很是模糊？是不是苦于找不到一個(gè)總結(jié)的通俗易懂的說明？是不是自己懶得去總結(jié)？恭喜你，搜到這篇博客！ 這是鄙人在前端的學(xué)習(xí)與實(shí)踐中總結(jié)出的元素的五大居中方式，黏貼了代碼并對代碼做了解釋，希望對迷茫的有所幫助！
下面的居中示例中，統(tǒng)一使用了同一個(gè)div作為父元素和p作為子元素
設(shè)置一個(gè)div,并且設(shè)置了div的寬高邊框，div里面設(shè)置一個(gè)塊元素p，設(shè)置了它的寬高和背景色
css居中方式1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中1</title>
<style>
*{margin:0;}
div{width:200px;height:300px;border:2px solid #000;margin:200px auto;
text-align:center;font-size:0;
}
div p{width:100px;height:100px;background:#666;
display:inline-block;vertical-align:middle;
}
div:after{content:"";display:inline-block;height:100%;vertical-align:middle;}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
這里利用了偽元素讓子元素p在div盒子里左右水平居中只需要在它的父元素div里加text-align:center;垂直方向居中需要在父元素后面加了一個(gè)偽元素，并使得樣式為inline-block;height:100%;就是和父元素一樣高，vertical-align:middle;垂直居中，也就是p元素相對與偽元素居中，由于偽元素和div一樣高，所以相當(dāng)于p元素在div里垂直居中。
css居中方式2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中2</title>
<style>
*{margin:0;}
div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{position:absolute;left:0;bottom:0;right:0;top:0;margin:auto;width:100px;height:100px;background:#f99;}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
這里利用了定位居中
子元素p設(shè)置position：absolute脫離文檔流,默認(rèn)以html作為父元素，所以我們給父元素div設(shè)置position:relative;使得p以div為父元素做位置的變動(dòng)，left:0;tight:0;top:0;bottom:0;（只有設(shè)置了定位的元素才可以使用這種方式來移動(dòng)），最后margin:auto;就會(huì)水平和垂直都居中。
css居中方式3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中3</title>
<style>
*{margin:0;}
div{display:flex;justify-content:center;align-items:center;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{width:100px;height:100px;background:#f99;}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
這里利用了彈性盒居中
父元素div設(shè)置成彈性盒樣式，justify-content:center;主軸居中
align-items:center;垂直居中（而且這兩個(gè)只能設(shè)置在父元素上，彈性盒知識）
css居中方式4
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中4</title>
<style>
*{margin:0;}
div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{width:100px;height:100px;background:#f99;position:absolute;
left:50%;top:50%;margin:-50px 0 0 -50px;}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
利用定位線左上角居中，然后左移子元素寬度的一半，再上移子元素高度的一半。
css居中方式5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中5</title>
<style>
*{margin:0;}
div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{position:absolute;width:100px;height:100px;background:#f99;left:50%;top:50%;
transform:translate(-50%,-50%);}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
利用動(dòng)畫移動(dòng)屬性transform
結(jié)語
相信看了上面的有關(guān)Html5、css的元素五大居中方式，你們就可以解決自己的小問題了，但是也要養(yǎng)成一個(gè)總結(jié)的好習(xí)慣。好記性不如爛筆頭！以前留下來的話語總是有他的道理。Come on！
原文鏈接：https://blog.csdn.net/qq_38110274/article/details/102756968
白郁悶的找到老朱說道：“朱哥，我想讓一個(gè)塊容器在一個(gè)容器里面垂直居中怎么這么難啊！”
老朱：“你是怎么實(shí)現(xiàn)的？”
小白說：“比如一個(gè)容器的高度是400px，子容器的高度是300px，我就把子容器CSS上邊距設(shè)置成50px。”
“那要是父容器高度發(fā)生變化你的子容器豈不是很麻煩”
小白郁悶的說道：“你可說吧！頭疼的很！怎么才能輕松的設(shè)置垂直居中啊？”
老朱說：“如果一個(gè)容器只有一行文字和圖片，我們可以設(shè)置容器的高度和line-height一致就可以保證文字和圖片居中，但是多行圖片，或者容器里面嵌套了其他塊元素就很麻煩了。還有一種情況就像你剛剛兩個(gè)div嵌套，子容器也是個(gè)塊元素，垂直居中直接用CSS會(huì)很麻煩，正好今天想跟你說說怎么給jQuery添加擴(kuò)展方法，索性咱就以這個(gè)為例子進(jìn)行討論吧！”
小白高興的說道：“又有新知識學(xué)了，什么事給jQuery添加擴(kuò)展方法呢？”
“我們使用$(選擇器)生成的對象有很多默認(rèn)jQuery方法，你應(yīng)該知道吧？”
小白說道：“知道啊！獲取和修改容器html內(nèi)容的html()方法、獲取和修改屬性的attr()方法、修改元素css樣式的css()方法、獲取元素高度的height()方法、還有控制容器顯示的show()方法……”
“停~！差不多了，這些都是jQuery自帶的方法，假如我們想自己增加一個(gè)方法可以用$.fn添加。我現(xiàn)在給你寫一個(gè)能夠輸出當(dāng)前容器高度和父容器高度的方法你看看！”
“子容器和父容器的高度在CSS中都有過設(shè)定，因此我通過$.fn添加mid方法以后，再通過選擇器找到sun容器就可以直接使用mid方法了。”
小白突然靈光一現(xiàn)，說道：“朱哥我知道怎么設(shè)置一個(gè)讓塊容器基于父容器垂直居中了，你稍等我一會(huì)，我再你的代碼基礎(chǔ)上改一下！”
也就兩分鐘的時(shí)間，小白就把代碼拿到了老朱面前，“你看，我寫好了！”
“現(xiàn)在我想讓sun容器基于main垂直居中只需要使用一下$("#sun").mid()就可以實(shí)現(xiàn)了，以后父容器不管怎么變化，它都是基于父容器居中的。”
老朱說道：“如果有多行塊容器，或者多行文本、圖片怎么辦？”
小白說道：“那就給他們外面再嵌套一個(gè)塊容器就可以了么！對不對啊？”
“不錯(cuò)，通過給他們嵌套一個(gè)塊容器，然后再讓這個(gè)塊容器基于父容器垂直居中就可以了！小白我相信你還能再寫一個(gè)基于底部對齊的方法吧？”
小白自信的說道：“再這個(gè)方法上改一下就可以了，稍等~”
“嗯，不錯(cuò)，如果你發(fā)現(xiàn)以后經(jīng)常會(huì)用到這兩種居中方式，可以把他們放到一個(gè)js文件里面，以后用的時(shí)候把這個(gè)js文件引入，就可以直接使用mid和bottom方法了。”
“$.fn確實(shí)是個(gè)好東西！看來我以后得經(jīng)常添加自己的方法了，哈哈，我去練習(xí)了~”
想學(xué)H5的朋友可以關(guān)注老爐，您的關(guān)注是我持續(xù)更新《小白HTML5成長之路》的動(dòng)力！
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
