黑馬程序員2023新版JavaWeb開(kāi)發(fā)教程，實(shí)現(xiàn)javaweb企業(yè)開(kāi)發(fā)全流程（
Java第31期, DAY01, P1-P13
學(xué)習(xí)筆記：
1.開(kāi)發(fā)模式：前后端分離和混合兩種開(kāi)發(fā)模式，現(xiàn)在主流是前后端分離:
2.前端代碼通過(guò)瀏覽器解析和渲染形成用戶看到的網(wǎng)頁(yè)
3.Web標(biāo)準(zhǔn): HTML負(fù)責(zé)網(wǎng)頁(yè)的結(jié)構(gòu), CSS負(fù)責(zé)網(wǎng)頁(yè)的表現(xiàn), JS負(fù)責(zé)網(wǎng)頁(yè)的行為
4.HTML(HyperText Markup Language)：超文本標(biāo)記語(yǔ)言
? ? HTML不是一種編程語(yǔ)言, 而是一種標(biāo)記語(yǔ)言
? ? HTML是大小寫(xiě)不敏感語(yǔ)言, 屬性值單雙引號(hào)都可以, HTML語(yǔ)法松散, 不嚴(yán)格
? ? HTML中無(wú)論幾個(gè)空格都只會(huì)顯示一個(gè)空格, 可使用空格占位符 
? ? HTML文檔也叫做web頁(yè)面
? ? 超文本：超越了文本的限制，比普通語(yǔ)言更強(qiáng)大。除了文字信息還可以定義圖片，音頻，視頻等內(nèi)容。
? ? 標(biāo)記語(yǔ)言：由標(biāo)簽構(gòu)成的語(yǔ)言
5.CSS(Cascading Style Sheet)：層疊樣式表，用于控制頁(yè)面的樣式(表現(xiàn))
6.HTML標(biāo)簽(元素):
? ? HTML標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞, 比如 <html>
? ? HTML標(biāo)簽通常是成對(duì)出現(xiàn)的, 比如 <b> 和 </b>
? ? 標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開(kāi)始標(biāo)簽, 第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽
? ? 開(kāi)始和結(jié)束標(biāo)簽也被稱為開(kāi)放標(biāo)簽和閉合標(biāo)簽
7.HTML基本結(jié)構(gòu):
8.基本標(biāo)簽:
? ? <h1>-<h6>: 標(biāo)題(從大到小)
? ? <hr>: 分隔
? ? <!--xxx-->: 注釋
? ? <p>: 段落
? ? <b>: 加粗
? ? <strong>: 強(qiáng)調(diào), 類似加粗
? ? <br>: 換行
? ? <span>: 沒(méi)有任何語(yǔ)義的布局標(biāo)簽
9.媒體標(biāo)簽:
? ? 通用屬性:
? ? ? ? src: 媒體的url
? ? ? ? controls: 視頻或音頻是否顯示播放控件
? ? <img>: 圖片
? ? <video>: 視頻
? ? <audio>: 音頻
10.一些通用屬性:
? ? width: 寬度
? ? height: 高度
? ? color: 顏色
11.文本屬性:
? ? font-size: 文本大小(后面需要加px)
? ? text-decoration: 規(guī)定添加到文本的修飾, none表示定義標(biāo)準(zhǔn)的文本
? ? color: 定義文本的顏色
? ? line-height: 行高
? ? text-indent: 段落首行縮進(jìn)
? ? text-align: 文本的水平對(duì)其方式
12.CSS引入方式:
? ? 行內(nèi)樣式(不推薦):<h1 style="color: red;"/>
? ? 內(nèi)嵌樣式:
? ? ? ? <head>
? ? ? ? ? ? <style>
? ? ? ? ? ? ? ? h1{
? ? ? ? ? ? ? ? ? ? color: red;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? </style>
? ? ? ? </head>
? ? 外聯(lián)樣式:
? ? ? ? xxx.css:
? ? ? ? ? ? h1{
? ? ? ? ? ? ? ? color: red;
? ? ? ? ? ? }
? ? ? ? xxx.html:
? ? ? ? ? ? <head>
? ? ? ? ? ? ? ? <link rel="stylesheet" href="xxx.css">
? ? ? ? ? ? </head>
13.顏色表示:
? ? 關(guān)鍵字: red, green...
? ? RGB表示法: rgb(255,255,255)
? ? HEX表示法: #FFFFFF, 若R,G,B的兩位均相同可簡(jiǎn)寫(xiě)如#FFCCBB簡(jiǎn)寫(xiě)#FCB
14.CSS選擇器:
? ? 元素選擇器(標(biāo)簽選擇器):
? ? ? ? 元素名稱{
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? 使用: <元素名稱>
? ? ID選擇器(每個(gè)標(biāo)簽ID唯一, 不可重復(fù)):
? ? ? ? #ID屬性值{
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? 使用: <任意元素 id="ID屬性值">
? ? 類選擇器:
? ? ? ? .class屬性值{
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? 使用: <任意元素 class="class屬性值">
? ? 優(yōu)先級(jí): ID選擇器 > 類選擇器 > 元素選擇器
15.<a>: 超鏈接
? ? href: 指定訪問(wèn)的url
? ? target: 指定何處打開(kāi)
? ? ? ? _self(默認(rèn)): 在當(dāng)前頁(yè)面打開(kāi)
? ? ? ? _blank: 在新標(biāo)簽頁(yè)打開(kāi)
16.<div>: 沒(méi)有語(yǔ)義的布局標(biāo)簽
? ? box-sizing: border-box(指定width和height為盒子的大小)
? ? background-color: 背景色
? ? padding: 內(nèi)邊距(上右下左, 如果四個(gè)邊距一樣可以簡(jiǎn)寫(xiě)成一個(gè))
? ? border: 邊框大小 線條類型(如solid實(shí)線) 顏色;
? ? margin: 外邊距(寫(xiě)法和內(nèi)邊距一樣)
? ? 如果只設(shè)置一個(gè)方向的邊距/內(nèi)邊距/外邊距, 可以在屬性后加-方向(top, left, right, bottom)
? ? ? ? 如: padding-top, margin-right
17.CSS盒子組成:內(nèi)容(content), 內(nèi)邊距(padding), 邊框(border), 外邊距(margin)
18.<table>: 一個(gè)表格整體, 可以包含多個(gè)<tr>, 屬性:
? ? border: 邊框?qū)挾?/p>
? ? width: 表格寬度
? ? cellspacing: 單元之間的空間
? ? 子標(biāo)簽:
? ? ? ? <tr>: 表格中的行, 可以包含多個(gè)<td>
? ? ? ? <td>: 單元格, 如果是表頭單元格, 可以替換為<th>(加粗+居中)
19.<from>: 一個(gè)表單整體, 可以包含多個(gè)<input>:
? ? action: 表單提交的url, 默認(rèn)提交到當(dāng)前頁(yè)面
? ? method: 提交方式(get, post)
? ? ? ? get(默認(rèn)): url?屬性1=值1&屬性2=值2, 大小有限制
? ? ? ? post: 在消息體(請(qǐng)求體)中傳遞, 大小無(wú)限制
? ? 表單項(xiàng)必須有name屬性才可提交
20.表單項(xiàng):
? ? name: 屬性名
? ? value: 屬性值
? ? <input>: 表單項(xiàng)
? ? ? ? type: 輸入形式, 可填:
? ? ? ? ? ? text(默認(rèn)): 單行文本輸入框
? ? ? ? ? ? password: 密碼輸入框
? ? ? ? ? ? radio: 單選框(多個(gè)單選框name需相同)
? ? ? ? ? ? checkbox: 復(fù)選框
? ? ? ? ? ? file: 文件上傳按鈕
? ? ? ? ? ? date: 日期選擇
? ? ? ? ? ? time: 時(shí)間選擇
? ? ? ? ? ? datetime-local: 日期時(shí)間選擇
? ? ? ? ? ? number: 數(shù)字輸入框
? ? ? ? ? ? email: 郵箱輸入框
? ? ? ? ? ? hidden: 隱藏域
? ? ? ? ? ? button: 按鈕
? ? ? ? ? ? submit: 提交按鈕
? ? ? ? ? ? reset: 重置按鈕
? ? <select>: 下拉列表
? ? ? ? <option>: 列表項(xiàng)
? ? <textarea>: 文本域
? ? ? ? cols: 一行最多輸入字符數(shù)
? ? ? ? rows: 行數(shù)
學(xué)習(xí)心得：通過(guò)今天的學(xué)習(xí), 學(xué)會(huì)了HTML的基礎(chǔ)標(biāo)簽, CSS的基礎(chǔ)屬性, 能夠制作一個(gè)簡(jiǎn)單的頁(yè)面
