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。
- XML可以從HTML中分離數據。 即能夠在HTML文件之外將數據存儲在XML文檔中。
- XML可用於交換數據。 基於XML可以在不兼容的系統之間交換數據。
- XML可應用於B2B中。 如在網絡中交換金融信息。
- XML可以共享數據。 XML數據以純文本格式存儲，使XML更易讀、便於記錄調試，不同系統、程序的數據共享簡化。
- XML可以充分利用數據。 就像操作數據庫一樣，XML的數據可以被各種各樣的“閱讀器”處理。
- 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標簽的使用
- div代表網頁中的區塊，划分區域進行管理。
- 地圖下的省份，省份下的市，市里的區，區里的街道都是划分管理的。
- div標簽內部可以使用其他類型標簽
- div標簽內部可以嵌套多層div標簽
div標簽實例
運行結果：
11、文本格式標簽
| 名稱 | 功能 |
|---|---|
| hr | 水平線 |
| b/strong | 加粗 |
| i/em | 斜體 |
| small | 小字體 |
| sub | 下標字 |
| sup | 上標字 |
| ins | 插入字 |
| del | 刪除字 |
| pre | 預文本格式 |
實體
< 小於號
>大於號
©@
內聯框架
什么是內聯框架?內聯框架，即IFRAME，是HTML標簽，作用是文檔中的文檔。通俗的講就是通過內聯框架可以在一個窗口中顯示多個頁面。
width/heigth設置寬高
frameborder邊框控制
標簽鏈接頁面實驗
實現效果
URL
> URL是什么？URl是一個網頁的地址，可以用字母或（IP互聯網協議）數字組成
常見的URL scheme
http--超文本傳輸協議（不加密）
https--安全超文本傳輸協議（安全網頁，加密所有的信息交換）
ftp--文件傳輸協議（用於上傳/下載到網站）
如果有幫助到您
可以收藏訂閱哦~!