Javaweb 第1天 HTML和CSS课程
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>
?
<meta http-equiv="keywords" content="苦悶,免費(fèi),keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
?
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
?
</head>
?
<body>
????Hello
?
????<br />
????<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)題
<h1>標(biāo)題1</h1>
?
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)型（宋體，楷體）
?
<font id="abc" color="#FECC41" size="7" face="楷體">字體</font>
?
屬性：
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>
<title>3.1.0.基本標(biāo)簽.html</title>
???? ?
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
?
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
?
</head>
?
<body>
???? ?
????<!-- 這里是注釋，
????可以單行可以多行 -->
???? ?
????<!-- 標(biāo)題，1~6是大小，1最大 -->
????<h1>用戶注冊(cè)</h1>
????<h2>用戶注冊(cè)</h2>
????<h6>用戶注冊(cè)</h6>
???? ?
????<!-- 水平線 ????????width表示寬度 ????align對(duì)齊方式 -->
????<hr width="300px;" align="left"/>
???? ?
????<!-- 換行 -->
????<br/>
???? ?
????<!-- 段落 -->
????<p>HTML 會(huì)自動(dòng)在段落前后添加一個(gè)額外的空行。</p>
????<p>HTML 會(huì)自動(dòng)在段落前后添加一個(gè)額外的空行。</p>
???? ?
???? ?
???? ?
????<!-- 字體標(biāo)簽 color顏色 size大小????face字體-->
????<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è)圖片
?
?
<img src="img/a.jpg" width="400px" alt="這是一只老虎"/>
?
屬性
????????????src：指定圖片的位置
????????????width:定義圖片的寬度
????????????height :定義圖片的高度
????????????如果同時(shí)定義高度和寬度可能圖片會(huì)失真。
????????????定義其中的一個(gè)，圖片會(huì)按照原理的百分比進(jìn)行縮放
????????????alt：鼠標(biāo)放上去顯示文本，已經(jīng)過(guò)期不能用的方法，現(xiàn)在用title來(lái)取代
?
<img src="img/a.jpg" width="400px" title="這是一只兇猛的老虎"/>
?
????????????相對(duì)路徑的寫(xiě)法：
????????????文件名???????? ????????當(dāng)前目錄
????????????../文件名 ????????上一級(jí)目錄
目錄名/文件名????????指定目錄內(nèi)的文件
3.2.2????????視頻（了解）
語(yǔ)法：<embed src="多媒體文件名稱(chēng)" width=寬度 height=高度 loop=播放次數(shù)>
?
<EMBED SRC="midi.mid" loop="true" width="145" height="60">
?
3.2.3????????背景音樂(lè)（了解）
語(yǔ)法：<bgsound src=背景音樂(lè)位置 loop=循環(huán)次數(shù)>
?
<bgsound src="midi.mp3" loop="true">
?
?
圖片標(biāo)簽代碼：
?
?
<!-- 圖片 title鼠標(biāo)放入圖片的提示 -->
????<img alt="這是一個(gè)兇猛老胡" src="img/a.jpg" width="200px;" />
????<img title='這是一個(gè)兇猛大老虎' src="img/a.jpg" width="200px;" height="200px;" />
???? ?
????<!-- 載入網(wǎng)絡(luò)上的圖片文件 -->
????<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>
?
?
超鏈接代碼：
?
?
<!-- 超鏈接 href 連接地址-->
????<a href="3.2.1.圖片.html">我的鏈接</a>
????<a href="http://www.baidu.com">百度</a>
?
????<!-- 新開(kāi)頁(yè)面的超鏈接 target="_blank" 表示新開(kāi) -->
????<a target="_blank" href="3.2.1.圖片.html">我的鏈接新開(kāi)</a>
???? ?
????
????<!-- 描點(diǎn)定位超鏈接 指定超鏈接跳轉(zhuǎn)到錨點(diǎn)：-->
????<a href="#mao">點(diǎn)我</a>
????
????<a href="#">點(diǎn)我2</a>
?
????<br /> 很長(zhǎng)很長(zhǎng)的文章
????<br /> 很長(zhǎng)很長(zhǎng)的文章
????<br />很長(zhǎng)很長(zhǎng)的文章
。。。。
?
?
<!-- 1、設(shè)置錨點(diǎn)： -->
????<a name='mao'>段落標(biāo)記</a>
?
。。。。
????
????<br /> 很長(zhǎng)很長(zhǎng)的文章
????<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í)心矩形
?
代碼：
?
?
<!-- 無(wú)序列表 -->
????<ul type="square">
????????<li>第一天</li>
????????<li>第一天</li>
????????<li>第一天</li>
????</ul>
?
?
?
?
3.4.3????????有序列表
基本語(yǔ)法
<ol type="" start="">
<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>
????????<li>第一天</li>
????????<li>第一天</li>
????</ol>
?
?
?
*************************************************************************************************
3.5????表格標(biāo)簽（重點(diǎn)）
3.5.1????????基本表格
基本語(yǔ)法：
<table>
<tr>
<td></td>
</tr>
</table>
?
語(yǔ)法說(shuō)明：
<table>:????定義表結(jié)構(gòu)
<tr>:????????定義行結(jié)構(gòu)
<td>:????????定義列結(jié)構(gòu)
?
代碼：
?
?
<!-- 表格 border表示邊框-->
????<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：跨列
?
代碼：
?
<!-- 表格 border表示邊框-->
????<table border="1">
????????<tr>
????????????<!-- colspan跨列 -->
????????????<td colspan="2">姓名加性別</td>
???????????? ?
????????</tr>
???????? ?
????????<tr>
????????????<td>大毛</td>
????????????<td>男</td>
????????</tr>
???????? ?
???????? ?
????</table>
?
?
2、rowspan：跨行
?
代碼：
?
<!-- 表格 border表示邊框-->
????<table border="1">
????????<tr>
????????????<td>姓名</td>
????????????<td>性別</td>
????????</tr>
???????? ?
????????<tr>
????????????<td>大毛</td>
????????????<!-- rowspan跨行 -->
????????????<td rowspan="2">男</td>
????????</tr>
???????? ?
????????<tr>
????????????<td>二毛</td>
???????????? ?
????????</tr>
???????? ?
????</table>
?
?
3.5.3????????表頭
<th></th> 與td 效果一樣，變得粗一些，可以做表格第一行表示列名
?
?
代碼：
?
<!-- 表格 border表示邊框-->
????<table border="1">
????????<tr>
????????????<!-- th表頭 -->
????????????<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 align="right">你好</div>
<div>你好</div>
<div>你好</div>
?
div會(huì)默認(rèn)換行
3.6.2????????span標(biāo)簽
代碼：
?
?
<span>你壞</span>
<span>你壞</span>
?
?
span不會(huì)默認(rèn)換行
?
*************************************************************************************************
?
3.7????表單元素標(biāo)簽（重中之重）
3.7.1????????表單標(biāo)簽
基本語(yǔ)法：
<form name=" " method=" " action=" ">
</form>
?
name:設(shè)置表單名稱(chēng)
method：設(shè)置表單發(fā)送的方法，可以是"post"或者"get"
action：設(shè)置表單發(fā)送地址
3.7.2????????文本框
<input type="text" name="" value=""/>
?
value="" : 表示元素初始的默認(rèn)值
3.7.3????????密碼框
<input type="password" name=""/>
3.7.4????????單選按鈕
<input type="radio" name="" checked="checked"/>
?
checked="checked" : 表示該單選按鈕選中
3.7.5????????復(fù)選框
<input type="checkbox" name="" checked="checked"/>
?
checked="checked" : 表示該復(fù)選框選中
3.7.6????????文件域
<input type="file" name=""/>
?
用于上傳文件
3.7.7????????下列列表
<select>
????????<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????????普通按鈕
<input type="button" value="按鈕一" />
?
3.7.10????????提交按鈕
<input type="submit" value="按鈕一" />
3.7.11????????重置按鈕
<input type="reset" value="按鈕一" />
?
?
表單元素標(biāo)簽代碼：
?
?
<form action="">
???????? ?
????????<!-- 文本框 type="text" value表示默認(rèn)值 -->
????????用戶名：<input type="text" value="maoyun" /><br/>
???????? ?
????????<!-- 密碼框 type="password" -->
????????密碼：<input type="password" /><br/>
?
????????<!-- 單選按鈕 type="radio" name="sex"具備互斥性 checked="checked" 默認(rèn)選中-->
????????性別：
????????男<input type="radio" name="sex" checked="checked" />
????????女<input type="radio" name="sex" /> <br/>
???????? ?
????????<!-- 復(fù)選框 type="checkbox" checked="checked" 默認(rèn)選中 -->
????????興趣愛(ài)好：
????????唱歌<input type="checkbox" />
????????跳舞<input type="checkbox" checked="checked" />
????????吃飯<input type="checkbox" />
????????睡覺(jué)<input type="checkbox" />
????????<br/>
???????? ?
????????<!-- 文件域 -->
????????用戶頭像:<input type="file">
????????<br/>
???????? ?
????????<!-- 下拉列表框 <select> <option>子選項(xiàng) -->
????????所在地：
????????<select>
????????????<option>上海</option>
????????????<option selected="selected">北京</option>
????????????<option>廣州</option>
????????</select>
????????<br/>
???????? ?
????????<!-- 文本域 textarea -->
????????自我介紹：
????????<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) |
| ? | 空格 | 半角的不斷行的空白格（推薦使用）   半角的空格   全角的空格 |   |
| < | 小于號(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/>
????????<!-- 轉(zhuǎn)以后的br標(biāo)簽 -->
????????<br/>
???????? ?
????????<!-- 空格 -->
????????2222222 33333333333
????????2222222    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)簽一起使用
?
?
代碼：
?
?
<!-- frameset標(biāo)簽：把頁(yè)面分割成若干個(gè)部分。負(fù)責(zé)切割頁(yè)面 -->
<!-- rows="20%，*" 把頁(yè)面分割成兩個(gè)部分。（把頁(yè)面分割成2行）*表示占據(jù)剩余比例 -->
<frameset rows="20%,*">
????<!-- frame標(biāo)簽：引入其他的頁(yè)面資源。書(shū)寫(xiě)在frameset標(biāo)簽內(nèi) -->
????<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代碼：
?
代碼：
?
?
????<!-- 行內(nèi)樣式 -->
????<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)元素
?
格式：
?
<style type="text/css">
????CSS代碼
</style>
?
?
<head></head>中的代碼：
?
?
?
<!-- 內(nèi)部樣式 -->
<style type="text/css">
?
div{
????color: red;
????width: 100px;
????height: 100px;
????
????/*solid 實(shí)線 CSS的注釋*/
????border: 1px solid;
????
}
?
</style>
?
?
<body></body>中的代碼：
?
?
<div>你好</div>
????<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)引入外部樣式（了解）
?
<style type="text/css">
????@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：
?
?
????<!-- 內(nèi)部樣式 會(huì)覆蓋外部樣式-->
????<style type="text/css">
????div{
????????color: yellow;
????}
????</style>
?
?
body：
?
?
????????????<!-- 行內(nèi)樣式會(huì)覆蓋內(nèi)部樣式及外部樣式 -->
????????????<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>中的代碼：
?
<!-- 標(biāo)簽名選擇器 根據(jù)標(biāo)簽名來(lái)選擇 -->
<style type="text/css">
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>中的代碼：
?
?
<div>你好</div>
????<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>中的代碼：
?
<!-- id選擇器，根據(jù)id來(lái)選擇 -->
<style type="text/css">
?
#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>中的代碼：
?
?
<!-- 類(lèi)選擇器 根據(jù)class屬性來(lái)選擇 -->
<style type="text/css">
?
.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>中的代碼：
?
?
<style type="text/css">
????/*標(biāo)簽名選擇器*/
????div{
????????color: red;
????}
????
????/*class選擇器 會(huì)覆蓋 標(biāo)簽名選擇器*/
????.beauty
????{
????????color: yellow;
????}
????
????/*id選擇器 會(huì)覆蓋 class選擇器*/
????#div1
????{
????????color: blue;
????}
????
????</style>
?
?
<body></body>中的代碼：
?
?
<div class="beauty" id="div1">你好</div>
?
?
?
*************************************************************************************************
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>中的代碼：
?
<!-- 內(nèi)部樣式，偽類(lèi) -->
<style type="text/css">
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>中的代碼：
?
<a target="_blank" href="2.4.0.使用MyEclipse編寫(xiě)HTML.html">哈哈</a>
?
?
*************************************************************************************************
?
5.2????邊框?qū)傩?/span>
盒子模型：在html中。每一個(gè)標(biāo)簽占有一定的空間。這個(gè)空間通常是矩形（長(zhǎng)方形）的。
?
邊框：????????border
外邊距：????margin
內(nèi)邊距：????padding
?
?
<head></head>中的代碼：
?
?
<style type="text/css">
#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="div1">
????????<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>中的代碼：
?
?
<style type="text/css">
#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)題。
- 上一篇： HTML基础：文本列表实例2（9）
- 下一篇： 微信 WEUI 的 switch but