目錄
3/常用屬性:border/align/valign/width/height
-----web階段介紹
軟件--3層
UI層:控制檯/swing/Web
業務層
數據層
Web類型的應用程序:OA/CRM
Server:Code
Browser:訪問的客戶端
Web 的工作原理
打開瀏覽器,輸入URL,回車,發送請求,服務器得到請求(分析),返回響應,由瀏覽器解析顯示
Web的技術
客戶端技術:HTML/CSS/JavaScript
服務器端技術:servlet/JSP/Jquery/Ajax
客戶端技術(Web 基礎):客戶端的技術相同
HTML:構建
CSS:外觀(美化)
JS:添加動態效果
-----概述、基礎語法
一:概述
1**/什麼是 HTML(超文本標記語言):一種純文本的網頁技術,後綴爲 .html/htm 文件,由瀏覽器解釋運行
2/依靠瀏覽器:IE/Firefox/Chrome/safari
二:基礎語法--標記 <標記名稱>**
1/雙標記(成對出現):
<h1></h1>
2/單標記(只有一個):
<br />
3/爲標記定義屬性:
描述標記的各方面----空格隔開, 多個屬性也用空格隔開, 值可以用一對雙引號或者一對單引號
<h1 align="center">text</h1>
4/註釋
<!--註釋內容-->
5/html文檔的標準結構
版本信息
<html>
<head></head>
<body></body>
</html>
6/版本信息(瞭解):指定文檔的語法規範
嚴格:最新
過渡:兼容
<br />--新
<br>--舊
框架型:
//嚴格型:( 自己從頭到尾, 開發使用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
//傳統型:( 維護別人的代碼, 開發使用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//框架型:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
7/head:
定義和整個文檔相關的信息(標題/刷新/編碼方式)
<head>
<!-- 刷新：每3妙, 刷新一次 -->
<meta http-equiv="refresh" content="3" />
<!-- 編碼類型,：純文本html,字符類型utf-8 -->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>xxx</title>
</head>
8/body
第一個課堂練習:創建一個標準結構的 html 頁面,爲頁面定義標題/刷新頻率/編碼方式
三:文本
1/普通文本和特殊字符
a/空格摺疊：
多個空格以及換行，摺疊顯示爲1個
b/特殊字符:轉義字符
< <
> >
空格
2/段落標記
<p>文本</p>: 自成段落,行間距
<br />:換行
3/標識標題<hn></hn>
<h1>aa</h1>
顯示標題從大到小：<h1>,<h2>,<h3>......
4/分組
<div></div>:適用於對於塊級元素分組
<span></span>:適用於對於行內元素分組
5/**塊級元素和行內元素
塊級元素(block):獨佔一行, h1, p,div，table，ul，ol，li
行內元素(inline):可以和其他元素位於同一行,span,a
四:圖像和鏈接
1/爲頁面添加圖像
<img src="URL" />
2/URL
絕對路徑(全路徑):
<img src="http://sss/a.jpg" />
注：d:/aa/a.jpg (錯誤, 不能有這種路徑. 因它是相對於個人計算機的磁盤)
相對路徑:
<img src="aa/a.jpg" />
注：圖片與 .html 在同一個文件夾
3/爲頁面添加超級鏈接
<a href="url">點擊的內容</a>
<a href="a.html">click me</a>
<a href="http://www.baidu.com">click me</a>
<a href="" target="_blank">click me</a>
target="_blank"：開啓第二個頁面打開.
4/同一頁面上的不同位置之間
情況一:回到頁面的頂端
<a href="#">回到頂部</a>
情況二:自定義位置
定義目標位置(錨點):
<a name="a1"></a>
定義一個鏈接:
<a href="#a1">to a1</a>
--加＃, 防止被認爲 a1爲沒寫完的url地址
***注意：
不知道圖片寬高
寬或高 任意寫一個, 其它將自動按比例縮放
寬或高 憑感覺都寫, 圖片可能會變形
<img src ="aa/a.jpg" width="xxx”>
五:列表
1/基礎語法
<ol></ol>---ordered list，有序列表
<ul></ul>---unordered list，無序列表
<li></li>----list item，列表項
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
2/實際應用
應用一:直接
應用二:嵌套的列表---分級菜單
<ol>
<li>書</li>
<li>家電</li>
<li>日用品</li>
</ol>
<ol>
<li>個人所得稅
<ul>
<li><a href="#問題1.1">問題</a><有某有？？？></li>
<li><a href="#方案1.2">方案</a></li>
<li><a href="#實現1.3">實現</a></li>
</ul>
</li>
<li>命令解析器</li>
</ol>
六:表格
1/用來顯示網格數據,佈局
2/表格的基本結構:table/tr/td(單元格)
<table>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
</table>
3/常用屬性:border/align/valign/width/height
cellspacing(單元格之間以及單元格和外邊框之間的距離)/cellpadding(單元格的內邊距)
border:邊框
align：水平佈局
valign：垂直佈局
width：寬
height：高
4/表格的複雜結構
a/可以爲表格添加標題
<caption>文本</caption>
b/行分組
thead/tbody/tfoot
5/不規則表格
td設置 colspan（跨列）或者rowspan（跨行）屬性
6/表格的嵌套:解決複雜佈局情況
td裏寫一個table
七：表單****
1、form：承載頁面元素，備於做提交
<form action="a.jsp" method="post">
</form>
2、form可以承載的：input、其它元素
3、input：單標記，靠 type 屬性的不同取值
a、類型
<input type="text" />--文本框( 不寫type屬性, 默認爲文本框 )
<input type="password" />--密碼框
<input type="radio" />--單選按鈕
<input type="checkbox" />--多選（複選/核選）框
<input type="submit" />--提交按鈕，提交併刷新頁面
<input type="reset" />--重置按鈕，將頁面恢復到原始狀態
<input type="button" />--普通按鈕
<input type="file" />--選擇文件，以供上傳
<input type="hidden" />--隱藏域，適用於記載那些不需要顯示的關鍵數據
b、常用屬性
id：需要的時候，唯一標識
name：名值對的方式提交數據
value：取決於需求
maxlength：文本框、密碼框
readonly：只讀
checked：單選、多選
4、列表框、下拉框：取決於 size 的取值
<select>
<option></option>
<option></option>
<option></option>
</select>
如何選擇：頁面佈局
5、多行文本框
<textarea>
</textarea>
6、label：文本標籤
<input type="radio" id="r1" />
<label for="r1">文本</label>
7、fieldset：元素圈起來
legend:爲圈添加名稱描述
比如：
<fieldset>
<legend>標題</legend>
</fieldset>
8、iframe：浮動框架
a、顯示：一個瀏覽器窗口中顯示多個html頁面
main.html---頁面
a.html---廣告頁面
b、嵌入到某個html頁面裏：
<iframe src="url"></iframe>
