day01-HTML

1.JavaWeb技術體系

2.B/S軟體開發架構簡述

B/S架構
1. B/S框架，意思是前端（Browser瀏覽器，小程式，APP，或者自己寫的）和服務端（Server）組成的系統的框架結構
2. B/S架構也可以理解為web架構，包含前端，后端，資料庫三大組成部分
前端

前端開發技術工具包括三要素：HTML，CSS和 JavaScript，還有很多高級的前端框架，如bootstrap，jQuery和 VUE等

前端的技術的基礎都是由HTML，CSS和 JavaScript構成的
后端

后端的開發技術工具主要有：Net，Java ，PHP，Go等
資料庫

主流的三種關系型資料庫：MySQL，SQL server，Oracle，還有Nosql非關系型資料庫：Redis，Mogodb等

3.網頁的組成

結構（HTML）

HTML是網頁資訊的載體，內容就是網頁制作者放在頁面上想要讓用戶瀏覽的資訊，可以包括文字、圖片、視頻等，
表現（CSS）

CSS樣式是表現，就像網頁的外衣，比如，標題字體、顏色變化，或為標題加入的背景圖片、邊框等，所有這些用來改變內容外觀的東西稱為表現，
行為（JavaScript）

JavaScript用來實作網頁上的特效效果，如：滑鼠滑過彈出下拉選單，或滑鼠滑過表格的背景顏色改變，還有購物網站中圖片的輪換，可以這么理解：有影片的，有互動的一般都是用JavaScript來實作的，

例子

瀏覽器中的開發者工具快捷鍵火狐：ctrl+shift+I 或者 f12 谷歌：ctrl+shift+I 或者 f12

4.HTML

4.1HTML介紹

HTML是什么？

HTML(HyperText Mark-up Language)，即超文本標簽語言（可以展示的內容型別很多）
HTML文本是由HTML標簽組成的文本，可以包括文字、圖形、影片、聲音、表格、鏈接等
HTML的結構包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的資訊，而主體則

HTML的運行方式

本地運行

遠程訪問

瀏覽器將請求發送到服務器，服務器把相應的頁面回傳給瀏覽器，之后瀏覽器將會對該頁面進行決議，然后才能顯示

使用idea撰寫hello.html

點擊new，再點擊project，創建新工程
在彈出的頁面中點擊Web，選擇web，點擊next（舊版的idea直接選擇JavaScript，在JavaScript中選擇JavaScript即可）

解決IDEA2021創建static web工程時找不到static web選項的問題_
輸入專案名稱，點擊finish即可
點擊新創建的專案名稱，點擊new，點擊HTML File，在彈出的視窗中輸入檔案名稱，即可創建HTML檔案

點擊頁面右邊出現的瀏覽器圖示，即可運行檔案

注意事項和細節：

HTML檔案不需要編譯，直接由瀏覽器進行決議執行
可以選擇的瀏覽器，是你電腦安裝有的瀏覽器，如果沒有安裝這個瀏覽器，就會報錯

4.2HTML基本結構

<!--檔案型別說明 注釋-->
<!DOCTYPE html>

<!--使用語言的地區 en表示英國美國 en-US-->
<html lang="en">
    
<!--html頭-->
<head>
    
    <!--檔案的字符集-->
    <meta charset="UTF-8">
    
    <!--檔案的標題-->
    <title>Title</title>
    
</head>
    
<!--body體，主體部分-->
<body>
    
    <!--內容-->
    hello,world!
    
</body>
</html>

注釋的快捷鍵ctrl+/

4.3HTML基本標簽

4.3.1在線檔案

HTML 教程 (w3school.com.cn)

4.3.2HTML標簽/元素-說明

HTML標簽用兩個尖括號< >括起來
HTML標簽一般是雙標簽，如<b></b>，前一個標簽是起始標簽，后一個是結束標簽
兩個標簽之間的文本是HTML元素的內容
某些標簽稱為“單標簽”，因為它只需單獨使用就能完整地表達意思，如<br/> <hr/>
HTML元素指的是從開始標簽到結束標簽的所有代碼

標簽使用細節

標簽不能交叉嵌套
標簽必須正確關閉
注釋不能嵌套

注釋里面不能再有注釋的標簽
html語法不是特別嚴謹，有時候標簽不閉合，屬性不帶""也不報錯

4.3.3font字體標簽

font標簽是字體標簽，它可以用來修改文本的字體，顏色，大小（尺寸）

color屬性修改顏色
face屬性修改字體
size屬性修改文本大小

對于標簽的屬性，順序不做要求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font標簽</title>
</head>
<body>
<!-- - color屬性修改顏色-->
<!-- - face屬性修改字體-->
<!-- - size屬性修改文本大小-->
<!--應用實體：在網頁上顯示“北京”，并修改字體為微軟雅黑，顏色為藍色-->
<font color="blue" size="40px" face="微軟雅黑">北京</font>
</body>
</html>

4.3.4字符物體

在 HTML 中，某些字符是預留的，在 HTML 中不能使用小于號（<）和大于號（>），這是因為瀏覽器會誤認為它們是標簽，如果希望正確地顯示預留字符，我們必須在 HTML 源代碼中使用字符物體（character entities），

在網頁上顯示一些特殊的符號，稱為字符物體(也叫符號物體)，

HTML 中的預留字符必須被替換為字符物體，

注釋：物體名稱對大小寫敏感

常用的特殊字符：
< : &lt;
> : &gt;
空格 : &nbsp;

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--  特殊字符應用實體：把<hr/>變成文本顯示在頁面上-->
jack
<hr/>
&lt;hr/&gt;
smith&nbsp;&nbsp;一二三
</body>
</html>

常用的字符物體表格：HTML 字符物體 (w3school.com.cn)

4.3.5標題標簽

標題（Heading）是通過 <h1> - <h6> 等標簽進行定義的，<h1> 定義最大的標題，<h6> 定義最小的標題，

align屬性是對齊屬性
- left：左對齊（默認）
- center：居中
- right：右對齊

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標題標簽</title>
</head>
<body>
<h1>標題1</h1>
<h2>標題2</h2>
<h3 align="center">標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6 align="right">標題6</h6>
</body>
</html>

4.3.超鏈接標簽

超鏈接是指從一個網頁指向一個目標的鏈接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置（錨點），還可以是一個圖片，一個電子郵件，一個檔案，甚至是一個應用程式，

a 標簽是超鏈接，href 屬性設定連接的地址，target屬性設定哪個目標進行跳轉，

_self表示當前頁面（默認值）, _blank 表示打開新頁面來進行跳轉

4.3.7

4.3.8

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/521823.html

標籤：其他

上一篇：golang中的鎖競爭問題

下一篇：Java多執行緒（5）：CAS

day01-HTML01