《轉生成為前端程式設計師01-基礎篇》

夜風子_office發表於2021-05-30
前端程式設計師

HTML 框架基礎

問題

要學好前端，首先我們要先了解框架，也就是網頁框架html。

那麼HTML是什麼？XML是什麼？

SGML Standard Generalized Markup Language 標準通用標記語言是HTML的前身

HTML 超級文字標記語言 Hyper Text Markup Language 通過標記式的指令(Tag)，將影像、聲音、圖片、文字動畫、影視等內容顯示出來。HTML一直被用作3W的資訊表示語言，使用HTML語言描述的檔案需要通過3W瀏覽器顯示出效果。HTML的普遍應用就是帶來了超文字的技術―通過單擊滑鼠從一個主題跳轉到另一個主題，從一個頁面跳轉到另一個頁面。HTML是展示網頁的，HTML和XML有點類似。但並不是一個東西，都是負責承載資料顯示的，但是XML更多的是作為資料交換中介商，HTML負責顯示資料。xml還有很多地方運用，比如作為配置檔案而存在，mybatis、spring等地方都有運用。

XML Extensible Markup Language 可擴充套件標記語言

可擴充套件標記語言雖然只是儲存資料，但極其簡單，易於在任何應用程式中讀/寫資料，應用軟體都支援XML。

  1. XML可以從HTML中分離資料。 即能夠在HTML檔案之外將資料儲存在XML文件中。
  2. XML可用於交換資料。 基於XML可以在不相容的系統之間交換資料。
  3. XML可應用於B2B中。 如在網路中交換金融資訊。
  4. XML可以共享資料。 XML資料以純文字格式儲存，使XML更易讀、便於記錄除錯，不同系統、程式的資料共享簡化。
  5. XML可以充分利用資料。 就像運算元據庫一樣，XML的資料可以被各種各樣的“閱讀器”處理。
  6. XML可以用於建立新的語言。 如，WAP和WML語言都是由XML發展來的。

1、HTML 基本結構

HTML基本內容

<!DOCTYPE html>       
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input</title>
</head>
<body>
    <h1>這是HTML標題</h1>
    <p>這是HTML段落</p>
    <a>這是HTML連結</a>
    <img src="#">img元素不需要結束標記
</body>
</html>

HTML屬性

<a href="#">這是一個a連結，地址在href屬性中</a>

常用屬性

屬性 描述
class html元素類名
id 元素的id
style html樣式（inline style）
title 題目

2、h 標籤

HTML 標題是通過 "h1" - "h6" 與"/h1"-"/h6"等標籤進行定義的。h標籤是一個行類元素

例如：

<h1>我是誰</h1>

<h2>我是誰</h2>

3、p 標籤

HTML 段落是通過

標籤進行定義的。p標籤是一個行類元素。

例如：

  <p>這是第一段</p>

  <p>這是第二段</p>

4、a 標籤

。
HTML 連結是通過 a 標籤進行定義的。通過a連結實現跳轉頁面的功能。

 <a href="https://www.bilibili.com/">bilibili.com</a>

5、ul，ol，dl，標籤

【ul】

意思是無序列表

【ol】

意思是有序列表


【li】

巢狀在ul或ol標籤中

【dl】

定義一個沒有字首的列表

【dt】

題目/物品/標誌

【dd】

對【題目/物品/標誌】的解釋

6、img 標籤

HTML 通過 img 標籤插入圖片,並用 src 屬性定點陣圖片的地址

<img src="imgs/violet.jpg">

在同級目錄下，可以直接使用 src 呼叫圖片

非同級目錄下，如果直接使用會出現圖片不顯示的情況：

解決辦法： ../【跳到上級目錄】

7、input 標籤

intput稱為表單標籤，輸入型別由type確定


網頁中的 input：

例項

placehoder屬性

作用：設定提示資訊

程式碼部分

呈現效果：

8、select標籤

分為以下四種

第一種：

執行結果：

第二種：加入size屬性

執行結果：

第三種：加入multiple屬性

執行結果：

第四種：加入opthgroup分組,加粗並且不可選中

執行結果：

9、textarea標籤

cols定義文字框的長度

執行結果：

rows定義文字框的寬度

執行結果：

10、div標籤

div標籤的使用

  1. div代表網頁中的區塊，劃分割槽域進行管理。
  2. 地圖下的省份，省份下的市，市裡的區，區裡的街道都是劃分管理的。
  3. div標籤內部可以使用其他型別標籤
  4. div標籤內部可以巢狀多層div標籤

div標籤例項

執行結果：

11、文字格式標籤

名稱 功能
hr 水平線
b/strong 加粗
i/em 斜體
small 小字型
sub 下標字
sup 上標字
ins 插入字
del 刪除字
pre 預文字格式

實體

&lt; 小於號
&gt;大於號
&#169;@

內聯框架

什麼是內聯框架?

內聯框架，即IFRAME，是HTML標籤，作用是文件中的文件。通俗的講就是通過內聯框架可以在一個視窗中顯示多個頁面。

width/heigth設定寬高

frameborder邊框控制

標籤連結頁面實驗

實現效果

URL

> URL是什麼？

URl是一個網頁的地址，可以用字母或（IP網際網路協議）數字組成

常見的URL scheme

http--超文字傳輸協議（不加密）

https--安全超文字傳輸協議（安全網頁，加密所有的資訊交換）

ftp--檔案傳輸協議（用於上傳/下載到網站）

如果有幫助到您可以收藏訂閱哦~!

相關文章