Javaweb知識 day07 HTML相關知識

、web概念概述

1.1 JavaWeb：使用Java語言開發基于互聯網的項目

1.2 軟件架構：

1.2.1 C/S: Client/Server 客戶端/服務器端

在用戶本地有一個客戶端程序，在遠程有一個服務器端程序

如：QQ，迅雷...

優點：用戶體驗好

缺點：開發、安裝，部署，維護麻煩

1.2.2 B/S: Browser/Server 瀏覽器/服務器端

只需要一個瀏覽器，用戶通過不同的網址(URL)，客戶訪問不同的服務器端程序

優點：開發、安裝，部署，維護簡單

缺點：如果應用過大，用戶的體驗可能會受到影響，對硬件要求過高

二、B/S架構詳解

2.1 資源分類：

2.1.1 靜態資源：使用靜態網頁開發技術發布的資源。

特點：

所有用戶訪問，得到的結果是一樣的。

如：文本，圖片，音頻、視頻, HTML,CSS,JavaScript

如果用戶請求的是靜態資源，那么服務器會直接將靜態資源發送給瀏覽器。瀏覽器中內置了靜態資源的解析引擎，可以展示靜態資源

HTML：用于搭建基礎網頁，展示頁面的內容

CSS：用于美化頁面，布局頁面

JavaScript：控制頁面的元素，讓頁面有一些動態的效果

2.1.2 動態資源：使用動態網頁及時發布的資源。

特點：

所有用戶訪問，得到的結果可能不一樣。

如：jsp/servlet,php,asp...

如果用戶請求的是動態資源，那么服務器會執行動態資源，轉換為靜態資源，再發送給瀏覽器

2.1.3 注意：我們要學習動態資源，必須先學習靜態資源！

三、HTML

3.1 概念：是最基礎的網頁開發語言

Hyper Text Markup Language 超文本標記語言

超文本：超文本是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網狀文本.

標記語言:

由標簽構成的語言。<標簽名稱> 如 html，xml

標記語言不是編程語言

3.2 快速入門：

3.2.1 語法：

1. 創建html文檔，后綴名為.html 或者 .htm

2. 標簽分類：

圍堵標簽：有開始標簽和結束標簽。如 <html> </html>

自閉和標簽：開始標簽和結束標簽在一起。如 <br/>

3. 標簽可以嵌套：

需要正確嵌套，不能你中有我，我中有你

錯誤：<a><b></a></b>

正確：<a><b></b></a>

4. 在開始標簽中可以定義屬性。屬性是由鍵值對構成，值需要用引號(單雙都可)引起來

5. html的標簽不區分大小寫，但是建議使用小寫。

3.2.2 代碼：

<html>

<head>

<title>title</title>

</head>

<body>

<FONT color='red'>Hello World</font><br/>

<font color='green'>Hello World</font>

</body>

</html>

3.3 標簽學習：

3.3.1 文件標簽：構成html最基本的標簽

1、html:html文檔的根標簽

2、head：頭標簽。用于指定html文檔的一些屬性。引入外部的資源

3、title：標題標簽。

4、body：體標簽

5、<!DOCTYPE html>：html5中定義該文檔是html文檔

3.3.2 文本標簽：和文本有關的標簽

1、注釋：

2、<h1> to <h6>：標題標簽，h1~h6:字體大小逐漸遞減

3、<p>：段落標簽

4、<br>：換行標簽

5、<hr>：展示一條水平線

文本標簽屬性：

color：顏色

width：寬度

size：高度

align：對其方式

center：居中

left：左對齊

right：右對齊

6、<b>：字體加粗

7、<i>：字體斜體

8、<font>:字體標簽

9、<center>:文本居中

字體標簽屬性：

color：顏色

size：大小

face：字體

屬性定義：

color：

1. 英文單詞：red,green,blue

2. rgb(值1，值2，值3)：值的范圍：0~255 如 rgb(0,0,255)

3. #值1值2值3：值的范圍：00~FF之間。如： #FF00FF

width：

1. 數值：width='20' ,數值的單位，默認是 px(像素)

2. 數值%：占比相對于父元素的比例

3.3.3 圖片標簽：

img：展示圖片

屬性：src：指定圖片的位置

相對路徑：以.開頭的路徑

./：代表當前目錄

../:代表上一級目錄

代碼舉例：

3.3.4 列表標簽：

有序列表：

ol:

li:

無序列表：

ul:

li:

3.3.5 鏈接標簽：

a:定義一個超鏈接

屬性：

href：指定訪問資源的URL(統一資源定位符)

target：指定打開資源的方式

_self:默認值，在當前頁面打開

_blank：在空白頁面打開

代碼：

3.3.6 div和span：

div:每一個div占滿一整行。塊級標簽

span：文本信息在一行展示，行內標簽內聯標簽

3.3.7 語義化標簽：html5中為了提高程序的可讀性，提供了一些標簽。

<header>：頁眉

<footer>：頁腳

3.3.8 表格標簽：

table：定義表格

屬性：

width：寬度

border：邊框

cellpadding：定義內容和單元格的距離

cellspacing：定義單元格之間的距離。如果指定為0，則單元格的線會合為一條、

bgcolor：背景色

align：對齊方式

tr：定義行

bgcolor：背景色

align：對齊方式

td：定義單元格

colspan：合并列

rowspan：合并行

th：定義表頭單元格

<caption>：表格標題

<thead>：表示表格的頭部分

<tbody>：表示表格的體部分

<tfoot>：表示表格的腳部分

osition: absolute;使元素完全脫離文檔流（原始位置不保留）

在設置flex布局之后，子元素的float、clear、vertical-align屬性都將失效

.container {

flex-direction: row | row-reverse | column | column-reverse;

}

默認值為：

row，主軸為水平方向，起點在左端。

row-reverse：主軸為水平方向，起點在右端。

column：主軸為垂直方向，起點在上端。

column-reverse：主軸為垂直方向，起點在下端

.container {

justify-content: flex-start | flex-end | center | space-between | space-around;

}

說明:flex-start：左對齊。

flex-end：右對齊。

center：居中。

space-between：兩端對齊，項目之間的間隔相等，即剩余空間等分成間隙。

space-around：每個項目兩側的間隔相等，所以項目之間的間隔比項目與邊緣的間隔大一倍

.container {

align-items: flex-start | flex-end | center | baseline | stretch;

}

默認值為 stretch，即如果項目未設置高度或者設為

auto，將占滿整個容器的高度。

flex-start：交叉軸的起點對齊。

flex-end：交叉軸的終點對齊。

center：交叉軸的中點對齊。

baseline: 項目的第一行文字的基線對齊

.container {

//定義多根軸線的對齊方式

}

偽類選擇器（如：hover）和屬性選擇器（如[type="input"]）與一個類選擇器的優先級相同。通用選擇器（＊）和組合器（>、+、~）對優先級沒有影響

通常最好讓優先級盡可能低，這樣當需要覆蓋一些樣式時，才能有選擇空間

在選擇器中不要使用ID

不要使用！important

創建一個用于分發的JavaScript模塊（比如NPM包）時，強烈建議盡量不要在JavaScript里使用行內樣式

正確的做法是在包里包含一個樣式表。如果組件需要頻繁修改樣式，通常最好用JavaScript給元素添加或者移除類

繼承：

跟文本相關的屬性：color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing

有兩個特殊值可以賦給任意屬性，用于控制層疊：inherit和initial

width的默認值就是auto； display: initial等價于display: inline

在CSS中，1em等于當前元素的字號，其準確值取決于作用的元素

em用在內邊距、外邊距以及元素大小上很好，但是用在字號上就會很復雜

使用rem設置字號 rem是root em的縮寫。rem不是相對于當前元素，而是相對于根元素的單位

一般會用rem設置字號，用px設置邊框，用em設置其他大部分屬性，尤其是內邊距、外邊距和圓角（不過我有時用百分比設置容器寬度）

vh：視口高度的1/100。

vw：視口寬度的1/100。

vmin：視口寬、高中較小的一方的1/100（IE9中叫vm，而不是vmin）。

vmax：視口寬、高中較大的一方的1/100（本書寫作時IE和Edge均不支持vmax）

calc()函數內可以對兩個及其以上的值進行基本運算。當要結合不同單位的值時，calc()特別實用。它支持的運算包括：加（+）、減（?）、乘（×）、除（÷）。加號和減號兩邊必須有空白

line-height、z-index、font-weight 無單位

css 變量：變量名前面必須有兩個連字符--，塊內聲明

使用 var(--xxx)

IE8+支持display: table,IE10+支持彈性盒子或者Flexbox，都默認支持等高列

給容器設置display: flex，它就變成了一個彈性容器（flex container），子元素默認等高

vertical-align聲明只會影響行內元素或者table-cell元素

垂直居中指南

在容器里讓內容居中最好的方式是根據特定場景考慮不同因素。做出判斷前，先逐個詢問自己以下幾個問題，直到找到合適的解決辦法。其中一些技術會在后面的章節中介紹，可根據情況翻閱對應的內容尋找答案。? 可以用一個自然高度的容器嗎？給容器加上相等的上下內邊距讓內容居中。? 容器需要指定高度或者避免使用內邊距嗎？對容器使用display: table-cell和vertical-align: middle。? 可以用Flexbox嗎？如果不需要支持IE9，可以用Flexbox居中內容。參見第5章。? 容器里面的內容只有一行文字嗎？設置一個大的行高，讓它等于理想的容器高度。這樣會讓容器高度擴展到能夠容納行高。如果內容不是行內元素，可以設置為inline-block。? 容器和內容的高度都知道嗎？將內容絕對定位。參見第7章。（只有當前面提到的方法都無效時才推薦這種方式。）? 不知道內部元素的高度？用絕對定位結合變形（transform）。參見第15章的例子。（還是只有當前面提到的方法都無效時才推薦該方法。）還不確定的話，參考howtocenterincss網站。這個網站很不錯，可以根據自己的場景填寫幾個選項，然后它會相應地生成垂直居中的代碼

覽器的兼容性越來越好，移動端基本是清一色的webkit，經常會用到css的不同尺寸/長度單位，這里做個整理。

概覽

絕對單位

px : Pixel 像素
pt : Points 磅
pc : Picas 派卡
in : Inches 英寸
mm : Millimeter 毫米
cm : Centimeter 厘米
q : Quarter millimeters 1/4毫米

相對單位

% : 百分比
em : Element meter 根據文檔字體計算尺寸
rem : Root element meter 根據根文檔（ body/html ）字體計算尺寸
ex : 文檔字符“x”的高度
ch : 文檔數字“0”的的寬度
vh : View height 可視范圍高度
vw : View width 可視范圍寬度
vmin : View min 可視范圍的寬度或高度中較小的那個尺寸
vmax : View max 可視范圍的寬度或高度中較大的那個尺寸

運算

calc : 四則運算

實例：

h1 { width: calc(100% - 10px + 2rem)

單位比例

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

詳細

絕對單位

px - Pixel 像素

像素 px 相對于設備顯示器屏幕分辨率而言。

div { font-size: 12px }
p { text-indent: 24px }

pt Points 磅

1 pt = 1/72 英寸

div { font-size: 10pt }
p { height: 100pt }

pc Picas 派卡

十二點活字（印刷中使用的），相當于我國新四號鉛字的尺寸。

div { font-size: 10pc }
p { height: 10pc }

in Inches 英寸

div { font-size: 10in }
p { height: 10in }

mm Millimeter 毫米

div { font-size: 10mm }
p { height: 10mm }

cm Centimeter 厘米

div { font-size: 10cm }
p { height: 10cm }

q Quarter millimeters 1/4毫米

div { font-size: 20q }
p { height: 100q }

相對單位

% 百分比

相對于父元素寬度

<body>

em Element meter 根據文檔計算尺寸

相對于當前文檔對象內文本的字體尺寸而言，若未指定字體大小則繼承自上級元素，以此類推，直至 body，若 body 未指定則為瀏覽器默認大小。

<body>

rem Root element meter 根據根文檔（ body/html ）字體計算尺寸

相對于根文檔對象（ body/html ）內文本的字體尺寸而言，若未指定字體大小則繼承為瀏覽器默認字體大小。

ex 文檔字符“x”的高度

相對于字符“x”的高度，通常為字體高度的一半，若未指定字體尺寸，則相對于瀏覽器的默認字體尺寸。

至于為啥是x，我TM也不知道。

ch 文檔數字“0”的的寬度

同上，相對于數字“0”的寬度。

一張圖解釋：

vh View height / vw View Width - 可視范圍

相對于可視范圍的高度和寬度，可視范圍被均分為 100 單位的 vh/vw；可視范圍是指屏幕可見范圍，不是父元素的，百分比是相對于包含它的最近的父元素的高度和寬度。

假設設備可視范圍為高度 900px，寬度 750px，則， 1 vh = 900px/100 = 9px，1vw = 750px/100 = 7.5px
。

vmin / vmax 可視范圍的寬度或高度中較小/較大的那個尺寸

假設瀏覽器的寬度設置為 1200px，高度設置為 800px，則 1vmax = 1200/100px = 12px， 1vmin = 800/100px = 8px 。

如果寬度設置為 600px，高度設置為 1080px, 則 1vmin = 6px, 1vmax = 10.8px 。

假設需要讓一個元素始終在屏幕上可見：

.box {

假設需要讓這個元素始終鋪滿整個視口的可見區域：

.box {

總結

em、rem 是實際生產中我們最常用到的單位，可以使用其配合媒體查詢改變 body 字體大小來實現響應式的設計，vh、vw、vmin、vmax也可以很方便地幫助我們控制響應尺寸，但實際的可控性可能不如前者，具體按照我們的業務需求去實踐吧！

在線咨詢

上一篇：什么是 HTML？前端入門基礎教程，帶您全面認識HTML
下一篇：TaskBuilder用echarts第三方水球插件實現動態水球波紋圖表的方法

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Javaweb知識 day07 HTML相關知識

概覽

總結

您的項目需求