溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“java中的HTML知識點有哪些”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“java中的HTML知識點有哪些”文章能幫助大家解決問題。
1 概念
1.1什么是HTML
全稱：HyperText Markup Language
超文本標記語言，標準通用標記語言下的一個應(yīng)用。
“超文本”就是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
超文本標記語言的結(jié)構(gòu)包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關(guān)于網(wǎng)頁的信息，“主體”部分提供網(wǎng)頁的具體內(nèi)容。
通俗的說就是用來寫網(wǎng)頁的。
為什么可以上網(wǎng)？
瀏覽器將服務(wù)器上的內(nèi)容下載到本地，然后渲染成網(wǎng)頁，這樣就看到了網(wǎng)頁。
2 HTML的基本架構(gòu)
2.1快速入門，編寫第一個HTML網(wǎng)頁
[1]創(chuàng)建一個TXT文件
[2]將txt文件的后綴修改為htm或者html
關(guān)于HTM和HTML有區(qū)別嗎？
沒有任何區(qū)別，早先（不知道有多早）的操作系統(tǒng)只認識3位后綴名。所以為了兼容早先的操作系統(tǒng)，才有了htm這樣的后綴。實際的應(yīng)用這兩種沒有任何區(qū)別。
[3]打開文件
?、匐p擊打開，就是用默認的瀏覽器打開”瀏覽”。瀏覽就是查看網(wǎng)頁的效果。
?、谝跃庉嫷男问酱蜷_。
右鍵 –》
選擇任何一個開發(fā)工具都可以，我們選擇記事本（為了裝X）。
[4]編輯和測試
測試的瀏覽器選擇：
當然還有更多的瀏覽器。
我們選擇使用谷歌瀏覽器。
開始編輯HTML文件
在其中寫一句話“我的HTML”
刷新網(wǎng)頁：
其實HTML有專門的結(jié)構(gòu)。
Tips：html是不區(qū)分大小寫的。但是盡量小寫。
標簽：參照XML的標簽理解
結(jié)構(gòu)：
結(jié)構(gòu)展示：
3 HTML標簽的深度理解
Tips：HTML是純文本文件。所有的程序文件都是純文本文件。
以文本來修飾文本。
關(guān)鍵詞“語意”。
標簽實際上是表達一種語意。
比如：
添加CSS修改樣式：
HTML標簽只是表示一種語意。并不是規(guī)定標簽中的內(nèi)容應(yīng)該展示成什么樣子？展示的樣子基本上都是由CSS控制。
4 常用標簽
4.1結(jié)構(gòu)標簽
[1]文檔申明：
HTML5
<!DOCTYPE html>
HTML 4.01 Transitional
該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"">
[2]HTML標簽
HTML標簽是HTML文檔的根節(jié)點。
[3]HEAD標簽
表示HTML文檔的頭部，一般都是用來做一些文檔的配置或者說明。
比如title標簽：title標簽是用來表示文檔的標題的。
Meta
置頁面的內(nèi)容類型
<meta http-equiv="content-type" content="text/html;charset=utf-8">
配置網(wǎng)頁簡介
<meta name="deion" content="這里是我們的網(wǎng)頁的簡介......."/>
網(wǎng)頁的關(guān)鍵字
<meta name="keywords" content="極客營,極客教育，QQ靚號，。。。。。。。"/>
對CSS和JS的引用：
[4]body
所有要展示的內(nèi)容全部編寫在body標簽中。
4.2[插播]開發(fā)工具的選擇
?。◣缀跻呀?jīng)絕跡，不好用有bug）
HBuilder （好用，一個不錯的選擇）
subline （好用，神器） 我們的選擇
webstorm（好用）
將我們的HTML文件拖拽到開發(fā)工具中。
4.3 常用的標簽
[1]標題標簽
表示在文檔中添加一個標題。標題分為6級，分別是h2…h7。
案例：
特性： 默認黑體字。 默認自動換段落。獨占一行。
[2]P標簽 表示段落。
默認表現(xiàn)形式，就是換段。
默認特征：自動換行換段，獨占一行。
[3]特殊的控制標簽
換行標簽 br 自閉和標簽
HTML默認不認識換行符。
必須使用換行符號表示換行。
換行和換段的區(qū)別
空格標簽
在HTML中依然不認識空格。
無論寫多少空格，瀏覽器只認識一個空格。
解決辦法就是使用
雙引號的表示形式 "
因為雙引號在網(wǎng)頁中有特殊的意義，所以理論上不能直接編寫， 要使用特殊的符號代替。
Tips：在不產(chǎn)生歧義的情況下，直接編寫也是沒有問題的。
尖角號的表示形式 > <
尖角號在網(wǎng)頁有特殊的意義，表示標簽的開始和結(jié)束，所以不能直接編寫。
瀏覽器將<igeek>解釋成一個標簽了。但是不認識此標簽，所以不展示。
所以使用特殊符號代替尖角號：
在沒有歧義的情況下，一般也能解釋運行。例如：
版權(quán)符號 ?
[4]分割線 hr
其實就是一根線
4.4[插播]屬性
HTML 標簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。
屬性總是以名稱/值對的形式出現(xiàn)，比如：name="value"。
屬性總是在 HTML 元素的開始標簽中規(guī)定。
例如前面說過的meta標簽：
案例：
其中的3個屬性：
Size ： 表示線的厚度，使用數(shù)字表示像素。
Color： 表示線的顏色，可以使用多種表現(xiàn)形式。
Width： 表示線的長度，默認單位是像素。
4.5 [插播]color的值的編寫形式
所有地方使用到color時都是一樣的編寫形式。
用英文字母。 上面的例子中用的就是英文字母。
使用16進制的數(shù)字表示。（推薦使用）
例如：#FF0000
其中有6個數(shù)字，每兩個數(shù)字為一組，表示一種顏色，總共表示3中顏色，（RGB）。
每一種顏色的范圍是 00——FF
所有顏色最大為白色，所有顏色最小為黑色。
使用函數(shù)，這種形式往往在CSS中使用
rgb(255,0,0) 3個參數(shù)表示rgb顏色的占比。 范圍是0——255。
rgba(255,0,0,.2) 4個參數(shù)，前三個和上面的一樣。第四個參數(shù)表示透明度，.2就是0.2
4.6 Font標簽
注意：此標簽已經(jīng)屬于被廢棄的標簽。主要是用來控制字體的。但是字體其實應(yīng)該使用CSS控制，所以此標簽被廢棄了。我們學習純粹為了今天的作業(yè)。
<font size=”” face=”” color=””>極客營</font>
三個屬性：
Size ： 表示字體的大小。 范圍是 1——7。 默認是3 ，可以寫具體的數(shù)組，也可以寫 +2。
Face: 字體，編寫字體名稱。
Color： 表示字體的顏色。
案例：
4.7常用標簽中的超鏈接和圖片
[1]圖片標簽
<img src=> 可以顯示一張圖片。
S1:Src：指向圖片的位置（具體的物理位置，url地址。） 物理地址可以使用絕對路徑，也可以使用相對路徑。
案例：
通過url顯示網(wǎng)絡(luò)上的圖片：
S2 : 調(diào)整圖片大小的屬性
Width: 設(shè)置圖片的寬度。
Height：設(shè)置圖片的高度。
案例：
讓圖片不變形：讓尺寸按照比例變化。
S3 : 圖片提示的屬性
Alt：當圖片顯示失敗的時候的提示內(nèi)容。
Title：當鼠標懸浮在圖片上的時候的提示內(nèi)容。
案例：alt屬性
案例：title屬性
S4: 圖片的對其方式的屬性 align 默認是 bottom。
這里的對其方式其實是說圖片相對于同一行的其他內(nèi)容的對其方式。
案例： left
案例：right
案例：center
案例：top
案例：bottom
[2]超鏈接標簽
<a href=> 超鏈接內(nèi)容 </a>
其中的href指向連接資源。一個完整的超鏈接必須有HREF屬性。不然只是一個a標簽而已。
案例：
超鏈接同樣可以指向本地資源
Target屬性：主要是設(shè)置連接的內(nèi)容顯示在什么位置？
默認是_self 顯示在當前頁面的位置。
_blank :顯示在一個空白的選項卡中。
錨標記
常見的案例：章節(jié)的跳轉(zhuǎn)，回到頂部
5 結(jié)構(gòu)控制標簽
5.1列表
5.1.1有序列表
<ol>
<li>條目</li>
<li>條目</li>
<li>條目</li>
…….
</ol>
Type屬性：設(shè)置列表順序的表示形式（1，A，a，i，I）
Start屬性：設(shè)置列表的開始位置。
案例：
5.1.2無序列表
<ul>
<li>條目</li>
<li>條目</li>
<li>條目</li>
…….
</ul>
無序列表和有序列表的唯一區(qū)別就是沒有序號。
案例：
Type屬性：設(shè)置條目前面的圖標形式（circle，disc，square）
5.1.3 列表的嵌套使用
案例：
5.2表格
Table：表示一個表格
Tr：表示一行
Th：表示一個表頭的單元格
Td：表示一個普通的單元格
編寫一個三行三列的表格：
編寫方法就是逐行編寫。每行編寫固定的單元格即可。
Th標簽表示表頭，默認會自動居中加粗。
Table標簽的屬性：
Border： 設(shè)置表格的邊框， 默認是0。一旦設(shè)置了之后，表格外圍的邊框就是指定的數(shù)字，單元格的遍就是1.
Width和height：指定表格的寬度和高度的，默認情況下，各行各列都是按需分配。
Align：表格的對其方式 （left，right，center）。
Cellspacing屬性：設(shè)置單元格之間的距離。一般情況下都是0.
稱之為：間距
Cellpadding屬性：設(shè)置單元內(nèi)容和邊框之間的距離
稱之為：填充距。
不規(guī)則表格
需求：（三行三列）
第一行兩個單元格， 其余的都是三個單元格，第一行的第二個單元格跨兩列。
跨行表格：
每一個td的屬性：
Width：可以通過設(shè)置一個單元格的寬度而設(shè)置整列的寬度
Tips:單元格的寬度同樣可以使用百分比設(shè)置。
Align：設(shè)置單元格的水平對其方式
Valign：設(shè)置單元格元素的垂直對其方式
6 其他標簽
<b> 標簽規(guī)定粗體文本。
<strong> 標簽規(guī)定重點文本。同樣會讓文本粗體。
<i> 斜體文本。
<u> 下劃線。
。。。
以上標簽基本上都可以使用CSS實現(xiàn)。
7 案例（百度首頁）
<!DOCTYPE html>
<html>
<head>
<title>百度一下，你就知道</title>
<meta charset="utf-8">
</head>
<body>
<table width="100%" height="550" border="0">
<tr height="20">
<td align="right">
<a href=""><font color="#333333" face="黑體" size="2"><b>新聞</b></font></a>
<a href=""><font color="#333333" face="黑體" size="2"><b>hao123</b></font></a>
<a href=""><font color="#333333" face="黑體" size="2"><b>地圖</b></font></a>
<a href=""><font color="#333333" face="黑體" size="2"><b>視頻</b></font></a>
<a href=""><font color="#333333" face="黑體" size="2"><b>貼吧</b></font></a>
<a href=""><font color="#333333" face="黑體" size="2"><b>學術(shù)</b></font></a>
<a href=""><font color="#333333" size="2">登錄</font></a>
<a href=""><font color="#333333" size="2">設(shè)置</font></a>
</td>
<td bgcolor="#3388FF" align="center" width="70">
<font color="#ffffff" size="2" face="宋體">更多產(chǎn)品</font>
</td>
</tr>
<tr><td colspan="2" align="center" height="130" valign="bottom">
<img width="270" height="129" src=""/>
</td></tr>
<tr><td colspan="2" valign="top" align="center">
<br/>
<!-- <img src=""/> -->
<div style="border-color:#999; padding: 0px; margin: 0px; height: 30px; width: 680px" >
<input type="text" style="width: 550px; height: 30px; float: left" />
<input type="button" value="百度一下" style=" border:1px solid #3385FF; background-color:#3385FF ; color:#ffffff; width: 100px; float: left; height: 35px;" />
</div>
</td></tr>
<tr><td colspan="2" ></td></tr>
<tr><td colspan="2" height="100" align="center">
<img src=""/>
<br/>
<font color="#555555" size="2"><b>百度</b></font>
</td></tr>
<tr><td colspan="2" height="25" align="center">
<a href=""><font color="#999999" size="2">把百度作為首頁</font></a>
<a href=""><font color="#999999" size="2">關(guān)于百度</font></a>
<a href=""><font color="#999999" size="2">About Baidu</font></a>
<a href=""><font color="#999999" size="2">百度推廣</font></a>
</td></tr>
<tr><td colspan="2" align="center" height="25">
<font color="#999999" size="2">?2018 百度</font>
<a href=""><font color="#999999" size="2">使用百度前必讀</font></a>
<a href=""><font color="#999999" size="2">意見反饋</font></a>
<font color="#999999" size="2">京ICP證030173號<img src=""></font>
<a href=""><font color="#999999" size="2">京公網(wǎng)安備11000002000001號<img src=""/></font></a>
</td></tr>
</table>
</body>
</html>
關(guān)于“java中的HTML知識點有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
