整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML的常用標(biāo)簽

          .圖片標(biāo)簽ing

          2.H標(biāo)題系列

          3.分段標(biāo)簽p

          4.換行標(biāo)簽br

          5.分割線標(biāo)簽HR

          6.特殊字符

          (1)It--小于號(hào)

          (2)Gt--大于號(hào)

          (3)Nbsp--空格

          (4)amp--符號(hào)

          (5)quot--雙引號(hào)

          7.a標(biāo)簽做超鏈接

          8.a標(biāo)簽做錨點(diǎn)

          常見的標(biāo)簽屬性

          1.ID標(biāo)簽的身份號(hào)在一個(gè)頁面中,程序員應(yīng)保證不存在重復(fù)的ID

          2.Title用于設(shè)置標(biāo)簽的提示內(nèi)容

          3.Src用于設(shè)置圖片的路徑

          4.Href用于設(shè)置a標(biāo)簽超鏈接跳轉(zhuǎn)路徑

          TML是一種用來描述網(wǎng)頁的標(biāo)記性語言。學(xué)習(xí)HTML可能并不難,主要是要記一些HTML標(biāo)簽和標(biāo)簽代表的含義。下面PHP程序員雷雪松根據(jù)使用的情況,整理出平時(shí)常用的HTML標(biāo)簽。

          HTML基礎(chǔ)之HTML常用標(biāo)簽-PHP程序員雷雪松的博客

          1、最基本的HTML結(jié)構(gòu)

          <!--<!DOCTYPE> 是HTML5聲明,<!DOCTYPE> 必須是 HTML 文檔的第一行,位于 <html> 標(biāo)簽之前。<!DOCTYPE>是指示 web 瀏覽器關(guān)于頁面使用哪個(gè) HTML 版本進(jìn)行編寫的指令。-->

          <!DOCTYPE html>

          <html>

          <!-- head標(biāo)簽是所有頭部元素的容器。head標(biāo)簽內(nèi)的元素可包含腳本、樣式表和提供頁面的元信息等等。以下標(biāo)簽都可以添加到 head 部分:title、base、link、meta、script 以及style。頭部的內(nèi)容不會(huì)顯示在瀏覽器的。 -->

          <head>

          <!-- 設(shè)置字符集,如果字符集不對(duì),可能導(dǎo)致亂碼。一般建議utf-8國際編碼 -->

          <meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />

          <!-- SEO相關(guān)標(biāo)簽,title定義文檔的標(biāo)題,百度建議一般不要超過32位,meta定義頁面關(guān)鍵詞和頁面的描述-->

          <title>網(wǎng)頁標(biāo)題</title>

          <meta name="keywords" content="PHP程序員,技術(shù)博客,個(gè)人博客,雷雪松" />

          <meta name="description" content="PHP程序員,雷雪松(Raykaeso)的博客是一個(gè)優(yōu)秀的個(gè)人技術(shù)博客。PHP程序員雷雪松的博客記錄了Linux學(xué)習(xí),PHP開發(fā)與編程,Web前端開發(fā),MySQL學(xué)習(xí)和教程,NoSQL數(shù)據(jù)庫教程以及個(gè)人的人生經(jīng)歷和觀點(diǎn)。" />

          <link rel="stylesheet" type="text/css" href="main.css" />

          <script type="text/javascript" src="main.js"></script>

          </head>

          <!-- 正文部分,所有在瀏覽器上可見的內(nèi)容必須寫在body標(biāo)簽內(nèi)部 -->

          <body>

          </body>

          </html>

          2、最常用的HTML標(biāo)簽

          a、布局標(biāo)簽

          div標(biāo)簽定義文檔中的分區(qū)或節(jié)(division/section),可以把文檔分割為獨(dú)立的、不同的部分,主要用于布局。

          aside標(biāo)簽的內(nèi)容可用作文章的側(cè)欄,<span style="color: #ff0000;">html5新增標(biāo)簽</span>。

          header標(biāo)簽定義頁面的頭部(介紹信息),<span style="color: #ff0000;">html5新增標(biāo)簽</span>。

          section標(biāo)簽定義文檔中的節(jié)(section、區(qū)段)。比如章節(jié)、頁眉、頁腳或文檔中的其他部分,<span style="color: #ff0000;">html5新增標(biāo)簽</span>。

          footer 標(biāo)簽定義文檔或節(jié)的頁腳,通常包含文檔的作者、版權(quán)信息、使用條款鏈接、聯(lián)系信息等等,<span style="color: #ff0000;">html5新增標(biāo)簽</span>。

          article標(biāo)簽規(guī)定文章獨(dú)立的其他內(nèi)容,比如:標(biāo)題、內(nèi)容、評(píng)論,<span style="color: #ff0000;">html5新增標(biāo)簽</span>。

          b、文本標(biāo)簽

          h1-h6標(biāo)簽可定義標(biāo)題

          p標(biāo)簽定義段落

          b/strong標(biāo)簽加粗

          em標(biāo)簽來表示強(qiáng)調(diào)的文本,斜體

          strong標(biāo)簽表示重要文本

          u標(biāo)簽下劃線

          s標(biāo)簽刪除線

          br標(biāo)簽表示回車換行

          hr標(biāo)簽表示水平線

          span標(biāo)簽被用來組合文檔中的行內(nèi)元素。

          blockquote標(biāo)簽表示塊引用

          pre標(biāo)簽可定義預(yù)格式化的文本,保持原有格式的一種標(biāo)簽。

          sub標(biāo)簽下標(biāo),

          sup>標(biāo)簽上標(biāo)

          &nbsp;表示一個(gè)空格

          &copy;表示版權(quán)符

          &lt;表示<

          &gt;表示>

          c、a標(biāo)簽定義超鏈接,指定頁面間的跳轉(zhuǎn)。鏈接可以指向外部鏈接或者頁面內(nèi)部id錨點(diǎn),可以在當(dāng)前頁面打開,新開窗口。

          <a href="指向的鏈接地址或者網(wǎng)址#ID名" target="_blank|_self|_top|_parent">百度</a>

          d、多媒體標(biāo)簽

          img標(biāo)簽主要在網(wǎng)頁中插入圖像,可以定義圖片替換文本、顯示寬度和高度、是否帶邊框,建議等比例設(shè)置,否則圖像會(huì)變形。

          <img src="圖片地址" alt="替換文本,圖片打不開的時(shí)候顯示" width="圖片寬度" height="高度" border="0" />

          audio標(biāo)簽定義聲音,比如音樂或其他音頻流。<span style="color: #ff0000;">html5新增標(biāo)簽</span>。

          <audio src="someaudio.wav">您的瀏覽器不支持 audio 標(biāo)簽。</audio>

          video標(biāo)簽定義視頻,比如電影片段或其他視頻流。<span style="color: #ff0000;">html5新增標(biāo)簽</span>。

          <video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標(biāo)簽。</video>

          e、序列化標(biāo)簽

          ul和li無序列表標(biāo)簽

          <ul>

          <li>HTML</li>

          <li>JS</li>

          <li>PHP</li>

          </ul>

          ol和li有序列表標(biāo)簽,可以使用type屬性規(guī)定有序列表符號(hào)的類型。1 按數(shù)字有序排列,為默認(rèn)值,(1、2、3、4);a 按小寫字母有序排列,(a、b、c、d);A 按字母大寫有序排列,(A、B、C、D)。i 按小寫羅馬字母有序,(i, ii, iii, iv);I 按小寫羅馬字母有序,(I, II, III, IV)。

          <ol>

          <li>HTML</li>

          <li>JS</li>

          <li>PHP</li>

          </ol>

          dl標(biāo)簽定義了定義列表(definition list),dl標(biāo)簽用于結(jié)合 dt(定義列表中的項(xiàng)目)和 dd(描述列表中的項(xiàng)目)。

          <dl>

          <dt>計(jì)算機(jī)</dt>

          <dd>用來計(jì)算的儀器 ... ...</dd>

          </dl>

          f、表格標(biāo)簽

          table標(biāo)簽和tr標(biāo)簽,th標(biāo)簽和td標(biāo)簽,合并單元格。

          <table width="100%" height="193" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#000000" background="">

          <tr>

          <th>標(biāo)題</th>

          <th>標(biāo)題</th>

          </tr>

          <tr>

          <!-- 合并橫向單元格 -->

          <td colspan="2" nowrap="nowrap">&amp;nbsp;</td>

          </tr>

          <tr>

          <td></td>

          <!-- 合并縱向單元格 -->

          <td rowspan="2"> </td>

          </tr>

          <tr>

          <td height="16"> </td>

          </tr>

          </table>

          g、表單標(biāo)簽

          form標(biāo)簽定義提交方式、提交地址、表單字符集以及如何對(duì)其進(jìn)行編碼,需要提交的表單一定要放在form標(biāo)簽內(nèi)。

          <form id="form1" name="form1" method="post|get" enctype="multipart/form-data" action="提交到的地址"></form>

          input標(biāo)簽用于搜集用戶信息

          <input name="userName" type="text" maxlength="5" size="100" value="asdfasdfasfd" />

          密碼,輸入的字符會(huì)被掩碼(顯示為星號(hào)或原點(diǎn))

          <input name="pwd" type="password" maxlength="5" size="100" value="" />

          文件類型的表單,上傳文件時(shí),form表單一定要設(shè)置為enctype="multipart/form-data"

          <input type="file" name="file" />

          隱藏表單

          <input type="hidden" name="country" value="China" />

          提交

          <input type="submit" name="Submit" value="提交" disabled="disabled" />

          重置

          <input type="reset" name="Submit2" value="重置" />

          radio單選

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

          <input name="sex" type="radio" value="2" checked="checked" />女

          checkbox多選

          <input name="skill" type="checkbox" value="1" checked="checked" />PHP

          <input name="skill" type="checkbox" value="2" />前端

          <input name="skill" type="checkbox" value="2" />數(shù)據(jù)庫

          <span style="color: #ff0000;">注:checked="checked"可以簡寫成checked</span>

          label標(biāo)簽為input元素定義標(biāo)注,如果您點(diǎn)擊label元素文本,就會(huì)觸發(fā)此input控件。

          textarea標(biāo)簽,設(shè)置文本區(qū)內(nèi)的可見行數(shù)和寬度

          <textarea name="content" cols="30" rows="10">大段文本輸入框</textarea>

          button標(biāo)簽定義一個(gè)按鈕

          提交按鈕

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

          重置按鈕

          <button type="reset" value="重置">重置</button>

          select標(biāo)簽和option標(biāo)簽下拉列表

          單選菜單列表框

          <select name="user">

          <option value="1">ray</option>

          <option value="2" selected="selected">raykaeso</option>

          </select>

          多選列表下拉框,shift加鼠標(biāo)單擊,可以連續(xù)選擇多個(gè)選擇,CTRL+鼠標(biāo)點(diǎn)擊,可以點(diǎn)擊多個(gè)。

          <select name="user" size="10" multiple="multiple">

          <option value="1">雷雪松</option>

          <option value="2" selected="selected">ray</option>

          <option value="3">raykaeso</option>

          </select>

          注:selected="selected"可簡寫成selected,表示選中

          3、其他HTML事項(xiàng)

          a、HTML標(biāo)簽和屬性是不區(qū)分大小寫的,建議HTML標(biāo)簽和屬性都小寫,屬性值必須用雙引號(hào)包圍。

          b、HTML標(biāo)簽都是以開始標(biāo)簽起始,以結(jié)束標(biāo)簽終止。大部分HTML標(biāo)簽都是成對(duì)出現(xiàn)的,稱為雙標(biāo)簽,比如:p標(biāo)簽、div標(biāo)簽,也有的HTML標(biāo)簽在開始標(biāo)簽中結(jié)束的標(biāo)簽,稱為單標(biāo)簽,比如:hr標(biāo)簽、br標(biāo)簽。大多數(shù) HTML 元素可擁有屬性,文本內(nèi)容都是寫在開始標(biāo)簽與結(jié)束標(biāo)簽之間。

          c、HTML標(biāo)簽之間盡量縮進(jìn)與換行,每行代碼不要過長,方便閱讀和維護(hù)。

          d、HTML標(biāo)簽使用必須符合標(biāo)簽嵌套規(guī)則。禁止a標(biāo)簽嵌套a標(biāo)簽,p標(biāo)簽嵌套div標(biāo)簽。

          e、建議不使用HTML已經(jīng)廢棄的或者不贊成使用的標(biāo)簽,少使用table布局、iframe框架嵌套以及flash播放器。

          來源:PHP程序員雷雪松的博客 -HTML基礎(chǔ)之HTML常用標(biāo)簽(http://www.leixuesong.cn/2045)

          avaScript一種直譯式腳本語言,是一種動(dòng)態(tài)類型、弱類型、基于原型的語言,內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用于客戶端的腳本語言,最早是在HTML(標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用)網(wǎng)頁上使用,用來給HTML網(wǎng)頁增加動(dòng)態(tài)功能。

          JavaScript 顯示數(shù)據(jù)

          JavaScript 可以通過不同的方式來輸出數(shù)據(jù):

          使用 window.alert() 彈出警告框。

          使用 document.write() 方法將內(nèi)容寫到 HTML 文檔中。

          使用 innerHTML 寫入到 HTML 元素。

          使用 console.log() 寫入到瀏覽器的控制臺(tái)。

          使用 window.alert()

          你可以彈出警告框來顯示數(shù)據(jù):

          實(shí)例

          nbsp;html>

          我的第一個(gè)頁面

          我的第一個(gè)段落。

          操作 HTML 元素

          如需從 JavaScript 訪問某個(gè) HTML 元素,您可以使用 document.getElementById(id) 方法。

          請(qǐng)使用 “id” 屬性來標(biāo)識(shí) HTML 元素,并 innerHTML 來獲取或插入元素內(nèi)容:

          實(shí)例

          nbsp;html>

          我的第一個(gè) Web 頁面

          "demo">我的第一個(gè)段落

          以上 JavaScript 語句(在 標(biāo)簽中)可以在 web 瀏覽器中執(zhí)行:

          document.getElementById(“demo”) 是使用 id 屬性來查找 HTML 元素的 JavaScript 代碼 。

          innerHTML = “段落已修改?!?是用于修改元素的 HTML 內(nèi)容(innerHTML)的JavaScript 代碼。

          在本教程中

          在大多數(shù)情況下,在本教程中,我們將使用上面描述的方法來輸出:

          上面的例子直接把 id=”demo” 的

          元素寫到 HTML 文檔輸出中:

          寫到 HTML 文檔

          出于測(cè)試目的,您可以將JavaScript直接寫在HTML 文檔中:

          實(shí)例

          nbsp;html>

          我的第一個(gè) Web 頁面

          我的第一個(gè)段落。

          Fri Apr 22 2022 16:20:12 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)

          請(qǐng)使用 document.write() 僅僅向文檔輸出寫內(nèi)容。

          如果在文檔已完成加載后執(zhí)行 document.write,整個(gè) HTML 頁面將被覆蓋。

          實(shí)例

          nbsp;html>

          我的第一個(gè) Web 頁面

          我的第一個(gè)段落。

          "MYFUNCTION()">點(diǎn)我

          寫到控制臺(tái)

          如果您的瀏覽器支持調(diào)試,你可以使用 console.log() 方法在瀏覽器中顯示 JavaScript 值。

          瀏覽器中使用 F12 來啟用調(diào)試模式, 在調(diào)試窗口中點(diǎn)擊 “Console” 菜單。

          nbsp;html>



          我的第一個(gè) Web 頁面

          實(shí)例 console 截圖:

          您知道嗎?

          程序中調(diào)試是測(cè)試,查找及減少bug(錯(cuò)誤)的過程。


          主站蜘蛛池模板: 国产成人欧美一区二区三区| 日韩精品一区二区三区国语自制| 国产一区高清视频| 国产精品亚洲一区二区麻豆| 日韩精品一区二区三区中文版| 国产成人精品无码一区二区老年人| 亚洲AV无码一区二区三区鸳鸯影院| 成人无码精品一区二区三区| 精品免费久久久久国产一区| 亚洲一区二区三区在线视频| 国产一区二区三区在线| 无码精品人妻一区二区三区漫画| 无码人妻一区二区三区兔费| 激情综合一区二区三区| 日韩国产免费一区二区三区 | 亚洲中文字幕一区精品自拍| 99精品高清视频一区二区| 成人精品一区二区三区校园激情 | 秋霞午夜一区二区| a级午夜毛片免费一区二区| 国产福利电影一区二区三区| 国精产品一区二区三区糖心 | 日本中文字幕一区二区有码在线| 日韩精品一区二区午夜成人版| 美女视频一区二区三区| 日本一区中文字幕日本一二三区视频 | 日韩人妻无码一区二区三区 | 国产福利一区二区在线视频| 日韩精品一区二区三区视频 | 亚洲一区二区三区AV无码| 一区二区三区中文| 99国产精品一区二区| 色综合视频一区二区三区| 国产精品亚洲一区二区三区久久 | 人妻体内射精一区二区三区| 丝袜人妻一区二区三区| 国产成人一区在线不卡 | 日韩一区二区久久久久久| 国产无人区一区二区三区| 日本精品3d动漫一区二区 | 亚洲国产成人精品无码一区二区|