前端HTML

来源:https://www.cnblogs.com/an-wen/archive/2019/06/28/11103840.html
-Advertisement-
Play Games

前端HTML [TOC] HTML是什麼？ Html標簽:超文本標記語言,就是標記用的. 超文本標記語言（Hypertext Markup Language, HTML）是一種用於創建網頁的標記語言。 本質上是瀏覽器可識別的規則，我們按照規則寫網頁，瀏覽器根據規則渲染我們的網頁。對於不同的瀏覽器，對 ...


目錄

前端HTML

HTML是什麼？

Html標簽:超文本標記語言,就是標記用的.

  • 超文本標記語言（Hypertext Markup Language, HTML）是一種用於創建網頁的標記語言。
  • 本質上是瀏覽器可識別的規則，我們按照規則寫網頁，瀏覽器根據規則渲染我們的網頁。對於不同的瀏覽器，對同一個標簽可能會有不同的解釋。（相容性問題）
  • 網頁文件的擴展名：.html或.htm

HTML文檔結構

最基本的HTML文檔：

​```html
<!DOCTYPE html> 
<html lang="zh-CN">   #這個lang表示語言，zh-CN是中文的意思，就是說，你整個文檔的內容以中文為主，如果以英文為主，就寫成lang='en'

<head> 
  <meta charset="UTF-8">
  <title>css樣式優先順序</title>
</head>
<body> 

</body>
</html>
​```
1. <!DOCTYPE html>聲明為HTML5文檔。

2. <html>、</html>是文檔的開始標記和結束的標記。是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）。

3. <head>、</head>定義了HTML文檔的開頭部分。它們之間的內容不會在瀏覽器的文檔視窗顯示。包含了文檔的元（meta）數據，配置信息等，是給瀏覽器看的，你看到的是在body標簽裡面寫的。

4. <title>、</title>定義了網頁標題，在瀏覽器標題欄顯示。（修改一下title中的內容，然後看一下瀏覽器，你就會發現title是什麼了）

5. <body>、</body>之間的文本是可見的網頁主體內容。

HTML註釋

<!--註釋內容-->  #找到一行內容ctrl+/就能註釋，註釋的內容不會在網頁上顯示出來

功能變數名稱解析

功能變數名稱 -- ip地址 -- 192.168.1.10

https://192.168.1.10:80  -- www.jd.com  -- DNS解析 {'www.jd.com':'192.168.1.10',}

請求和響應

請求:瀏覽器socket客戶端給服務端發信息
響應:服務端socket給客戶端回信息

HTML常用標簽

標簽

必須是封閉的
<meta>
<h1></h1>  
標簽屬性  id='xx' asdfasfd='xxx'
<h1 id='xx' asdfasfd='xxx'>

標簽分類

兩類:
    內斂標簽(行內標簽):不獨占一行,內斂標簽只能嵌套內斂標簽    b\i\u\s\button\span\img\a
    塊級標簽(行外標簽):自己獨占一行,可以嵌套內斂標簽和某些塊級標簽   \h1-h6\br\hr\p\div
    p標簽:不能嵌套p標簽,也不能嵌套塊級標簽

head標簽中的標簽

<title></title> 定義網頁標題
<meta/> 定義網頁原信息\配置信息(瞭解)
<style></style> 定義內部樣式表
<script></script>   定義JS代碼或引入外部JS文件
<link/> 引入外部樣式表文件

Meta標簽介紹：

1.http-equiv屬性：相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變數值。

<!--2秒後跳轉到對應的網址，註意引號-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com"> #如果把URL和後面的內容去掉，就是2秒鐘刷新一次，這些內容瞭解一下就行
<!--指定文檔的編碼類型--> 
<meta http-equiv="content-Type" charset=UTF8">
<!--告訴IE以最高級模式渲染文檔-->
<meta http-equiv="x-ua-compatible" content="IE=edge"> #edge是微軟的一個全新的瀏覽器,其實就是告訴IE瀏覽器，你按照最高標準來渲染我的頁面，瞭解一下就可以啦

　　2.name屬性: 主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"> #關鍵字，也就是別人是可以通過這些關鍵字搜索到我的這個文章的，搜索引擎就是能夠這個content內容來幫別人搜索到你的這個文檔的
#SEO就是做這個的，就是怎麼讓你們公司的網站在別人搜索的時候能夠靠前顯示，不算那個花錢的，百度是充值的，你沖個20w，別人可能一天就給你點擊完了，特別的貴

<meta name="description" content="xxxxxpythonxxx學習">  #是對這個文檔的描述，在百度一些內容的頁面上，f12打開看看

body標簽中的基本標簽

<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<s>刪除</s>

<p>段落標簽</p> #獨占一個段落

<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>

<!--換行-->
<br>

<!--水平線\分割線-->
<hr>

img標簽

圖片標簽
屬性 src='圖片路徑'  網路地址的絕對路徑\本地相對路徑
示例:
    <img src="1.jpg" alt="這是個美女,請稍等.." title="美女" width="200" height="200">
    <img src="圖片的路徑" alt="圖片未載入成功時的提示" title="滑鼠懸浮時提示信息" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">
src的路徑又分為兩種：網上的一個圖片路徑和本地的一個相對圖片路徑

a標簽 超鏈接標簽

屬性
href:超鏈接的地址
target:是否新建視窗
target="_self"  當前視窗打開某個路徑對應的html頁面
target="_blank" 新建視窗打開某個路徑對應的html頁面
示例:
    <a href="https://www.baidu.com" target="_blank">百度</a>
什麼是URL？
URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱為網頁地址，是網際網路上標準的資源的地址。
URL舉例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分組成
第1部分：為協議：http://、ftp://等 
第2部分：為站點地址：可以是功能變數名稱或IP地址
第3部分：為頁面在站點中的目錄：stu
第4部分：為頁面名稱，例如 index.html
各部分之間用“/”符號隔開。

列表標簽

無序列表:   
type屬性：
    disc（實心圓點，預設值）
    circle（空心圓圈）
    square（實心方塊）
    none（無樣式）
<ul type="none">
        <li>太白</li>
        <li>alexdsb</li>
        <li>景女神</li>
</ul>

有序列表:
type屬性： start是從數字幾開始
    1 數字列表，預設值
    A 大寫字母
    a 小寫字母
    Ⅰ大寫羅馬
    ⅰ小寫羅馬
    <ol type="a" start="2">
        <li>大壯</li>
        <li>B哥</li>
        <li>滅霸</li>
        <li>雪飛</li>
    </ol>

標題列表標簽

就像大綱一樣，有一個層級效果
<dl>
  <dt>標題1</dt>
  <dd>內容1</dd>
  <dt>標題2</dt>
  <dd>內容1</dd>
  <dd>內容2</dd>
</dl>

特殊字元

空格:&nbsp;
小於號:&lt;
大於號:&gt;
&符號:&amp;
¥符號:&yen;
版權標識（寫公司網站的時候會用到）:&copy;
註冊（一個圓圈裡面有個R）:&reg;
...

表格標簽(重點)

table
    cellpadding:文字和內邊框的距離
    cellspacing:內邊框和外邊框的距離
    border:邊框寬度
    width: 像素 百分比.（最好通過css來設置長寬）
    rowspan: 單元格豎跨多少行
    colspan: 單元格橫跨多少列（即合併單元格）

<table border="1" cellpadding="10" cellspacing="20">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年齡</th>
                <th>愛好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>B哥</td>
                <td>40</td>
                <td>炒雞蛋</td>
            </tr>
            <tr>
                <td>大壯</td>
                <td>38</td>
                <td>抽煙喝酒燙頭</td>
            </tr>
            <tr>
                <td>雪飛</td>
                <td>18</td>
                <td>大壯</td>
            </tr>
        </tbody>
    </table>

form標簽 表單標簽和input標簽 用戶輸入或者選擇使用的標簽

    action:指定數據提交路徑
    input標簽:
        type屬性:控制輸入框的樣式的
        name屬性:分組,攜帶數據的key   key:value
        value:選擇框提交數據的時的值,輸入框的預設值
    input type屬性的值:
        text    單行輸入文本  <input type=text" />
        password    密碼輸入框（不顯示明文）    <input type="password"  />
        date    日期輸入框   <input type="date" />
        checkbox    覆選框 <input type="checkbox" checked="checked" name='x' />
        radio   單選框 <input type="radio" name='x' />
        submit  提交按鈕    <input type="submit" value="提交" /> #發送瀏覽器上輸入標簽中的內容，配合form表單使用，頁面會刷新
        reset   重置按鈕    <input type="reset" value="重置"  />  #頁面不會刷新，將所有輸入的內容清空
        button  普通按鈕    <input type="button" value="普通按鈕"  />
        hidden  隱藏輸入框   <input type="hidden"  />
        file    文本選擇框   <input type="file"  /> （等學了form表單之後再學這個）
        
        
    <form action="http://127.0.0.1:8001">   #規定向何處提交表單的地址（URL）（提交頁面）。

            用戶名:<input type="text" name="username" value="dazhuang">
            密碼:<input type="password" name="password" value="111">

            <input type="radio" name="sex" value="1">男
            <input type="radio" name="sex" value="2">女

            <input type="checkbox" name="hobby" value="a"> 喝酒
            <input type="checkbox" name="hobby" value="b"> 抽煙
            <input type="checkbox" name="hobby" value="c"> 燙頭
            <input type="submit">
            <hr>
            <input type="date">
            <input type="button" value="普通按鈕">
            <input type="reset">
            <input type="hidden">
            <input type="file">
    </form>
    
    form表單觸發提交數據的操作,必須寫在form表單標簽裡面,寫在外面就是普通的按鈕
        <input type="submit">
        <button>提交按鈕</button>
   
input標簽的其他屬性
    checked預設選中
     <input type="radio" name="sex" value="2" checked>女   #簡寫方式,當屬性名和屬性值相同時可簡寫
     <input type="checkbox" name="hobby" value="a"> 喝酒
     <input type="checkbox" name="hobby" value="b" checked="checked"> 抽煙
     <input type="checkbox" name="hobby" value="c" checked="checked"> 燙頭

    readonly  只讀 針對的是輸入框  text password
    disabled  不允許操作  所有的input都可以設置
設置了readonly的標簽,它的數據可以被提交到後臺,設置了disabled的數據,是不能提交到後臺的

select標簽 下拉選擇框

單選
    <select name="city">
            <option value="1">北京</option>
            <option value="2" selected>上海</option>
            <option value="3">深圳</option>
    </select>
多選:multiple
    <select name="city" multiple>
            <option value="1">北京</option>
            <option value="2" selected>上海</option>
            <option value="3">深圳</option>
   </select>

label標簽

標識標簽的功能的

方式1:for:執行對哪個標簽進行標識
效果:點擊label標簽中的文字,就能讓標識的標簽獲得游標
<label for="username">用戶名</label>
<input id="username" type="text" name="username" value="dazhuang">
方式2:
        <label>
            密碼:<input type="password" name="password" value="111" disabled>
        </label>

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  預設內容
</textarea>
name：名稱
rows：行數  #相當於文本框高度設置
cols：列數   #相當於文本框長度設置
disabled：禁用

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HTML連載17-id選擇器&類選擇器
    一、問題：我們前面講了標簽選擇器有一個缺陷就是它不加選擇的把所有相同的標簽全都變成統一樣式，這對於我們個性化定製產生了阻礙，因此我們便引出了id選擇器，來進行特別指定進行配置樣式 二、id選擇器 1.定義：根據指定的id名稱找到對應的標簽，然後設置屬性 2.格式： #id名稱｛ 屬性：值； ｝ 3. ...
  • Vue學習小結（一）
    一、理解MVC和MVVM的關係： MVC：Model View Controller (模型 視圖 控制器） 分別為：業務邏輯、界面、用來調度View和Model層 MVVM：Model View ViewModel M：每個頁面中單獨的數據； V:每個頁面中的HTML機構； VM：調度者，V從VM ...
  • javascript:void(0)的含義
    void關鍵字介紹 首先，void關鍵字是javascript當中非常重要的關鍵字，該操作符指定要計算或運行一個表達式，但是不返回值。 語法格式： 實例1 當點擊超級鏈接時，什麼都不發生 實例2 執行void操作符當中的代碼 實例3 計算void操作符當中的算術 html: js: 控制台輸出： 很 ...
  • node.js中的fs.rename()方法
    node.js 中的fs.rename()模塊 方法說明 : 修改文件名稱，可更改文件的存放路徑 基本語法 ` ...
  • map字典，儲存cookie，切換賬戶，展示購物車不同商品
    1:首頁 1,靜態html5+css做好基本樣式 html5，css，jQery, sass 2,jsonp的方式src引入模擬的json數據//這裡用的jsonp方式拿數據，詳情有使用ajax 遍歷json數據: 2:跳轉詳情 關鍵：indexOf，continue ajax js //首頁給a標 ...
  • JavaScript banner輪播 左右切換 圓點點擊切換
    1、效果如下圖： 2、源碼如下： 完畢！ good job! good luck! ...
  • css中absolute設置問題和如何讓div居中
    今天設置多個div到頁面正中間的時候，在第一層<div class="map">中設置如下： 該div就移到頁面的正中間，達到預定效果。借鑒：https://www.cnblogs.com/gxsweb/p/5395243.html 但是將該div的子元素div的position設置成absolut ...
  • jQuery仿京東首頁廣告圖片切換圖片輪播
    1、效果圖如下： 2、源碼如下： <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jQuery仿京東首頁廣告圖片切換</title> <style type="text/css">div,ul,li,a,span,i ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類