seo網(wǎng)站排名優(yōu)化公司哪家百度文庫網(wǎng)頁版
頁面技術(shù)基礎-html
環(huán)境準備：在JDBC中項目上完成代碼定義
1. 新建一個 Module:filr->右鍵 -》Module -》Java-》next->名字(html_day1)->finish
2. 在 Moudle上右鍵-》第二個選項：add framework .. -> 選擇JavaEE下第一個選項 Web Apllication
3. 在 web文件夾上右鍵 -》新建 file，后綴以.html
一、前言
-
替換JDBC中三層中的 View(視圖)
(1) 作用：收集用戶信息、并給用戶展示信息 (2) 技術(shù)：HTML、CSS、Bootstrap、JavaScript、jQuery、EasyUI(前端做界面的相關(guān)技術(shù)) -
html
(1) html：Hypertext Markup Language，超文本標記語言 (2) html用于制作靜態(tài)網(wǎng)頁，數(shù)據(jù)不發(fā)生改變制作動態(tài)的技術(shù)：Servlet、jsp等，數(shù)據(jù)會因時間不同發(fā)生改變 (3) html為解釋型的語言，網(wǎng)頁運行在瀏覽器上，瀏覽器自帶解釋器，無需安裝新的軟件瀏覽器建議使用谷歌、火狐等兼容器較好的瀏覽器
二、基本語法
-
html的源碼文件以 .html / .htm 結(jié)尾
-
基礎結(jié)構(gòu)
<html><head>網(wǎng)頁的頭信息，對網(wǎng)頁進行設置</head><body 屬性="值" 屬性='值'>網(wǎng)頁內(nèi)容</body> </html> 注意：html的語法不嚴謹，大小寫不區(qū)分
-
head部分：
(1) head中定義的內(nèi)容在網(wǎng)頁中不顯示，用于定義網(wǎng)頁的附屬信息；如標題、字符編碼等 (2) head中常見的標簽：a. <title>網(wǎng)頁標簽標題</title>b. 設置網(wǎng)頁中的字符編碼：<meta charset="UTF-8"> 【h5寫法：重點-設置編碼格式】 -
body部分：主體部分
(1) body中常見的屬性：<body bgcolor="網(wǎng)頁的背景顏色" text="字體顏色"></body>顏色的方式兩種：a. 顏色對應的英語單詞：red、green、blue、pink、yellow等<body text="red">b. 使用 RGB(三基色 紅綠藍)取色方式：#RRGGBB：7EE4C3 (采用十六進制)注意：借助取色軟件獲取顏色對應數(shù)據(jù)(例如 Faststone Captrue) (2) 文本相關(guān)：a. 標題：<h1>一級標題</h1><h2>二級標題</h2><h3>三級標題</h3>...<h6>三級標題</h6>注意：標題為1~6級，1最大，6最小標題屬性：align="center|right|left(默認)" 標題水平位置：居中、靠右、靠左b. 段落：<p>段落的內(nèi)容.....</p>注意：段落與段落之間有明顯的間隔c. 換行：<br/>空格： 注意：分號不能省版權(quán)號：©d. 水平分割線：<hr width="寬度">屬性：width兩種設置方式I. 像素：300px/ 500px，固定寬度II. 比例：30% / 50% ，相對瀏覽器寬度發(fā)生改變size:寬度 size = "7"color：顏色align:水平對齊方式align="center(默認)|left|right"e. 字體設置：<font color="顏色" size="字體大小" face="字體類型"></font>size="1~7" 1最小，7最大face="楷體" 字體類型 (3) 圖片相關(guān)：【重點】<img src="圖片的路徑及圖片名" width="寬度" height="高度" align="水平位置">src指定圖片路徑【開發(fā)重點】align="" 設置圖片相對文字位置，left|right|top(頂部)|middle(中間)|bottom(底部)title:當鼠標移動到當前圖片上時，對圖片的描述文字 (4) 超鏈接：【開發(fā)重點！！！！！】<a href="目標資源路徑" target="目標資源打開的位置">熱點文字</a>例如：<a href="first.html">熱點文字</a><a href="http://baidu.com">熱點文字</a>target="_blank" 在新的網(wǎng)頁中打開目標資源target="_self" 在當前網(wǎng)頁中打開目標資源 【默認】 (5) 表格：【重點】<table border="1" cellspacing="0"><tr> --代表行<td>一行一列</td> -- 代表列<td>一行二列</td><td>一行三列</td></tr><tr><td>二行一列</td><td>二行二列</td><td>二行三列</td></tr></table>a. table中常見屬性：border：邊框，默認為0cellspacing：邊框間隙，設置為0，取消中間間隙bgcolor="green" ：表格背景色background="image/001.jpg" 背景圖片width="700px" 寬度height="400px" 高度align="left(默認)|center(居中)|right" 表格水平位置b. tr中常見的屬性：align：設置當前行中文字相對表格位置，center表格中間;left：表格左邊,right(右邊)
三、表單相關(guān)(屬于 body內(nèi)容)
-
表單作用：
(1) 實現(xiàn)人機交互 (2) 收集用戶數(shù)據(jù)，并將收集到數(shù)據(jù)發(fā)送給服務端 -
表單基本結(jié)構(gòu)：
語法1： <form><fieldset><legend>表單樣式標題</legend><!--這里寫表單元素--></fiedlset> </form>語法2： <form><!--這里寫表單元素--> </form>詳解：1. form標簽：必須要有，用來包含表單元素的。2. fieldset標簽：用來顯示表單包含效果，非必須。3. legend標簽：用來給fieldset標簽的包含框指定標題。
-
表單相關(guān)元素
(1) 單行文本框：<input type="text" name="username" value="輸入用戶名...">常見的屬性：name：為當前文本框命名，通過 name獲取對應 value數(shù)據(jù)value：用戶輸入的信息，也可以設置默認值placeholder：提示文字，輸入文字后消失readonly：只讀，存在即為truedisabled ：不可用，存在即為truehidden：隱藏，存在即為true (2) 密碼框：<input type="password" name="password" value="....." maxlength="最大字符個數(shù)">密碼：<input type="password" name="" maxlength="10"/>屬性：maxlength：最大字符個數(shù)(3) 單選按鈕：<input type="radio" name="名字" value="值">注意：一組單選按鈕的名字必須一致，才能互斥屬性： checked 為默認選項，存在即為true男<input type="radio" name="sex" value="男" checked>女<input type="radio" name="sex" value="女"><br/><br/> (4) 復選框：<input type="checkbox" name="名字" value="值">注意：建議一組復選框中name一致，便于后期開發(fā)獲取對應value默認選中：checked(5) 下拉框：<select name="edu"><option>選項內(nèi)容</option><option value="1">學前班</option><option value="2">小學</option><option selected>初中</option><option>高中</option><option>中專</option><option>大專</option><option>本科</option><option>研究僧</option></select>屬性：selected 默認選項name：當前元素的數(shù)據(jù)的名字。以后發(fā)送數(shù)據(jù)以及服務器獲取的標記option標簽，表示一個選項標簽體：顯示在選項中的文字，不代表真實數(shù)據(jù)，僅僅是顯示信息value：當前選項的默認值，真正收集并發(fā)送給服務器的數(shù)據(jù)selected：默認選中當前選項 (6) 文本域：<textarea name="" cols="" rows="" placeholder="" style="resize: none;"> 提示文字 </textarea>屬性詳情：readonly只讀cols :單行中文字符數(shù)，可用來設置寬度rows :顯示多少行，可用來設置高度style="resize: none;" :禁止拖拽 (7) 日期：<input type="date" name="名字"> (8) 郵箱：<input type="email" name="名字">注意：自動檢測郵箱輸入的格式，必須包含 @ (9) 數(shù)字格式：<input type="number" value="默認值" name="" max="最大值" min="最小值" step="步長"/>草莓數(shù)量：<input type="number" value="1" name="" max="12" min="3" step="2"/> (9) 提交按鈕：【現(xiàn)在不使用了】<input type="submit" name="名字" value="值"><input type="submit" name="bn1" value="提交">注意：value中內(nèi)容對用戶顯示(10) 重置按鈕：<input type="reset" name="bn2" value="重置">將表單中內(nèi)容清空(11) 普通按鈕：<input type="button" name="bn3" value="按鈕">注意：目前普通按鈕沒有任何效果，為后期內(nèi)容準備例如：也可以利用超鏈接進行按鈕操作<a href="first.html"><input type="button" name="bn3" value="按鈕"></a> -
form表單 【前后端分離-不使用了】
<form action="目標資源" method="提交方式:get|post">中間將<input>包含此處(用戶輸入信息) </form>action：代表將當前表單中的數(shù)據(jù)提交到哪(提交目標) method：代表此表單提交數(shù)據(jù)的方式，有 get(默認)和post兩種：method="get"方式：直接將提交的數(shù)據(jù)追加到地址中a. form提交地址url?name1=值&name2=值&name3=值注意：此處name代表 input中的name，通過 name獲取對應value值內(nèi)容不加引號：url?username=zs&password=123456b. 特點：數(shù)據(jù)不安全、不能傳輸大量的數(shù)據(jù)、處理中文時容易亂碼(相對不容易解決)method="post"方式：表單以數(shù)據(jù)包的形式打包發(fā)送、不會顯示在地址欄中a. 特點：數(shù)據(jù)安全、允許傳輸大量數(shù)據(jù)、處理中文相對容易
四、iframe的應用
應用場景：可以在當前網(wǎng)頁中，嵌套顯示另一個網(wǎng)頁。通常用來做局部跳轉(zhuǎn)
-
iframe語法：
<iframe src="/pages/Main.html" name="mainPage" frameborder="0" scrolling="no"></iframe> -
屬性說明：
`src`：被引用頁面的路徑。`name` ：iframe的名字，通常可以作為a超鏈接跳轉(zhuǎn)的target指定在本iframe中跳轉(zhuǎn)。（通過frame的名字指定展示跳轉(zhuǎn)的網(wǎng)頁(局部跳轉(zhuǎn))`frameborder` ：iframe的邊框?qū)挾?#96;scrolling` ：是否顯示滾動條，no就是不顯示。`width`：設置寬度 `height`：設置高度 -
iframe的應用
(1) 超鏈接：<a href="/web/person.html" target="iframe的name"> (2) iframe框架：<iframe name="iframe的name"></iframe> 注意：保證a超鏈接的target的內(nèi)容 和 iframe的name一致，即可完成超鏈接指定iframe處切換新頁面。 -
案例：
