前端html基礎

簡介
HTML 是什麼？
htyper text markup language 即超文本標記語言。
超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
標記語言: 標記（標籤）構成的語言。
什麼是標籤:
    是由一對尖括號包裹的單詞構成例如: <html> *所有標籤中的單詞不可能以數字開頭.
    標籤不區分大小寫.<html> 和 <HTML>. 推薦使用小寫.
    標籤分爲兩部分: 開始標籤<a> 和結束標籤</a>. 兩個標籤之間的部分我們叫做標籤體.
    有些標籤功能比較簡單.使用一個標籤即可.這種標籤叫做自閉和標籤.例如: <br/><hr/><input/><img/>
    標籤可以嵌套.但是不能交叉嵌套. <a><b></a></b>
標籤的屬性:
    通常是以鍵值對形式出現的. 例如 name="nick"
    屬性只能出現在開始標籤或自閉和標籤中.
    屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹例如 name="nick"
    如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly
HTML5基本結構:
將HTML4中的DTD定義爲如下結構即可，其他不變。
<!DOCTYPE HTML>
HTML5支持的兩種指定頁面使用的字符集的方式:
使用Content-Type指定字符集
<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>
直接使用charset指定字符集
<meta charset="UTF-8">
<head> 標籤
<title>
<title>Title</title>
<base/>
標籤爲頁面上的所有鏈接規定默認地址或默認目標。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="http://images.cnblogs.com/cnblogs_com/suoning/845162/"/>
    <base target="_blank" />
</head>
<body>
<img src="o_s.png" alt="圖片加載失敗。。。"/>
<a href="http://cnblogs.com/suoning/">nick blogs</a>
</body>
</html>
# 上面這段代碼中，<img>標籤的src屬性是一個相對路徑，因爲<head>中通過base標籤設置了鏈接的默認地址，
所以img的src實際的地址是“http://images.cnblogs.com/cnblogs_com/suoning/845162/o_s.png”。
同樣的，<a>中只是指定了href，並未指定target屬性，所以也會使用base中設置的target屬性的值。
<link/>
引用外部文檔，常見於引用外部樣式。重要屬性有三個：rel、href、type。
rel 規定文檔與被鏈接文檔之間的關係。
rel="dns-prefetch" 預先解析緩存文檔中使用的域名，目的是爲了提高網頁訪問速度。使用場景：在一個網頁頻繁使用其他域名資源時。
rel="shortcut icon"或rel="icon" 在收藏和標題欄上用於顯示的圖標。示例：<link rel="icon" href="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_s.png">。注意：IE瀏覽器只支持ico格式，爲了兼容IE，圖片文件採用ico格式。
rel="stylesheet" 引用外部樣式表。
rel="nofollow" 用於指示搜索引擎不要追蹤（爬蟲抓取），減少垃圾鏈接。用於<a>標籤，使用場景：網頁不被信任或是不希望唄搜索引擎錄入的網站。
href 資源的路徑（相對路徑/絕對路徑）。
type 規定被連接文檔的MIME類型，用於明確文件的打開方式。例如：.ico文件 image/x-icon。
<meta/>
定義關於HTML文檔的元數據。重要的屬性有三個：http-equiv、name、content
http-equiv 把content屬性值關聯到http頭部。
Content-Type（瀏覽器接受的文檔類型，一般是text/html）
refresh（網頁刷新，以秒爲單位）
expires（設定網頁到期時間，一旦過期，必須到服務器上重傳）
<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>
<meta http-equiv="Refresh" content="2">
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
<meta http-equiv="expires" content="6 Jun 2016"/>
name 把content屬性關聯到一個名稱。

    keywords（搜索關鍵字，用於搜索引擎抓取信息的顯示）
    description（搜索到網站後顯示的網頁內容簡描述）
    author（站點製作者信息）
     generator（用以說明生成工具）
    name也可以根據特定的功能自定義，在新浪網中有使用360認證和搜狐認證（<meta name="360-site-verification"content="63349**********"/>、<meta name="sogou_site_verification"content="BVI*******"/>）。
<meta name="keywords" content="搜索關鍵字">
<meta name="description" content="簡要描述">
<meta name="author" content="http://cnblogs.com/suoning">
<meta name="generator" content="用以說明生成工具">
content 定義與http-equiv或name屬性相關的元信息，是必要的屬性。
<body> 標籤
1、塊級標籤和內聯標籤
塊級標籤：<p><h1><table><ol><ul><form><div>
內聯標籤：<a><input><img><sub><sup><textarea><span>
block（塊）元素的特點
① 總是在新行上開始；
② 高度，行高以及外邊距和內邊距都可控制；
③ 寬度缺省是它的容器的100%，除非設定一個寬度。
④ 它可以容納內聯元素和其他塊元素
inline（內聯）元素的特點
① 和其他元素都在一行上；
② 高，行高及外邊距和內邊距不可改變；
③ 寬度就是它的文字或圖片的寬度，不可改變
④ 內聯元素只能容納文本或者其他內聯元素
對行內元素，需要注意如下
設置寬度width 無效。
設置高度height 無效，可以通過line-height來設置。
設置margin 只有左右margin有效，上下無效。
設置padding 只有左右padding有效，上下則無效。注意元素範圍是增大了，但是對元素周圍的內容是沒影響的。
2、基本標籤
<h1>~<h6> 標題標籤.
<p>: 段落標籤. 包裹的內容被換行.並且也上下內容之間有一行空白.
　　　　style="text-indent: 2em"可以設置樣式爲首行縮進兩個字符。
　　　　<blockquote></blockquote>可以用來設置整個段落的縮進。
<b> <strong>: 加粗標籤.
<strike>: 爲文字加上一條中線.
<u>: 文字下方加下劃線.
<em> <i>: 文字變成斜體.
<sup>和<sub>: 上角標和下角標.
<br>:換行.
<hr>:水平線.
<div>
        塊級標籤。塊級標籤常用於佈局，行級標籤常用語顯示內容。
　　    div的顯示通常使用id或class來標識。id爲唯一的標籤標識，class爲標籤的類標識。
　　    div的大小是由內容來決定的，默認情況下，高度由內容的高度決定，寬度適應屏幕。
　　    可以容納其他元素，是一個容器。
<span>
3、特殊符號
　　>    >
　　<    <
　　  空格
　 " 引號
　　© 版權符號
特殊符號    符號碼
"    &quot ;
&    &amp ;
<    &lt ;
>    &gt ;
   &copy ;
   &reg ;
±   &plusmn ;
×   &times ;
§   &sect ;
   &cent ;
   &yen ;
·   &middot ;
    &euro ;
   &pound ;
   &trade ;

4、<a> 超鏈接標籤(錨標籤)
重要屬性有三個：href、target、name
href 超鏈接地址：可以是Web上任意資源，包括圖片，網頁，樣式，腳本文件等。href="#"時，表示被鏈接頁面就是當前頁面。
target 文檔打開時要顯示的目標位置，屬性值一般有：_blank（新窗口中打開）、_self（默認，在超鏈接所在的容器中打開）、_parent（在超鏈接的父容器中打開）、_top（整個容器中打開）、name（框架名稱）。
name 錨記名稱。作用：跳轉到文檔的某個地方。返回首頁。
# 跳轉網頁
<a href="http://cnblogs.com/suoning" target="_blank">Nick Blogs</a>
# 跳轉錨記書籤名稱
<a name="top"><h3>Top！</h3></a>
<div style="height: 800px"></div>
<a href="#top">top</a>
1.標籤最簡式
<a href="mailto:[email protected]">郵件聯繫</a>
2.標籤幫你填抄送地址
<a href="mailto:[email protected][email protected]">郵件聯繫</a>
3.標籤幫你填暗送地址
<a href="mailto:[email protected][email protected]">郵件聯繫</a>
4.暗,抄
<a href="[email protected]">郵件聯繫</a>
5.標籤幫你填主題
<a href="mailto:[email protected]?subject=這是主題">郵件聯繫</a>
6.填郵件內容
<a href="mailto:[email protected]?body=這是內容">郵件聯繫</a>
7.多址發送
<a href="mailto:[email protected],[email protected]">郵件聯繫</a>
# http://shang.qq.com/v3/widget.html
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=630571017&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:630571017:51" alt="點擊這裏給我發消息" title="點擊這裏給我發消息"/></a>
<a href="tencent://message/?uin=630571017" target="_blank"><img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:13></a>
# 更多圖片地址如下：
# http://wpa.qq.com/pa?p=1:707321921:1
# http://wpa.qq.com/pa?p=1:707321921:2
# http://wpa.qq.com/pa?p=1:707321921:3
# http://wpa.qq.com/pa?p=1:707321921:4
# http://wpa.qq.com/pa?p=1:707321921:5
# http://wpa.qq.com/pa?p=1:707321921:6
# http://wpa.qq.com/pa?p=1:707321921:7
# http://wpa.qq.com/pa?p=1:707321921:8
# http://wpa.qq.com/pa?p=1:707321921:9
# http://wpa.qq.com/pa?p=1:707321921:10
# http://wpa.qq.com/pa?p=1:707321921:11
# http://wpa.qq.com/pa?p=1:707321921:12
# http://wpa.qq.com/pa?p=1:707321921:13

5、<img> 圖形標籤
行級標籤，用來顯示圖片。
重要屬性有：src、title、alt、width、height、align。
src 圖片地址。
title 鼠標懸浮在圖片上的文字。
alt 圖片找不到時要替換的文字。如果圖片資源使用的是外網資源，則不會顯示要替換的文字。如果使用的是本網站的資源（相對路徑給出），則找不到圖片時會顯示替換的文字，並保留圖片設置的寬高結構。
align 圖片周圍文字的垂直對齊情況。常用的屬性值有：top（與圖片的頂部對齊）、middle（與圖片的中部對齊）、bottom（默認，與圖片的底部對齊）。
width 圖片的寬
height 圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
<img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" alt="圖片加載失敗。。。" title="The knife girl, kiss"/>
6、列表標籤　
<ul> :無序列表標籤
<li>:列表中的每一項.
<ol> :有序列表標籤
<li>:列表中的每一項.
<li>主要的屬性有：type、value兩個:
type指明項目的類型，屬性值有：A，a，I，i，1，disc（實心圓），square（實心正方形），circle（空心圓）。
value表示序號值從幾開始。
<dl> 定義列表
<dt> 列表標題
<dd> 列表項

<ur>
    <li type="circle">A</li>
    <li type="1">B</li>
    <li type="1">C</li>
</ur>
<ol>
    <li value="3">3</li>
    <li>4</li>
</ol>
<dl>
    <dt><i>標題</i></dt>
    <dd>第一項</dd>
    <dd>第二項</dd>
    <dd>第三項</dd>
</dl>

　　

7、<table> 表格標籤
<table border="1">
    <thead>
        <tr>
            <th>序號</th>
            <th>姓名</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1.</th>
            <td>nick</td>
        </tr>
        <tr>
            <th>2.</th>
            <td>jenny</td>
        </tr>
    </tbody>
</table>
<table> 表格標籤
    border:（表格邊框）
    align（水平對齊方式）
    bgcolor（背景顏色）
    cellpadding（內邊距，單元格與內容之間的距離）
    cellspacing（外邊距，單元格的間距，設置爲0時，表格變爲實線表格）
    width（表格的寬度，可以用%或者像素，最好通過css來設置長寬）
<caption> 表格的標題
<tr> 表格的數據行，table row
         <th> 表格的表頭名稱，與<td>不同在於文字採用加粗居中的形式顯示，table head cell
         <td> 單元格，用來顯示錶格內容，table data cell
<thead> 表格頭部，使結構更加分明
<tbody> 表格主體部分，使結構更加分明
rowspan 單元格豎跨多少行，作用在th或者td上
colspan 單元格橫跨多少列（即合併單元格），作用在th或者td上
<table>
    <caption>xxxxxxxxxx</caption>
    <thead>
            <tr>
                <th>序號</th>
                <th>姓名</th>
                <th>年齡</th>
                <th>女神</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1.</th>
                <td>nick</td>
                <td>18</td>
                <td>可可西</td>
            </tr>
            <tr>
                <th>2.</th>
                <td>jenny</td>
                <td>21</td>
                <td>nick!!!</td>
            </tr>
        </tbody>
</table>
8、<form>表單標籤
表單屬性
HTML 表單用於接收不同類型的用戶輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。表單標籤, 要提交的所有內容都應該在該標籤中。
屬性：action、method、enctype
action 表單要提交的地址，用於處理表單的內容（一般是提交字典到後臺的一個接口，這個接口是java寫成的，提交到這個接口後後臺就知道如何處理這些數據了）。
method 提交的方法，默認是get方式提交。
      get: 1.提交的鍵值對.放在地址欄中url後面. 2.安全性相對較差. 3.對提交內容的長度有限制.
      post:1.提交的鍵值對不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.
enctype 對錶單數據進行編碼，默認都是要編碼的。格式爲：application/x-www-form-urlencoded（表單默認的編碼格式，表單發送前對所有字符進行編碼。編碼規則：空格轉換爲“+”號，特殊符號轉換爲ASC HEX值）。提交普通的文本內容到服務器就可以採用這種默認的編碼方式。當你需要提交的是一個文件時，編碼就需要採用另一種格式：multipart/form-data（不對字符編碼，文件上傳時使用）。text/plain（是一種純文本編碼，空格轉換爲“+”號，但是不對特殊字符進行編碼）。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <form action="https://www.baidu.com/s">
            <input type="text" name="wd">
            <input type="submit" value="百度一下">
        </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <form action="https://www.sogou.com/web">
            <input type="text" name="query">
            <input type="submit" value="搜狗搜索">
        </form>
</body>
</html>

表單元素
<input> type 屬性：
        text 文本框輸入（默認text文本框類型）。
            autocomplete（自動完成輸入的內容，要求表單元素要有name屬性纔有自動完成的效果，off表示自動完成不可用，on表示自動完成可用）
            disabled（設置或者獲取控件的狀態，默認是false即可用，等於true時不可用，不能輸入內容）
　　　　password 密碼框。（以下屬性text和password共有）
            size（指定表單元素的初始寬度。當type爲text或password時，表單元素的大小以字符爲單位，對於其他元素，寬度以像素爲單位）
            maxlength（type爲text或password時，表示輸入的最大字符數），有利於防止sql的注入***
            readonly 只讀.　
　　　　　　placeholder 框內預置內容(灰色)，寫上內容時才消失
        radio 單選按鈕。屬性：
             name（將name的值設置爲相同值，才表示一組數據，才能實現單選功能）
             value（必須要寫，提交到服務器的key值，實際開發過程中value一般是編號）
             checked（是否被選中的狀態）
        checkbox 複選框。
             name（名字一定要一樣一樣的，才表示是一組數據，添加到同一value值列表提交到服務器）
             value（必須要寫，提交到服務器的key值，實際開發過程中value一般是編號）
             checked（是否被選中的狀態）
        file 文件域，上傳文件（不同的瀏覽器表現形式不同）
　　　　submit 提交按鈕。用於提交表單。
　　　　reset 重置按鈕。清空表單的輸入，恢復到表單默認的狀態。
        button 普通按鈕。一般結合javascript使用。
　　　　image 圖片按鈕，用來提交表單，與submit是一樣的效果。
             src（圖片路徑）
　　　　hidden 隱藏字段。
             value（隱藏的內容）
　　　　color 顏色標籤。value指定顏色值（採用#十六進制數表示）。
　　　　date 日期。value值指定默認的日期，格式爲****-**-**（年月日）。
　　　　datetime-local 顯示本地時間，value值指定默認的時間，格式爲2016-05-20T11:10:10（年月日T時分秒）。
　　　　number 數字向上或者向下滑動。可以填數字然後向上或者向下選擇不同的值。
　　　　range 滑動標籤。min（指定最小值）、max（指定最大值）、value（指定當前默認值）。
　　　　week 每年的週數。value指定哪一年第幾周，格式爲2016-W25（2016年第25周）。
<textarea> 文本域標籤。默認表現形式是可以輸入很多行文本的文本框。
        name （表單提交項的key）
　　　　cols（設置文本域寬度）
        rows（設置文本域高度，即行數）
<select> 下拉框標籤。使用時要結合<option>子標籤一起使用。
        name:表單提交項的key
        size：選項個數
        multiple：多選
        <option> 下拉選中的每一項
          value（表單提交項的值）
          selected（selected下拉選默認被選中）
        <optgroup>爲每一項加上分組
<label> 把元素與文本結合起來
友好設計：不只是選中複選框才能選中並打鉤，要求點擊對應的文字也能選中該複選框。
這種情況下要用到<label>標籤的for屬性（設置或獲取給定標籤對象指定到的對象，值=另一個元素的id號即可）
<label for="name">姓名</label>
<input id="name" type="text">
<fieldset> 對錶單中的相關元素進行分組
<fieldset>
    <legend>溫馨提示</legend>
    <div align="middle">不要忘記點贊哦 ==</div>
</fieldset>
value: 表單提交項的值
對於不同的輸入類型，value 屬性的用法也不同：
    type="button", "reset", "submit" - 定義按鈕上的顯示的文本
    type="text", "password", "hidden" - 定義輸入字段的初始值
    type="checkbox", "radio", "image" - 定義與輸入相關聯的值
框架
<frameset> 框架
用來劃分窗體，不能放在<body>中，否則沒有效果。
    cols （縱向分割頁面。其數值表示方法有三種：“30%、30（或者30px）、*”；數值的個數代表分成的視窗數目且數值之間用“,”隔開。“30%”表示該框架區域佔全部瀏覽器頁面區域的30%；“30”表示該區域橫向寬度爲30像素；“*”表示該區域佔用餘下頁面空間。例如：cols="25%,200,*" 表示將頁面分爲三部分，左面部分佔頁面30%，中間橫向寬度爲200像素，頁面餘下的作爲右面部分。）
    rows（橫向分割頁面。屬性和cols一樣）
    frameborder（設置是否顯示框架邊框。設定值只有0、1；0 表示不要邊框，1 表示要顯示邊框）
    border（框架之間的距離，一般設置爲0）
    bordercolor（邊框的顏色）
    framespacing（設置框架與框架間的保留的空白距離）
<frameset cols="40%,*,*"> 第一個框架佔整個瀏覽器窗口的40%,剩下的空間平均分配給另外兩個框架。
<frameset cols="*,*,*,*"> 瀏覽器窗口等分爲四部分。
<iframe> 框架
元素會創建包含另外一個文檔的內聯框架（即行內框架）
    name （設置框架名稱。此爲必須設置的屬性）
    src （設置此框架要顯示的網頁名稱或路徑。此爲必須設置的屬性）
    scrolling （設置是否要顯示滾動條。設定值爲auto, yes, no）
    bordercolor （設置框架的邊框顏色）
    frameborder （設置是否顯示框架邊框。設定值只有0、1；0 表示不要邊框，1 表示要顯示邊框）
    noresize （設置框架大小是否能手動調節）
    marginwidth （設置框架邊界和其中內容之間的寬度）
    marginhight （設置框架邊界和其中內容之間的高度）
    width（設置框架寬度）
    height （設置框架高度）

如何使用 JS 判斷用戶是否處於活躍狀態

lightdb秒級增加列和刪除列（not null帶默認值）

lightdb數據庫超時相關控制參數

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

❤️‍🔥 Solon Cloud Event 新的事務特性與應用

lightdb mysql 8.0兼容之不可見主鍵

使用 JS 實現在瀏覽器控制檯打印圖片 console.image()

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（四）使用域名訪問網站應用

搭建svn版本控制系統

博客遷移

防火牆iptables基礎知識

Python自動化運維之常用模塊—OS

Python自動化運維之內置模塊

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結