web基礎筆記整理(一)
一、程序的分層
1、界面層：
某種類型的應用程序
a、DOS(控制臺運行)
b、桌面應用程序--獨立安裝，獨立運行
c、web類型--現在流行的
單機版：電腦上要安裝，程序升級之後，電腦上也要升級--桌面應用程序
網絡版：電腦上不裝，輸入一個url地址，直接用--web類型
2、業務邏輯層：數據訪問--數據交互
3、數據存儲層：myssql jdbc
二、web類型的應用程序：應用程序位於服務器，用戶只需要通過瀏覽器就能訪問和交互的
理解：和前端網站開發的區別
1、網站--最常見
2、程序--OA、CRM
三、需要掌握的知識
1、客戶端：
頁面的創建：搭建--美化--動態的顯示效果
HTML--CSS--JS
2、服務器端：頁面和數據庫的交互--JSP&Servlet>>>>>Ajax&Jqery
Web基礎相關的技術：HTML--CSS--JS 不要求學的很精細，但是前端給你必須能看的懂
JSP&Servlet對於學Java的必須學
學習時間：HTML--3天 JS--3天
四、HTML 課程
1、概述：
定義：超文本標記語言，一種純文本類型的語言
作用：設計網頁
特點：文件以.html/htm為後綴；由瀏覽器解釋執行；擴展性很強，可嵌套腳本語言編寫程序段，如VBScript,JavaScript
2、web瀏覽器：
主要功能：代理訪問者提交請求；作為HTML的解釋器和內嵌腳本程序執行器；以圖形化界面的方式顯示HTML文檔
主流產品：IE,Firefox,Chrome,Opera,Safari
註意：同樣的HTML代碼在不同的瀏覽器上，效果上可能有所不同
3、基本概念：
標記/標簽：<>包圍的單詞；大多成對，有開始標記和結束標記之分
元素：<>包圍的部分：<body>body的元素<body/>用誰包圍的就稱是誰的元素
屬性：用來修飾元素；每個屬性都有值；屬性放在開始標簽中
單標簽（空標記）和雙標簽之分：<br />--標準和<br>--早期版本寫法
元素和標簽的概念並沒有嚴格的區分。
4、HTML的文檔結構：
版本信息：<!DOCTYPE> 版本聲明
分類：
Strict DTD 嚴格型 按照W3C定義的標準
Transitional DTD 傳統/過渡型 兼容最新的標準和就的標準
Frameset DTD 框架型
選擇問題：從頭寫 用嚴格型；在別人的基礎上維護 過渡型
html頁面：
文檔頭部：<head></head> 定義和整個文檔相關的信息
<title>標題<title>
<meta charset=utf-8 />--定義網頁基本信息--元數據 常用屬性：content/http-equiv
<meta http-requiv="refresh" comtent="10" />刷新頁面
文檔主體：<body></body> 定義文檔顯示的內容
整個文檔：<html></html> 定義文檔的範圍
註 釋：<!--文檔註釋-->
5、<body>元素：
<1>文本標記
作用：文本是網頁上的基本成分
直接書寫的文本會用瀏覽器默認的樣式顯示
包含在標記中的文本則會被顯示為標記所擁有的樣式
分類：
特殊字符：
註 釋：<!-- 內容-->
標題元素：<h1></h1>...
段落元素：<p></p>元素前後會有間距 元素內容獨占一行
換行元素：<br > 單標簽一般不需要添加內容 所以也就只有一個標簽 間距比段落小
分區元素：需要進行統一設置時使用
<span></span>單行設置，格式沒有變化不會影響布局 <div>會獨占一行，塊元素，用於多行設置
塊元素(block)和行內元素（inline）：塊--獨占一行的元素，前後會自動換行 div/p/h1-h6
行內元素--和其他元素位於一行 如 ：span/a
註：空格折疊：html默認多個空格或制表符壓縮成單個空格即顯示為一個空格
特殊字符可以用轉義字符，也稱字符實體
<2>圖像和鏈接
img:引入圖像 單標簽<img src="資源路徑" />
寫法：
<img src="d:/a.jpg">--絕對路徑 在web裏面是行不通的 不推薦
<img src="a.jpg">--相對路徑 當前文件夾下（同一目錄）在當前站點下找資源
<img src="http://tts.tarena.com.con/a.jpg">url路徑 去其他地方找資源
註：圖片顯示的大小默認和原來一樣，一般在引入時會設置width或height 不清楚比例時 就寫一個 因為原圖會等比例縮小/放大
超鏈接：點擊去往其他資源/頁面
<a href="url">被單擊的內容：文字/圖片<a /> href 是引用的意思
寫法：<a href="a.html"><a />去當前路徑的去找a.html的文件
<a href="http://tts6.tarena.com.con/ target="blank"></a> 引用一個網頁
target默認值_self：替換當前 _blank:在新窗口打開
實際應用中可以圖片鏈接:img嵌套a標簽
錨點：當前頁面不同位置的跳轉
第一步 定點：在目標位置定義一個錨點 如<a name="link1"></a>是一個隱藏標記 不顯示
第二步 鏈接：使用鏈接href指向link1 <a href="#link1">to link1</a> #是告知瀏覽器這不是頁面而是錨點
註：錨點是針對有滾動效果的頁面 才會有效果 內容較少時 看不出效果 理解上 這樣的跳轉無意義
有目錄結構使用的較多
特殊用法：直接回到頁面頂端的情況使用比較多，經常使用，因此有一種簡化的寫法：<a href="#">text</a>--返回界面頂端 相當於刷新的效果
<3>列表
什麽是列表？將具有相似或先後順序的幾項文字進行對齊排列
特點：所有的列表都由列表類型和列表項組成
列表類型：有序列表--<ol>和無序列表<ul> ol指ordered list 排完序的列表 ol和ul只代表列表的開始和結束
列表項： <li>用於指示具體列表內容
嵌套列表：實際應用中最多 嵌套是嵌套在<li>標簽當中
<ul>
<li>書籍
<ul>
<li>童話</li>
<li>詩歌</li>
<li>散文</li>
</ul>
</li>
<li>家電</li>
<li>電子</li>
</ul>
<4>表格
a、作用：顯示網格數據和頁面布局
如：在表單註冊時冒號對齊，使用表格的align右對齊
b、創建表格：表格的基本結構--table/tr(table row)/td(table defination)
註：表格的高寬默認自適應 如果設置了寬高，寬高會按原有比例進行分配
對列設置寬--影響整列，對列設置高--影響整行
對齊方式：默認水平居左--align(水平對齊屬性)，垂直居中--valign(垂直對齊屬性)
c、常用屬性：
表格的屬性：border(外邊框)/width/height/align/cellpadding(內容與邊框--內邊距)/cellspacing(單元格與單元格的間距--外邊距)
單元格的屬性：width/height/align/valign
標題：位於<table>元素中 <caption> 並且是第一個子元素
d、分組：如果用div就破壞了表格的結構所以不能用
行分組，只能包含tr元素：
thead 只能出現一次
tbody 可以出現多次
tfoot 只能出現一次
e、不規則表格：單元格的合並/拆分--實現跨行/跨列
表格無法同時既跨行又跨列。
對於td元素而言，有colspan,rowspan屬性設置單元格跨行/跨列
colspan:單元格跨列--橫著長
rowspan:單元格跨行--豎著長
f、表格的嵌套：<table>元素嵌套在<td>裏 嵌套不能破壞原有表格的結構 和列表嵌套一類似
web基礎筆記整理(一)