當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

Javaweb 第1天 HTML和CSS课程

發布時間：2025/7/14 HTML 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 Javaweb 第1天 HTML和CSS课程小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML和CSS課程

今日大綱

● 了解Java????Web開發

● HTML常用標簽

● CSS的使用

*************************************************************************************************

1.????了解Java Web開發

1.1????C/S 和 B/S程序的區別

1、C/S（Client----Server）程序就是在PC機上需要安裝或者綠色版的程序。 QQ、WOW、LOL、CF。

2、B/S（Browser---Server）程序就在瀏覽器上運行的程序（網站）。Sina，baidu，yahoo

3、C/S程序需要安裝，更新麻煩。

4、B/S不需要安裝，不需要更新，瀏覽器刷新即可。

5、APP：Application 目前基本上用來專指手機上面的應用程序。

1.2????web階段課程簡介

1.2.1????????第一部分

html：做網頁

css：美化網頁

javascript：操作網頁上元素

xml：主要用于框架技術的配置文件

mysql：數據庫，存放網站用戶的數據

jdbc：用java語言來操作mysql

servlet：用java語言做網站

session和cookies：主要是用來做用戶登錄

1.2.2????????第二部分

jsp：簡化servlet

DBUtil：簡化jdbc

jstl和el表達式：簡化jsp

過濾器和監聽器：增加網站功能

文件上傳和下載：增加網站功能

國際化：讓不同區域的客戶端訪問網站顯示不同的語言

*************************************************************************************************

2.????HTML快速入門

2.1????HTML的概念

HTML（Hyper Text Markup Language 超文本標識語言）

是w3c組織制定的一種用來制作超文本文檔的簡單標記語言。

w3c組織：萬維網聯盟。w3c制定了一些列的web相關規范（css,js,xml）。其中包括html。

官網：http://www.w3school.com.cn/ ，在官網中，可以去查看html的相關規范。

1、文本：txt中的內容？沒有任何格式的普通的文字信息。普通的字符串。

2、超文本：在html中，通過標記（標簽）把文本進行標記，它所展現出來的內容，不在僅僅是文本。可以有，圖片，音頻，超鏈接。

3、標記：標簽。<標簽名> ------標簽名是w3c組織定義好的。而我們學習html，就是學習w3c已經定義好的標簽。html就是由一系列的標簽做組成的。瀏覽器會把不同的標簽（標簽名不同的）顯示出不同的效果。

HTML文檔

用HTML編寫的超文本文檔稱為HTML文檔。

HTML 文檔包含了HTML 標簽及文本內容（html文件本身就是一個文本文檔，只不過是后綴名，擴展名不相同。html的擴展名是html、htm、xhtml

我們通常使用html作為擴展名，HTML文檔也叫做 web 頁面

HTML文檔的編寫方法：

1、手工直接編寫記事本等，存成.htm .html格式

2、使用可視化HTML編輯器Frontpage、Dreamweaver等

3、由Web 服務器（或稱HTTP 服務器）一方實時動態地生成。

*************************************************************************************************

2.3 使用記事本編寫HTML

2.3.1????????HTML示例

1、html本身----文本文件。新建文本文件。

2、更改文本文件的后綴名，html，htm，xhtml =======建議大家：使用html作為擴展名。

3、用文本編輯器編輯這個文件。（html是不需要編譯的。）

4、在瀏覽器中查詢效果。

2.3.2????????HTML標簽

標簽分為單標簽和雙標簽。

單標簽:<標簽名 /> ????????????后面的斜杠表示標簽的結束。通常叫做標簽的閉合。

雙標簽:<標簽名> 內容(普通的文字，或者其他標簽) </ 標簽名>

前面的標簽，叫做開始標簽

后面的標簽，叫做結束標簽

注意：書寫雙標簽的時候，把開始標簽和結束標簽同時書寫，然后再去書寫標簽的內容。防止少些結束標簽。

在html中。不區分大小寫的。建議大家以后都小寫。

標簽的屬性

1.什么是屬性

這里的屬性指的是標記的屬性

2.屬性語法

<標記名字屬性1 屬性2 屬性3 .....>

2.3.3????????HTML組成

<html> ------理解成html的開始；定義一個html文檔。整個頁面的開始

????<head>????????-----定義html中頭部的信息，不作為瀏覽器顯示的內容。（不會再瀏覽器的窗體中顯示。）

????????例如：頁面的描述，標題等等

????</head>

????<body>

????????定義了html 的主體。顯示在瀏覽器的內容。

????</body>

</html> ------理解成html的結束

代碼：

<html>

<head>

</head>

<body>

????<b>Hello</b>World

????<hr width='500px;'/>

</body>

</html>

*************************************************************************************************

2.4 使用MyEclipse編寫HTML

1、建立web工程

File -> New -> Web Project

選擇下一步（Next）、下一步（Next），到下面的界面時候注意：

點擊Finish（完成）

2、創建html文件

通常我們會在項目中的WebRoot目錄下創建html文件（頁面文件）

在WebRoot目錄點擊右鍵，選擇New -> HTML(Advanced Templates),

如果有的同學沒有就在最下面的Other里面找，Other里面的html位置為：

點擊Finish，HTML文件創建成功。

如不需要以MyEclipse可視化編輯模式打開，可以參照資料中的《myeclipse配置1.doc》中的 -- 4、更改html的默認打開方式進行修改

MyEclispe生成的HTML模版文件詳解：

3、在模版頁面基礎上編寫HTML代碼

body中的代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>寶寶心里苦</title>

</head>

<body>

????Hello

????<br />

????

????world

????<br />

</body>

</html>

4、運行：

在要運行的HTML文件上點擊鼠標右鍵，選擇MyEclispe -》 Open in Explorer

即可快速到達工作臺目錄，雙擊HTML文件即可通過瀏覽器方式打開運行

*************************************************************************************************

3.????HTML常用標簽

3.1????基本標簽

3.1.1????????注釋

注釋在頁面展現的時候看不見，但是在html源代碼中可以看見。

3.1.2????????標題

h后面的數字可以1~6，代表不同大小級別的標題

3.1.3????????水平線

<hr/>

"/>"表示單標簽的閉合----閉合表示結束。

3.1.4????????換行

<br/>

html代碼中按回車，頁面展示并不會真的換行，必需使用<br/>

3.1.5????????段落

<p>這里是一個段落</p>

HTML 會自動在段落前后添加一個額外的空行。

3.1.6????????字體

定義html中的字體的大小，顏色，以及字體類型（宋體，楷體）

屬性：

size：????????定義字體的大小

color：????定義字體的顏色

face：????????定義字體的類型-------需要用戶的電腦支持。如果不支持，就采用默認的字體。

顏色在網頁上有三種表示方法：

1、英語單詞

2、三原色 #顏值顏值顏值

3、rgb(0~225,0~225,0~225);

基本標簽代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

???? ?

</head>

<body>

???? ?

????<!-- 這里是注釋，

????可以單行可以多行 -->

???? ?

????

????<h1>用戶注冊</h1>

????<h2>用戶注冊</h2>

????<h6>用戶注冊</h6>

???? ?

????

????<hr width="300px;" align="left"/>

???? ?

????

????<br/>

???? ?

????

????<p>HTML 會自動在段落前后添加一個額外的空行。</p>

???? ?

????

????<font color="green" size="7" face="楷體">

????定義html中的字體的大小，顏色，以及字體類型（宋體，楷體）

????</font>

???? ?

????<font color="#aaaaaa">

????定義html中的字體的大小，22222222222

????</font>

???? ?

????<font color="rgb(255,255,0)">

????定義html中的字體的大小，22222222222

????</font>

???? ?

</body>

</html>

*************************************************************************************************

3.2????圖片和多媒體標簽

3.2.1????????圖片

img標簽，定義了一個圖片。（img是一個單標簽）

互聯網中存在很多的圖片資源，瀏覽器顯示的時候，找到img標簽，瀏覽器就會顯示出那個圖片

屬性

????????????src：指定圖片的位置

????????????width:定義圖片的寬度

????????????height :定義圖片的高度

????????????如果同時定義高度和寬度可能圖片會失真。

????????????定義其中的一個，圖片會按照原理的百分比進行縮放

????????????alt：鼠標放上去顯示文本，已經過期不能用的方法，現在用title來取代

????????????相對路徑的寫法：

????????????文件名???????? ????????當前目錄

????????????../文件名 ????????上一級目錄

目錄名/文件名????????指定目錄內的文件

3.2.2????????視頻（了解）

語法：<embed src="多媒體文件名稱" width=寬度 height=高度 loop=播放次數>

3.2.3????????背景音樂（了解）

語法：<bgsound src=背景音樂位置 loop=循環次數>

圖片標簽代碼：

????<img alt="這是一個兇猛老胡" src="img/a.jpg" width="200px;" />

????<img title='這是一個兇猛大老虎' src="img/a.jpg" width="200px;" height="200px;" />

???? ?

????

????<img src="http://img0.bdstatic.com/img/image/hotbaby-pc.jpg" />

*************************************************************************************************

3.3????超鏈接標簽

3.3.1????????基本超鏈接

語法：<a href=資源地址>鏈接文字</a>

3.3.2????????新開方式超鏈接

target屬性:用于指定打開鏈接的目標窗口，默認屬性為原窗口，如果是打開一個新窗口，可以設置target=_blank。

3.3.3????????錨點

通俗簡單地說，比如一篇很長的文章，你想按分段精確來看，那就可以用到錨點了。

1、設置錨點：

<a name="mao">bbbbbb</a>

2、指定超鏈接跳轉到錨點：

<a href="#mao">跳轉到錨點連接</a>

3、不發生任何跳轉

超鏈接代碼：

????<a href="3.2.1.圖片.html">我的鏈接</a>

????<a href="http://www.baidu.com">百度</a>

????

????<a target="_blank" href="3.2.1.圖片.html">我的鏈接新開</a>

???? ?

????

????

????<a href="#mao">點我</a>

????

????<a href="#">點我2</a>

????<br /> 很長很長的文章

????<br />很長很長的文章

。。。。

????<a name='mao'>段落標記</a>

。。。。

????

????<br /> 很長很長的文章

????<br />很長很長的文章

*************************************************************************************************

3.4????列表標簽

3.4.1????????定義列表

基本語法：

<dl>

<dt>名稱<dd>說明

</dl>

<dt>定義組成列表項名稱部分

<dd>解釋說明定義的項目名稱

代碼：

????

????<dl>

????????<dt>聯系人

????????<dd>毛赟

????????<dt>電話

????????<dd>17077782591

????????<dt>住址

????????<dd>暴風城

????</dl>

3.4.2????????無序列表

基本語法:

<ul>

</ul>

ul標簽的type屬性：

type="disc": (默認)實心圓

type="circle" : 空心圓

type="square" : 實心矩形

代碼：

????<ul type="square">

????????<li>第一天</li>

????</ul>

3.4.3????????有序列表

基本語法

</ol>

Type:設定符號類型，屬性值有1,A,a,i,I

Start:設定列表的符號從第幾項開始

ol標簽的type屬性：

type="1": (默認)數字

type="a" : 英文字母

type="i" : 羅馬字母

代碼：

????

????<ol type="1" start="2" >

????????<li>第一天</li>

????</ol>

*************************************************************************************************

3.5????表格標簽（重點）

3.5.1????????基本表格

基本語法：

<table>

<tr>

</tr>

</table>

語法說明：

<table>:????定義表結構

<tr>:????????定義行結構

<td>:????????定義列結構

代碼：

????<table border="1">

????????<tr>

????????????<td>姓名</td>

????????????<td>性別</td>

????????</tr>

???????? ?

????????<tr>

????????????<td>大毛</td>

????????????<td>男</td>

????????</tr>

???????? ?

????????<tr>

????????????<td>二毛</td>

????????????<td>女</td>

????????</tr>

???????? ?

????</table>

3.5.2????????合并單元格

在td標簽上有連個屬性-----屬性值：數字，表示跨行或者跨列的個數。

1、colspan：跨列

代碼：

????<table border="1">

????????<tr>

????????????

????????????<td colspan="2">姓名加性別</td>

???????????? ?

????????</tr>

???????? ?

????????<tr>

????????????<td>大毛</td>

????????????<td>男</td>

????????</tr>

???????? ?

????</table>

2、rowspan：跨行

代碼：

????<table border="1">

????????<tr>

????????????<td>姓名</td>

????????????<td>性別</td>

????????</tr>

???????? ?

????????<tr>

????????????<td>大毛</td>

????????????

????????????<td rowspan="2">男</td>

????????</tr>

???????? ?

????????<tr>

????????????<td>二毛</td>

???????????? ?

????????</tr>

???????? ?

????</table>

3.5.3????????表頭

<th></th> 與td 效果一樣，變得粗一些，可以做表格第一行表示列名

代碼：

????<table border="1">

????????<tr>

????????????

????????????<th>姓名</th>

????????????<th>性別</th>

????????</tr>

????????<tr>

????????????<td>大毛</td>

????????????<td>男</td>

????????</tr>

????????<tr>

????????????<td>二毛</td>

????????????<td>女</td>

????????</tr>

????</table>

*************************************************************************************************

3.6????布局標簽

3.6.1????????div標簽

使用div去進行頁面的布局。后面會講到????div + css

代碼：

div會默認換行

3.6.2????????span標簽

代碼：

span不會默認換行

*************************************************************************************************

3.7????表單元素標簽（重中之重）

3.7.1????????表單標簽

基本語法：

</form>

name:設置表單名稱

method：設置表單發送的方法，可以是"post"或者"get"

action：設置表單發送地址

3.7.2????????文本框

value="" : 表示元素初始的默認值

3.7.3????????密碼框

3.7.4????????單選按鈕

checked="checked" : 表示該單選按鈕選中

3.7.5????????復選框

checked="checked" : 表示該復選框選中

3.7.6????????文件域

用于上傳文件

3.7.7????????下列列表

????????<option>選項一</option>

????????<option selected="selected">選項二</option>

????????<option>選項三</option>

</select>

selected="selected" ：表該下拉子選項被選擇

3.7.8????????文本域

<textarea rows="" cols="">很多文字的，需要多行的時候使用</textarea>

rows="" ：占幾行

cols="" ：占幾列

3.7.9????????普通按鈕

3.7.10????????提交按鈕

3.7.11????????重置按鈕

表單元素標簽代碼：

???????? ?

????????

????????用戶名：<input type="text" value="maoyun" /><br/>

???????? ?

????????

????????密碼：<input type="password" /><br/>

????????

????????性別：

????????男<input type="radio" name="sex" checked="checked" />

????????女<input type="radio" name="sex" /> <br/>

???????? ?

????????

????????興趣愛好：

????????唱歌<input type="checkbox" />

????????跳舞<input type="checkbox" checked="checked" />

????????吃飯<input type="checkbox" />

????????睡覺<input type="checkbox" />

????????<br/>

???????? ?

????????

????????用戶頭像:<input type="file">

????????<br/>

???????? ?

????????

????????所在地：

????????<select>

????????????<option>上海</option>

????????????<option selected="selected">北京</option>

????????????<option>廣州</option>

????????</select>

????????<br/>

???????? ?

????????

????????自我介紹：

????????<br/>

????????<textarea rows="5" cols="30">這家伙很懶，什么也沒留下</textarea>

????????<br/>

???????? ?

????????

????????<input type="button" value="注冊" />

???????? ?

????????

????????<input type="submit" value="提交" />

???????? ?

????????

????????<input type="reset" value="重置" />

????????</form>

*************************************************************************************************

3.8????字符實體

最常用的字符實體

顯示結果	描述	實體名稱	實體編號
?	空格	半角的不斷行的空白格（推薦使用） &ensp; 半角的空格 &emsp; 全角的空格
<	小于號	<	<
>	大于號	>	>
&	和號	&	&
"	引號	"	"
'	撇號	' (IE不支持)	'

其他字符實體

顯示結果	描述	實體名稱	實體編號
￠	分	¢	¢
￡	鎊	£	£
￥	日圓	¥	¥
§	節	§	§
?	版權	©	©
?	注冊商標	®	®
×	乘號	×	×
÷	除號	÷	÷

字符實體最主要的作用是可以網頁上顯示html特定的標簽語法字符，比如<br/>

代碼：

<br/>

????????

????????<br/>

???????? ?

????????

????????2222222     33333333333

????????2222222 &emsp;&emsp; 33333333333

*************************************************************************************************

3.9????框架標簽（了解）

框架標簽：把頁面分割成幾個部分。并且把其他頁面，引入該頁面。

frameset標簽：把頁面分割成若干個部分。負責切割頁面

rows屬性：把頁面分割成若干個行，

????rows="10%,90%"

用"逗號"分開，表示分割成幾行,并且指定每行的高度

例如 rows="20%，*" 把頁面分割成兩個部分。（把頁面分割成2行）

cols 屬性：把頁面分割成若干的列。用"逗號"分開，表示分割成幾列，表示每一列的寬度

舉例：cols=" 20%,*" 表示把頁面分割兩個部分。左右，左邊占有頁面的20% 寬度，剩下的右側的寬度

frame標簽：引入其他的頁面資源。書寫在frameset標簽內

frame的屬性介紹：

src屬性：引入其他頁面的資源路徑。

注意：不能和body標簽一起使用

代碼：

????

????<frame src="logo.html" />

????<frameset cols="20%,*">

????????<frame src="left.html">

????????<frame src="right.html">

????</frameset>

</frameset>

*************************************************************************************************

4.????CSS 快速入門

4.1????CSS簡介

CSS(Cascading Style Sheet,層疊樣式表)是一種標記性語言，與HTML是"表兄弟"。

樣式表技術誕生于1996年，需要瀏覽器支持，現在大多數瀏覽器都支持CSS。

它允許在html文檔中加入樣式，如字體類型、顏色、大小等。

對于設計者來說它是一個非常靈活的工具，可以將所有有關于文檔的樣式指定內容全部脫離出來，在行內定義、在標題中定義，甚至作為外部樣式文件供html調用而不必再把繁雜的樣式定義編寫在文檔結構中

CSS語法規則：

樣式符attributes1:values1;attributes2:values2;…

關于樣式表的語法，要注意以下幾個問題。

1、屬性和屬性值之間用":"分隔。

2、當有多個屬性時，用";"進行區分。

3、在書寫屬性時屬性之間使用空格換行等，并不影響屬性的顯示。

4、如果一個屬性有幾個值，則每個屬性值之間用空格分隔開。

*************************************************************************************************

4.3????CSS樣式加載方式（重點）

4.3.1????????行內樣式

幾乎所有的html標簽上都有style屬性

在style屬性中書寫css代碼：

代碼：

????

????<span style="color:red;background-color: blue;" >你好</span>

????<span style="color:red;background-color: yellow;" >你好</span>

注意：行內樣式的作用范圍只會影響到當前某行的html的元素

*************************************************************************************************

4.3.2????????內部樣式

使用上面的行內樣式，如果出現了多個標簽需要相同的樣式，這時會出現css代碼嚴重重復

在<head></head>中編寫樣式代碼，可以影響到整個頁面的相關元素

格式：

????CSS代碼

</style>

<head></head>中的代碼：

div{

????color: red;

????width: 100px;

????height: 100px;

????

????/*solid 實線 CSS的注釋*/

????border: 1px solid;

????

}

</style>

<body></body>中的代碼：

????<br/>

????<div>你好</div>

*************************************************************************************************

4.3.3????????外部樣式

使用上面的內部樣式，如果出現了多個頁面需要相同的樣式，這時會出現css代碼嚴重重復

外部樣式：通過外部定義一個css文件，定義全局的樣式，然后在html中將css文件引入進來，則會對此頁面產生效果。如果其它頁面需要，按照此方法即可。

1、編寫一個css文件（該文件的擴展名為.css）,寫入如下內容：

div{

????

????color: blue;

????width: 100px;

????height: 100px;

????

????/*solid 實線 CSS的注釋*/

????border: 1px solid;

????

}

2、在<head></head>中寫入：

????<link rel="stylesheet" type="text/css" href="css/mao.css" />

注意：也可以通過內部樣式的方式來引入外部樣式（了解）

????@IMPORT url("css/mao.css");

</style>

*************************************************************************************************

4.3.4????????加載方式的優先級

就近原則：誰離html元素距離近，就按誰的做

行內樣式 > 內部樣式 > 外部樣式

代碼：

div{

????

????color: blue;

????width: 100px;

????height: 100px;

????

????/*solid 實線 CSS的注釋*/

????border: 1px solid;

????

}

head：

????

????<style type="text/css">

????div{

????????color: yellow;

????}

????</style>

body：

????????????

????????????<div style="color: red">你好</div>

*************************************************************************************************

4.4????CSS樣式選擇器（重點）

樣式選擇器是指選擇樣式的方式，主要運用與內部樣式和外部樣式。

4.4.1????????標簽名選擇器

通過html標簽名來進行選擇

寫法：

標簽名{屬性：屬性值；。。。。}

標簽名：html中標簽的名字，例如div，span。。。img，a

作用：會把css代碼作用到所有的該標簽名的標簽。

<head></head>中的代碼：

div {

????color: red;

????width: 100px;

????height: 100px;

????/*solid 實線 CSS的注釋*/

????border: 1px solid;

}

input{

????color: red;

????width: 100px;

????height: 100px;

????/*solid 實線 CSS的注釋*/

????border: 1px solid;

}

</style>

<body></body>中的代碼：

????<br />

????<div>你好</div>

????<br/>

????<input type="text" />

*************************************************************************************************

4.4.2????????id選擇器

通過html元素標簽的id屬性來進行選擇。

語法：

#id的值{屬性：屬性值；屬性：屬性值；。。。。。}

id的值：每個html標簽，幾乎都有id的屬性。（可以唯一的定位到一個具體的標簽）。

作用范圍：標簽中的id值和 css選擇器中的id值相同，才會有作用

<head></head>中的代碼：

#div1{

????

????border: 1px solid;

????width: 100px;

????height: 100px;

????border-color: red;

}

#div2{

????

????border: 2px solid;

????width: 100px;

????height: 100px;

????border-color: blue;

}

</style>

<body></body>中的代碼：

????<div id="div1">div1</div>

????<br />

????<div id="div2">div2</div>

注意：id="xxx" 千萬不要加 "#" 符號

*************************************************************************************************

4.4.3????????類選擇器

根據html元素標簽的class屬性進行選擇。

語法：

class的值{屬性：屬性值；。。。。}

class的值：每個html標簽幾乎都有一個class屬性。和選擇器中的class的值去對應。

<head></head>中的代碼：

.beauty

{

????border: 5px solid;

????width: 100px;

????height: 100px;

????border-color: blue;

}

</style>

<body></body>中的代碼：

????<div class="beauty">你好</div>

????<br />

????<div>你好</div>

????<br />

????<input class="beauty" type="text" />

注意：class="xxx" 千萬不要加 "點" 符號

*************************************************************************************************

4.4.4????????選擇器的優先級別

具體原則：誰表現的更具體，影響的范圍越小，就按誰的做。

id > class > 標簽名

????

<head></head>中的代碼：

????/*標簽名選擇器*/

????div{

????????color: red;

????}

????

????/*class選擇器會覆蓋標簽名選擇器*/

????.beauty

????{

????????color: yellow;

????}

????

????/*id選擇器會覆蓋 class選擇器*/

????#div1

????{

????????color: blue;

????}

????

????</style>

<body></body>中的代碼：

*************************************************************************************************

5.????CSS特殊屬性（了解）

5.1????偽類

偽類：根據標簽的各種狀態，去修飾標簽的樣式。

語法：

選擇器：偽類｛屬性：屬性值；。。。。。｝

在支持 CSS 的瀏覽器中，鏈接的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態。

a:link ????( 有鏈接屬性的時候顯示 -- href 屬性 )

a:visited ( 鏈接地址被訪問過 )

　　a:hover ????( 鼠標移動到超鏈接上面 )

a:active ????( 鼠標點擊瞬間 )

<head></head>中的代碼：

a:LINK { /*有鏈接屬性的時候顯示 -- href 屬性*/

????color: black;

????text-decoration: none; /*去掉下劃線*/

}

a:VISITED { /*鏈接地址被訪問過*/

????color: gray;

????text-decoration: none; /*去掉下劃線*/

}

a:HOVER { /*鼠標移動到超鏈接上面*/

????color: red;

}

a:ACTIVE { /*鼠標點擊瞬間 */

????color: blue;

}

</style>

<body></body>中的代碼：

*************************************************************************************************

5.2????邊框屬性

盒子模型：在html中。每一個標簽占有一定的空間。這個空間通常是矩形（長方形）的。

邊框：????????border

外邊距：????margin

內邊距：????padding

<head></head>中的代碼：

#div1 {

????width: 400px;

????height: 400px;

????border: 5px solid;

????border-color: red;

}

#div2 {

????width: 200px;

????height: 200px;

????border: 15px solid;

????border-color: blue;

????margin: 10px;

????padding: 10px;

}

#div3 {

????width: 80px;

????height: 80px;

????border: 20px solid;

????border-color: yellow;

}

</style>

<body></body>中的代碼：

????????<div id="div2">

????????????<div id="div3"></div>

????????</div>

</div>

*************************************************************************************************

5.3????浮動屬性

float屬性作用：告訴瀏覽器該標簽是否浮動，以及如何浮動。目的：布局

5.3.1????????頁面整體布局????

float+div 可以做到頁面的布局

<head></head>中的代碼：

#div1 {

????height: 100px;

????background-color: red;

}

#div2 {

????width: 20%;

????float: left;/*從左浮動擺放*/

????background-color: green;

????height:800px;

}

#div3 {

????float: left;/*從左浮動擺放*/

????background-color: blue;

????height:800px;

????width: 80%;

}

</style>

<body></body>中的代碼：

????<div id="div1">div1</div>

????<div id="div2">div2</div>

????<div id="div3">div3</div>

*************************************************************************************************

5.3.2????????制作導航欄

<head></head>中的代碼：

li {

????list-style-type: none; /*去掉類型標記*/

????float: right; /*浮動靠右擺放*/

????margin: 10px;/*外邊據間隔*/

}

<body></body>中的代碼：

<ul>

????????<li><a href="#">注冊</a></li>

????????<li><a href="#">登錄</a></li>

????????<li><a href="#">購物車</a></li>

????</ul>

*************************************************************************************************

6.????總結

轉載于:https://www.cnblogs.com/beyondcj/p/6270849.html

總結

以上是生活随笔為你收集整理的Javaweb 第1天 HTML和CSS课程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： HTML基础：文本列表实例2（9）
下一篇：微信 WEUI 的 switch but