一、初步了解HTML

HTML是超文本標籤語言，瀏覽器則是用來「解釋和執行」HTML原始碼的工具。

HTML的基本結構

# 

nbsp;html><meta><title></title>

其中是文檔類型聲明，聲明這個文件必須是HTML5文件，讓瀏覽器按照HTML5準備進行解析，必須在HTML5中，必須要有，且是一定要寫在文件的最上方滴。

<span style="font-size: 16px"><span style="font-family: 宋体"> 是用来描述网页的一些关键信息。例如网页的配置、设置、关键字等等。</span>。</span><span style="font-size: 18px"><span style="font-size: 16px">。这些信息，大多在浏览器看不到，但是对网页的解析至关重要！</span><br></span>

<span style="font-family: 宋体; font-size: 16px">  则是所有的代码都写在其中。<br><span style="font-size: 18pt; background-color: #cc99ff">二、初步了解标签<br></span></span>

链接网页的小图标，网页选项卡上面的小图片

href="img/ss.gif "表示圖示的位址所在的位置

<link>

2)meta:用來描述網頁的各種資訊

<span style="font-family: 宋体; font-size: 16px; background-color: #ffffff"><span style="font-family: 宋体"><span style="line-height: 36px"><span style="color: #ff6600; background-color: #ffffff">①</span>其中<meta charset="utf-8">设置网页的编码格式为utf-8格式<br>常见的中文编码格式：GB2312：国标码，简体中文；GBK：扩展国标码，简体中文<br><span style="color: #ff0000">utf-8：万国码，兼容各种语言编码，常用！<br></span></span></span></span>

<meta>

<br>

<meta>

<br>

<meta>

<br>

2、主体部分

1）标签的分类

①块级标签：显示为块状，独占一行，自动换行。<br>②行级标签：在一行中，从左往右依次排列，不会自动换行。

2）块级标签 

常见的块级标签有：

a.标题标签：

b.水平线标签：

c.段落标签：

d.换行标签：<br>

e.引用标签：

f.预格式标签：

②代码中的换行，空格等元素可在浏览器中直接显示。<br>

nbsp;html><meta>
    
这是h1标签
这是h2标签
这是h3标签
这是h4标签
这是h5标签
这是h6标签
这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！
            
            哈哈啊哈哈哈啊哈哈哈哈啊哈！<br>这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！
这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！
if(entity != null){  
    tring result = EntityUtils.toString(entity,"UTF-8");//HttpEntity转为字符串类型  
    jsonObject = JSONObject.fromObject(result);//字符串类型转为JSON类型  
}  
光明正大的不要脸！这段话就是抄的！你能咋地！

g.有序列表<br>     

（order list）<br>     　　
1. ...
列表项可以有n多个<br>     　　
2. ...
<br>     　　
3. ...
<br>     

h.无序列表<br>     

(unorder list)<br>     　　
• ...
n多个<br>     　　
• ...
<br>     　　
• ...
<br>     

i.定义描述列表<br>     

<br>     　　

一般只有一项

（列表标题）<br>     　　

可以有很多项

（列表描述项）<br>     　　

132

<br>     　　

123

<br>     

g.组合标签 显示效果：上面是图片，下面是图片的标题，同时图片和标题前代缩进。<br>     

<br>     　　 图片<br>     　　 图片的标题。<br>     

k.分区标签

nbsp;html><meta>
    

• 这是无序列表第一项
• 这是无序列表第二项
• 这是无序列表第三项
• 这是无序列表第四项

        

1. 这是无序列表第一项
2. 这是无序列表第二项
3. 这是无序列表第三项
4. 这是无序列表第四项

        

这是dl列表的标题

这是dl列表的描述项1

这是dl列表的描述项2

这是dl列表的描述项3

        

        

这是div里面的文字！！！

11111

                

3)行級標籤

常見的行級標籤：

（1）文字標籤span

① span標籤只是包裹作用，沒有其他意義；<br> ② span作用與div類似，需配合CSS使用。只不過div是塊級標籤、span是行級標籤

<br>（2）強調標籤em與strong；傾斜標籤i；加粗標籤b；四之間的區別

① em和i都能傾斜。 strong和b都能加粗！但是，i和b只是單純的傾斜加粗，而em和Strong多了強調的語意。 <br> ② em和strong都表示強調，但strong強調的等級更高！ ！ <br> 注意：<br> 1、強調的目的：讓搜尋引擎知道網頁重點強調的內容！方便搜尋引擎顯示！ <br> 2、Strong和em都可以多層嵌套，表示強調程度的遞增！

（3）短引用標籤q：表示短引用 。       cite屬性：用於宣告引用的來源。

【常用的引用標籤】<br>

用來引用一段內容

（4）縮小標籤small：將字體縮小一號；big標籤：將字體放大一號。

注意：<br> ① small和big可以多層嵌套，直到字體達到最小或最大為止；<br> ② 這兩個標籤已經被淘汰，不建議使用。

（5）圖片標籤img 

① src屬性：表示圖片的路徑<br>  [圖片路徑的合法方式]<br>A.網路連結：由於圖片在其他網站，如果其他網站刪除圖片，我們也不能訪問，所以不建議使用這種方式；<br>  

<br>B.絕對路徑：使用絕對路徑的圖片，只有在本機使用file協定才能存取！所以，嚴禁使用這種方式！ <br>

<br>C.相對路徑：<br>a、 圖片與目前文件在同一層資料夾：直接寫圖片名稱<br> <br>b、圖片在目前文件的下一層資料夾：資料夾名稱/圖片名稱<br> <br>c、 圖片在目前文件的上一層資料夾： ../圖片名稱(../表示後退一層)<br> <br>但是，一定要注意：圖片必須包含在專案裡面，不能存取項目外的圖片。 <br><br><br>② height:圖片的高度    width：圖片的寬度<br>  <br><br> ③ title：圖片的標題，也就是滑鼠手指後看到的提示文字<br>#  < ;img src="img/icon.jpg" title="滑鼠指上後看到的提示文字" /><br><br> ④ alt: HTML的基本結構與標籤的初步了解<br>  <br><br>## ⑤ align：圖片周圍的文字相對於圖片如何對齊。 <br>   可選值：top->圖片頂部 center->圖片中間bottom->圖片底部<br>  12345

#（6）超連結標籤a

 ① 可以寫網址：<br>  這是超連結 a><br>

 ② 可以開啟本機的html檔案：<br>使用相對路徑決定檔案位址。與img標籤確定方式相同。 <br>  這是一個超連結<br>

B、title屬性：滑鼠指上後顯示的提示文字<br> 這是一個超連結<br>

C、target属性：设置新页面打开的窗口位置<br> 可选值：_self自身页面打开（默认）<br> _blank 新窗口打开<br> 这是一个超链接 <br><br>【超链接的特殊应用】<br> 1、功能性链接：（了解）<br> mailto://   点击链接给指定邮箱发送邮件<br> 点击发送邮件<br>tencent://message/?uin=1105093212"<br>还有：tell://手机端点击打电话<br>message://手机端点击发送短信<br>ftp://使用ftp协议进行文件的上传下载<br>2、锚点链接：<br>   >>>本页面锚链接<br> ① 在页面的指定位置中设置一个锚点，用那么属性表示锚点名字：<br> a name="top">

nbsp;html><meta>
        
        糖糖真帅！！！<br>
        这是em标签<br>这是strong标签<br>这是i标签<br>这是b标签<br>这是b标签<br>
        我是q标签引用
我是blockqoute的引用！！！！！
我是cite标签的引用！！<br>
        我比正常小两号<br>我比正常大一号<br>
        
              12345
        -->12345        点击发送邮件
点击123

4）块级标签与行级标签的区别

1、块级标签：默认宽度100%(占满一行)；<br> 块级标签自动换行(独占一行，右边不能有任何东西)；<br> 块级标签可以使用CSS设置宽度高度！<br><br> 2、行级标签：默认宽度由内容撑开(内容多宽、宽度就占多宽)；<br> 行级标签不会自动换行(一行当中，从左往右依次排列)；<br> 行级标签的宽度高度不能设置！

5）表格

（1）表格table

表格用table表示，表格中的每一行tr表示，一行中的每一列用td表示<br><br> th表示的是：表头。表头中的文字，默认为加粗居中。th要放在tr中，用于替换掉td。<br><br>（2）table的常用属性<br>A、border：给表格加边框。 默认给所有td加边框，并且给整个table加外边框。 当增大border的值时，td上的边框不变化，只有最外层大边框变宽。<br><br>B、cellspacing：单元格与单元格之间的距离。<br>   cellspacing="0" 表示单元格与单元格之间没有距离，但是边框线的宽度依然是两条线的宽度。<br><br>   [注意] 表格边框合并的CSS写法：<br>   style="border-collapse: collapse;"<br><br>这条CSS与cellspacing="0"有什么区别？<br>   cellspacing="0"仅仅是将单元格之间的距离调整为0，实际上单元格之间依然还是两条线；<br>   border-collapse: collapse; 是将表格相邻的两条边框进行合并处理，只有一条线存在。(一旦边框合并，cellspace属性将会失效。)<br><br><br>C、cellpadding：单元格中的文字与单元格边框的距离。<br><br>D、 height：表格的高度<br>   width：表格的宽度<br><br>  使用表格宽、高属性设置大小：<br>  

nbsp;html><meta>

三、寫在後面的話

第一次接觸博客，第一發文內心還是有些小激動的，對於剛接觸不久程式碼的我，就覺得程式碼是個神奇的地方，而且既神奇又覺得很好玩。

之前就一直覺得這些東西很深奧，感覺是我所觸及不到的，但是當我接觸到後，還是挺喜歡的。

最後請各位多多關照。

# 

#

以上是HTML的基本結構與標籤的初步了解的詳細內容。更多資訊請關注PHP中文網其他相關文章！