[TOC]
## 1.基本格式
### 1.1.文檔結構
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documet</title>
</head>
<body>
</body>
</html>
```
### 1.2.文檔結構解析
1. `Doctype`文檔類型聲明(Document Type Declaration,也稱Doctype)。
```
<!DOCTYPE html> //不區分大小寫
```
2. `html`元素就是標簽的意思。包含開始標簽和結束標簽。
```
<html lang="en"> // 如果是中文則為zh-cn
</html>
```
3. `head`包含元數據內容,包括`<link>`、`<meta>`、`<noscript>`、`<script>`、`<style>`、`<title>`,這些是向瀏覽器提供信息。
4. `meta`用來提供關于文檔的信息。`charset="utf8"`,表示告訴瀏覽器采用什么編碼。
5. `title`設置瀏覽器左上角的標題。
```
<title>標題</title>
```
6. `body`用來包含文檔內容的元素
## 2.文本元素
| 元素名稱 | 說明 |
| --- | --- |
| a | 超鏈接 |
| br | 強制換行 |
| wbr | 可安全換行 |
| b | 標記一段文字但不強調 |
| strong | 表示重要 |
| i | 表示外文或科學術語 |
| em | 表示強調 |
| code | 表示計算機代碼 |
| var | 表示程序輸出 |
| samp | 表示變量 |
| kbd | 表示用戶輸入 |
| abbr | 表示縮寫 |
| cite | 表示其他作品的標題 |
| del | 表示被刪除的文字 |
| s | 表示文字已不再確認 |
| dfn | 表示術語定義 |
| mark| 表示與另一段上下文有關的內容 |
| q | 表示引自他處的內容 |
| rp | 與ruby元素結合使用,標記括號 |
| rt | 與ruby元素結合使用,標記括號 |
| tuby | 表示位于表意文字上方或右方的注音符號 |
| bdo | 控制文字的方向 |
| small | 表示小號字體內容 |
| sub | 表示下標字體 |
| sup | 表示上標字體 |
| time | 表示時間或日期 |
| u | 標記一段文字但不強調 |
| span | 通用元素,沒有任何語義。一般配合 CSS 修飾。 |
## 3.超鏈接和路徑
### 3.1.超鏈接的屬性
| 屬性名稱 | 說明 |
| --- | --- |
| href | 指定元素所指資源的 URL |
| hreflang | 指向的鏈接資源所使用的語言 |
| media | 說明所鏈接資源用于哪種設備 |
| rel |說明文檔與所鏈接資源的關系類型 |
| target | 指定用以打開所鏈接資源的瀏覽環境 |
| type | 說明所鏈接資源的 MIME 類型(比如 text/html) |
#### target屬性
target屬性告訴瀏覽器希望將所鏈接的資源顯示在哪里。
| 屬性名稱 | 說明 |
| --- | --- |
| _blank | 在新窗口或標簽頁中打開文檔 |
| _parent | 在父窗框組(frameset)中打開文檔 |
| _self | 在當前窗口打開文檔(默認) |
| _top | 在頂層窗口打開文檔 |
### 3.2.相對路徑和絕對路徑
絕對路徑就是從盤符開始的完整路徑。
相對路徑就是相對當前路徑所在的路徑。
## 4.分組元素
分組元素為了頁面的排版需要。
| 元素名稱 | 說明 |
| --- | --- |
| p | 表示段落 |
| div | 一個沒有任何語義的通用元素,和 span 是對應元素 |
| blockquote | 表示引自他處的大段內容 |
| pre | 表示其格式應被保留的內容 |
| hr | 表示段落級別的主題轉換,即水平線 |
| ul,ol | 表示無序列表,有序列表 |
| li | 用于 ul,ol 元素中的列表項 |
|dl,dt,dd | 表示包含一系列術語和定義說明的列表。dt 在 dl 內部表示術語,一般充當標題;dd 在 dl 內部表示定義,一般是內容。 |
| figure | 表示圖片 |
| figcaption | 表示 figure 元素的標題 |
## 5.表格元素
表格的基本構成最少需要三個元素:`<table>`、`<tr>`、`<td>`,其他的一些作為可選輔助存在。
| 元素說明 | 名稱 |
| --- | --- |
| table | 表示表格 |
| thead | 表示標題行 |
| tbody | 表示表格主體 |
| tfoot | 表示表腳 |
| tr | 表示一行單元格 |
| th | 表示標題行單元格 |
| td | 表示單元格 |
| col | 表示一列 |
| colgroup | 表示一組列 |
| caption | 表示表格標題 |
## 6.文檔元素
文檔元素的主要作用是劃分各個不同的內容,讓整個布局清晰明快。讓整個布局元素具有語義,進一步替代 div。
| 元素說明 | 名稱 |
| --- | --- |
| h1~h6 |表示標題 |
| header | 表示首部 |
| footer | 表示尾部 |
| nav | 表示有意集中在一起的導航元素 |
| section | 表示重要概念或主題 |
| article | 表示一段獨立的內容 |
| address | 表示文檔或 article 的聯系信息 |
| aside| 表示與周邊內容少有牽涉的內容 |
| hgroup | 將一組標題組織在一起 |
| details | 生成一個區域,用戶將其展開可以獲得更多細節 |
| summary | 用在 details 元素中,表示該元素內容的標題或說明 |
- Golang
- 基礎知識
- 基本數據類型
- 運算符
- 變量&常量
- 流程控制
- 數組
- 切片
- string操作
- Map及實現原理
- Go其他
- CLI命令
- Golang內置類型和函數
- init函數和main函數
- 網絡編程
- 互聯網協議
- socket編程
- 單元測試
- 并發編程
- channel
- 優雅地關閉channel
- Mutex
- GMP原理與調度
- Go Web
- HTTP Server
- gin框架
- 快速入門
- HTML渲染
- JSONP
- Multipart/Urlencoded綁定
- PureJSON
- gin路由
- beego框架
- Bee工具安裝
- 配置模塊
- Web模塊
- 路由
- 數據操作
- Go操作Mysql數據庫
- Go操作redis
- mongo-driver
- sqlx庫
- 操作etcd
- msgpack
- 網絡爬蟲
- 獲取頁面
- 標準庫
- IO操作
- 文件操作
- fmt
- 格式化輸出
- flag
- log
- time
- strconv
- template
- os
- sync.Mutex
- Context
- 第三方庫
- zap庫
- viper
- validator參數校驗
- GORM
- 基礎
- CRUD接口
- INI
- GoFrame
- 快速開始
- 微服務
- go-kit
- gRPC
- Protocol Buffers 語法指南
- go-zero
- 相關名詞解釋
- 數據結構和算法
- 基礎知識
- 鏈表
- Golang GUI
- fyne基礎
- 顯示時間
- RabbitMQ-Go
- centos7 安裝rabbitmq-server
- RabbitMQ介紹
- 工作隊列
- Go設計模式
- 設計模式的分類
- 簡單工廠模式
- golang自舉編譯
- 了解sync.Once
- 知識碎片
- 常見問題
- 開源項目
- Python
- Anaconda
- 介紹、使用教程
- Python基礎知識
- Python之禪
- 變量和類型
- 流程控制
- Python運維
- Python內置工具
- 命令行工具
- 包管理工具pip
- 小爬蟲筆記
- I/O操作
- requests庫
- requests基本使用
- BeautifulSoup庫
- BeautifulSoup基本使用
- Scrapy框架
- 數據可視化
- Django
- Django起步
- OpenCV
- OpenCV入門
- 前端
- HTML
- CSS
- CSS權重計算
- Javascript
- 基礎
- JS基礎知識
- 監聽事件
- 字符串操作
- 數組操作
- 輸入輸出
- 定時器
- 樣式操作
- 獲取url參數
- Typescript
- Pick 與 Omit TS內置類型
- Vue.js
- Vue.js介紹
- Vue.js基礎
- Vue指令
- v-model
- v-for
- 指令修飾符
- Q&A
- 命令
- Vue3
- node.js
- node.js基礎
- npm遇到的問題
- 相關工具安裝
- nvm使用教程
- 工程化webpack
- Linux
- Linux基礎
- 符號鏈接
- Shell
- 腳本執行方式
- 數據的輸入輸出
- 腳本執行中的問題
- tcpdump
- 正則表達式
- Elasticsearch
- Docker
- Docker的基礎概念與操作
- Docker 安裝
- 容器技術原理
- Docker核心概念
- Docker基本操作
- 鏡像相關操作
- 容器相關操作
- 鏡像加速器
- Dockerfile
- COPY復制文件
- Docker所遇問題
- ansible
- ansible入門
- k8s
- 安裝工具
- kubectl
- Git
- gitlab
- gitlab備份與恢復
- gitlab基本使用
- git使用
- git常用命令
- git提交問題
- git提交規范
- 數據庫
- MySQL
- MySQL介紹
- mariadb安裝
- 主主復制
- 數據庫問題集結
- 開啟binlog
- MySQL常用命令
- SQL總結
- MySQL性能優化系列
- 第一章 初始化安裝和簡單安全加固
- 第二章 認識performance_schema
- 第三章 MySQL體系結構
- MySQL配置模板
- Redis
- Redis簡單使用
- Redis常見問題
- Redis集群
- Redis Cluster概述
- 數據分布
- 搭建集群
- MongoDB
- mongodb分片
- MongoDB分片集群設置密碼驗證
- TiDB
- 單機模擬部署生產環境集群
- 服務器
- CentOS
- 配置阿里云的yum源和epel源
- centos7 實現NFS文件共享
- rsync
- centos7 源碼編譯rsync
- rsync實現文件同步
- 添加刪除swap分區
- 清除buff/cache
- 配置ntp時間同步
- centos7安裝pip
- centos7虛擬機啟動報xfs錯誤
- centos7常用命令
- centos7安裝mysql
- centos7安裝python3.x
- centos7升級gcc、g++
- centos7安裝nginx
- centos7部署Nexus
- centos7離線安裝python3
- centos7.6編譯mariadb10.5.22
- CentOS8
- 銀河麒麟V4
- nginx編譯
- 銀河麒麟V10_x86
- 安裝VNC
- 單用戶模式
- UOS
- 配置本地apt源
- apt安裝vnc-server
- UOS單用戶模式
- UOS創建自啟動腳本
- 源碼編譯
- oniguruma編譯
- Proxmox VE
- PVE基本使用
- PVE故障
- KVM
- KVM相關命令
- 銀河麒麟V10_x86安裝kvm
- UOS_arm64安裝kvm
- yum、rpm、apt
- dpkg、apt-get、yum和rpm的區別
- rpm打包
- yum相關問題
- 內建銀河麒麟的apt源
- 其他軟件
- JuiceFS
- nacos
- 常見命令
- 硬盤分區
- Linux常見問題
- 測試
- sysbench
- 其他
- Cloc代碼統計工具
- onlyoffice 在線文檔編輯
- onlyoffice添加中文字體
- 遇到的問題
- 網絡通信協議
- 部署相關記錄
- Vmware workstation虛擬機遷移到PVE指南
- 小操作