溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“java web的HTML和CSS知識點有哪些”，在日常操作中，相信很多人在java web的HTML和CSS知識點有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”java web的HTML和CSS知識點有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
<form> 表單標簽，在html頁面創建一個表單，表單標簽在瀏覽器上沒有任何顯示。如果數據需要提交到服務器，負責收集數據的標簽必須放在表單標簽體內容。
action屬性：請求路徑，確定表單提交到服務器的地址(路徑)
method屬性：請求方式。常用的取值：get、post
get:默認值
提交的數據追加在請求路徑上。例如：/1.html?username=alex&password=1234,數據格式k/v，追加是使用?連接，之后每一對數據使用&連接
因為請求路徑長度有限，所有get請求提交的數據有限。
post：
提交的數據不再請求路徑上追加(既不顯示在地址欄上)
提交的數據大小不顯示
<body> <!-- 表單 --> <form action="" method=""> <!-- 此處的內容可能被提交到服務器 --> </form> <!-- 此處的內容在<form>標簽外部，此處數據不能提交到表單 --> </body>
<input> 標簽用于獲得用戶輸入信息，type屬性值不同，收集方式不同。最常用的標簽。
rype屬性
text：文本框，單行的輸入字段，用戶可在其中輸入文本。默認寬度為20個字符
password：密碼框，密碼字段。該字段中的字符以黑圓顯示。
radio：單選框，表示一組互斥選項按鈕中的一個。當一個按鈕被選中，之前選中的按鈕就變為非選中的。
submit：提交按鈕。提交按鈕會把表單數據發送到服務器。一般不寫name屬性，否則將"提交"兩個字提交到服務器。
因為不同項目需要的字段不同，所以我沒有把所有的表單元素寫出來，以下標簽使用也需要大家掌握。
checkbox：復選框
filee：文件上傳組件，提供"瀏覽"，按下可以選擇需要上傳的文件。
hidden：隱藏字段，數據會發送給服務器，但是瀏覽器不進行顯示。
reset：重置按鈕。將表單恢復到默認值。
image：圖像提交按鈕，通過src給按鈕設置圖片。
button：普通按鈕，常用于與JavaScript結合使用。
name：元素名，如果需要表單數據提交到服務器，必須提供name屬性值，服務器通過屬性值獲得提交的數據。
value：設置input標簽的默認值。submit和reset按鈕提交數據
size：大小
checked屬性：單選框或者復選框被選中。
readonly：是否只讀
disabled：是否可用
maxlength：允許輸入的最大長度
<select> 下拉列表。可用進行單選或多選。需要使用子標簽<option>指定列表項
name 屬性：發送給服務器的名稱
multiple屬性：不寫默認單選，取值為"multiple"表示多選
size屬性：多選時，可見選項的數目。
<option> 子標簽：下拉列表中的一個選項(一個條目)
selected:勾選當前列表項
value:發送給服務器的選項值。
<textarea> 文本域。多行的文本輸入控件。
cols屬性：文本域的列數
rows屬性：文本域的行數
<button type="button|reset|submit"> 按鈕標簽一般很少使用，提供"普通|重置|提交"功能，不同的瀏覽器默認值不同。
div就是html一個普通標簽，進行區域劃分。特性：獨占一行。獨自不能實現復雜效果。必須結合CSS樣式進行渲染。
div通常其是塊級元素
<div> 可定義文檔中的分區或節（division/section）。 <div> 標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關聯。如果用 id 或 class 來標記 <div>，那么該標簽的作用會變得更加有效。
CSS通常稱為CSS樣式或層疊樣式表，主要用于設置HTML頁面中的文本內容(字體、大小、對齊方式等)、圖片的外形(高寬、邊框樣式、邊距等)以及版面的布局等外觀顯示樣式。
CSS可以使HTML頁面更好看，CSS色系的搭配可以讓用戶更舒服，CSS+DIV布局更加靈活，更容易繪制出用戶需要的結構。
CSS(Cascading Style Sheets):指層疊樣式表
樣式：給HTML標簽添加需要顯示的效果。
層疊：使用不同的添加方式，給同一個HTML標簽添加樣式，最后所有的樣式都疊加到一起，共同作用于該標簽。
使用HTML時，需要遵從一定的規范。CSS亦如此，想要熟練的使用CSS對網頁進行修飾，首先需要了解CSS樣式規則。具體格式如下
選擇器{屬性1:屬性值;屬性2:屬性值;..}在上面的樣式規則中，“選擇器”用于指定CSS樣式作用的HTML對象，花括號內是對該對象設置的具體樣式。屬性和屬性值以鍵值對方式出現，使用英文冒號“:”分隔。多個屬性之間使用英文分號“;”分隔。例如：
<style>
h3{
color: red;
font-size: 100px;
}
</style>初學者在書寫CSS樣式時，除了要遵循CSS樣式規則，還必須注意CSS代碼結構中的幾個特點，具體如下：
CSS樣式“選擇器”嚴格區分大小寫，“屬性”和“屬性值”不區分大小寫。
多個屬性之間必須用英文狀態下的分號隔開，最后一個屬性后的分號可以省略，但是，為了便于增加新樣式最好保留。
如果屬性的值由多個單詞組成且之間包含空格，則必須為這個屬性值加上英文狀態下的引號。例如：
p{font-family:"Times New Roman";}在編寫CSS代碼時，為了提高代碼的可讀性，通常會加上CSS注釋，例如：
/* 這是css注釋文本，此文本不會顯示在瀏覽器窗口中 */
在CSS代碼中空格是不被解析的，花括號以及分號前后的空格可有可無。因此，可以使用空格鍵、Tab鍵、回車鍵等對樣式代碼進行排版，即所謂的格式化CSS代碼，這樣可以提高代碼的可讀性。例如：
h2{color: red; font-size: 20px;}和
<style>
h2{
color: red; /* 定義字體大小屬性 */
font-size: 20px; /* 定義顏色屬性 */
}
</style>上述兩段代碼所呈現的效果是一樣的，但是，第二種書寫方式的可讀性更高。需要注意的是，屬性的值和單位之間是不允許出現空格的，否則瀏覽器解析時會出錯。例如，下面這行代碼就是不正確的。
h2{ font-size:20 px;} /* 20和單位px之間有空格 */CSS使用非常靈活，即可以嵌入在HTML文檔中，也可以是一個單獨的文件，如果是單獨的文件，則必須以.css為擴展名。CSS和HTML的結合3種常用方式：
(1)行內樣式
行內樣式，是通過標簽的style屬性來設置元素的樣式。
<!-- 方式1：行內樣式
color ： 表示字體顏色
font-size ： 表示字體大小
-->
<a style="color: #f00; font-size: 30px;">小灰灰</a>
行內樣式通過標簽的屬性來控制樣式，這樣并沒有做到結構與表現(HTML展示結構、CSS顯示效果)相分離，所有一般很少使用。學習階段有時候為了快速編程，偶爾使用。
(2)內部樣式
內部樣式又稱為內嵌式，是將CSS代碼集中卸載HTML文檔的<head>頭部標簽體中，并且使用<style>標簽定義。
給當前html文件中的多個標簽設置樣式。
在html的<head>標簽中使用<style>標簽來定義CSS
<!-- 方式2：內部樣式
background-color ：表示背景色
-->
<style type="text/css">
body{
background-color: #ddd;
}
</style>
(3)外部樣式
外部樣式又稱為鏈入式，是將所有的樣式放在一個或多個以.css為擴展名的外部樣式表文件中，通過<link>標簽將樣式連接到HTML文檔中。
<!-- 方式3：外部樣式 rel="stylesheet",固定值，表示樣式表 type="text/css"，固定值，表示css類型 href，表示css文件位置 font-family 表示使用的字體系列，多個字體使用逗號分隔。例如："字體1,字體2,字體3"，此時優先使用"字體1",如果"字體1"系統不存在，再使用"字體2"，以此類推。 --> <link rel="stylesheet" type="text/css" href="css/demo00.css"/>
鏈入式最大的好處是同一個CSS樣式表可以被不同的HTML頁面鏈接使用，同時一個HTML頁面也可以通過多個<link/>標記鏈接多個CSS樣式表。
想要將CSS樣式應用于特定的HTML元素，首先需要找到該目標元素。在CSS中，執行這一任務的樣式規則不符被稱為選擇器，本小節將對CSS基礎選擇器進行詳細地講解，具體如下：
標記選擇器是指用HTML標記名稱作為選擇器，按標記名稱分類，為頁面中某一類標記指定統一的CSS樣式。其基本語法格式如下：
標記名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }該語法中，所有的HTML標記名都可以作為標記選擇器，例如body、h2、p、strong等。用標記選擇器定義的樣式對頁面中該類型的所有標記都有效
例如：
<head>
<style type="text/css">
h2{
color: #F00;
font-size: 50px;
}
</style>
<meta charset="utf-8" />
<title>超鏈接</title>
</head>
<body>
<h2>小灰灰一號</h2>
<h2>小灰灰二號</h2>
<h2>小灰灰三號</h2>
</body>
標記選擇器最大的優點是能快速為頁面中同類型的標記統一樣式，同時這也是他的缺點，不能設計差異化樣式
id選擇器使用"#"進行標識，后面緊跟id名，其基本語法格式如下：
#id名{ 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }該語法中，id名即為HTML元素的id屬性值,大多數HTML元素都可以定義id屬性，元素的id值是唯一的，只能對應于文檔中某一個具體的元素。
例如：
<head>
<style type="text/css">
#demo1{
color: #0f0;
}
</style>
<meta charset="utf-8" />
<title>超鏈接</title>
</head>
<body>
<h2 id="demo1">小灰灰</h2>
</body>
類選擇器使用“.”(英文點號)進行標識，后面緊跟類名，其基本語法格式如下：
.類名{ 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }該語法中，id名即為HTML元素的class屬性值，大多數HTML元素都可以定義class屬性。類選擇器最大的優勢是可以為元素對象定義單獨或相同的樣式。
例如：
<head>
<style type="text/css">
.myClass{
font-size: 25px;
}
</style>
<meta charset="utf-8" />
<title>超鏈接</title>
</head>
<body>
<h2 class="myClass">小灰灰</h2>
</body>
類選擇器的高級用法：給指定的標簽設置class樣式
標簽.類名 { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }屬性選擇器，在標簽后面是有中括號標記，其基本語法格式如下：
標簽名 [標簽屬性='標簽屬性值'] {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}該選擇器，是對"元素選擇器"的擴展，對一組標簽進一步過濾。
例如：
<head>
<style type="text/css">
input[type="text"]{
background-color: yellow;
}
input[type="password"]{
background-color: green;
}
</style>
<meta charset="utf-8" />
<title>超鏈接</title>
</head>
<body>
<form action="" method="post">
<input type="text" id="" value="" />
<input type="password" name="" />
</form>
</body>
包含選擇器，兩個標簽之間使用空格，給指定父標簽的后代標簽設置樣式，可以方便在區域內編寫樣式。
父標簽 后代標簽{ 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }該選擇器，是對"元素選擇器"的擴展，對一個標簽內部所有后代標簽進行過濾。
<head>
<style type="text/css">
#d1 div{
color: red;
}
</style>
<meta charset="utf-8" />
<title>超鏈接</title>
</head>
<body>
<div id="d1">
<div id="d2">
小灰灰1
</div>
<span id="s1">
小灰灰2
</span>
</div>
</body>
border：設置邊框的樣式
格式：寬度 樣式 顏色
例如：style="border:1px solid #f00" ，1像素實邊紅色。
樣式取值：solid 實線，none 無邊， double 雙線 等
width、height：用于設置標簽的寬度、高度。
<head>
<style type="text/css">
div{
border: 1px solid #000; /* 1像素，實邊，黑色*/
width:200px;
height:200px;
}
</style>
<meta charset="utf-8" />
<title>超鏈接</title>
</head>
<body>
<div id="">
小灰灰
</div>
</body>
通常默認的排版方式，將頁面中的元素從上到下一一羅列，而實際開發中，需要左右方式進行排版，就需要使用浮動
選擇器{float:屬性值}
常用屬性值：
left:元素向左浮動
right:元素向右浮動
none:元素不浮動(默認值)由于浮動元素不再占用原文檔流的位置，所以它會對頁面中其他元素的排版產生影響。如果要避免影響，需要使用clear屬性進行清除浮動。
選擇器{clear:屬性值;}
常用屬性值：
left：不允許左側有浮動元素(清除左側浮動的影響)
right：不允許右側有浮動元素(清除右側浮動的影響)
both：同時清除左右兩側浮動的影響例如：
<head>
<meta charset="utf-8" />
<title>超鏈接</title>
</head>
<body>
<!-- 默認上下布局 -->
<div>
<div>區域1-1</div>
<div>區域1-2</div>
</div>
<hr />
<!-- 浮動左右布局 -->
<div>
<div style="float: left;">區域2-1</div>
<div style="float: left;">區域2-2</div>
</div>
<!-- 取消浮動，另起一行布局 -->
<div style="clear: both;"></div>
<hr />
<div>
<div style="float: left;">區域3-1</div>
<div style="float: left;">區域3-2</div>
<div style="float: left;">區域3-3</div>
</div>
</body>
HTML提供豐富的標簽，這些標簽被定義成了不同的類型，一般分為：塊標簽和行內標簽。
塊標簽：以區域塊方式出現。每個塊標簽獨占一整行或多整行。
常見的塊元素：<h2>、<div>、<ul>等
行內元素：不必再新一行開始，同時也不強迫其他元素在新的一行顯示。
常見的行內元素：<span>、<a>等
在開發中，希望行內元素具有塊元素的特性，需要使用display進行轉換
選擇器{ display:屬性值}
常用的屬性值：
inline:此元素將顯示為行內元素(行內元素默認的display屬性值)
block：此元素將顯示為塊元素(塊元素默認的display屬性值)
inline-block:將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。
none：此元素將被隱藏，不顯示，也不占用頁面空間。例如：
<head>
<style type="text/css">
span{
border: 1px solid #000;
width: 100px;
height: 40px;
}
</style>
<meta charset="utf-8" />
<title>超鏈接</title>
</head>
<body>
<!-- 默認顯示一行、邊框環繞，高寬沒有作用 -->
<span>顯示1-1</span>
<span>顯示1-2</span>
<!-- 每一行顯示，高寬有作用 -->
<span style="display: block;">顯示2-1</span>
<span style="display: block;">顯示2-2</span>
</body>
2.4.4 字體：color、font-size
color：顏色，字體顏色
例如：
<head> <meta charset="utf-8" /> <title>超鏈接</title> </head> <body> <div style="height: 50px;width: 200px;border: 1px solid #000;"> <a href="">點擊</a> <a href="" style="text-decoration: none;">點擊</a> </div> <div style="height: 50px;width: 200px;border: 1px solid #000;"> <a href="" style="line-height: 50px;">點擊</a> <a href="" style="color: red;">點擊</a> </div> </body>
<ul style="background-color: #999;color: #FFF;"> <li>點擊</li> <li>點擊</li> <li style="background-color: #000;">點擊</li> <li>點擊</li> </ul>
CSS框模型(Box Model)規定了元素框處理元素內容、內邊距、邊框和外邊距的方式。
例如，如果您希望所有h2元素的個邊都有10px的內邊距，只需要這樣：
h2{ padding:10px;}還可以按照上、右、下、左的順序分別設置各邊的內邊距，各邊均可以使用不同的單位或百分比值：
h2 {padding:10px 0.25em 2ex 20%}單邊內邊距屬性
也通過使用下面四個單獨的屬性，分別設置上、右、下、左內邊距：
padding-top
padding-right
padding-bottom
padding-left
border-top-style
border-right-style
border-bottom-style
border-left-style
margin-top
margin-right
margin-bottom
margin-left
到此，關于“java web的HTML和CSS知識點有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
