web系統架構體系

B/S（Browser/Server）：瀏覽器實作
- 優點：
  - 規范、使用方便、本身實作成本低
  - 容易升級、便于維護
- 缺點：
  - 沒有網路，無法使用
  - 保存資料量有限，和服務器互動頻率高、耗費流量
  - 安全性差一點
C/S（Client/Server）：客戶端實作
- 優點：
  - 可以在無網路環境下使用
  - 和服務器互動相對頻率低、省流量
  - 安全性高一點
- 缺點：
  - 需要安裝客戶端
  - 升級麻煩，維護成本高
  - 開發成本高

什么是HTML

html是超文本標記語言（Hyper Text Markup Language），是一種使用標記標簽來描述網頁的語言，

超文本

用超鏈接的方法將各種不同空間的文字資訊組織在一起的網狀文本，可以用來鏈接圖片，音頻，視頻，動態圖片等

W3C標準

結構化標準語言（XHTML、XML）

表現標準語言（CSS）

行為標準（DOM、ECMAScript）

HTML標簽

標簽一般成對存在，如<html></html>

結構體標簽

`<!DOCTYPE html>`

說明html5中檔案的型別是html檔案

html標簽

<!--html的根標簽-->
<html></html>

title標簽

<!--設定網頁標題-->
<title>我的網頁</title>

meta標簽

<!-- meta標簽，charset 設定網頁字符集編碼-->
<meta charset="utf-8">
<meta name="keywords" content="關鍵字">
<meta name="description" content="描述">

body標簽

<!--體標簽，網頁呈現的內容-->
<body>內容</body>

文本標簽

注釋

<!-- 注釋的內容 -->

標題

<!-- 數字范圍：1 ~ 6，數字越大，字體越小-->
<h數字>標題<h數字>

字體

<!-- font標簽 -->
<!-- 屬性color：文字顏色（英文單詞、#+6位16進制的顏色值、rgb(,,)）-->
<!-- 大小seize：選值1-7，默認是3 -->
<!-- 字體face：選擇字體名稱 -->
<font color=red>HelloWorld</font>

換行

<!-- 單標簽，換行 -->
<br/>

水平分割線

<!-- hr標簽，分割線，單標簽
    屬性
    color：顏色
    width：可以使用像素（px）或者百分比
    align：水平對齊方式，默認居中
-->
<hr color="blue"  aligin=left>

加粗

<b></b>

傾斜

<i></i>

下劃線

段落

<p></p>

居中

<center></center>

下標

<sub></sub>

上標

<sup></sup>

圖片標簽

<img src="https://www.cnblogs.com/am0304/p/地址" 
 
height="高度" 
align="圖文混排時，對齊方式，居中：middle" 
alt="圖片說明，當圖片加載失敗顯示"
title="滑鼠懸停說明"/>

相對路徑："../"代表上一層目錄，同一層目錄可以直接訪問

絕對路徑：1、網路圖片，直接寫圖片地址；2、本機磁盤地址"盤符:/圖片名"

超鏈接

<a href="https://www.cnblogs.com/am0304/p/地址或#+錨鏈接名" target="打開新視窗的位置">鏈接名或圖片</a>

target = "_self"：當前視窗打開

target = "_blank"：新視窗打開

target = "_top"：在頂層頁面所在位置打開

target = "_parent"：在父頁面的視窗位置打開

target = "_iframeName"：在iframe位置打開

使用錨鏈接需要給目標標簽加屬性id，唯一的標記

發送郵件

<a herf="mailto:郵箱地址">連接名或圖片</a>

下載

<a herf="只可以是zip檔案">連接名或圖片</a>

表格標簽

<!--table代表表格標簽，tr代表行，td代表列-->
<table>
    <tr>
        <td>編號</td>
        <td>名稱</td>
        <td>價格</td>
    </tr>
    <tr>
        <td>001</td>
        <td>蘋果</td>
        <td>12</td>
    </tr>
    <tr>
        <td>002</td>
        <td>香蕉</td>
        <td>18</td>
    </tr>
</table>

屬性

表格的屬性（table）

border = "邊框線條粗細"

cellspacing = "單元格間隙的值"

align = "表格水平對齊方式"

width = "表格的寬度"

height = "表格的高度"

bgcolor = "表格的背景色"

background = "背景圖片地址"

行的屬性（tr）

height = "行高"

align = "水平對齊方式"

valign = "垂直對齊方式"middle、top、bottom

bgcolor = "行的背景色"

background = "行背景圖片地址"

單元格的屬性（td）

width = "寬度"會影響整個列

align = "水平對齊方式"

valign = "垂直對齊方式"middle、top、bottom

bgcolor = "單元格的背景色"

合并單元格

1、找到要合并單元格的開始位置

2、清除合并的是行還是列

3、合并幾行或幾列

4、除開始位置的單元格外，被合并的單元格進行洗掉

<!-- 合并開始的單元格 -->
<td colspan\rowspan="合并的列（橫向）、行數">除開始的單元格、其余洗掉</td>

表單標簽

<form method="get\post" action="表單提交的目標地址">
    賬號:<input name="lname"/><br />
    密碼:<input type="password" name="psw"/><br />
    <button type="submit">登錄</button>
</form>

form標簽的屬性

method = "get\post提交方式"

默認的提交方式是get,地址欄可以看到的，post方式地址欄不可見
get方式相對post不安全
get方式提交的資料量有限制的，而post理論上沒有限制

action = "表單提交的目標地址"

文本框標簽（`<input> </input>`）屬性

name = "提交引數名稱"

type = "input標簽樣式"

type="text" 普通文本框
- maxlength = "最大字符個數"
type="password" 密碼框
type="radio" 單選框
- value = "https://www.cnblogs.com/am0304/p/值"
- checked = "checked"默認選擇
type="date" 日期框
type="email" 郵箱文本框(自帶針對郵箱的校驗)
type="file" 檔案文本框(可以選擇各種檔案，比如說圖片，檔案)
type="checkbox" 多選框
- value = "https://www.cnblogs.com/am0304/p/值"
- checked = "checked"默認選擇
type="hidden" 隱藏文本框
type="color" 顏色選擇框
type="number" 數字選擇框
type="button\submit\reset" 按鈕
type="image" 圖形化按鈕，功能相當于submit

placeholde = "提示文字"

按鈕標簽（`<button></button>`）屬性

type = "按鈕功能"

type="submit" 按鈕（自帶提交功能）
type="button" 按鈕（不帶提交功能，就是一個最普通的按鈕）
type="reset"按鈕（重置功能）

下拉框標簽

<select>
    <option>下拉框串列標簽</option>
    <option selected="selected">默認選中</option>
</select>

文本域標簽

<textarea></textarea>

串列標簽

有序串列

<ol type="1">
  <li></li>
  <li></li>
  <li></li>
</ol>

type：序號型別

1：數字（默認）
A：大寫字母
I：大寫羅馬數字
a：小寫字母
i：小寫羅馬數字

無序串列

有符號無序串列

<ul type="circle">
  <li></li>
  <li></li>
  <li></li>
</ul>

type：符號型別

circle：空心圓
discs：實心圓（默認）
quare：實心方形

無符號無序串列

<dl>
  <dt></dt> <!-- 串列標題 -->
  <dd></dd>
  <dd></dd>
  <dd></dd>
</dl>

多媒體標簽：

視頻

<video  height="240" controls> <!--controls為視頻播放控制鍵-->
    <source src="https://www.cnblogs.com/am0304/p/視頻地址" type="video/檔案格式">
    您的瀏覽器不支持 HTML5 video 標簽，
</video>

音頻

<audio controls> 
    <source src="https://www.cnblogs.com/am0304/p/音頻地址" type="audio/檔案格式">
    Your browser does not support this audio format.
</audio>

iframe框架標簽

<iframe src="https://www.cnblogs.com/am0304/p/參考頁面地址"></iframe>

屬性

width：寬度

height：高度

frameborder：邊框粗細

scrolling：滾動條 yes、no、auto

新頁面

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

標籤：Html/Css

上一篇：SpringBoot（4）視圖技術Thymeleaf

下一篇：初學者對html的認知

web 前端 基礎HTML知識點