生活随笔
收集整理的這篇文章主要介紹了
【JavaWeb】HTML+CSS
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1 Web概念概述
JavaWeb是使用Java語言開發基于互聯網的項目
軟件架構
- cs架構：優點【資源加載快、用戶體驗好】、缺點【安裝、部署、維護麻煩】
- bs架構：優點【開發、安裝、部署、維護簡單】、缺點【應用過大，用戶體驗會受影響、對硬件有要求】
1.1 BS架構
資源分類
- 靜態資源：用靜態網頁開發技術發布的資源（HTML、CSS、JavaScript）。所有用戶訪問，得到的結果一樣。如果用戶請求靜態資源，那么服務器會將靜態資源發送給瀏覽器，瀏覽器內置的解析引擎可以展示靜態資源。
- 動態資源：使用動態網頁即時發布的資源。不同用戶在同一頁面的顯示結果可能不一樣。如：JSP、Servlet、PHP、ASP。如果用戶請求動態資源，服務器會執行動態資源，然后將動態資源轉換為靜態資源再發送給服務器。
2 HTML
2.1 基本介紹
概念：Hyper Text Markup Language：超文本標記語言，是最基礎的網頁開發語言。
超文本：用超鏈接的方式，將各種不同空間的文字信息組織在一起的網狀文本。
標記語言：由標簽構成的語言。<標簽名稱>如html、xml。標記語言不是編程語言。
html的實現
- 標簽分為圍堵標簽（有開始和結束）標簽可以嵌套，不同標簽的開始和結束之間不能交叉。
- 自閉標簽（開始和結束在一起，如：<br/>）
- 開始標簽中可以定義屬性，屬性由鍵值對構成，值要用引號引起來
- 不區分大小寫但建議用小寫
2.2 HTML標簽
文件標簽
- html：根標簽
- head：頭標簽，用于指定html文檔的一些屬性，引入外部的資源
- title：標題標簽
- body：體標簽
- <!DOCTYPE html>：HTML5中定義該文檔是html文檔
文本標簽
- <br>換行
- <hr>水平線
- <p>段落
- <h1>~<h6>標題
- < ! - - 注釋 - - >
- font：已經廢棄，具有屬性color=" "、width單位是像素px（取值是數值或相對于父元素的百分比）、size、face字體
- center：居中 已廢棄
圖片標簽
-<img src='xxx.jpg'/ align='right' alt='XXX' width='500' height='500'>
列表標簽：
有序列表的屬性 type展示不同的樣式：羅馬Ⅰ字母A start屬性指定從幾開始排序
無序列表的屬性 type可以為disc、square、circle
<ol type="A" start="3"><li>第一個
</li><li>第二個
</li><li>第三個
</li></ol><ul type="square"><li>無序
</li><li>無序
</li><li>無序
</li></ul>
鏈接標簽
- 默認在本頁打開鏈接【可以是網頁資源也可以是本地資源】
-<a href="http://www.baidu.com">click me</a> - 新建頁面打開鏈接
- <a href="http://www.baidu.com" target="_blank" >click me</a>
target【默認是_self】 - 啟動郵件客戶端發郵箱
- <a href="maito:xxxxxx@xxxx.com">contact me</a>
- div：每個div占滿一整行 塊級標簽
- span：文本信息在一行展示 行內標簽 內聯標簽
語義化標簽：沒有樣式 提高程序可讀性 可以和css一起定義樣式 - header
- footer
表格標簽
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#5f9ea0" align="center"><caption>學生信息表
</caption><tr bgcolor="red" align="center"><th>編號
</th><th>姓名
</th><th>成績
</th></tr><tr><td>1
</td><td>張三
</td><td>100
</td></tr><tr><td>2
</td><td>李四
</td><td>100
</td></tr></table>
合并行 合并列
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#ffdab9" align="center"><tr><th rowspan="2">編號
</th><th>姓名
</th><th>成績
</th></tr><tr><td>張三
</td><td>100
</td></tr><tr><td>2
</td><td colspan="2">李四
</td></tr></table>
表單標簽
概念：用于采集用戶輸入的數據
<form>：定義表單的采集范圍
- 屬性：action="xxx"表單提交地址 method="get/post"提交方式
表單中的數據想要被提交，必須指定name屬性
get請求參數會在地址欄顯示 封裝在協議行中 請求參數的長度有限制 不安全
post請求參數不會在地址欄顯示 會封裝在協議體中 請求參數的長度無限制 安全
表單項標簽
- input：可以通過type屬性值 改變元素展示的樣式。value顯示默認值 placeholder顯示提示信息
- select：下拉列表
- textarea：文本域
- radio：單選框name要一致 否則是定義了多個單選框。要給單選框指定返回值value。checked指定默認值
- checkbox：復選框 checked指定默認值
- label：執行輸入項的文字描述信息，加for屬性可以和input的id對應 點擊label會讓input獲取焦點
- file：文件選擇框
- select：下拉列表
注冊頁面案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注冊頁面
</title>
</head>
<body><form action="#" method="post"><table border="1" align="center" width="500"><tr><td><label for="username">用戶名
</label></td><td><input type="text" name="username" id="username"></td></tr><tr><td><label for="password">密碼
</label></td><td><input type="password" name="password" id="password"></td></tr><tr><td><label for="email">郵箱
</label></td><td><input type="email" name="email" id="email"></td></tr><tr><td><label for="name">姓名
</label></td><td><input type="name" name="name" id="name"></td></tr><tr><td><label for="phone">手機號
</label></td><td><input type="text" name="phone" id="phone"></td></tr><tr><td><label>性別
</label></td><td><input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</td></tr><tr><td><label for="birthday">出生日期
</label></td><td><input type="date" name="birthday" id="birthday"></td></tr><tr><td><label for="checkcode">驗證碼
</label></td><td><input type="text" name="chekcode" id="checkcode"><img src="verify_code.jpg"></td></tr><tr><td colspan="2" align="center"><input type="submit" value="注冊"></td></tr></table></form>
</body>
</html>
3 CSS
cascading style sheet 層疊樣式表，用于頁面美化和布局控制
優勢：
- 功能強大
- 將內容展示和樣式控制分離
- 【降低耦合度，分工協作更容易，提高開發效率】
3.1 CSS的使用
css和html的結合方式
- 內聯樣式：在標簽內使用style屬性指定css代碼，不推薦使用。作用域是當前標簽。
- <div style="color:red;">hello</div>
- 內部樣式：在head標簽內定義style標簽，標簽體內容就是css代碼。作用域只能是當前頁面。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title
</title><style>div{color: peachpuff;}</style>
</head>
<body>
<div>哈哈哈哈哈
</div>
</body>
</html>
- 外部樣式：將CSS抽取到外部文件，在head標簽內定義link標簽引入外部資源文件
div{color: aqua
;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title
</title><link rel="stylesheet" href="../css/a.css">
</head>
<body>
<div>哈哈哈哈哈
</div>
</body>
</html>
css語法
選擇器{屬性名1：屬性值;屬性名2：屬性值;
}
選擇器：用來篩選具有相似特征的元素
注意：
3.2 基本選擇器
- id選擇器：選擇器具體的id屬性值的元素，建議在一個html頁面中使用
-#id屬性值{ } - 元素選擇器：選擇具有相同標簽名稱的元素
-標簽名稱{ } - 類選擇器：選擇具有相同class屬性值的元素
- .class屬性值{ }
優先級 id > 元素 > 類
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title
</title><style>.cls1{color: gray;}#div1{color: red;}div{color: gold;}</style>
</head>
<body>
<div id="div1">哈哈哈哈哈
</div>
<div>呵呵呵呵呵呵
</div>
<p class="cls1">嘻嘻嘻嘻嘻嘻嘻嘻
</p>
</body>
</html>
3.3 擴展選擇器
- 選擇所有元素
- *{ }
- 并集選擇器
- 選擇器1,選擇器2{ }
- 子選擇器：篩選選擇器1元素下的選擇器2元素
- 選擇器1 選擇器2{ }
- 父選擇器：篩選選擇器2的父元素選擇器1
- 選擇器1 > 選擇器2{ }
- 屬性選擇器：選擇元素名稱，屬性名=屬性值的元素
- 元素名稱[屬性名="屬性值"]{ }
- 偽類選擇器：選擇一些元素具有的狀態
- 元素: 狀態{ }
3.4 屬性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title
</title><style>div{border: 1px solid red;}.div1{width: 100px;height: 100px;}.div2{width: 200px;height: 200px;padding: 50px;box-sizing: border-box;}.div3{float: left;}.div4{float: left;}.div5{float: right;}</style>
</head>
<body>
<div class="div2"><div class="div1"></div>
</div>
<div class="div3">aaa
</div>
<div class="div4">bbb
</div>
<div class="div5">ccc
</div>
</body>
</html>
美化版的注冊頁面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用戶注冊
</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}body{background: url("register_bg.png") no-repeat;}.layout{width: 900px;height: 500px;border: 8px solid #EEEEEE;background-color: white;margin: auto;margin-top: 80px;}.left{float: left;margin: 15px}.left > p:first-child{color: #FFD036;size: 100px;}.left > p:last-child{color: #A6A6A6;size: 100px;}.center{float: left;}.right{float: right;margin: 15px;}.right > p:first-child{color: #A6A6A6;font-size: 15px;}.right > p > a{color: pink;font-size: 15px;}.td_left{width: 100px;text-align: right;height: 45px;}.td_right{padding-left: 50px;}#username,#password,#name,#email,#birthday,#phone,#checkcode{width: 251px;height: 32px;border: 1px solid #A6A6A6;border-radius: 5px;padding-left: 10px;}#checkcode{width: 110px;}#img_check{height: 32px;vertical-align:middle;}#sub{width: 150px;height: 40px;background-color: #FFD036;border: 1px;}</style>
</head>
<body>
<div class="layout"><div class="left"><p>用戶注冊
</p><p>user register
</p></div><div class="center"><div class="form"><form action="#" method="post"><table border="0" align="center" width="500"><tr><td class="td_left"><label for="username">用戶名
</label></td><td class="td_right"><input type="text" name="username" id="username" placeholder="請輸入用戶名"></td></tr><tr><td class="td_left"><label for="password">密碼
</label></td><td class="td_right"><input type="password" name="password" id="password" placeholder="請輸入密碼"></td></tr><tr><td class="td_left"><label for="email">郵箱
</label></td><td class="td_right"><input type="email" name="email" id="email" placeholder="請輸入郵箱"></td></tr><tr><td class="td_left"><label for="name">姓名
</label></td><td class="td_right"><input type="name" name="name" id="name" placeholder="請輸入姓名"></td></tr><tr><td class="td_left"><label for="phone">手機號
</label></td><td class="td_right"><input type="text" name="phone" id="phone" placeholder="請輸入手機號"></td></tr><tr><td class="td_left"><label>性別
</label></td><td class="td_right"><input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</td></tr><tr><td class="td_left"><label for="birthday">出生日期
</label></td><td class="td_right"><input type="date" name="birthday" id="birthday"></td></tr><tr><td class="td_left"><label for="checkcode">驗證碼
</label></td><td class="td_right"><input type="text" name="chekcode" id="checkcode"><img src="verify_code.jpg" id="img_check"></td></tr><tr><td colspan="2" align="center"><input type="submit" value="注冊" id="sub"></td></tr></table></form></div></div><div class="right"><p>已有賬號？
<a href="#">立即登錄
</a></p></div>
</div></body>
</html>
總結
以上是生活随笔為你收集整理的【JavaWeb】HTML+CSS的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
