整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
果想開發一個網站，除了要精通后端開發語言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標記語言，它包含有眾多的標簽，我們可以通過這些標簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個統一的文檔中，這就形成了我們可以看得見的網頁。那么，HTML都有哪些常用的標簽呢？
html5文檔類型聲明：<!doctype html>
html4文檔類型聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這個標簽是html最外層的標簽，所有其它的HTML標簽都要放在這個標簽的內部。
<html>
<head></head>
<body></body>
</html>
在HTML標簽中，有的標簽是成雙成對的，如：<html></html>（如下圖）；而有的標簽是單個的，如：<hr>橫線標簽。
head頭部有以下幾種常用標簽：
meta：主要提供有關頁面的元信息。
link：用來定義文檔與外部資源的關系，最常用的是調用CSS樣式文件。
title：頁面標題的標簽。
script：用來調用JS文件或JS代碼。當然，script標簽也可以在body主體中使用。
1、塊級標簽。
塊級標簽的特性是：獨自占有一行；標簽的高與寬、邊距可以修改；沒有設置寬與高時，默認繼承父標簽。例如：
<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
前端頁面顯示的效果如下圖：
常用的塊級標簽有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。
2、內聯標簽。
內聯標簽與塊級標簽不同，它不能獨自占有一行，會與其它內聯標簽在同一樣展示；內聯標簽的高與寬、上下邊距是不能修改的，它里面的文字或圖片有多高，它就是多高。例如如下代碼：
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>
CSS樣式代碼跟塊級標簽的例子是一樣的，而顯示的效果就不一樣了，寬與高、上下邊距沒有效果。如下圖：
常用的內聯標簽有：span、a、b、strong、i、em 。
3、內聯塊級標簽。
內聯塊級標簽，既有一些內聯標簽的特性，也有一些塊級標簽的特點：它不能獨自占有一行，但是可以修改它的寬度和高度。例如下面這段代碼：
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">
CSS樣式代碼跟塊級標簽的那個例子仍然是一樣的，圖片的寬和高、上下邊距修改成功，而2個圖片不能獨自占有一行，而是在同一行。如下圖：
常用的內聯塊級標簽有：img、input、textarea。
4、區域標簽。
所謂區域標簽，就是主要用來劃分布局頁面區域的。如：頭部、主體內容、側邊欄、底部。這樣劃分的好處是：讓頁面布局更加清晰明了。
常用的區域標簽有：header（頭部）、footer（底部）、nav（導航）、aside（側邊欄）、section（主體）、article（獨立內容）。
5、表單標簽。
這個表單標簽我們也是會經常用到的，如：登錄網站的時候、提交數據的時候。如下圖的評論表單：
?表單常用的標簽有：form、input、select、option、textarea 。
以上就是我們開發網頁時，會常用到的HTML標簽。當然，HTML標簽遠不止這些，尤其是html5出來后，新增了許多的新標簽。但是，有些標簽在我們開發中很少用到，所以，這里就沒有做相應的介紹。
TML標簽：
所有內容都在<html></html>標簽之內；
<head></head>內放的是頭部信息，是對頁面的描述，不會直接顯示在頁面中。
<head></head>內的<title></title>中設置的是頁面的標題，<title></title>只能放在<head></head>中；
<body></body>是頁面的主體，大部分顯示內容都定義在這里。
HTML注釋：<!-- -->：
注釋不允許嵌套
html常用標簽:
h標簽（標題），HTML定義了<h1></h1>到<h6></h6>六個h標簽，分別表示不同大小的字體。h1最大，h6最小。
<br/>只是回車，<p>是段落。<p>前后會有比較大的空白，而<br/>則沒有。
<center>居中顯示.
<b>、<strong>粗體，<i>、<em>斜體。<u>下劃線。
<sub>2</sub>下標，如：H<sub>2</sub>O
<sup>2</sup>上標，如：10<sup>2</sup>
<font></font>字體標簽，<font color=“red“ size=“7” face=“隸書”>紅色</font>。color（設置顏色） size（1-7） face（設置字體,設置字體是注意用戶計算機中必須有該字體才能正常顯示）
<hr> color size（厚度） width（長度） align=left/center/right （默認為劇中顯示）
<pre> 預格式化 保持本色;
HTML特殊字符：<（小于號，less than）；>（大于號，greater than）； （空格）。
超鏈接：<a>標簽的一些常用屬性：href、title、target、name
插入圖片：<img src=“路徑”/>
列表：dl→(定義列表)，ul→(無序列表)， ol→(有序列表)。
表格：<table>；創建行：<tr>；創建單元格：<td>；表頁眉：<thead>；表主體：<tbody>；表頁腳：<tfoot>；表頭：<th>。
rowspan(合并行)、colspan（合并列）
<input>是主要的表單元素，type的可選值：submit（提交按鈕）、button（普通按鈕）、checkbox表單標簽：（復選框）、file（文件選擇框）、hidden（隱藏字段）、image（圖片按鈕）、password（密碼框）、radio（單選按鈕）、reset（重置按鈕）、text（文本框）。
meta標簽：（包括在head標簽中。主要用來描述頁面自身信息,元信息）
<meta name="keywords" content="C#學習資料,4k8k.net,.net開發,軟件開發,編程自學網"/>
<meta name="description" content="免費更新最新C#相關技術知識，主要包括：.net基礎,網頁前端,三層架構,SQL數據庫..."/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />網頁編碼
<meta http-equiv="Refresh" content="3" />三秒鐘后刷新此網頁。
<meta http-equiv="Refresh" content="3;url=http://www.4k8k.net" />三秒鐘后重定向到新網頁。
<meta http-equiv="Cache-Control" content="no-cache" /> 禁止瀏覽器緩存頁面。
<meta name="名字" content="值" />關于網頁的描述信息。
<meta http-equiv="名字" content="值" />模擬http響應頭信息。
C#編程自學_做最好的.net自學資料站_更多文章請訪問：http://www.4k8k.net/
歡迎訂閱。
天是劉小愛自學Java的第76天。
感謝你的觀看，謝謝你。
話不多說，繼續html的學習：
昨天學習了最基礎的文本標簽及屬性，除此之外還有很多其它標簽，今天逐一學習。
a標簽有一個必不可少的屬性：href。href也就是超鏈接的意思。
下面編寫代碼，其中我每行之間用了兩個換行符（<br/><br/>），為了使頁面看起來相對而言更加美觀些。
①href="#"
作用是跳轉本頁面。
②href="對應網頁鏈接地址"
作用是跳轉到對應網頁。
③href="本地主頁"
這個呢是我自己電腦里面的一個html文件，自己可以訪問，但是別人就沒法訪問了。
②中的是只要網址能打開，所有人都能訪問。
④href="mailto:對應郵箱地址"
作用是用本地的郵箱客戶端，給填寫的郵箱發送郵件。
⑤target="_self"
self，自身的意思，作用就是在當前頁面中打開填入的網頁鏈接。
⑥target="_blank"
blank，空白的意思，作用就是在新窗口中打開填入的網頁鏈接。
⑦title="劉小愛的博客"
title，又是標題，這里的作用是：當我們將鼠標放在當前鏈接上的時候會出現一個標題提示。
代碼編寫完畢，做一個測試：
其中有個小常識：
左鍵直接點擊，會在當前頁面中打開對應鏈接。
Ctrl+左鍵點擊，會在新的頁面中打開對應鏈接。
1圖片標簽
image，圖像的意思，簡寫為img，圖片標簽也就是用img來表示。
①src="圖片地址"
如果是本地圖片，寫出圖片所在的路徑即可。
如果是網絡圖片，寫出其對應的鏈接即可。
其中width為寬度，height為高度，如果只設置其中一項，高度和寬度是等比例縮放的。
當然也可以寬度高度同時設置不同的值。
②alt="圖片丟失了啦"
如果圖片丟失了，就會顯示alt里面的內容。
③title="我是劉小愛"
同a標簽一樣，當鼠標放在該圖片上時，會顯示title里的內容。
2列表標簽
list，即列表的意思，其中又分為有序列表和無序列表。
有序列表：ordered list，簡寫就是ol。
①type="1"
數字排序，這也是默認的有序排序規則，所以可以省略不寫。
②type="a"
使用小寫字母排序，詳情見上圖。
③type="A"
使用大寫字母排序，詳情見上圖。
④type="Ⅰ"
使用羅馬字母排序，詳情見上圖。
⑤type="i"
使用字母i來排序，詳情見上圖。
無序列表：unordered list，簡寫就是 ul。
①type="disc"
disc，唱片、圓盤的意思，這是無序列表的默認屬性，所以可以省略不寫。
②type="circle"
circle，圓形的意思。
③type="square"
square，正方形的意思。
1基本介紹
table，表格的意思，這在學數據庫時就接觸過。
tr，tablerow的縮寫，表示的是表格中的行。
td，tabledata的縮寫，表示的是表格中的數據。
①單元格：cell：細胞的意思，在表格中就表示為一個單元格。
②表格外邊框：border，邊界的意思，用其可以設置外邊框的粗細。
③單元格外間距：cellspacing，用其設定外間距。
④單元格內間距：cellpadding，用其設定內間距。
其中width表示表格的寬度，并且外間距一般都會設定為0，不然都不像是個表格的樣子。
①caption標簽
標題的意思，用以說明表格的標題，我這邊還用了一個b標簽將其給加粗了。
②th標簽
table head的簡寫，也就是表格的表頭，它是默認居中加粗的。
當然我們也可以根據align屬性來設定排序位置（居左，居中，居右）。
此外，其中也可以使用thead、tbody、tfoot標簽來劃分表格。
這個稍作了解即可，感覺使用這些標簽和不使用這些標簽對表格本身沒有影響。
2表格快速模板設置
看到左上角那個黃燈后點擊，選擇Language Injection Settings，最后選擇html即可。
這樣設置后就可以使用表格快速創建模板了。
先輸入table>tr*4>td*4，再加上Tab鍵，即可快速創建一個4*4的表格。
3合并單元格
①rowspan
合并行的意思，相同的列不同的行。
“2”的意思就是表示是跨兩行，從第1行開始將第1行和第2行合并起來了。
既然如此，那么第2行總共也就只需要3列了，所以將其第2行第1列刪除。
②colspan
合并列的意思，相同的行不同的列。
“3”的意思就是表示是跨3列，從第2列開始將第2列第3列和第4列合并起來了。
既然如此，那么第3行總共也就只需要2列了，所以將第3行中第3列第4列刪除。
謝謝你的觀看。
如果可以的話，麻煩幫忙點個贊，謝謝你。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
