整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          前端基礎-常用HTML標簽

          TMl 的標簽可以分為單個標簽和成對標簽。

          單個標簽:html4 規定單個標簽要有一個 / 表示結尾, html5 則不用

          <!--單個標簽-->
          <meta>
          <!--成對標簽 -->
          <div></div>

          以下是HTMl中常用的一些標簽


          div 標簽

          div 標簽 主要用來將相關的內容組合到一塊,就像菜市場把各個蔬菜分成不同種類區分擺放是一個道理。

          div 是最常見也是比較重要的標簽,網頁布局中經常使用的一類標簽。通常布局被稱為 DIV + CSS 布局

          <div>
            div 就是一個分類的存儲箱子
          </div>


          p標簽

          p標簽表示段落, 在網頁文字中應用的比較多

          <!--段落和段落間會換行-->
          <p>第一段</p>
          <p>第二段</p>


          H-標題標簽

          h標簽分為六個

          標簽

          語義

          h1

          一級標題

          h2

          二級標題

          h3

          三級標題

          h4

          四級標題

          h5

          五級標題

          h6

          六級標題

          引用標題標簽后,字體會加粗、字號一會變大


          ul 無序標簽

          無序標簽是沒有顯示順序的列表,無序列表前面通常會有一個“小點”, 這個小點可以用type屬性控制。其中有三個展示方式(不過這種方式比較固定,不夠靈活和美觀, 已經被CSS的效果代替),如下:

          值(type屬性)

          描述

          disc

          默認值,實心圓

          circle

          空心圓

          square

          實心方框

          舉例:

          <!--ul標簽內部只能放置li標簽-->
          <!--li標簽內部可以放其他的標簽-->
          <ul type=">
              <li>無序列表元素1</li> <!--列表項-->
              <li>無序列表元素2</li>
          </ul>
          
          
          
          
          實心圓
          <ul type="disc">
            <li>西紅柿</li>
            <li>黃瓜</li>
          </ul>
          空心圓
          <ul type="circle">
            <li>西紅柿</li>
            <li>黃瓜</li>
          </ul>
          實心方框
          <ul type="square">
            <li>西紅柿</li>
            <li>黃瓜</li>
          </ul>


          ol 有序標簽

          • ol 前面的標簽是有序的,可以是數字、字母、羅馬數字等。同樣控制這些樣式使用的是type屬性。

          type屬性值

          意義

          a

          小寫英文字母編號

          A

          大寫英文字母編號

          i

          小寫羅馬數字編號

          I

          大寫羅馬數字編號

          1

          數字編號(默認)

          • 設置start屬性,表示從哪個編號開始
          • 加 reversed 表示倒敘排列


          有序列表, 從2開始
          <ol start="2">
            <li>元素1</li>
            <li>元素2</li>
          </ol>
          
          
          小寫字母表示
          <ol type="a">
            <li>元素1</li>
            <li>元素2</li>
            <li>元素3</li>
          </ol>
          
          
          倒敘
          <ol reversed>
            <li>元素1</li>
            <li>元素2</li>
            <li>元素3</li>
          </ol>


          dl 自定義列表

          dl標簽表示自定義列表

          dt表示數據項,dd表示數據定義, dd是dt標簽的解釋


          <dl>
              <dt>西紅柿</dt>
              <dd>紅、酸</dd>
              <dt>黃瓜</dt>
              <dd>綠、澀</dd>
            </dl>


          img標簽

          img 用來插入圖片,包括但不限于以下圖片格式

          圖片格式

          備注

          .jpg、.jpeg

          通常用于照片,是一種有損壓縮格式

          .png

          通常用于logo、背景,支持透明和半透明。便攜式網絡圖像

          .svg

          矢量圖片


          <!-- src(source)屬性, 圖片地址,可以為相對路徑,也可以為絕對路徑-->
          <!-- alt 如果遇到圖片無法加載的情況,網頁上會展示 alt的 值 -->
          <!-- width 和 height 表示 寬和高, 如果只設置一個, 那么另外一個就會跟著成比例縮放-->
          <img src="./images/images.jpg" alt="星期一" width="120" height="20">


          a 標簽

          用a標簽來制作超級鏈接

          <!-- href 屬性 表示 其他頁面的鏈接,支持相對路徑和絕對路徑,還可以鏈接到其它網站 -->
          <!--target 屬性表示 打開其他鏈接的方式-->
          <!-- title 屬性表示 鏈接的標題, 當鼠標移動到鏈接上,會展示出來-->
          <a href="http://www.baidu.com" target="blank" title="文字標題">百度</a>
          
          
          
          
          
          
          <!--也可以用a標簽作為錨點 錨點可以是本頁面的錨點,也可以是其他頁面的錨點-->
          <h1 id="title">頭部標題</h1>
          ... 此處省略一些代碼
          <a href="#title">返回標題</a>
          
          
          
          
          <!--下載鏈接,指向 doc, zip, zip等文件格式時,a標簽將成為自動下載鏈接-->
          <a href="./download/halou.zip">發郵件</a>
          <!-- mailto:前綴的鏈接是郵件鏈接,系統將自動打開email相關軟件-->
          <a href="mailto:halouworld@126.com">發郵件</a>
          <!-- tel: 前綴鏈接是電話鏈接,系統將自動打開撥號鍵-->
          <a href="tel:11111111111">打開撥號鍵盤</a>


          audio標簽

          audio標簽用來插入音頻標簽

          <!--添加 controls 后才會顯示 播放控件-->
          <!--常用音頻格式 mp3 和 ogg格式-->
          <!--autoplay 自動播放屬性-->
          <!--loop 屬性表示循環播放-->
          <audio controls src="./video/demo.mp3">
                 您的瀏覽器不支持 audio標簽,請升級
          </audio>
          
          
          
          
          <audio controls src="./video/demo.mp3" autoplay loop>
               您的瀏覽器不支持 audio標簽,請升級
          </audio>

          video標簽

          video 標簽用于插入一段視頻

          <!--有的視頻不能播放 ,詳見 https://blog.csdn.net/weixin_34272308/article/details/94614657 -->
          <!-- controls 顯示視頻播放控件  -->
          <!-- autoplay 自動播放 -->
          <!-- loop 循環播放 -->
          <!-- 常見的 視頻格式 mp4 ogv webm 等-->
          <video controls autoplay loop src="./video/5-4 RDB2.mp4" >
              您的瀏覽器不支持 video標簽,請升級
          </video>


          其它區塊標簽

          以前的區塊標簽只有div,現在為了更好的方便搜索引擎抓取網站,因此有了以下語義更加明確的區塊標簽

          <section>

          文檔的區域,比div語義上還要大一點

          <header>

          頁頭

          <main>

          網頁核心部分

          <footer>

          頁腳


          其他的語義標簽

          • span 標記文本標記區域,沒有特殊效果,結合CSS使用
          • b 標簽 加粗文章(可以使用CSS實現同樣效果)
          • u 加下換線文字
          • br 換行
          • i 傾斜文字(可以使用CSS實現同樣效果)
          • strong 代表特別重要的文字
          • em 需要強調的文字,有一定的傾斜,也可以用其配置CSS做表情文字
          • mark 高亮文字
          • figure 和 figcaption 。figure - 一段獨立的內容 figcaption- figure 內部元素的說明性內容


          表單

          表單用來收集信息并且可以完成和后端的數據傳輸

          表單中大致可以分為三種標簽

          • form標簽,標識表單區域, 內部的元素都可能被表單提取信息
          • input 標簽, 標識輸入、點擊等需要和用戶交互的場景
          • datalist 下拉框,支持搜索,通常和input一塊使用

          一些表單的示例

          <!--action 表示要提交到后端的網址-->
          <!--method 表示表單提交的方式,通常有 get 、 post 、put、delete等-->
          
          
          <form action="/save" meththo="post"></form>
          
          
          <!--<form> 標簽中 input 文本框 type="text" 表示文本框-->
          <!-- value 表示文本框中的值 -->
          <!--planceholder表示提示文字,在沒任何輸入值的情況下,作為提示信息-->
          <!--disabled 表示禁用-->
          <input type="text" value="123" planceholder="提示文字" disabled>
          
          
          <!---單選按鈕,name相等,表示選擇了一個,另一個就不能選擇了-->
          <!--checked 表示默認被選中-->
          <!-- value 屬性表示要提交到后端服務器的值-->
          <input type="radio" name="radio_group" checked>
          <input type="radio"  name="radio_group">
          
          
          
          
          <label>
              <input type="radio" name="sex"> 男
          </label>
          <label> 
              <input type="radio" name="sex"> 女
          </label>
          
          
          
          
          <!--html4 中的標簽 通過for 屬性 和 其他標簽的id屬性進行綁定-->
          
          
          <input type="radio" name="sex" id="nan"> 
          <label for="nan">男</label>
          
          
          <input type="radio" name="sex"   id="nv">
          <label for="nv">女</label>
          
          
          <!--復選框 type="checkbox" 同一組的的復選框,name值應該相同 ,復選框也有value值, 用于向服務器提交數據-->
          <input type="checkbox" name="hobby" value="soccer" > 足球
          <input type="checkbox" name="hobby" value="basket" > 籃球
          
          
          <!--密碼框-->
          <input type="password" placeholder="請輸入密碼">
          
          
          <!-- 下拉菜單 -->
          <select>
            <option value="alipay">支付寶</option>
            <option value="wxpay">微信支付</option>
          </select>
          
          
          <!--多文本框 rows 和  clos 分別用于設置 行數 和 列數-->
          <textarea rows="3" cols="5"></textarea>
          
          
          <!--三種按鈕 submit 提交按鈕  button 普通按鈕 可以簡寫為  <button></button> reset 按鈕 重置按鈕-->
          <input type="button" value="普通按鈕">
              <input type="reset" value="重置按鈕"> 
              <input type="submit" value="提交表單">
          
          
          
          
          <!--像 email 和 url 等格式,如果點擊提交按鈕,不符合格式,會有提示-->
          <form>
              日期空間: <input type="date">  <br/>
              時間空間: <input type="time">  <br/>
              日期時間空間 <input type="datetime-local">  <br/>
          
          
              文件:<input type="file"> <br/>  <br/>
              數字控件: <input type="number"> <br/>
              拖拽條: <input type="range"> <br/>
              搜索框: <input type="search"> <br/>
              網址控件: <input type="url"> <br/>
              郵箱控件: <input type="email" >
              <input type="submit" value="提交">
          </form>
          
          
          
          
          <!-- datalist 備選項示例 -->
          <input type="text" list="province">
          <datalist id="province">
            <option value="陜西"></option>
            <option value="山西"></option>
            <option value="河北"></option>
            <option value="山東"></option>
          </datalist>


          表格

          可以用html渲染表格

          • table 標簽表示表格
          • tr 表示行
          • td 表示單元格
          • caption 表格的標題,通常放在表格的第一行
          • th 表示列標題


          <!--表格示例-->
          <table border="1">
            <caption>我是標題</caption>
            <tr>
                <th>第一列標題</th>
                <th>第二列標題</th>
            </tr>
            <tr>
                <td>第一行第一列</td>
                <td>第一行第二列</td>
            </tr>
            <tr>
                <td>第二行第一列</td>
                <td>第二行第二列</td>
            </tr>
          </table>


          • 單元格的合并, clospan 用來設置td 或者th的列跨度 , rowspan屬性用來設置td或者th的行跨度
          <!--跨列示例-->
          <table border="1">
              <caption>我是標題</caption>
              <tr>
                  <th>第一列標題</th>
                  <th>第二列標題</th>
              </tr>
              <tr>
                  <td colspan="2">跨兩行</td>
              </tr>
              <tr>
                  <td>第二行第一列</td>
                  <td>第二行第二列</td>
              </tr>
          </table>
          
          
          <!--跨行示例-->
          <table border="1">
                  <caption>我是標題</caption>
                  <tr>
                      <th>第一列標題</th>
                      <th>第二列標題</th>
                  </tr>
                  <tr>
                      <td rowspan="2">第一行第一列</td>
                      <td>第一行第二列</td>
                  </tr>
                  <tr>
                      <td>第二行第二列</td>
                  </tr>
                  <tr>
                      <td>第三行第一列</td>
                      <td>第三行第二列</td>
                  </tr>
            </table>


          • 表格的其他標簽 , thead 定義表頭, tbody 定義表格的主題內容, tfoot 標簽定義表格底部,通常用來匯總等

          本文中,我們將了解HTML拖放,并借助示例了解其實現.

          拖放是一個非常交互式和用戶友好的概念,它可以通過抓住對象更輕松地將對象移動到其他位置。這允許用戶在元素上單擊并按住鼠標按鈕,將其拖動到其他位置,然后釋放鼠標按鈕以將元素放到該位置。在HTML 5中,拖放更容易編碼,其中的任何元素都是可拖動的。

          拖放事件:有各種拖放事件,其中一些在下面列出:

          • ondrag: 它用于在 HTML 中拖動元素或文本選擇時使用。
          • ondragstart: 它用于調用一個函數 drag(event),該函數指定要拖動的數據。
          • ondragenter: 它用于確定丟棄目標是否接受丟棄。如果要接受丟棄,則必須取消此事件。
          • ondragleave:當鼠標在拖動發生時將元素留在有效放置目標之前時,就會發生這種情況。
          • ondragover: 它指定可以放置拖動數據的位置。
          • ondrop:它指定在拖動操作結束時發生丟棄的位置。
          • ondragend: 當用戶完成拖動元素時,就會發生這種情況。

          拖放 Drag and Drop實現步驟:

          • 步驟1:使對象可拖動 首先將可拖動屬性設置為 true,以使該元素可拖動 <img draggable = “true”>然后,指定拖動元素時應發生的情況。ondragstart 屬性調用一個函數 drag(event),該函數指定要拖動的數據。dataTransfer.setData() 方法設置數據類型和拖動數據的值事件偵聽器 ondragstart 將設置允許的效果(復制、移動、鏈接或某種組合).
          • 步驟2: 放下對象 ondragover 事件指定可以放下拖動數據的位置。默認情況下,不能將數據/元素放在其他元素中。若要允許刪除,它必須阻止元素的默認處理。這是通過調用 event.preventDefault() 方法最后,drop 事件來完成的,它允許執行實際的丟棄

          例1:

          <!DOCTYPE HTML>
          <html>
          <head>
              <style>
              #getData {
                  width: 250px;
                  height: 200px;
                  padding: 10px;
                  border: 1px solid #4f4d4d;
              }
              </style>
              <script>
              function allowDrop(even) {
                  even.preventDefault();
              }
           
              function drag(even) {
                  even.dataTransfer.setData("text", even.target.id);
              }
           
              function drop(even) {
                  even.preventDefault();
                  var fetchData = even.dataTransfer.getData("text");
                  even.target.appendChild(document.getElementById(fetchData));
              }
              </script>
          </head>
           
          <body>
              <h3>Drag the GeekforGeeks image into the rectangle:</h3>
              <div id="getData"
                   ondrop="drop(event)"
                   ondragover="allowDrop(event)">
                </div>
              <br>
              <img id="dragData"
                   src="gfg.png"
                   draggable="true"
                   ondragstart="drag(event)"
                   width="250"
                   height="200">
          </body>
          </html>


          Output:

          Dragging the image into the box

          拖放過程的數據傳遞: 當拖放的整個過程發生時,將使用數據傳輸屬性。它用于保存從源拖放到所需位置的數據。這些是與之關聯的屬性:

          • dataTransfer.setData(format, data): 它用于設置要拖動的數據.
          • dataTransfer.clearData(format): 它用于調用此函數,沒有清除所有數據的參數。使用 format 參數調用它僅刪除該特定數據。
          • dataTransfer.getData(format): 它返回指定格式的數據。如果沒有此類數據,則返回空字符串.
          • dataTransfer.types:此屬性返回在 dragstart 事件中設置的所有格式的數組。
          • dataTransfer.files: 它用于返回要刪除的所有文件。
          • dataTransfer.setDragImage(element, x, y): 它用于將現有圖像顯示為拖動圖像,而不是光標旁邊的默認圖像。坐標指定放置位置。
          • dataTransfer.addElement(element): 它用于添加要繪制的指定元素作為拖動反饋圖像。
          • dataTransfer.effectAllowed(value): 它將告訴瀏覽器只允許用戶使用列出的操作類型。該屬性可以設置為以下值:none、copy、copyLink、copyMove、link、linkMove、move、all 和未初始化。
          • dataTransfer.dropEffect(value): 它用于控制在拖動和拖動事件期間向用戶提供的反饋。當用戶將鼠標懸停在目標元素上時,瀏覽器的光標將指示將要發生的操作類型(例如復制、移動等)。效果可以采用以下值之一:無、復制、鏈接、移動。

          例2:

          <!DOCTYPE HTML>
          <html>
          <head>
          <title>Drag and Drop box</title>
          <script>
          function allowDrop(ev) {
          ev.preventDefault();
          }
          function dragStart(ev) {
          ev.dataTransfer.setData("text", ev.target.id);
          }
          function dragDrop(ev) {
          ev.preventDefault();
          var data = ev.dataTransfer.getData("text");
          ev.target.appendChild(document.getElementById(data));
          }
          </script>
          <style>
          #box {
          margin: auto;
          width: 50%;
          height: 200px;
          border: 3px solid green;
          padding: 10px;
          }
          #box1,
          #box2,
          #box3 {
          float: left;
          margin: 5px;
          padding: 10px;
          }
          #box1 {
          width: 50px;
          height: 50px;
          background-color: #F5B5C5;
          }
          #box2 {
          width: 100px;
          height: 100px;
          background-color: #B5D5F5;
          }
          #box3 {
          width: 150px;
          height: 150px;
          background-color: #BEA7CC;
          }
          p {
          font-size: 20px;
          font-weight: bold;
          text-align: center;
          }
          .gfg {
          font-size: 40px;
          color: #009900;
          font-weight: bold;
          text-align: center;
          }
          </style>
          </head>
          <body>
          <div class="gfg">GeeksforGeeks</div>
          <p>Drag and drop of boxes</p>
          <div id="box">
          <div id="box1" draggable="true"
          ondragstart="dragStart(event)">
          </div>
          <div id="box2" draggable="true"
          ondragstart="dragStart(event)">
          </div>
          <div id="box3" ondrop="dragDrop(event)"
          ondragover="allowDrop(event)">
          </div>
          </div>
          </body>
          </html>
          


          說明:

          • 通過將要拖動的元素的可拖動屬性draggable設置為 true 來開始拖動。
          • 使用 dataTransfer.getData() 方法獲取拖動的數據。此方法將返回在 setData() 方法中設置為相同類型的任何數據。
          • 調用 event.preventDefault() 方法,通過阻止元素的默認處理來允許刪除其他元素中的元素。
          • 該元素存儲在我們附加到放置元素中的變量數據中。

          效果:

          看下效果圖

          對基于CSS的設計最初的批評意見之一是CSS太死板了,只能建立方框,因此本次我們需要用圖形軟件創建下面兩個圖形,一個用于頂部,一個用于底部。

          接下來我們詳細介紹它的實現方法:

          1.創建一個簡單的框標記并輸入相關內容

          <div class="box">

          <h2>笑話</h2>

          <p>朋友圈里,有這么一條:“和女友分手后一直很不安,害怕她會變壞,胡亂約炮,太過放縱,怎么辦?”下面神回復:“其他人的惡劣行徑頂多是占著茅坑不拉屎,你這是出了廁所還想鎖門。”</p>

          </div>

          2.將頂部圖像用于標題的背景置于頂部(左上角),將底部圖像用于DIV框的背景置于底部(左下角),然后給DIV框添加相同的背景顏色并設置一定的寬度,三者共同形成框的主體。

          .box{width:275px;

          background:#ef1111 url(bottom.jpg ) no-repeat left bottom;}

          .box h2{background:url(top.jpg) no-repeat left top;}

          3.調整兩個背景圖像的尺寸,寬度與DIV框的寬度一致,使其看起來更像一個整體

          .box{width:275px;

          background:#ef1111 url(bottom.jpg ) no-repeat left bottom;

          background-size:275px;}

          .box h2{background:url(top.jpg) no-repeat left top;

          background-size:275px;}

          4.最后為了不使內容與邊框靠的太近可以添加一些內邊距或并居中對齊即可

          .box{width:275px;

          background:#ef1111 url(bottom.jpg ) no-repeat left bottom;

          background-size:276px;

          margin:0 auto;}

          .box h2{background:url(top.jpg) no-repeat left top;

          background-size:276px;

          padding-top:30px;

          text-align:center;}

          .box p{padding:0 5px 30px 5px;}

          尺寸根據自己的需要設定如下圖:


          主站蜘蛛池模板: 好看的电影网站亚洲一区| 在线精品自拍亚洲第一区| 伊人久久精品一区二区三区 | 丝袜美腿一区二区三区| 亚洲国产一区二区三区| 国产乱码精品一区二区三区| 久久国产免费一区| 在线观看国产一区| 午夜无码一区二区三区在线观看 | 亚洲av成人一区二区三区| 熟女少妇精品一区二区| 深夜福利一区二区| 国产成人无码精品一区不卡| 色噜噜狠狠一区二区| 无码国产精品一区二区免费模式 | 国产精品区AV一区二区| 视频在线观看一区| 国产精品免费综合一区视频| 高清精品一区二区三区一区| 无码人妻精品一区二区三18禁| 99久久精品费精品国产一区二区| 无码精品人妻一区二区三区影院 | 国产成人综合一区精品| 国产对白精品刺激一区二区| 人妻少妇久久中文字幕一区二区| 亚洲AV综合色一区二区三区 | 亚洲欧美国产国产一区二区三区| 香蕉久久一区二区不卡无毒影院 | 色窝窝免费一区二区三区| 精品视频一区二区三区四区 | 毛片一区二区三区| 亚洲AV日韩综合一区| 手机福利视频一区二区| 无码人妻精品一区二区蜜桃| 亚洲大尺度无码无码专线一区| 精品一区二区视频在线观看| 国产乱码精品一区二区三区| 国产一区美女视频| 伊人精品视频一区二区三区| 久久免费国产精品一区二区| 精品一区高潮喷吹在线播放|