操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

新聞資訊

    些在線圖文編輯器不支持直接插入代碼塊,但可以直接粘貼 HTML 格式的高亮代碼塊。

    花了一點時間研究了一下各家的編輯器,規則卻各不相同。有的要求代碼塊被包含于 <code> ... </code> 或者 <pre> <code> ... </code> </pre> , 有些要求 class 屬性里包含 "code" 關鍵詞,或者要求代碼塊里必須包含至少一個 <br> 。如果不符合這些要求,不是變成普通文本,就是丟失換行縮進,或者丟失顏色樣式。

    所以,這就難了。先得找個支持代碼高亮的編輯器,仔細地選擇并復制代碼塊,復制完還得編輯剪貼板里的 HTML 。這就不如干脆寫個轉換工具了。

    因為瀏覽器操作系統剪貼板可能不太方便,下面用 aardio 寫一個工具軟件。

    先看軟件成品演示:

    軟件用法:

    1、輸入編程語言名稱(支持自動完成)。

    2、然后在輸入框中粘貼要轉換的編程代碼。

    3、點擊「復制高亮代碼塊」按鈕。

    然后我們就可以打開在線圖文編輯器直接粘貼生成的高亮代碼塊了。

    下面是這個軟件的 aardio 源代碼:

    import win.ui;
    /*DSG{{*/
    var winform=win.form(text="HTML 代碼塊生成工具 - 本工具使用 aardio 語言編寫";right=1055;bottom=674;bgcolor=16777215)
    winform.add(
    button={cls="button";text="復制高亮代碼塊";left=633;top=609;right=1000;bottom=665;bgcolor=16777215;color=14120960;db=1;dr=1;font=LOGFONT(h=-14);note="可在網頁編輯器直接粘貼";z=4};
    cmbLangs={cls="combobox";left=262;top=625;right=446;bottom=651;db=1;dl=1;edge=1;items={"javascript"};mode="dropdown";z=2};
    editCode={cls="edit";left=1;top=4;right=1052;bottom=599;db=1;dl=1;dr=1;dt=1;edge=1;hscroll=1;multiline=1;vscroll=1;z=5};
    static={cls="static";text="請選擇語言:";left=70;top=629;right=248;bottom=649;align="right";db=1;dl=1;transparent=1;z=3};
    webCtrl={cls="custom";text="自定義控件";left=8;top=10;right=1048;bottom=604;db=1;dl=1;dr=1;dt=1;hide=1;z=1}
    )
    /*}}*/
    
    import web.view;
    var wb=web.view(winform.webCtrl);
    
    import win.clip.html;
    wb.export({ 
        onHighlight=function(html,background,foreground){
            html=`<pre class="code" style="overflow-x:auto;text-align:left;box-shadow: rgba(216, 216, 216, 0.5) 0px 0px 0px 1px inset;padding:10px;border-radius:3px;background-color:`+background+`;color:`+foreground+`;white-space:pre;word-break:break-all;display:block;font-size:14px;font-style:normal;font-variant-ligatures:normal;font-variant-caps: normal;font-family: "Consolas", Consolas, "Liberation Mono", Menlo, Courier, monospace"><code>`
                + html + `</code></pre>`;
    
            html,count=string.replace(html,'\n',"<br>");
            if(!count){
                html=string.replace(html,`\</code\>\</pre\>$`,`<br></code></pre>`);
            }
            var cb=win.clip.html();
            cb.write(html); 
    
            winform.setTimeout( 
                function(){
                    winform.editCode.show(true);
                    winform.webCtrl.show(false);
                    winform.text="HTML 代碼塊生成工具 - 已復制高亮代碼塊到剪貼板,可在網頁直接粘貼";
                },1000); 
        };
        setLanguages=function(langs){
            winform.languages=langs;
        }  
    })
    
    
    winform.cmbLangs.onEditChange=function(){ 
    
        var text=string.lower(winform.cmbLangs.text);
        var items=table.filter( winform.languages : {}, lambda(v) string.startWith(v,text) ); 
        winform.cmbLangs.autoComplete(items);  
    }
    winform.cmbLangs.editBox.disableInputMethod();
    
    import web.prism;
    import wsock.tcp.asynHttpServer;
    var httpServer=wsock.tcp.asynHttpServer(); 
    httpServer.run(web.prism,{
        ["/index.html"]=/*****
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" /> 
        <link href="prism.css" rel="stylesheet" />
      </head>
      <body>
        <pre id="code-pre"><code id="code" class="lang-javascript"></code></pre>
        <script src="prism.js"></script>
        <script>
       function computedColorStyle(element, options={}) {
    
            Array.prototype.forEach.call(element.children,child=> {
                computedColorStyle(child, options);
            });
    
            const computedStyle=getComputedStyle(element);
            element.style["color"]=computedStyle.getPropertyValue("color");  
        }
    
        highlight=function(code,language){
            var html=Prism.highlight(code, Prism.languages[language], language);
    
            var codeEle=document.getElementById("code");
            codeEle.innerHTML=html;
            computedColorStyle(codeEle);
    
            const computedStyle=getComputedStyle(codeEle);  
            onHighlight(codeEle.innerHTML
                ,getComputedStyle(document.getElementById("code-pre")).getPropertyValue("background-color")
                ,computedStyle.getPropertyValue("color"));
        }
    
        setLanguages( Object.keys(Prism.languages) );
        </script>
      </body> 
    </html> 
        *****/
    });
    
    wb.go( httpServer.getUrl("/index.html"));
    
    winform.button.oncommand=function(id,event){
        winform.text="HTML 代碼塊生成工具 - 本工具使用 aardio 語言編寫"
        winform.editCode.show(false);
        winform.webCtrl.show(true);
    
        wb.xcall("highlight",winform.editCode.text,winform.cmbLangs.text);
    }
    
    
    winform.show();
    win.loopMessage();

    打開 aardio 創建工程,然后復制粘貼上面的代碼到 main.aardio 里面就可以直接運行,或生成獨立 EXE 文件:

    這個軟件的原理:

    1、首先通過 WebView2 調用 Prism.js 高亮代碼。為了可以內存加載 Prism.js ( 支持生成獨立 EXE ),我寫了一個 aardio 擴展庫 web.prism 。關于 WebView2 請參考:放棄 Electron,擁抱 WebView2!JavaScript 快速開發獨立 EXE 程序

    2、因為 Prism.js 生成的 HTML 代碼塊都是使用 class 屬性指定樣式,所以我們需要調用 getComputedStyle 獲取最終渲染的字體顏色屬性。

    3、最后在 JavaScript 里調用 aardio 函數處理生成的 HTML 代碼塊,aardio 的任務是將 HTML 修改為更合適直接粘貼的格式,并盡可能地處理各圖文編輯器的兼容問題。然后調用 win.clip.html 將處理好的 HTML 復制到系統剪貼板:

    import win.clip.html;
    
    var cb=win.clip.html();
    cb.write(html); 

    然后只要愉快地粘貼代碼塊就可以。

    如果是 aardio 代碼不需要用這個工具,在 aardio 編輯器里右鍵直接點『 復制全部到 HTML 代碼塊 』就可以了:

    “這里是云端源想IT,幫你輕松學IT”

    嗨~ 今天的你過得還好嗎?

    世界微塵里

    吾寧愛與憎


    - 2024.03.18 -

    在互聯網的世界中,表單是用戶與網站進行互動的重要橋梁。無論是注冊新賬號、提交反饋、還是在線購物,表單都扮演著至關重要的角色。在網頁中,我們需要跟用戶進行交互,收集用戶資料,此時就需要用到表單標簽。

    HTML提供了一系列的表單標簽,使得開發者能夠輕松地創建出功能豐富的表單。今天我們就來深入探討這些標簽,了解它們的作用以及如何使用它們來構建一個有效的用戶界面。



    一、表單的組成

    在HTML中,一個完整的表單通常由表單域、表單控件(表單元素)和提示信息三個部分構成。

    表單域

    • 表單域是一個包含表單元素的區域
    • 在HTML標簽中,<form>標簽用于定義表單域,以實現用戶信息的收集和傳遞
    • <form>會把它范圍內的表單元素信息提交給服務器


    表單控件

    這些是用戶與表單交云的各種元素,如<input>(用于創建不同類型的輸入字段)、<textarea>(用于多行文本輸入)、<button>(用于提交表單或執行其他操作)、<select>和<option>(用于創建下拉列表)等。



    提示信息

    這些信息通常通過<label>標簽提供,它為表單控件提供了描述性文本,有助于提高可訪問性。<label>標簽通常與<input>標簽一起使用,并且可以通過for屬性與<input>標簽的id屬性關聯起來。


    這三個部分共同構成了一個完整的HTML表單,使得用戶可以輸入數據,并通過點擊提交按鈕將這些數據發送到Web服務器進行處理。


    二、表單元素

    在表單域中可以定義各種表單元素,這些表單元素就是允許用戶在表單中輸入或者選擇的內容控件。下面就來介紹HTML中常用的表單元素。


    1、<form>標簽:基礎容器

    作用:定義一個表單區域,用戶可以在其中輸入數據進行提交。

    <form action="submit.php" method="post">

    其中action屬性指定了數據提交到的服務器端腳本地址,method屬性定義了數據提交的方式(通常為GET或POST)。


    2、<input>標簽:數據輸入

    <input>標簽是一個單標簽,用于收集用戶信息。允許用戶輸入文本、數字、密碼等。

    <input type="text" name="username" placeholder="請輸入用戶名">

    type屬性決定了輸入類型,name屬性定義了數據的鍵名,placeholder屬性提供了輸入框內的提示文本。


    <input>標簽的屬性

    下面舉個例子來說明:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    
    <body>
    <form>
    用戶名:<input type="text" value="請輸入用戶名"><br>
    密碼:<input type="password"><br>
    性別:男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
    愛好:吃飯<input type="checkbox"> 睡覺<input type="checkbox"> 打豆豆<input type="checkbox"><br>
    <input type="submit" value="免費注冊">
    <input type="reset" value="重新填寫">
    <input type="button" value="獲取短信驗證碼"><br>
    上傳頭像:<input type="file">
    </form>
    </body>
    </html>


    3、<label>標簽:關聯說明

    它與輸入字段如文本框、單選按鈕、復選框等關聯起來,以改善網頁的可用性和可訪問性。<label>標簽有兩種常見的用法:


    1)包裹方式:

    在這種用法中,<label>標簽直接包裹住關聯的表單元素。例如:

    <label>用戶名:<input type="text" name="username"></label>

    這樣做的好處是用戶點擊標簽文本時,關聯的輸入字段會自動獲取焦點,從而提供更好的用戶體驗。



    2)使用for屬性關聯:

    在這種用法中,<label>標簽通過for屬性與目標表單元素建立關聯,for屬性的值應與目標元素的id屬性相匹配。例如:

    <label for="username">用戶名:</label><input type="text" id="username" name="username">

    這樣做的優勢是單擊標簽時,相關的表單元素會自動選中(獲取焦點),從而提高可用性和可訪問性。


    4、<select>和<option>標簽:下拉選擇

    在頁面中,如果有多個選項讓用戶選擇,并且想要節約頁面空間時,我們可以使用標簽控件定義下拉列表。


    注意點:

    • <select>中至少包含一對<option>
    • 在<option>中定義selected=“selected”時,當前項即為默認選中項
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
    <form>
    籍貫:
    <select>
    <option>山東</option>
    <option>北京</option>
    <option>西安</option>
    <option selected="selected">火星</option>
    </select>
    </form>
    </body>
    </html>


    5、<textarea>標簽:多行文本輸入

    當用戶輸入內容較多的情況下,我們可以用表單元素標簽替代文本框標簽。

    • 允許用戶輸入多行文本。
    <textarea name="message" rows="5" cols="30">默認文本</textarea>

    rows和cols屬性分別定義了文本區域的行數和列數。


    代碼示例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
    <form>
    今日反饋:
    <textarea>請在此輸入內容</textarea>
    </form>
    </body>
    </html>



    6、<button>標簽:按鈕控件

    創建一個可點擊的按鈕,通常用于提交或重置表單。它允許用戶放置文本或其他內聯元素(如<i>、<b>、<strong>、<br>、<img>等),這使得它比普通的<input type="button">具有更豐富的內容和更強的功能。

    <button type="submit">提交</button>

    type屬性為submit時表示這是一個提交按鈕。


    7、<fieldset>和<legend>標簽:分組和標題

    通常用于在HTML表單中對相關元素進行分組,并提供一個標題來描述這個組的內容。



    <fieldset>標簽:該標簽用于在表單中創建一組相關的表單控件。它可以將表單元素邏輯分組,并且通常在視覺上通過圍繞這些元素繪制一個邊框來區分不同的組。這種分組有助于提高表單的可讀性和易用性。

    <legend>標簽:它總是與<fieldset>標簽一起使用。<legend>標簽定義了<fieldset>元素的標題,這個標題通常會出現在瀏覽器渲染的字段集的邊框上方。<legend>標簽使得用戶更容易理解每個分組的目的和內容。

    代碼示例:

    <form>
    <fieldset>
    <legend>個人信息</legend>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">郵箱:</label>
    <input type="email" id="email" name="email"><br><br>
    </fieldset>
    <fieldset>
    <legend>興趣愛好</legend>
    <input type="checkbox" id="hobby1" name="hobby1" value="music">
    <label for="hobby1">音樂</label><br>
    <input type="checkbox" id="hobby2" name="hobby2" value="sports">
    <label for="hobby2">運動</label><br>
    <input type="checkbox" id="hobby3" name="hobby3" value="reading">
    <label for="hobby3">閱讀</label><br>
    </fieldset>
    <input type="submit" value="提交">
    </form>

    在這個示例中,我們使用了兩個<fieldset>元素來組織表單的不同部分。第一個<fieldset>包含姓名和郵箱字段,而第二個<fieldset>包含三個復選框,用于選擇用戶的興趣愛好。每個<fieldset>都有一個<legend>元素,用于提供標題。這樣,用戶在填寫表單時可以更清晰地了解每個部分的內容。

    想要快速入門前端開發嗎?推薦一個前端開發基礎課程,這個老師講的特別好,零基礎學習無壓力,知識點結合代碼,邊學邊練,可以免費試看試學,還有各種輔助工具和資料,非常適合新手!點這里前往學習哦!云端源想

    8、<datalist>標簽:預定義選項列表

    <datalist>標簽是HTML5中引入的一個新元素,它允許開發者為輸入字段提供預定義的選項列表。當用戶在輸入字段中輸入時,瀏覽器會顯示一個下拉菜單,其中包含與用戶輸入匹配的預定義選項。


    使用<datalist>標簽可以提供更好的用戶體驗,因為它可以幫助用戶選擇正確的選項,而不必手動輸入整個選項。此外,<datalist>還可以與<input>元素的list屬性結合使用,以將預定義的選項列表與特定的輸入字段關聯起來。



    下面是一個使用<datalist>標簽的代碼示例:

    <form>
    <label for="color">選擇你喜歡的顏色:</label>
    <input type="text" id="color" name="color" list="colorOptions">
    <datalist id="colorOptions">
    <option value="紅色">
    <option value="藍色">
    <option value="綠色">
    <option value="黃色">
    <option value="紫色">
    </datalist>
    <input type="submit" value="提交">
    </form>


    9、<output>標簽:計算結果輸出

    <output>標簽是HTML5中引入的一個新元素,它用于顯示計算結果或輸出。該標簽通常與JavaScript代碼結合使用,通過將計算結果賦值給<output>元素的value屬性來顯示結果。


    <output>標簽可以用于各種類型的計算和輸出,例如數學運算、字符串處理、數組操作等。它可以與<input>元素一起使用,以實時更新計算結果。



    下面是一個使用<output>標簽的示例:

    <form>
    <label for="num1">數字1:</label>
    <input type="number" id="num1" name="num1" oninput="calculate()"><br><br>
    <label for="num2">數字2:</label>
    <input type="number" id="num2" name="num2" oninput="calculate()"><br><br>
    <label for="result">結果:</label>
    <output id="result"></output>
    </form>
    
    <script>
    function calculate() {
    var num1=parseInt(document.getElementById("num1").value);
    var num2=parseInt(document.getElementById("num2").value);
    var result=num1 + num2;
    document.getElementById("result").value=result;
    }
    </script>


    10、<progress>標簽:任務進度展示

    <progress>標簽是HTML5中用于表示任務完成進度的一個新元素。它通過value屬性和max屬性來表示進度,其中value表示當前完成的值,而max定義任務的總量或最大值。

    示例:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Progress Example</title>
    </head>
    <body>
    <h1>File Download</h1>
    <progress id="fileDownload" value="0" max="100"></progress>
    <br>
    <button onclick="startDownload()">Start Download</button>
    
    <script>
    function startDownload() {
    var progress=document.getElementById("fileDownload");
    for (var i=0; i <=100; i++) {
    setTimeout(function() {
    progress.value=i;
    }, i * 10);
    }
    }
    </script>
    </body>
    </html>

    在上面的示例中,我們創建了一個名為"fileDownload"的<progress>元素,并設置了初始值為0,最大值為100。我們還添加了一個按鈕,當用戶點擊該按鈕時,會觸發名為"startDownload"的JavaScript函數。這個函數模擬了一個文件下載過程,通過循環逐步增加<progress>元素的value屬性值,從而顯示下載進度。


    11、<meter>標簽:度量衡指示器

    <meter>標簽在HTML中用于表示度量衡指示器,它定義了一個已知范圍內的標量測量值或分數值,通常用于顯示磁盤使用情況、查詢結果的相關性等。例如:

    <p>CPU 使用率: <meter value="0.6" min="0" max="1"></meter> 60%</p>
    <p>內存使用率: <meter value="0.4" min="0" max="1"></meter> 40%</p>

    在這個示例中,我們使用了兩個<meter>標簽來分別顯示CPU和內存的使用率。value屬性表示當前的測量值,min和max屬性分別定義了測量范圍的最小值和最大值。通過這些屬性,<meter>標簽能夠清晰地顯示出資源的使用情況。



    需要注意的是,<meter>標簽不應該用來表示進度條,對于進度條的表示,應該使用<progress>標簽。


    12、<details>和<summary>標簽:詳細信息展示

    <details>和<summary>標簽是HTML5中新增的兩個元素,用于創建可折疊的詳細信息區域。

    <details>標簽定義了一個可以展開或折疊的容器,其中包含一些額外的信息。它通常與<summary>標簽一起使用,<summary>標簽定義了<details>元素的標題,當用戶點擊該標題時,<details>元素的內容會展開或折疊。

    示例:

    <details>
    <summary>點擊查看詳細信息</summary>
    <p>這里是一些額外的信息,用戶可以點擊標題來展開或折疊這些信息。</p>
    </details>

    在這個示例中,我們使用了<details>標簽來創建一個可折疊的容器,并在其中添加了一個<summary>標簽作為標題。當用戶點擊這個標題時,容器的內容會展開或折疊。


    總結:

    HTML表單標簽是構建動態網頁的基石,它們使得用戶能夠與網站進行有效的交互。


    通過合理地使用這些標簽,開發者可以創建出既美觀又功能強大的表單,從而提升用戶體驗和網站的可用性。所以說,掌握這些標簽的使用,對于前端開發者來說是至關重要的。


    我們下期再見!


    END

    文案編輯|云端學長

    文案配圖|云端學長

    內容由:云端源想分享

網站首頁   |    關于我們   |    公司新聞   |    產品方案   |    用戶案例   |    售后服務   |    合作伙伴   |    人才招聘   |   

友情鏈接: 餐飲加盟

地址:北京市海淀區    電話:010-     郵箱:@126.com

備案號:冀ICP備2024067069號-3 北京科技有限公司版權所有