整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
eb前端入門到精通必會的標簽及屬性，這是老師花時間總結了圖片上的內容，做成了網頁版，以便查詢使用 ，如果對你學習有幫助，記得收藏點贊評論關注支持一下哦！
文檔聲明：<!DOCTYPE>
文檔結構標簽：html，head，head，body
功能標簽：mete
單詞表 | ||
分類 | 單詞 | 描述 |
文檔聲明 | <!DOCTYPE> | 用于文檔的聲明 <!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標簽之前。用于告訴瀏覽器此文檔的類型是什么。目前開發中常用的聲明是 <!DOCTYPE html>，表示聲明一個HTML5文檔。 注意它不屬于HTML標簽，而是一條指令 |
文檔結構標簽 | html | 每創建一個HTML文件，都需要創建html標簽對。除了聲明文檔類型的代碼，其他的所有內容都存放在html標簽對中 |
head | 定義文檔的頭部，用來包含網頁的配置（例如網頁的標題title，網頁的基礎配置meta都放在head中） | |
title | 定義網頁的標題，標題內容會顯示在瀏覽器的標簽欄上 | |
body | 定義網頁的主體，例如：網頁中的圖片、文字等 | |
功能標簽 | meta | 元標簽，用來表示網頁的基礎配置(如設置頁面關鍵字和描述，字符編碼的聲明) |
塊級元素可以獨占一行，可以設置寬高。有關塊級元素以及后面的內聯元素，在學習了后面的css相關課程之后會有所了解
包含標簽：h1~h6，p，div，ul li，ol li，dl dt dd，figure，figcaption，form
單詞表 | |
單詞 | 描述 |
h1 | 一級標題 |
h2 | 二級標題 |
h3 | 三級標題 |
h4 | 四級標題 |
h5 | 五級標題 |
h6 | 六級標題 |
p | 段落標簽，用來描述網頁中的段落內容 例如：一篇文章，每一個段落都可以使用一個p標簽；或者一段比較長的文本，也可以使用p標簽 |
div | 用于頁面區域的劃分。它就像一個容器，用來放某一個區域的內容 例如：整個網頁分成頭部、主體和尾部，那么頭部、主體、尾部的內容，要分別放在一個單獨的div中 |
ul | 定義無序列表 |
ol | 定義有序列表 |
li | 定義列表項，與ul或者ol配合使用。示例： <ul> <li>列表項一</li> <li>列表項二</li> </ul> |
dl | 定義列表標簽，配合dt和dd一起使用。示例： <dl> <dt></dt> <dd></dd> </dl> |
dt | 定義列表中的項目 |
dd | 描述列表中的項目 |
figure | 定義一段獨立的內容（不常用，了解即可） |
figcaption | 定義figure元素的標題（不常用，了解即可） |
form | 表單標簽，里面包含很多搜集信息的表單元素，如輸入框，復選框等 |
內聯元素不會自占一行，與其他內聯元素在同一行顯示，且寬高由內容撐起。
包含標簽：a，span，b，u，i，strong，em，mark，label，datalist
單詞表 | |
單詞 | 描述 |
a | 超鏈接標簽，用于從一張頁面鏈接到另一張頁面 |
span | 用來組合文檔中的行內元素，一般用來包裹文字 |
b | 字體加粗標簽（不常用，了解即可） |
u | 下劃線文本標簽（不常用，了解即可） |
i | 斜體文本標簽（不常用，了解即可） |
strong | 用于強調文本的標簽，字體會加粗（不常用，了解即可） |
em | 用于強調文本的標簽，字體變成斜體（不常用，了解即可） |
mark | 突出顯示文本的標簽，字體會有背景顏色，默認的是黃色（不常用，了解即可） |
label | 為 input 元素定義標注（標記）。label可設置for屬性，用于把 label 綁定到另外一個元素。即讓label的for屬性值與input的id屬性值相同時（id屬性在后面會學到，暫時了解）。當點擊label 元素時，瀏覽器就會自動將焦點轉到和標簽相關的input元素上。示例： <label for="male">Male</label> <input type="text" id="male" /> （上面的例子建議練習并在瀏覽器中測試，能更直觀的查看效果） |
datalist | 標簽/控件，需要結合option標簽使用（不常用，了解即可） |
可以設置寬高，但不獨占一行
包含標簽：img，audio，video，input，select，option，textarea
單詞表 | ||
分類 | 單詞 | 描述 |
特殊的內聯元素 （可以設置寬高，但不獨占一行） | img | 圖片標簽，用于在網頁中嵌入圖片 |
audio | 音頻標簽，用于在頁面中引入音頻 | |
video | 視頻標簽，用于在頁面中引入視頻 | |
input | 定義用戶可輸入數據的輸入字段。例如登錄頁面的用戶名和密碼框，都是使用input標簽 | |
select | 定義下拉列表 | |
option （塊元素，寫在這里是因為它需要跟select標簽一起使用） | 定義下拉列表項，需要與select配合使用。option標簽中，可以設置value值。示例： <select> <option value ="html">html</option> <option value ="css">css</option> <option value="JavaScript">JavaScript</option> </select> | |
textarea | 定義多行文本框，常用于留言框、備注框等 | |
標簽中的屬性 | lang | html標簽的屬性，用來標記網頁的語言；常見屬性值有："en"和"zh"；en代表英語, zh代表中文 |
charset | meta標簽的屬性，聲明頁面文檔使用的字符編碼類型 常用的屬性值有：UTF-8和GB2312 | |
type | 修改無序列表與有序列表默認的前導樣式（已被廢棄，了解即可） 1、type屬性寫在無序列表中，屬性值有： （1）disc：默認值，實心圓樣式 （2）circle： 空心圓樣式 （3）square：實心方塊樣式 2、type屬性寫在無序列表中，屬性值有： （1）1：默認值，數字編號 （2）A：大寫英文編號 （3）i：小寫羅馬數字編號 （4）I：大寫羅馬數字編號 （5）a：小寫英文編號 | |
start | 有序列表的屬性，指定列表編號的起始值，能修改有序列表標簽默認的前導樣式（不常用，了解即可） | |
reversed | 有序列表的屬性，指定列表中的條目是否倒序排列的（不常用，了解即可） | |
src | （1）img標簽的屬性，指定圖片的路徑 （2）audio標簽和video標簽也可以設置src屬性，指定音頻、視頻的路徑 | |
alt | img標簽的屬性，用來對引入的圖片進行文本描述 | |
width | 規定元素的寬度。此屬性不常用，了解即可。后續學習css課程，會使用css樣式設置元素寬度 | |
height | 規定元素的高度。此屬性不常用，了解即可。后續學習css課程，會使用css樣式設置元素高度。注意，height或者width如果省略其中一個屬性，則按照圖片原始比例縮放圖片 | |
href | a標簽屬性，規定該鏈接要跳轉到目標頁面的地址 | |
title | a標簽屬性，設置鼠標懸停的文本 | |
target | a標簽屬性，規定在何處打開鏈接文檔；如果屬性值為blank或_blank，會打開新的標簽頁 | |
controls | audio/video的屬性，用于顯示播放控件 | |
autoplay | audio/video的屬性，設置音頻/視頻自動播放 | |
loop | audio/video的屬性，設置音頻/視頻可以循環播放 | |
class | 所有標簽都可以使用這個屬性,用來定義元素的類名（后續學習css課程，會有詳細的講解） | |
action | form標簽的屬性，用來設置form表單的數據要提交到哪個地址。提交到哪個地址，后端開發會告訴我們（不常用，了解一下。提交數據常用ajax，后面會學習到的） | |
method | form標簽的屬性，用來設置表單的提交方式，常用的方式有get或post（不常用，了解即可） | |
rows | textarea標簽屬性，設置多行文本框有多少列 | |
cols | textarea標簽屬性，設置多行文本框有多少行 | |
list | datalist控件的屬性，二者結合，可以與輸入框綁定，為輸入框設置備選項（不常用，了解即可） | |
border | 邊框屬性，可為table添加邊框 | |
border-collapse | css樣式，通常給表格設置border-collapse：collapse；讓表格邊框合并，成為單線表格; table{ border-collapse: collapse; } | |
colspan | 表格標簽的屬性，實現跨列合并的效果，用來設置td或th跨列合并 | |
rowspan | 表格標簽的屬性，實現跨列合并的效果，用來設置td或th跨行合并 | |
cellspacing | 設置表格單元格內容與邊框之間的間隙（不常用，了解即可） | |
cellpadding | 設置兩個單元格之間的間隙（不常用，了解即可） | |
由于單詞被編譯，補充內容
單詞表 | ||
分類 | 單詞 | 描述 |
轉義字符 |
| 表示空格符號 |
`<` | 表示小于號“<” | |
`>` | 表示大于號“>” | |
`?` | 表示版權符號“?” | |
html5新增的語義化標簽
包含標簽：header，nav，main，aside，article，section，footer
單詞表 | ||
分類 | 單詞 | 描述 |
區塊標簽 （html5新增的語義化標簽） | header | 定義頁頭 |
nav | 定義導航 | |
main | 定義頁面的主體區域 | |
aside | 可用作文章的側欄 | |
article | 可用作文章的內容 | |
section | 可用作文檔的區域塊，類似于div | |
footer | 定義頁腳 | |
input元素中的屬性：
包含標簽：type，value，name，checked，placeholder，disabled，max，min，require
單詞表 | ||
分類 | 單詞 | 描述 |
input元素中的屬性 | type | 用來定義表單元素的類型。屬性值如下： （1）text：單行文本輸入框 |
（2）radio：單選按鈕 | ||
（3）checkbox：復選框 | ||
（4）password：密碼框 | ||
（5）button：普通按鈕，也可以直接寫成button按鈕，例如： | ||
（6）submit：提交按鈕 | ||
（7）reset：重置按鈕 | ||
（8）color：顏色控件（不常用，了解即可） | ||
（9）date：日期控件 | ||
（10）time：時間控件 | ||
（11）email：電子郵件輸入控件 | ||
（12）file：文件選擇控件，需要上傳本地文件時，可以使用它 | ||
（13）number：表示數字輸入控件 | ||
（14）range：表示拖拽條（不常用，了解即可） | ||
（15）search：t表示搜索框（不常用，了解即可） | ||
（16）url：表示網址輸入控件 | ||
value | 用于為input 元素設定值，value值一般是給后端發送數據時使用，后續學習了相關課程就會了解 | |
name | 規定 input 元素的名稱 | |
checked | 用來設置單選按鈕、多選按鈕的默認選中項 | |
placeholder | 表示提示文本，用來設置輸入框的提示信息，告訴用戶該輸入框需要輸入什么內容 | |
disabled | 用于禁用input元素，表示只讀 | |
max | max表示最大值，表示數字輸入控件（即type="number"的input元素）允許輸入的最大值 | |
min | min表示最小值，最小值，表示數字輸入控件（即type="number"的input元素）允許輸入的最小值 | |
require | 表示必填字段，約束某項內容是必填項，比如規定”用戶名“項，是必填項 | |
包含標簽：table，tr，td，th，thead，tbody，tfoot，caption
單詞表 | ||
分類 | 單詞 | 描述 |
表格標簽 | table | 表格標簽 |
tr | 表格行 | |
td | 表格列 | |
th | 標簽，可替代td標簽，用來設置表格的標題 | |
thead | 定義表格頭部 | |
tbody | 定義表格主體內容 | |
tfoot | 定義表格尾部 | |
caption | 設置表格的標題 | |
單詞表 | ||
分類 | 單詞 | 描述 |
聯文本語義標簽 | abbr | HTML Abbreviation 元素 (<abbr>) 表示，title屬性為縮寫提供擴展或描述。 |
mark | HTML 標記文本元素 (<mark>) 表示由于標記的段落在封閉上下文中的相關性或重要性而被標記或突出顯示以供引用或注釋的文本。 | |
cite | HTML Citation 元素 (<cite>) 用于描述對所引用創意作品的引用，并且必須包含該作品的標題 | |
small | 獨立于其風格表示，HTML <small> 元素代表旁注和小字，例如版權和法律材料。默認情況下，它會將其中的文本呈現小一種字體大小，例如從小到 x-small。 | |
time | HTML <time> 元素表示特定的時間段 | |
接下來我會和大家分享更多前端的學習總結知識體系，希望大家喜歡！記得點贊收藏哦！
權符號在網站上面經常可以看到,這個符號可以說是非常使用的一種特殊符號了,我們今天就來看看版權符號是怎么打的?.
1:如果我們不經常的這個符號,我們可以直接復制這個符號,這也是比較快速打這個符號的方法?
2:在電腦上面,如果是搜狗輸入法可以通過全拼的方法打出這個符號,我們輸入:banquan,即可以得到這個符號,效果如下
3:小編用手機試了下,打這個符號也是非常方便的,我們通過輸入全拼的符號也是可以快速打出來的了,現在的手機輸入法都是比較智能化了,效果如下
總結:關于版權符號,我們想要打這個符號是比較簡單的事情,上面的幾種方法可以讓我們非常快速打出這個符號,希望能幫助到大家!
TML是一種用來描述網頁的標記性語言。學習HTML可能并不難，主要是要記一些HTML標簽和標簽代表的含義。下面PHP程序員雷雪松根據使用的情況，整理出平時常用的HTML標簽。
HTML基礎之HTML常用標簽-PHP程序員雷雪松的博客
<!--<!DOCTYPE> 是HTML5聲明，<!DOCTYPE> 必須是 HTML 文檔的第一行，位于 <html> 標簽之前。<!DOCTYPE>是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。-->
<!DOCTYPE html>
<html>
<!-- head標簽是所有頭部元素的容器。head標簽內的元素可包含腳本、樣式表和提供頁面的元信息等等。以下標簽都可以添加到 head 部分：title、base、link、meta、script 以及style。頭部的內容不會顯示在瀏覽器的。 -->
<head>
<!-- 設置字符集，如果字符集不對，可能導致亂碼。一般建議utf-8國際編碼 -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />
<!-- SEO相關標簽，title定義文檔的標題,百度建議一般不要超過32位,meta定義頁面關鍵詞和頁面的描述-->
<title>網頁標題</title>
<meta name="keywords" content="PHP程序員,技術博客,個人博客,雷雪松" />
<meta name="description" content="PHP程序員，雷雪松（Raykaeso）的博客是一個優秀的個人技術博客。PHP程序員雷雪松的博客記錄了Linux學習，PHP開發與編程，Web前端開發，MySQL學習和教程，NoSQL數據庫教程以及個人的人生經歷和觀點。" />
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="main.js"></script>
</head>
<!-- 正文部分，所有在瀏覽器上可見的內容必須寫在body標簽內部 -->
<body>
</body>
</html>
a、布局標簽
div標簽定義文檔中的分區或節（division/section），可以把文檔分割為獨立的、不同的部分，主要用于布局。
aside標簽的內容可用作文章的側欄，<span style="color: #ff0000;">html5新增標簽</span>。
header標簽定義頁面的頭部（介紹信息），<span style="color: #ff0000;">html5新增標簽</span>。
section標簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分，<span style="color: #ff0000;">html5新增標簽</span>。
footer 標簽定義文檔或節的頁腳，通常包含文檔的作者、版權信息、使用條款鏈接、聯系信息等等，<span style="color: #ff0000;">html5新增標簽</span>。
article標簽規定文章獨立的其他內容，比如：標題、內容、評論，<span style="color: #ff0000;">html5新增標簽</span>。
b、文本標簽
h1-h6標簽可定義標題
p標簽定義段落
b/strong標簽加粗
em標簽來表示強調的文本，斜體
strong標簽表示重要文本
u標簽下劃線
s標簽刪除線
br標簽表示回車換行
hr標簽表示水平線
span標簽被用來組合文檔中的行內元素。
blockquote標簽表示塊引用
pre標簽可定義預格式化的文本，保持原有格式的一種標簽。
sub標簽下標，
sup>標簽上標
表示一個空格
©表示版權符
<表示<
>表示>
c、a標簽定義超鏈接，指定頁面間的跳轉。鏈接可以指向外部鏈接或者頁面內部id錨點，可以在當前頁面打開，新開窗口。
<a href="指向的鏈接地址或者網址#ID名" target="_blank|_self|_top|_parent">百度</a>
d、多媒體標簽
img標簽主要在網頁中插入圖像，可以定義圖片替換文本、顯示寬度和高度、是否帶邊框，建議等比例設置，否則圖像會變形。
<img src="圖片地址" alt="替換文本，圖片打不開的時候顯示" width="圖片寬度" height="高度" border="0" />
audio標簽定義聲音，比如音樂或其他音頻流。<span style="color: #ff0000;">html5新增標簽</span>。
<audio src="someaudio.wav">您的瀏覽器不支持 audio 標簽。</audio>
video標簽定義視頻，比如電影片段或其他視頻流。<span style="color: #ff0000;">html5新增標簽</span>。
<video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標簽。</video>
e、序列化標簽
ul和li無序列表標簽
<ul>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ul>
ol和li有序列表標簽，可以使用type屬性規定有序列表符號的類型。1 按數字有序排列，為默認值，（1、2、3、4）；a 按小寫字母有序排列，（a、b、c、d）；A 按字母大寫有序排列，（A、B、C、D）。i 按小寫羅馬字母有序，（i, ii, iii, iv）；I 按小寫羅馬字母有序，（I, II, III, IV）。
<ol>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ol>
dl標簽定義了定義列表（definition list），dl標簽用于結合 dt（定義列表中的項目）和 dd（描述列表中的項目）。
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
</dl>
f、表格標簽
table標簽和tr標簽，th標簽和td標簽，合并單元格。
<table width="100%" height="193" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#000000" background="">
<tr>
<th>標題</th>
<th>標題</th>
</tr>
<tr>
<!-- 合并橫向單元格 -->
<td colspan="2" nowrap="nowrap">&nbsp;</td>
</tr>
<tr>
<td></td>
<!-- 合并縱向單元格 -->
<td rowspan="2"> </td>
</tr>
<tr>
<td height="16"> </td>
</tr>
</table>
g、表單標簽
form標簽定義提交方式、提交地址、表單字符集以及如何對其進行編碼，需要提交的表單一定要放在form標簽內。
<form id="form1" name="form1" method="post|get" enctype="multipart/form-data" action="提交到的地址"></form>
input標簽用于搜集用戶信息
<input name="userName" type="text" maxlength="5" size="100" value="asdfasdfasfd" />
密碼，輸入的字符會被掩碼（顯示為星號或原點）
<input name="pwd" type="password" maxlength="5" size="100" value="" />
文件類型的表單，上傳文件時，form表單一定要設置為enctype="multipart/form-data"
<input type="file" name="file" />
隱藏表單
<input type="hidden" name="country" value="China" />
提交
<input type="submit" name="Submit" value="提交" disabled="disabled" />
重置
<input type="reset" name="Submit2" value="重置" />
radio單選
<input name="sex" type="radio" value="1" />男
<input name="sex" type="radio" value="2" checked="checked" />女
checkbox多選
<input name="skill" type="checkbox" value="1" checked="checked" />PHP
<input name="skill" type="checkbox" value="2" />前端
<input name="skill" type="checkbox" value="2" />數據庫
<span style="color: #ff0000;">注：checked="checked"可以簡寫成checked</span>
label標簽為input元素定義標注，如果您點擊label元素文本，就會觸發此input控件。
textarea標簽，設置文本區內的可見行數和寬度
<textarea name="content" cols="30" rows="10">大段文本輸入框</textarea>
button標簽定義一個按鈕
提交按鈕
<button type="submit" value="提交">提交</button>
重置按鈕
<button type="reset" value="重置">重置</button>
select標簽和option標簽下拉列表
單選菜單列表框
<select name="user">
<option value="1">ray</option>
<option value="2" selected="selected">raykaeso</option>
</select>
多選列表下拉框，shift加鼠標單擊，可以連續選擇多個選擇，CTRL+鼠標點擊，可以點擊多個。
<select name="user" size="10" multiple="multiple">
<option value="1">雷雪松</option>
<option value="2" selected="selected">ray</option>
<option value="3">raykaeso</option>
</select>
注:selected="selected"可簡寫成selected，表示選中
a、HTML標簽和屬性是不區分大小寫的，建議HTML標簽和屬性都小寫，屬性值必須用雙引號包圍。
b、HTML標簽都是以開始標簽起始，以結束標簽終止。大部分HTML標簽都是成對出現的，稱為雙標簽，比如：p標簽、div標簽，也有的HTML標簽在開始標簽中結束的標簽，稱為單標簽，比如：hr標簽、br標簽。大多數 HTML 元素可擁有屬性，文本內容都是寫在開始標簽與結束標簽之間。
c、HTML標簽之間盡量縮進與換行，每行代碼不要過長，方便閱讀和維護。
d、HTML標簽使用必須符合標簽嵌套規則。禁止a標簽嵌套a標簽，p標簽嵌套div標簽。
e、建議不使用HTML已經廢棄的或者不贊成使用的標簽，少使用table布局、iframe框架嵌套以及flash播放器。
來源：PHP程序員雷雪松的博客 -HTML基礎之HTML常用標簽（http://www.leixuesong.cn/2045）
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
