tml5你了解了多少?如果你還是入門階段的話,或者還是一知半解的話 ,那么我們專門為你們收集的html5常用的標簽大全對你就很有幫助了,你需要了解了html5有哪些標簽你才能夠更好的。駕馭html5這門火熱而又充滿神秘的語言技術。下面是一些常用的html5標簽。按字母順序排列的標簽列表
?4: 指示在 HTML 4.01 中定義了該元素
?5: 指示在 HTML 5 中定義了該元素
標簽 描述 4 5
<!--...--> 定義注釋。 4 5
<!DOCTYPE> 定義文檔類型。 4 5
<a> 定義超鏈接。 4 5
<abbr> 定義縮寫。 4 5
<acronym> HTML 5 中不支持。定義首字母縮寫。 4
<address> 定義地址元素。 4 5
<applet> HTML 5 中不支持。定義 applet。 4
<area> 定義圖像映射中的區域。 4 5
<article> 定義 article。 5
<time> 定義日期/時間。 5
<title> 定義文檔的標題。 4 5
<tr> 定義表格行。 4 5
<tt> HTML 5 中不支持。定義打字機文本。 4
<u> HTML 5 中不支持。定義下劃線文本。 4
<ul> 定義無序列表。 4 5
<var> 定義變量。 4 5
<video> 定義視頻。 5
<xmp> HTML 5 中不支持。定義預格式文本。 4
<aside> 定義頁面內容之外的內容。 5
<button> 定義按鈕。 4 5
<canvas> 定義圖形。 5
<caption> 定義表格標題。 4 5
<center> HTML 5 中不支持。定義居中的文本。 4
<cite> 定義引用。 4 5
<code> 定義計算機代碼文本。 4 5
<col> 定義表格列的屬性。 4 5
<colgroup> 定義表格列的分組。 4 5
<command> 定義命令按鈕。 5
<audio> 定義聲音內容。 5
<b> 定義粗體文本。 4 5
<base> 定義頁面中所有鏈接的基準 URL。 4 5
<basefont> HTML 5 中不支持。請使用 CSS 代替。 4
<bdo> 定義文本顯示的方向。 4 5
<big> HTML 5 中不支持。定義大號文本。 4
<blockquote> 定義長的引用。 4 5
<body> 定義 body 元素。 4 5
<br> 插入換行符。 4 5
<datalist> 定義下拉列表。 5
<dd> 定義定義的描述。 4 5
<form> 定義表單。 4 5
<frame> HTML 5 中不支持。定義子窗口(框架)。 4
<frameset> HTML 5 中不支持。定義框架的集。 4
<h1> to <h6> 定義標題 1 到標題 6。 4 5
<head> 定義關于文檔的信息。 4 5
<header> 定義 section 或 page 的頁眉。 5
<hgroup> 定義有關文檔中的 section 的信息。 5
<hr> 定義水平線。 4 5
<del> 定義刪除文本。 4 5
<details> 定義元素的細節。 5
<dfn> 定義定義項目。 4 5
<dir> HTML 5 中不支持。定義目錄列表。 4
<iframe> 定義行內的子窗口(框架)。 4 5
<img> 定義圖像。 4 5
<input> 定義輸入域。 4 5
<ins> 定義插入文本。 4 5
<keygen> 定義生成密鑰。 5
<isindex> HTML 5 中不支持。定義單行的輸入域。 4
<kbd> 定義鍵盤文本。 4 5
<label> 定義表單控件的標注。 4 5
<legend> 定義 fieldset 中的標題。 4 5
<div> 定義文檔中的一個部分。 4 5
<dl> 定義定義列表。 4 5
<dt> 定義定義的項目。 4 5
<em> 定義強調文本。 4 5
<embed> 定義外部交互內容或插件。 5
<fieldset> 定義 fieldset。 4 5
<figcaption> 定義 figure 元素的標題。 5
<figure> 定義媒介內容的分組,以及它們的標題。 5
<font> HTML 5 中不支持。 4
<footer> 定義 section 或 page 的頁腳。 5
<html> 定義 html 文檔。 4 5
<i> 定義斜體文本。 4 5
<li> 定義列表的項目。 4 5
<link> 定義資源引用。 4 5
<map> 定義圖像映射。 4 5
<mark> 定義有記號的文本。 5
<menu> 定義菜單列表。 4 5
<meta> 定義元信息。 4 5
<meter> 定義預定義范圍內的度量。 5
<nav> 定義導航鏈接。 5
<noframes> HTML 5 中不支持。定義 noframe 部分。 4
<noscript> 定義 noscript 部分。 4 5
<object> 定義嵌入對象。 4 5
<ol> 定義有序列表。 4 5
<optgroup> 定義選項組。 4 5
<option> 定義下拉列表中的選項。 4 5
<output> 定義輸出的一些類型。 5
<p> 定義段落。 4 5
<param> 為對象定義參數。 4 5
<pre> 定義預格式化文本。 4 5
<progress> 定義任何類型的任務的進度。 5
<q> 定義短的引用。 4 5
<rp> 定義若瀏覽器不支持 ruby 元素顯示的內容。 5
<rt> 定義 ruby 注釋的解釋。 5
<ruby> 定義 ruby 注釋。 5
<s> HTML 5 中不支持。定義加刪除線的文本。 4
<samp> 定義樣本計算機代碼。 4 5
<script> 定義腳本。 4 5
<section> 定義 section。 5
<select> 定義可選列表。 4 5
<small> 定義小號文本。 4 5
<source> 定義媒介源。 5
<span> 定義文檔中的 section。 4 5
<strike> HTML 5 中不支持。定義加刪除線的文本。 4
<strong> 定義強調文本。 4 5
<style> 定義樣式定義。 4 5
<sub> 定義下標文本。 4 5
<summary> 定義 details 元素的標題。 5
<sup> 定義上標文本。 4 5
<table> 定義表格。 4 5
<tbody> 定義表格的主體。 4 5
<td> 定義表格單元。 4 5
<textarea> 定義 textarea。 4 5
<tfoot> 定義表格的腳注。 4 5
<th> 定義表頭。 4 5
<thead> 定義表頭。 4 5
文/丁向明
做一個有博客的web前端自媒體人,專注web前端開發,關注用戶體驗,加我qq/微信交流:6135833
http://dingxiangming.com
使用自閉合標簽的寫法 小寫加下劃線
<template>
<my-owner-components />
</template>
為提高可讀性 組件應用時換行 按照 ref、class、傳入、傳出 順序書寫
<template>
<my-components
ref="myComponents"
class="home-my-components"
:data="data"
@changeHandle="changeHandle"
/>
</template>
在模版中 簡單情況使用表達式 復雜情況使用計算屬性或函數
<template>
<!-- 簡單情況 -->
<div v-show="data.type === 1">
...
</div>
<!-- 復雜情況 -->
<div v-show="getTypeShow(data)">
...
</div>
</template>
<script>
export default {
methods: {
/**
* ***顯示判斷
* @param data **
*/
getTypeShow(data) {
return data.type === 1 && ...
}
}
}
</script>
避免過多重復代碼 果超過三行類似的代碼 配置數據再循環遍歷
根據元素嵌套規范 每個塊狀元素獨立一行 內聯元素可選
<template>
<!-- 情況1 -->
<div>
<h1></h1>
<p></p>
<p><span></span><span></span></p>
</div>
<!-- 情況2 -->
<div>
<h1></h1>
<p></p>
<p>
<span></span>
<span></span>
</p>
</div>
</template>
v-show 不會改變dom樹 不會導致重新渲染 用于頻繁的切換顯示隱藏
v-if 會改變dom樹 會導致重新渲染 用于只控制一次顯示隱藏
<template>
<!-- 標簽注釋 -->
<div>
...
</div>
<!-- 組件注釋 -->
<my-owner-components />
</template>
CSS 屬性書寫順序 先決定定位寬高顯示大小 再做局部細節修飾
定位屬性(或顯示屬性 display) => 寬高屬性 => 邊距屬性(margin padding) => 背景 顏色 字體等修飾屬性的定義 這樣定義為了更好的可讀性 讓別人只要看一眼就能在腦海中浮現最終顯示的效果
.class-name {
position: fixed;
top: 100px;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
margin: 10px;
padding: 10px;
background-color: red;
border-radius: 2px;
font-size: 14px;
color: #000;
line-height: 1.42;
}
組件內部需要覆蓋UI框架樣式 必須在最外層組件加類名
<template>
<div class="input-container">
<el-input class="name-input"></el-input>
</div>
</template>
<style lang="scss">
.input-container {
.name-input {
.el-input__inner {
font-size: 16px;
}
}
}
</style>
以 / 注釋內容 / 格式注釋 前后空格 嵌套子類需要一個回車分割開
/* 注釋內容 */
.class-name {
width: 20px;
/* 這里需要換行 */
.class-name-l {
color: blue
}
}
<script>
export default {
name: 'ExampleName', // 這個名字推薦:大寫字母開頭駝峰法命名
props: {}, // Props 定義
components: {}, // 組件定義
directives: {}, // 指令定義
mixins: [], // 混入 Mixin 定義。
data () { // Data 定義。
return {
dataProps: '' // Data 屬性的每一個變量都需要在后面寫注釋說明用途,就像這樣
}
},
computed: {}, // 計算屬性定義。
watch: {}, // 屬性變化監聽器。
created () {}, // 生命鉤子函數,按照他們調用的順序。
mounted () {}, // 掛載到元素。
activated () {}, // 使用 keep-alive 包裹的組件激活觸發的鉤子函數。
deactivated () {}, // 使用 keep-alive 包裹的組件離開時觸發的鉤子函數
methods: { // 組件方法定義。
publicbFunction () {} // 公共方法的定義,可以提供外面使用
_privateFunction () {} // 私有方法,下劃線定義,僅供組件內使用。多單詞,注意與系統名字沖突!
}
}
</script>
函數/方法注釋必須包含函數說明,有參數和返回值時必須使用注釋標識,它的作者, 依賴關系和兼容性信息。
// 注釋
const userID = 24
const userID = 12 // 注釋
/*
* 針對下方代碼的說明
* 第一行太長寫第二行
*/
const aa = 1
/**
* @Description 加入購物車
* @Author luochen_ya
* @Date 2024-03-13
* @param {Number} goodId 商品id
* @param {Array<Number>} specs sku規格
* @param {Number} amount 數量
* @param {String} remarks 備注
* @returns <Promise> 購物車信息
*/
apiProductAddCard = (goodId, specs, amount, remarks) => {
return axios.post('***', { goodId, specs, amount, remarks })
}
/**
* @Description: 文件描述
* @Author: luochen_ya
* @Date: 2024-03-13
*/
按照小駝峰命名 首字母小寫
圖片就是img開頭 圖標就是icon開頭
method 方法命名不同于文件命名,盡量完整英文命名,語義表達需完整清楚
<script>
export default {
methods: { // 組件方法定義
publicbFunction () {} // 公共方法的定義 可以提供外面使用
_privateFunction () {} // 私有方法 下劃線定義 僅供組件內使用
}
}
</script>
import MyOwnerComponents from '@/components/MyOwnerComponents'
let userName = 'luochen_ya'
const userInfo = {
name: 'luochen_ya',
age: 24
}
const Constant = {
// 公用狀態
COMMON_STATUS_ENABLE = 1, // 啟用
COMMON_STATUS_DISABLE = 2, // 停用
}
class命名以小寫字母開頭 小寫字母、中劃線和數字組成 以下是一些常用到的 class的名字
├── api 所有api接口
├── assets 靜態資源
│ ├── fonts 全局公用字體
│ ├── icons 全局公用圖標
│ ├── images 全局公用圖片
│ └── styles 全局公用樣式
├── components 公用組件
│ ├── base 基礎組件
│ └── business 業務組件
├── constants 常量 統一管理
├── locales 多語言管理
├── plugins 插件 統一管理
├── router 路由 統一管理
│ └── index.js
├── store vuex 統一管理
│ ├── modules
│ ├── getters.js
│ └── index.js
├── utils 工具函數 統一管理
├── views 視圖目錄(所有業務邏輯的頁面)
可以直接使用eslint 強制統一代碼規范 還能規避一些語法錯誤 或者按照以下自己定義的去配置eslint來使用
以下是個人習慣 僅供參考
例
HTML 注釋:
<!--這是一個注釋,注釋在瀏覽器中不會顯示--><p>這是一個段落</p>
瀏覽器支持
所有主流瀏覽器都支持 <!--...--> 注釋標簽。
標簽定義及使用說明
<!--...--> 注釋標簽用來在源文檔中插入注釋。注釋不會在瀏覽器中顯示。
您可使用注釋對您的代碼進行解釋,這樣做有助于您在以后的時間對代碼的編輯。特別是代碼量很大的情況下很有用。
您也可以在注釋內容存儲針對程序所定制的信息。在這種情況下,這些信息對用戶是不可見的,但是對程序來說是可用的。一個好的習慣是把注釋或樣式元素放入注釋文本中,這樣就可避免不支持腳本或樣式的老瀏覽器把它們顯示為純文本。
<scripttype="text/javascript"><!--functiondisplayMsg(){alert("Hello World!")}//--></script>
注釋:命令行最后的兩個正斜杠(//)是 JavaScript 注釋符號。這確保了 JavaScript 不會執行 --> 標簽。
除了在源文檔中有非常明顯的作用外,許多 Web 服務器也利用注釋來實現文檔服務端軟件特有的特性。這些服務器可以掃描文檔,從傳統的 HTML/XHTML 注釋中找到特定的字符序列,然后再根據嵌在注釋中的命令采取相應的動作。這些動作可能是簡單的包括其他文件中的文本(即所謂的服務器端包含,server-inside include),也可能是復雜地執行其他命令去動態生成文檔的內容。
HTML 4.01 與 HTML5之間的差異
無。
標準屬性
<!--...--> 注釋標簽不支持任何標準屬性。
如需更多有關 HTML 標準屬性的信息,請訪問 標準屬性。
事件屬性
<!--...--> 注釋標簽不支持任何事件屬性。
如需更多有關 HTML 事件屬性的信息,請訪問 事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。