整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
TML是一種用來描述網(wǎng)頁的標記性語言。學習HTML可能并不難，主要是要記一些HTML標簽和標簽代表的含義。下面PHP程序員雷雪松根據(jù)使用的情況，整理出平時常用的HTML標簽。
HTML基礎之HTML常用標簽-PHP程序員雷雪松的博客
<!--<!DOCTYPE> 是HTML5聲明，<!DOCTYPE> 必須是 HTML 文檔的第一行，位于 <html> 標簽之前。<!DOCTYPE>是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。-->
<!DOCTYPE html>
<html>
<!-- head標簽是所有頭部元素的容器。head標簽內(nèi)的元素可包含腳本、樣式表和提供頁面的元信息等等。以下標簽都可以添加到 head 部分：title、base、link、meta、script 以及style。頭部的內(nèi)容不會顯示在瀏覽器的。 -->
<head>
<!-- 設置字符集，如果字符集不對，可能導致亂碼。一般建議utf-8國際編碼 -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />
<!-- SEO相關標簽，title定義文檔的標題,百度建議一般不要超過32位,meta定義頁面關鍵詞和頁面的描述-->
<title>網(wǎng)頁標題</title>
<meta name="keywords" content="PHP程序員,技術博客,個人博客,雷雪松" />
<meta name="description" content="PHP程序員，雷雪松（Raykaeso）的博客是一個優(yōu)秀的個人技術博客。PHP程序員雷雪松的博客記錄了Linux學習，PHP開發(fā)與編程，Web前端開發(fā)，MySQL學習和教程，NoSQL數(shù)據(jù)庫教程以及個人的人生經(jīng)歷和觀點。" />
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="main.js"></script>
</head>
<!-- 正文部分，所有在瀏覽器上可見的內(nèi)容必須寫在body標簽內(nèi)部 -->
<body>
</body>
</html>
a、布局標簽
div標簽定義文檔中的分區(qū)或節(jié)（division/section），可以把文檔分割為獨立的、不同的部分，主要用于布局。
aside標簽的內(nèi)容可用作文章的側(cè)欄，<span style="color: #ff0000;">html5新增標簽</span>。
header標簽定義頁面的頭部（介紹信息），<span style="color: #ff0000;">html5新增標簽</span>。
section標簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分，<span style="color: #ff0000;">html5新增標簽</span>。
footer 標簽定義文檔或節(jié)的頁腳，通常包含文檔的作者、版權信息、使用條款鏈接、聯(lián)系信息等等，<span style="color: #ff0000;">html5新增標簽</span>。
article標簽規(guī)定文章獨立的其他內(nèi)容，比如：標題、內(nèi)容、評論，<span style="color: #ff0000;">html5新增標簽</span>。
b、文本標簽
h1-h6標簽可定義標題
p標簽定義段落
b/strong標簽加粗
em標簽來表示強調(diào)的文本，斜體
strong標簽表示重要文本
u標簽下劃線
s標簽刪除線
br標簽表示回車換行
hr標簽表示水平線
span標簽被用來組合文檔中的行內(nèi)元素。
blockquote標簽表示塊引用
pre標簽可定義預格式化的文本，保持原有格式的一種標簽。
sub標簽下標，
sup>標簽上標
表示一個空格
©表示版權符
<表示<
>表示>
c、a標簽定義超鏈接，指定頁面間的跳轉(zhuǎn)。鏈接可以指向外部鏈接或者頁面內(nèi)部id錨點，可以在當前頁面打開，新開窗口。
<a href="指向的鏈接地址或者網(wǎng)址#ID名" target="_blank|_self|_top|_parent">百度</a>
d、多媒體標簽
img標簽主要在網(wǎng)頁中插入圖像，可以定義圖片替換文本、顯示寬度和高度、是否帶邊框，建議等比例設置，否則圖像會變形。
<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屬性規(guī)定有序列表符號的類型。1 按數(shù)字有序排列，為默認值，（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標簽用于結(jié)合 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標簽內(nèi)。
<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" />數(shù)據(jù)庫
<span style="color: #ff0000;">注：checked="checked"可以簡寫成checked</span>
label標簽為input元素定義標注，如果您點擊label元素文本，就會觸發(fā)此input控件。
textarea標簽，設置文本區(qū)內(nèi)的可見行數(shù)和寬度
<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加鼠標單擊，可以連續(xù)選擇多個選擇，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標簽和屬性是不區(qū)分大小寫的，建議HTML標簽和屬性都小寫，屬性值必須用雙引號包圍。
b、HTML標簽都是以開始標簽起始，以結(jié)束標簽終止。大部分HTML標簽都是成對出現(xiàn)的，稱為雙標簽，比如：p標簽、div標簽，也有的HTML標簽在開始標簽中結(jié)束的標簽，稱為單標簽，比如：hr標簽、br標簽。大多數(shù) HTML 元素可擁有屬性，文本內(nèi)容都是寫在開始標簽與結(jié)束標簽之間。
c、HTML標簽之間盡量縮進與換行，每行代碼不要過長，方便閱讀和維護。
d、HTML標簽使用必須符合標簽嵌套規(guī)則。禁止a標簽嵌套a標簽，p標簽嵌套div標簽。
e、建議不使用HTML已經(jīng)廢棄的或者不贊成使用的標簽，少使用table布局、iframe框架嵌套以及flash播放器。
來源：PHP程序員雷雪松的博客 -HTML基礎之HTML常用標簽（http://www.leixuesong.cn/2045）
天是劉小愛自學Java的第76天。
感謝你的觀看，謝謝你。
話不多說，繼續(xù)html的學習：
昨天學習了最基礎的文本標簽及屬性，除此之外還有很多其它標簽，今天逐一學習。
a標簽有一個必不可少的屬性：href。href也就是超鏈接的意思。
下面編寫代碼，其中我每行之間用了兩個換行符（<br/><br/>），為了使頁面看起來相對而言更加美觀些。
①href="#"
作用是跳轉(zhuǎn)本頁面。
②href="對應網(wǎng)頁鏈接地址"
作用是跳轉(zhuǎn)到對應網(wǎng)頁。
③href="本地主頁"
這個呢是我自己電腦里面的一個html文件，自己可以訪問，但是別人就沒法訪問了。
②中的是只要網(wǎng)址能打開，所有人都能訪問。
④href="mailto:對應郵箱地址"
作用是用本地的郵箱客戶端，給填寫的郵箱發(fā)送郵件。
⑤target="_self"
self，自身的意思，作用就是在當前頁面中打開填入的網(wǎng)頁鏈接。
⑥target="_blank"
blank，空白的意思，作用就是在新窗口中打開填入的網(wǎng)頁鏈接。
⑦title="劉小愛的博客"
title，又是標題，這里的作用是：當我們將鼠標放在當前鏈接上的時候會出現(xiàn)一個標題提示。
代碼編寫完畢，做一個測試：
其中有個小常識：
左鍵直接點擊，會在當前頁面中打開對應鏈接。
Ctrl+左鍵點擊，會在新的頁面中打開對應鏈接。
1圖片標簽
image，圖像的意思，簡寫為img，圖片標簽也就是用img來表示。
①src="圖片地址"
如果是本地圖片，寫出圖片所在的路徑即可。
如果是網(wǎng)絡圖片，寫出其對應的鏈接即可。
其中width為寬度，height為高度，如果只設置其中一項，高度和寬度是等比例縮放的。
當然也可以寬度高度同時設置不同的值。
②alt="圖片丟失了啦"
如果圖片丟失了，就會顯示alt里面的內(nèi)容。
③title="我是劉小愛"
同a標簽一樣，當鼠標放在該圖片上時，會顯示title里的內(nèi)容。
2列表標簽
list，即列表的意思，其中又分為有序列表和無序列表。
有序列表：ordered list，簡寫就是ol。
①type="1"
數(shù)字排序，這也是默認的有序排序規(guī)則，所以可以省略不寫。
②type="a"
使用小寫字母排序，詳情見上圖。
③type="A"
使用大寫字母排序，詳情見上圖。
④type="Ⅰ"
使用羅馬字母排序，詳情見上圖。
⑤type="i"
使用字母i來排序，詳情見上圖。
無序列表：unordered list，簡寫就是 ul。
①type="disc"
disc，唱片、圓盤的意思，這是無序列表的默認屬性，所以可以省略不寫。
②type="circle"
circle，圓形的意思。
③type="square"
square，正方形的意思。
1基本介紹
table，表格的意思，這在學數(shù)據(jù)庫時就接觸過。
tr，tablerow的縮寫，表示的是表格中的行。
td，tabledata的縮寫，表示的是表格中的數(shù)據(jù)。
①單元格：cell：細胞的意思，在表格中就表示為一個單元格。
②表格外邊框：border，邊界的意思，用其可以設置外邊框的粗細。
③單元格外間距：cellspacing，用其設定外間距。
④單元格內(nèi)間距：cellpadding，用其設定內(nèi)間距。
其中width表示表格的寬度，并且外間距一般都會設定為0，不然都不像是個表格的樣子。
①caption標簽
標題的意思，用以說明表格的標題，我這邊還用了一個b標簽將其給加粗了。
②th標簽
table head的簡寫，也就是表格的表頭，它是默認居中加粗的。
當然我們也可以根據(jù)align屬性來設定排序位置（居左，居中，居右）。
此外，其中也可以使用thead、tbody、tfoot標簽來劃分表格。
這個稍作了解即可，感覺使用這些標簽和不使用這些標簽對表格本身沒有影響。
2表格快速模板設置
看到左上角那個黃燈后點擊，選擇Language Injection Settings，最后選擇html即可。
這樣設置后就可以使用表格快速創(chuàng)建模板了。
先輸入table>tr*4>td*4，再加上Tab鍵，即可快速創(chuàng)建一個4*4的表格。
3合并單元格
①rowspan
合并行的意思，相同的列不同的行。
“2”的意思就是表示是跨兩行，從第1行開始將第1行和第2行合并起來了。
既然如此，那么第2行總共也就只需要3列了，所以將其第2行第1列刪除。
②colspan
合并列的意思，相同的行不同的列。
“3”的意思就是表示是跨3列，從第2列開始將第2列第3列和第4列合并起來了。
既然如此，那么第3行總共也就只需要2列了，所以將第3行中第3列第4列刪除。
謝謝你的觀看。
如果可以的話，麻煩幫忙點個贊，謝謝你。
本標記語言，即HTML（Hypertext Markup Language），是用于描述網(wǎng)頁文檔的一種標記語言。以下是小編為大家整理的HTML基本的標簽。
注：HTML 標簽對大小寫不敏感，但推薦使用小寫！
基本
<html>…</html> 定義 HTML 文檔
<head>…</head> 文檔的信息
<meta> HTML 文檔的元信息
<title>…</title> 文檔的標題
<link> 文檔與外部資源的關系
<style>…</style> 文檔的樣式信息
<body>…</body> 可見的頁面內(nèi)容
<!--…--> 注釋
文本
<h1>...</h1> 標題字大小（h1~h6）
<b>...</b> 粗體字
<strong>...</strong> 粗體字(強調(diào))
<i>...</i> 斜體字
<em>...</em> 斜體字(強調(diào))
<u>...</u> 下劃線
<del>...</del> 刪除線(表示刪除)
<center>…</center> 居中文本
<ul>…</ul> 無序列表
<ol>…</ol> 有序列表
<li>…</li> 列表項目
<a href=”…”>…</a> 超鏈接
<font> 定義文本字體尺寸、顏色、大小
<sub> 下標
<sup> 上標
<br> 換行
<p> 段落
圖形
<img src=’”…”> 定義圖像
<hr> 水平線
表格
<table>…</table> 定義表格
<th>…</th> 定義表格中的表頭單元格
<tr>…</tr> 定義表格中的行
<td>…</td> 定義表格中的單元
其它
<form>…</form> 定義供用戶輸入的 HTML 表單
<frame> 定義框架集的窗口或框架
另加16進制顏色，但僅僅有16種顏色名可用英文字母，其余的要用16進制值。 記住哦！
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
