當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

Javaweb 第1天 HTML和CSS课程

發(fā)布時(shí)間：2025/7/14 HTML 37 豆豆

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

HTML和CSS課程

今日大綱

● 了解Java????Web開(kāi)發(fā)

● HTML常用標(biāo)簽

● CSS的使用

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

1.????了解Java Web開(kāi)發(fā)

1.1????C/S 和 B/S程序的區(qū)別

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

2、B/S（Browser---Server）程序就在瀏覽器上運(yùn)行的程序（網(wǎng)站）。Sina，baidu，yahoo

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

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

5、APP：Application 目前基本上用來(lái)專(zhuān)指手機(jī)上面的應(yīng)用程序。

1.2????web階段課程簡(jiǎn)介

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

html：做網(wǎng)頁(yè)

css：美化網(wǎng)頁(yè)

javascript：操作網(wǎng)頁(yè)上元素

xml：主要用于框架技術(shù)的配置文件

mysql：數(shù)據(jù)庫(kù)，存放網(wǎng)站用戶的數(shù)據(jù)

jdbc：用java語(yǔ)言來(lái)操作mysql

servlet：用java語(yǔ)言做網(wǎng)站

session和cookies：主要是用來(lái)做用戶登錄

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

jsp：簡(jiǎn)化servlet

DBUtil：簡(jiǎn)化jdbc

jstl和el表達(dá)式：簡(jiǎn)化jsp

過(guò)濾器和監(jiān)聽(tīng)器：增加網(wǎng)站功能

文件上傳和下載：增加網(wǎng)站功能

國(guó)際化：讓不同區(qū)域的客戶端訪問(wèn)網(wǎng)站顯示不同的語(yǔ)言

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

2.????HTML快速入門(mén)

2.1????HTML的概念

HTML（Hyper Text Markup Language 超文本標(biāo)識(shí)語(yǔ)言）

是w3c組織制定的一種用來(lái)制作超文本文檔的簡(jiǎn)單標(biāo)記語(yǔ)言。

w3c組織：萬(wàn)維網(wǎng)聯(lián)盟。w3c制定了一些列的web相關(guān)規(guī)范（css,js,xml）。其中包括html。

官網(wǎng)：http://www.w3school.com.cn/ ，在官網(wǎng)中，可以去查看html的相關(guān)規(guī)范。

1、文本：txt中的內(nèi)容？沒(méi)有任何格式的普通的文字信息。普通的字符串。

2、超文本：在html中，通過(guò)標(biāo)記（標(biāo)簽）把文本進(jìn)行標(biāo)記，它所展現(xiàn)出來(lái)的內(nèi)容，不在僅僅是文本。可以有，圖片，音頻，超鏈接。

3、標(biāo)記：標(biāo)簽。<標(biāo)簽名> ------標(biāo)簽名是w3c組織定義好的。而我們學(xué)習(xí)html，就是學(xué)習(xí)w3c已經(jīng)定義好的標(biāo)簽。html就是由一系列的標(biāo)簽做組成的。瀏覽器會(huì)把不同的標(biāo)簽（標(biāo)簽名不同的）顯示出不同的效果。

HTML文檔

用HTML編寫(xiě)的超文本文檔稱(chēng)為HTML文檔。

HTML 文檔包含了HTML 標(biāo)簽及文本內(nèi)容（html文件本身就是一個(gè)文本文檔，只不過(guò)是后綴名，擴(kuò)展名不相同。html的擴(kuò)展名是html、htm、xhtml

我們通常使用html作為擴(kuò)展名，HTML文檔也叫做 web 頁(yè)面

HTML文檔的編寫(xiě)方法：

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

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

3、由Web 服務(wù)器（或稱(chēng)HTTP 服務(wù)器）一方實(shí)時(shí)動(dòng)態(tài)地生成。

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

2.3 使用記事本編寫(xiě)HTML

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

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

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

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

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

2.3.2????????HTML標(biāo)簽

標(biāo)簽分為單標(biāo)簽和雙標(biāo)簽。

單標(biāo)簽:<標(biāo)簽名 /> ????????????后面的斜杠表示標(biāo)簽的結(jié)束。通常叫做標(biāo)簽的閉合。

雙標(biāo)簽:<標(biāo)簽名> 內(nèi)容(普通的文字，或者其他標(biāo)簽) </ 標(biāo)簽名>

前面的標(biāo)簽，叫做開(kāi)始標(biāo)簽

后面的標(biāo)簽，叫做結(jié)束標(biāo)簽

注意：書(shū)寫(xiě)雙標(biāo)簽的時(shí)候，把開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽同時(shí)書(shū)寫(xiě)，然后再去書(shū)寫(xiě)標(biāo)簽的內(nèi)容。防止少些結(jié)束標(biāo)簽。

在html中。不區(qū)分大小寫(xiě)的。建議大家以后都小寫(xiě)。

標(biāo)簽的屬性

1.什么是屬性

這里的屬性指的是標(biāo)記的屬性

2.屬性語(yǔ)法

<標(biāo)記名字屬性1 屬性2 屬性3 .....>

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

<html> ------理解成html的開(kāi)始；定義一個(gè)html文檔。整個(gè)頁(yè)面的開(kāi)始

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

????????例如：頁(yè)面的描述，標(biāo)題等等

????</head>

????<body>

????????定義了html 的主體。顯示在瀏覽器的內(nèi)容。

????</body>

</html> ------理解成html的結(jié)束

代碼：

<html>

<head>

</head>

<body>

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

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

</body>

</html>

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

2.4 使用MyEclipse編寫(xiě)HTML

1、建立web工程

File -> New -> Web Project

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

點(diǎn)擊Finish（完成）

2、創(chuàng)建html文件

通常我們會(huì)在項(xiàng)目中的WebRoot目錄下創(chuàng)建html文件（頁(yè)面文件）

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

如果有的同學(xué)沒(méi)有就在最下面的Other里面找，Other里面的html位置為：

點(diǎn)擊Finish，HTML文件創(chuàng)建成功。

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

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

3、在模版頁(yè)面基礎(chǔ)上編寫(xiě)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、運(yùn)行：

在要運(yùn)行的HTML文件上點(diǎn)擊鼠標(biāo)右鍵，選擇MyEclispe -》 Open in Explorer

即可快速到達(dá)工作臺(tái)目錄，雙擊HTML文件即可通過(guò)瀏覽器方式打開(kāi)運(yùn)行

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

3.????HTML常用標(biāo)簽

3.1????基本標(biāo)簽

3.1.1????????注釋

注釋在頁(yè)面展現(xiàn)的時(shí)候看不見(jiàn)，但是在html源代碼中可以看見(jiàn)。

3.1.2????????標(biāo)題

h后面的數(shù)字可以1~6，代表不同大小級(jí)別的標(biāo)題

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

<hr/>

"/>"表示單標(biāo)簽的閉合----閉合表示結(jié)束。

3.1.4????????換行

<br/>

html代碼中按回車(chē)，頁(yè)面展示并不會(huì)真的換行，必需使用<br/>

3.1.5????????段落

<p>這里是一個(gè)段落</p>

HTML 會(huì)自動(dòng)在段落前后添加一個(gè)額外的空行。

3.1.6????????字體

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

屬性：

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

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

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

顏色在網(wǎng)頁(yè)上有三種表示方法：

1、英語(yǔ)單詞

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

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

基本標(biāo)簽代碼：

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

<html>

<head>

???? ?

</head>

<body>

???? ?

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

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

???? ?

????

????<h1>用戶注冊(cè)</h1>

????<h2>用戶注冊(cè)</h2>

????<h6>用戶注冊(cè)</h6>

???? ?

????

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

???? ?

????

????<br/>

???? ?

????

????<p>HTML 會(huì)自動(dòng)在段落前后添加一個(gè)額外的空行。</p>

???? ?

????

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

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

????</font>

???? ?

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

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

????</font>

???? ?

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

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

????</font>

???? ?

</body>

</html>

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

3.2????圖片和多媒體標(biāo)簽

3.2.1????????圖片

img標(biāo)簽，定義了一個(gè)圖片。（img是一個(gè)單標(biāo)簽）

互聯(lián)網(wǎng)中存在很多的圖片資源，瀏覽器顯示的時(shí)候，找到img標(biāo)簽，瀏覽器就會(huì)顯示出那個(gè)圖片

屬性

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

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

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

????????????如果同時(shí)定義高度和寬度可能圖片會(huì)失真。

????????????定義其中的一個(gè)，圖片會(huì)按照原理的百分比進(jìn)行縮放

????????????alt：鼠標(biāo)放上去顯示文本，已經(jīng)過(guò)期不能用的方法，現(xiàn)在用title來(lái)取代

????????????相對(duì)路徑的寫(xiě)法：

????????????文件名???????? ????????當(dāng)前目錄

????????????../文件名 ????????上一級(jí)目錄

目錄名/文件名????????指定目錄內(nèi)的文件

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

語(yǔ)法：<embed src="多媒體文件名稱(chēng)" width=寬度 height=高度 loop=播放次數(shù)>

3.2.3????????背景音樂(lè)（了解）

語(yǔ)法：<bgsound src=背景音樂(lè)位置 loop=循環(huán)次數(shù)>

圖片標(biāo)簽代碼：

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

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

???? ?

????

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

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

3.3????超鏈接標(biāo)簽

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

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

3.3.2????????新開(kāi)方式超鏈接

target屬性:用于指定打開(kāi)鏈接的目標(biāo)窗口，默認(rèn)屬性為原窗口，如果是打開(kāi)一個(gè)新窗口，可以設(shè)置target=_blank。

3.3.3????????錨點(diǎn)

通俗簡(jiǎn)單地說(shuō)，比如一篇很長(zhǎng)的文章，你想按分段精確來(lái)看，那就可以用到錨點(diǎn)了。

1、設(shè)置錨點(diǎn)：

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

2、指定超鏈接跳轉(zhuǎn)到錨點(diǎn)：

<a href="#mao">跳轉(zhuǎn)到錨點(diǎn)連接</a>

3、不發(fā)生任何跳轉(zhuǎn)

<a href="#">不跳轉(zhuǎn)</a>

超鏈接代碼：

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

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

????

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

???? ?

????

????

????<a href="#mao">點(diǎn)我</a>

????

????<a href="#">點(diǎn)我2</a>

????<br /> 很長(zhǎng)很長(zhǎng)的文章

????<br />很長(zhǎng)很長(zhǎng)的文章

。。。。

????<a name='mao'>段落標(biāo)記</a>

。。。。

????

????<br /> 很長(zhǎng)很長(zhǎng)的文章

????<br />很長(zhǎng)很長(zhǎng)的文章

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

3.4????列表標(biāo)簽

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

基本語(yǔ)法：

<dl>

<dt>名稱(chēng)<dd>說(shuō)明

</dl>

<dt>定義組成列表項(xiàng)名稱(chēng)部分

<dd>解釋說(shuō)明定義的項(xiàng)目名稱(chēng)

代碼：

????

????<dl>

????????<dt>聯(lián)系人

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

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

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

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

????????<dd>暴風(fēng)城

????</dl>

3.4.2????????無(wú)序列表

基本語(yǔ)法:

<ul>

<li>名稱(chēng)</li>

</ul>

ul標(biāo)簽的type屬性：

type="disc": (默認(rèn))實(shí)心圓

type="circle" : 空心圓

type="square" : 實(shí)心矩形

代碼：

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

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

????</ul>

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

基本語(yǔ)法

<li>項(xiàng)目名稱(chēng)</li>

</ol>

Type:設(shè)定符號(hào)類(lèi)型，屬性值有1,A,a,i,I

Start:設(shè)定列表的符號(hào)從第幾項(xiàng)開(kāi)始

ol標(biāo)簽的type屬性：

type="1": (默認(rèn))數(shù)字

type="a" : 英文字母

type="i" : 羅馬字母

代碼：

????

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

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

????</ol>

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

3.5????表格標(biāo)簽（重點(diǎn)）

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

基本語(yǔ)法：

<table>

<tr>

</tr>

</table>

語(yǔ)法說(shuō)明：

<table>:????定義表結(jié)構(gòu)

<tr>:????????定義行結(jié)構(gòu)

<td>:????????定義列結(jié)構(gòu)

代碼：

????<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標(biāo)簽上有連個(gè)屬性-----屬性值：數(shù)字，表示跨行或者跨列的個(gè)數(shù)。

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????布局標(biāo)簽

3.6.1????????div標(biāo)簽

使用div去進(jìn)行頁(yè)面的布局。后面會(huì)講到????div + css

代碼：

div會(huì)默認(rèn)換行

3.6.2????????span標(biāo)簽

代碼：

span不會(huì)默認(rèn)換行

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

3.7????表單元素標(biāo)簽（重中之重）

3.7.1????????表單標(biāo)簽

基本語(yǔ)法：

</form>

name:設(shè)置表單名稱(chēng)

method：設(shè)置表單發(fā)送的方法，可以是"post"或者"get"

action：設(shè)置表單發(fā)送地址

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

value="" : 表示元素初始的默認(rèn)值

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

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

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

3.7.5????????復(fù)選框

checked="checked" : 表示該復(fù)選框選中

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

用于上傳文件

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

????????<option>選項(xiàng)一</option>

????????<option selected="selected">選項(xiàng)二</option>

????????<option>選項(xiàng)三</option>

</select>

selected="selected" ：表該下拉子選項(xiàng)被選擇

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

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

rows="" ：占幾行

cols="" ：占幾列

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

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

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

表單元素標(biāo)簽代碼：

???????? ?

????????

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

???????? ?

????????

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

????????

????????性別：

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

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

???????? ?

????????

????????興趣愛(ài)好：

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

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

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

????????睡覺(jué)<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">這家伙很懶，什么也沒(méi)留下</textarea>

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

???????? ?

????????

????????<input type="button" value="注冊(cè)" />

???????? ?

????????

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

???????? ?

????????

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

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

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

3.8????字符實(shí)體

最常用的字符實(shí)體

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

其他字符實(shí)體

顯示結(jié)果	描述	實(shí)體名稱(chēng)	實(shí)體編號(hào)
￠	分	¢	¢
￡	鎊	£	£
￥	日?qǐng)A	¥	¥
§	節(jié)	§	§
?	版權(quán)	©	©
?	注冊(cè)商標(biāo)	®	®
×	乘號(hào)	×	×
÷	除號(hào)	÷	÷

字符實(shí)體最主要的作用是可以網(wǎng)頁(yè)上顯示html特定的標(biāo)簽語(yǔ)法字符，比如<br/>

代碼：

<br/>

????????

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

???????? ?

????????

????????2222222     33333333333

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

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

3.9????框架標(biāo)簽（了解）

框架標(biāo)簽：把頁(yè)面分割成幾個(gè)部分。并且把其他頁(yè)面，引入該頁(yè)面。

frameset標(biāo)簽：把頁(yè)面分割成若干個(gè)部分。負(fù)責(zé)切割頁(yè)面

rows屬性：把頁(yè)面分割成若干個(gè)行，

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

用"逗號(hào)"分開(kāi)，表示分割成幾行,并且指定每行的高度

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

cols 屬性：把頁(yè)面分割成若干的列。用"逗號(hào)"分開(kāi)，表示分割成幾列，表示每一列的寬度

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

frame標(biāo)簽：引入其他的頁(yè)面資源。書(shū)寫(xiě)在frameset標(biāo)簽內(nèi)

frame的屬性介紹：

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

注意：不能和body標(biāo)簽一起使用

代碼：

????

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

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

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

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

????</frameset>

</frameset>

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

4.????CSS 快速入門(mén)

4.1????CSS簡(jiǎn)介

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

樣式表技術(shù)誕生于1996年，需要瀏覽器支持，現(xiàn)在大多數(shù)瀏覽器都支持CSS。

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

對(duì)于設(shè)計(jì)者來(lái)說(shuō)它是一個(gè)非常靈活的工具，可以將所有有關(guān)于文檔的樣式指定內(nèi)容全部脫離出來(lái)，在行內(nèi)定義、在標(biāo)題中定義，甚至作為外部樣式文件供html調(diào)用而不必再把繁雜的樣式定義編寫(xiě)在文檔結(jié)構(gòu)中

CSS語(yǔ)法規(guī)則：

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

關(guān)于樣式表的語(yǔ)法，要注意以下幾個(gè)問(wèn)題。

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

2、當(dāng)有多個(gè)屬性時(shí)，用";"進(jìn)行區(qū)分。

3、在書(shū)寫(xiě)屬性時(shí)屬性之間使用空格換行等，并不影響屬性的顯示。

4、如果一個(gè)屬性有幾個(gè)值，則每個(gè)屬性值之間用空格分隔開(kāi)。

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

4.3????CSS樣式加載方式（重點(diǎn)）

4.3.1????????行內(nèi)樣式

幾乎所有的html標(biāo)簽上都有style屬性

在style屬性中書(shū)寫(xiě)css代碼：

代碼：

????

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

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

注意：行內(nèi)樣式的作用范圍只會(huì)影響到當(dāng)前某行的html的元素

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

4.3.2????????內(nèi)部樣式

使用上面的行內(nèi)樣式，如果出現(xiàn)了多個(gè)標(biāo)簽需要相同的樣式，這時(shí)會(huì)出現(xiàn)css代碼嚴(yán)重重復(fù)

在<head></head>中編寫(xiě)樣式代碼，可以影響到整個(gè)頁(yè)面的相關(guān)元素

格式：

????CSS代碼

</style>

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

div{

????color: red;

????width: 100px;

????height: 100px;

????

????/*solid 實(shí)線 CSS的注釋*/

????border: 1px solid;

????

}

</style>

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

????<br/>

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

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

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

使用上面的內(nèi)部樣式，如果出現(xiàn)了多個(gè)頁(yè)面需要相同的樣式，這時(shí)會(huì)出現(xiàn)css代碼嚴(yán)重重復(fù)

外部樣式：通過(guò)外部定義一個(gè)css文件，定義全局的樣式，然后在html中將css文件引入進(jìn)來(lái)，則會(huì)對(duì)此頁(yè)面產(chǎn)生效果。如果其它頁(yè)面需要，按照此方法即可。

1、編寫(xiě)一個(gè)css文件（該文件的擴(kuò)展名為.css）,寫(xiě)入如下內(nèi)容：

div{

????

????color: blue;

????width: 100px;

????height: 100px;

????

????/*solid 實(shí)線 CSS的注釋*/

????border: 1px solid;

????

}

2、在<head></head>中寫(xiě)入：

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

注意：也可以通過(guò)內(nèi)部樣式的方式來(lái)引入外部樣式（了解）

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

</style>

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

4.3.4????????加載方式的優(yōu)先級(jí)

就近原則：誰(shuí)離html元素距離近，就按誰(shuí)的做

行內(nèi)樣式 > 內(nèi)部樣式 > 外部樣式

代碼：

div{

????

????color: blue;

????width: 100px;

????height: 100px;

????

????/*solid 實(shí)線 CSS的注釋*/

????border: 1px solid;

????

}

head：

????

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

????div{

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

????}

????</style>

body：

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

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

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

4.4????CSS樣式選擇器（重點(diǎn)）

樣式選擇器是指選擇樣式的方式，主要運(yùn)用與內(nèi)部樣式和外部樣式。

4.4.1????????標(biāo)簽名選擇器

通過(guò)html標(biāo)簽名來(lái)進(jìn)行選擇

寫(xiě)法：

標(biāo)簽名{屬性：屬性值；。。。。}

標(biāo)簽名：html中標(biāo)簽的名字，例如div，span。。。img，a

作用：會(huì)把css代碼作用到所有的該標(biāo)簽名的標(biāo)簽。

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

div {

????color: red;

????width: 100px;

????height: 100px;

????/*solid 實(shí)線 CSS的注釋*/

????border: 1px solid;

}

input{

????color: red;

????width: 100px;

????height: 100px;

????/*solid 實(shí)線 CSS的注釋*/

????border: 1px solid;

}

</style>

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

????<br />

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

????<br/>

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

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

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

通過(guò)html元素標(biāo)簽的id屬性來(lái)進(jìn)行選擇。

語(yǔ)法：

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

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

作用范圍：標(biāo)簽中的id值和 css選擇器中的id值相同，才會(huì)有作用

<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" 千萬(wàn)不要加 "#" 符號(hào)

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

4.4.3????????類(lèi)選擇器

根據(jù)html元素標(biāo)簽的class屬性進(jìn)行選擇。

語(yǔ)法：

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

class的值：每個(gè)html標(biāo)簽幾乎都有一個(gè)class屬性。和選擇器中的class的值去對(duì)應(yīng)。

<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" 千萬(wàn)不要加 "點(diǎn)" 符號(hào)

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

4.4.4????????選擇器的優(yōu)先級(jí)別

具體原則：誰(shuí)表現(xiàn)的更具體，影響的范圍越小，就按誰(shuí)的做。

id > class > 標(biāo)簽名

????

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

????/*標(biāo)簽名選擇器*/

????div{

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

????}

????

????/*class選擇器會(huì)覆蓋標(biāo)簽名選擇器*/

????.beauty

????{

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

????}

????

????/*id選擇器會(huì)覆蓋 class選擇器*/

????#div1

????{

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

????}

????

????</style>

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

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

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

5.1????偽類(lèi)

偽類(lèi)：根據(jù)標(biāo)簽的各種狀態(tài)，去修飾標(biāo)簽的樣式。

語(yǔ)法：

選擇器：偽類(lèi)｛屬性：屬性值；。。。。。｝

在支持 CSS 的瀏覽器中，鏈接的不同狀態(tài)都可以不同的方式顯示，這些狀態(tài)包括：活動(dòng)狀態(tài)，已被訪問(wèn)狀態(tài)，未被訪問(wèn)狀態(tài)，和鼠標(biāo)懸停狀態(tài)。

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

a:visited ( 鏈接地址被訪問(wèn)過(guò) )

　　a:hover ????( 鼠標(biāo)移動(dòng)到超鏈接上面 )

a:active ????( 鼠標(biāo)點(diǎn)擊瞬間 )

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

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

????color: black;

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

}

a:VISITED { /*鏈接地址被訪問(wèn)過(guò)*/

????color: gray;

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

}

a:HOVER { /*鼠標(biāo)移動(dòng)到超鏈接上面*/

????color: red;

}

a:ACTIVE { /*鼠標(biāo)點(diǎn)擊瞬間 */

????color: blue;

}

</style>

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

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

5.2????邊框?qū)傩?/span>

盒子模型：在html中。每一個(gè)標(biāo)簽占有一定的空間。這個(gè)空間通常是矩形（長(zhǎng)方形）的。

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

外邊距：????margin

內(nèi)邊距：????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????浮動(dòng)屬性

float屬性作用：告訴瀏覽器該標(biāo)簽是否浮動(dòng)，以及如何浮動(dòng)。目的：布局

5.3.1????????頁(yè)面整體布局????

float+div 可以做到頁(yè)面的布局

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

#div1 {

????height: 100px;

????background-color: red;

}

#div2 {

????width: 20%;

????float: left;/*從左浮動(dòng)擺放*/

????background-color: green;

????height:800px;

}

#div3 {

????float: left;/*從左浮動(dòng)擺放*/

????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????????制作導(dǎo)航欄

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

li {

????list-style-type: none; /*去掉類(lèi)型標(biāo)記*/

????float: right; /*浮動(dòng)靠右擺放*/

????margin: 10px;/*外邊據(jù)間隔*/

}

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

<ul>

????????<li><a href="#">注冊(cè)</a></li>

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

????????<li><a href="#">購(gòu)物車(chē)</a></li>

????</ul>

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

6.????總結(jié)

轉(zhuǎn)載于:https://www.cnblogs.com/beyondcj/p/6270849.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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