一、初步了解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>

登入後複製

1、頭部部分

#1）link：網頁標題的圖示

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

登入後複製

其中rel="icon"表示目前link的作用是連結網頁圖示

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>

登入後複製

# ########③###設定網頁的詳細信息，搜尋引擎時標題下面的一段文字！ ###############name="description" 表示這個meta標籤設定的是網頁的描述資訊；######### content="" 表示描述資訊的詳細內容！！ ######

<br>

登入後複製

###

<meta>

登入後複製

###

<br>

登入後複製

2、主体部分

1）标签的分类

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

2）块级标签

常见的块级标签有：

a.标题标签：

......

特点:h1最大，h6最小且自动加粗。

b.水平线标签：

c.段落标签：

d.换行标签：

e.引用标签：

要的cite属性表明引用的来源，一般为网址，且网址不会在网页中展示，浏览器一般显示为首行缩进

f.预格式标签：

登入後複製

浏览器默认显示样式：①显示为等宽字体

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

nbsp;html><meta>HTML基本块级标签

这是h1标签

这是h2标签

这是h3标签

这是h4标签

这是h5标签

这是h6标签

这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！ 这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！

这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！

if(entity != null){  
    tring result = EntityUtils.toString(entity,"UTF-8");//HttpEntity转为字符串类型  
    jsonObject = JSONObject.fromObject(result);//字符串类型转为JSON类型  
}

登入後複製

光明正大的不要脸！这段话就是抄的！你能咋地！

g.有序列表

h.无序列表

i.定义描述列表

一般只有一项: 可以有很多项; 132; 123

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

k.分区标签

可以包裹任何标签，也可以被包裹进任何标签。

nbsp;html><meta>HTML基本块级标签

登入後複製

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

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

这是dl列表的标题: 这是dl列表的描述项1; 这是dl列表的描述项2; 这是dl列表的描述项3

这是div里面的文字！！！

11111

3)行級標籤

常見的行級標籤：

（1）文字標籤span

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

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

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

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

【常用的引用標籤】

用來引用一段內容

用來引用一句話 常用來引用作品名、書名等 相同點：三個引用標籤，都用cite屬性表示引用來源 不同點：① 引用的內容不同。 blockquote->一段話，q->一句話，cite->作品名 ② 顯示的預設效果不同。 blockquote-> 預設整段向右縮排； q->預設加引號； cite->預設傾斜！

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

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

（5）圖片標籤img

① src屬性：表示圖片的路徑 [圖片路徑的合法方式] A.網路連結：由於圖片在其他網站，如果其他網站刪除圖片，我們也不能訪問，所以不建議使用這種方式； HTML的基本結構與標籤的初步了解

B.絕對路徑：使用絕對路徑的圖片，只有在本機使用file協定才能存取！所以，嚴禁使用這種方式！ HTML的基本結構與標籤的初步了解

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

#（6）超連結標籤a

##A、href屬性：表示超連結跳轉的頁面。

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

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

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

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

② 将超链接的href属性，设置为#加锚点名字 点击链接，跳转到top锚点位置 >>>页面间锚链接 ① 在新页面的指定位置中设置一个锚点，用那么属性表示锚点名字： a name="top">

② 将超链接的href属性，设置为“新页面地址#加锚点名字”： 点击链接，跳转到锚地.html的top锚点位置

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

登入後複製

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

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

5）表格

（1）表格table

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

使用CSS样式设置大小：

 E、align：设置表格在浏览器中的位置。不建议使用了。 可选值：left 表格居左 /center 表格居中/right 表格居右 F、bgcolor：背景色 bordercolor:边框颜色 background:背景图 background="img/computer.jpg" 背景色和背景图同时存在时，背景图会覆盖背景色 （3）tr与td常用属性 A、width：单元格宽度 height：单元格的高度 B、bgcolor：单元格的颜色 C、align:设置单元格中的文字，水平对齐方式。 left、center、right valign:设置单元格中的文字，垂直对齐方式。 top、middle、bottom D、 nowrap="nowrap" 当单元格文字过多时，设置单元格文字不断行显示。但是，会把表格的宽度撑大!!! （4）表格的跨行与跨列 ①跨列：在td上使用属性colspan="n"进行跨列。如果一个单元格跨n列，则，单元格右边的n-1个单元格需要去掉。 ②跨行：在td上使用属性rowspan="n"进行跨行。如果一个单元格跨n行，则，单元格下边的n-1个单元格需要去掉。