整合營銷服務(wù)商

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

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

          HTML常用標(biāo)簽概述(可用于網(wǎng)店裝修)

          • TML標(biāo)簽:

          1. 所有內(nèi)容都在<html></html>標(biāo)簽之內(nèi);

          2. <head></head>內(nèi)放的是頭部信息,是對(duì)頁面的描述,不會(huì)直接顯示在頁面中。

          3. <head></head>內(nèi)的<title></title>中設(shè)置的是頁面的標(biāo)題,<title></title>只能放在<head></head>中;

          4. <body></body>是頁面的主體,大部分顯示內(nèi)容都定義在這里。

        1. HTML注釋:<!-- -->:

          1. 注釋不允許嵌套

        2. html常用標(biāo)簽:

          1. h標(biāo)簽(標(biāo)題),HTML定義了<h1></h1>到<h6></h6>六個(gè)h標(biāo)簽,分別表示不同大小的字體。h1最大,h6最小。

          2. <br/>只是回車,<p>是段落。<p>前后會(huì)有比較大的空白,而<br/>則沒有。

          3. <center>居中顯示.

          4. <b>、<strong>粗體,<i>、<em>斜體。<u>下劃線。

          5. <sub>2</sub>下標(biāo),如:H<sub>2</sub>O

          6. <sup>2</sup>上標(biāo),如:10<sup>2</sup>

          7. <font></font>字體標(biāo)簽,<font color=“red“ size=“7” face=“隸書”>紅色</font>。color(設(shè)置顏色) size(1-7) face(設(shè)置字體,設(shè)置字體是注意用戶計(jì)算機(jī)中必須有該字體才能正常顯示)

          8. <hr> color size(厚度) width(長度) align=left/center/right (默認(rèn)為劇中顯示)

          9. <pre> 預(yù)格式化 保持本色;

          10. HTML特殊字符:&lt;(小于號(hào),less than);&gt;(大于號(hào),greater than);&nbsp;(空格)。

          11. 超鏈接:<a>標(biāo)簽的一些常用屬性:href、title、target、name

          12. 插入圖片:<img src=“路徑”/>

          13. 列表:dl→(定義列表),ul→(無序列表), ol→(有序列表)。

          14. 表格:<table>;創(chuàng)建行:<tr>;創(chuàng)建單元格:<td>;表頁眉:<thead>;表主體:<tbody>;表頁腳:<tfoot>;表頭:<th>。

          15. rowspan(合并行)、colspan(合并列)

          16. <input>是主要的表單元素,type的可選值:submit(提交按鈕)、button(普通按鈕)、checkbox表單標(biāo)簽:(復(fù)選框)、file(文件選擇框)、hidden(隱藏字段)、image(圖片按鈕)、password(密碼框)、radio(單選按鈕)、reset(重置按鈕)、text(文本框)。

          • meta標(biāo)簽:(包括在head標(biāo)簽中。主要用來描述頁面自身信息,元信息)

          1. <meta name="keywords" content="C#學(xué)習(xí)資料,4k8k.net,.net開發(fā),軟件開發(fā),編程自學(xué)網(wǎng)"/>

          2. <meta name="description" content="免費(fèi)更新最新C#相關(guān)技術(shù)知識(shí),主要包括:.net基礎(chǔ),網(wǎng)頁前端,三層架構(gòu),SQL數(shù)據(jù)庫..."/>

          3. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />網(wǎng)頁編碼

          4. <meta http-equiv="Refresh" content="3" />三秒鐘后刷新此網(wǎng)頁。

          5. <meta http-equiv="Refresh" content="3;url=http://www.4k8k.net" />三秒鐘后重定向到新網(wǎng)頁。

          6. <meta http-equiv="Cache-Control" content="no-cache" /> 禁止瀏覽器緩存頁面。

          7. <meta name="名字" content="值" />關(guān)于網(wǎng)頁的描述信息。

          8. <meta http-equiv="名字" content="值" />模擬http響應(yīng)頭信息。

          C#編程自學(xué)_做最好的.net自學(xué)資料站_更多文章請(qǐng)?jiān)L問:http://www.4k8k.net/

          歡迎訂閱。

          天是劉小愛自學(xué)Java的第76天。

          感謝你的觀看,謝謝你。

          話不多說,繼續(xù)html的學(xué)習(xí):

          昨天學(xué)習(xí)了最基礎(chǔ)的文本標(biāo)簽及屬性,除此之外還有很多其它標(biāo)簽,今天逐一學(xué)習(xí)。

          一、鏈接標(biāo)簽(a標(biāo)簽)

          a標(biāo)簽有一個(gè)必不可少的屬性:href。href也就是超鏈接的意思。

          下面編寫代碼,其中我每行之間用了兩個(gè)換行符(<br/><br/>),為了使頁面看起來相對(duì)而言更加美觀些。

          ①href="#"

          作用是跳轉(zhuǎn)本頁面。

          ②href="對(duì)應(yīng)網(wǎng)頁鏈接地址"

          作用是跳轉(zhuǎn)到對(duì)應(yīng)網(wǎng)頁。

          ③href="本地主頁"

          這個(gè)呢是我自己電腦里面的一個(gè)html文件,自己可以訪問,但是別人就沒法訪問了。

          ②中的是只要網(wǎng)址能打開,所有人都能訪問。

          ④href="mailto:對(duì)應(yīng)郵箱地址"

          作用是用本地的郵箱客戶端,給填寫的郵箱發(fā)送郵件。

          ⑤target="_self"

          self,自身的意思,作用就是在當(dāng)前頁面中打開填入的網(wǎng)頁鏈接。

          ⑥target="_blank"

          blank,空白的意思,作用就是在新窗口中打開填入的網(wǎng)頁鏈接。

          ⑦title="劉小愛的博客"

          title,又是標(biāo)題,這里的作用是:當(dāng)我們將鼠標(biāo)放在當(dāng)前鏈接上的時(shí)候會(huì)出現(xiàn)一個(gè)標(biāo)題提示。

          代碼編寫完畢,做一個(gè)測(cè)試:

          其中有個(gè)小常識(shí):

          左鍵直接點(diǎn)擊,會(huì)在當(dāng)前頁面中打開對(duì)應(yīng)鏈接。

          Ctrl+左鍵點(diǎn)擊,會(huì)在新的頁面中打開對(duì)應(yīng)鏈接。

          二、圖片標(biāo)簽和列表標(biāo)簽

          1圖片標(biāo)簽

          image,圖像的意思,簡寫為img,圖片標(biāo)簽也就是用img來表示。

          ①src="圖片地址"

          如果是本地圖片,寫出圖片所在的路徑即可。

          如果是網(wǎng)絡(luò)圖片,寫出其對(duì)應(yīng)的鏈接即可。

          其中width為寬度,height為高度,如果只設(shè)置其中一項(xiàng),高度和寬度是等比例縮放的。

          當(dāng)然也可以寬度高度同時(shí)設(shè)置不同的值。

          ②alt="圖片丟失了啦"

          如果圖片丟失了,就會(huì)顯示alt里面的內(nèi)容。

          ③title="我是劉小愛"

          同a標(biāo)簽一樣,當(dāng)鼠標(biāo)放在該圖片上時(shí),會(huì)顯示title里的內(nèi)容。

          2列表標(biāo)簽

          list,即列表的意思,其中又分為有序列表和無序列表。

          有序列表:ordered list,簡寫就是ol。

          ①type="1"

          數(shù)字排序,這也是默認(rèn)的有序排序規(guī)則,所以可以省略不寫。

          ②type="a"

          使用小寫字母排序,詳情見上圖。

          ③type="A"

          使用大寫字母排序,詳情見上圖。

          ④type="Ⅰ"

          使用羅馬字母排序,詳情見上圖。

          ⑤type="i"

          使用字母i來排序,詳情見上圖。

          無序列表:unordered list,簡寫就是 ul。

          ①type="disc"

          disc,唱片、圓盤的意思,這是無序列表的默認(rèn)屬性,所以可以省略不寫。

          ②type="circle"

          circle,圓形的意思。

          ③type="square"

          square,正方形的意思。

          三、表格標(biāo)簽

          1基本介紹

          table,表格的意思,這在學(xué)數(shù)據(jù)庫時(shí)就接觸過。

          tr,tablerow的縮寫,表示的是表格中的行。

          td,tabledata的縮寫,表示的是表格中的數(shù)據(jù)。

          ①單元格:cell:細(xì)胞的意思,在表格中就表示為一個(gè)單元格。

          ②表格外邊框:border,邊界的意思,用其可以設(shè)置外邊框的粗細(xì)。

          ③單元格外間距:cellspacing,用其設(shè)定外間距。

          ④單元格內(nèi)間距:cellpadding,用其設(shè)定內(nèi)間距。

          其中width表示表格的寬度,并且外間距一般都會(huì)設(shè)定為0,不然都不像是個(gè)表格的樣子。

          ①caption標(biāo)簽

          標(biāo)題的意思,用以說明表格的標(biāo)題,我這邊還用了一個(gè)b標(biāo)簽將其給加粗了。

          ②th標(biāo)簽

          table head的簡寫,也就是表格的表頭,它是默認(rèn)居中加粗的。

          當(dāng)然我們也可以根據(jù)align屬性來設(shè)定排序位置(居左,居中,居右)。

          此外,其中也可以使用thead、tbody、tfoot標(biāo)簽來劃分表格。

          • thead表示表格的頭部。
          • tbody表示表格的主體。
          • tfoot表示表格的腳部。

          這個(gè)稍作了解即可,感覺使用這些標(biāo)簽和不使用這些標(biāo)簽對(duì)表格本身沒有影響。

          2表格快速模板設(shè)置

          看到左上角那個(gè)黃燈后點(diǎn)擊,選擇Language Injection Settings,最后選擇html即可。

          這樣設(shè)置后就可以使用表格快速創(chuàng)建模板了。

          先輸入table>tr*4>td*4,再加上Tab鍵,即可快速創(chuàng)建一個(gè)4*4的表格。

          3合并單元格

          ①rowspan

          合并行的意思,相同的列不同的行。

          “2”的意思就是表示是跨兩行,從第1行開始將第1行和第2行合并起來了。

          既然如此,那么第2行總共也就只需要3列了,所以將其第2行第1列刪除。

          ②colspan

          合并列的意思,相同的行不同的列。

          “3”的意思就是表示是跨3列,從第2列開始將第2列第3列和第4列合并起來了。

          既然如此,那么第3行總共也就只需要2列了,所以將第3行中第3列第4列刪除。

          最后

          謝謝你的觀看。

          如果可以的話,麻煩幫忙點(diǎn)個(gè)贊,謝謝你。

          果想開發(fā)一個(gè)網(wǎng)站,除了要精通后端開發(fā)語言(如:php)外,還要精通HTML代碼。那么,什么是HTML呢?HTML是一種超文本標(biāo)記語言,它包含有眾多的標(biāo)簽,我們可以通過這些標(biāo)簽,把不同的internet資源(如:文字、圖片、視頻、音頻、表單等等)整合在一個(gè)統(tǒng)一的文檔中,這就形成了我們可以看得見的網(wǎng)頁。那么,HTML都有哪些常用的標(biāo)簽?zāi)兀?/p>

          一、文檔類型聲明。

          html5文檔類型聲明:<!doctype html>

          html4文檔類型聲明:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          二、html主標(biāo)簽。

          這個(gè)標(biāo)簽是html最外層的標(biāo)簽,所有其它的HTML標(biāo)簽都要放在這個(gè)標(biāo)簽的內(nèi)部。

          <html>

          <head></head>

          <body></body>

          </html>

          三、雙標(biāo)簽和單標(biāo)簽。

          在HTML標(biāo)簽中,有的標(biāo)簽是成雙成對(duì)的,如:<html></html>(如下圖);而有的標(biāo)簽是單個(gè)的,如:<hr>橫線標(biāo)簽。

          四、head頭部標(biāo)簽。

          head頭部有以下幾種常用標(biāo)簽:

          meta:主要提供有關(guān)頁面的元信息。

          link:用來定義文檔與外部資源的關(guān)系,最常用的是調(diào)用CSS樣式文件。

          title:頁面標(biāo)題的標(biāo)簽。

          script:用來調(diào)用JS文件或JS代碼。當(dāng)然,script標(biāo)簽也可以在body主體中使用。

          五、body主體標(biāo)簽。

          1、塊級(jí)標(biāo)簽。

          塊級(jí)標(biāo)簽的特性是:獨(dú)自占有一行;標(biāo)簽的高與寬、邊距可以修改;沒有設(shè)置寬與高時(shí),默認(rèn)繼承父標(biāo)簽。例如:


          <div>div1</div>

          <div>div2</div>

          <style>

          .aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

          .aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

          </style>


          前端頁面顯示的效果如下圖:

          常用的塊級(jí)標(biāo)簽有:div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

          2、內(nèi)聯(lián)標(biāo)簽。

          內(nèi)聯(lián)標(biāo)簽與塊級(jí)標(biāo)簽不同,它不能獨(dú)自占有一行,會(huì)與其它內(nèi)聯(lián)標(biāo)簽在同一樣展示;內(nèi)聯(lián)標(biāo)簽的高與寬、上下邊距是不能修改的,它里面的文字或圖片有多高,它就是多高。例如如下代碼:


          <style>

          .aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

          .aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

          </style>

          <span>span1</span>

          <span>span2</span>


          CSS樣式代碼跟塊級(jí)標(biāo)簽的例子是一樣的,而顯示的效果就不一樣了,寬與高、上下邊距沒有效果。如下圖:

          常用的內(nèi)聯(lián)標(biāo)簽有:span、a、b、strong、i、em 。

          3、內(nèi)聯(lián)塊級(jí)標(biāo)簽。

          內(nèi)聯(lián)塊級(jí)標(biāo)簽,既有一些內(nèi)聯(lián)標(biāo)簽的特性,也有一些塊級(jí)標(biāo)簽的特點(diǎn):它不能獨(dú)自占有一行,但是可以修改它的寬度和高度。例如下面這段代碼:


          <style>

          .aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

          .aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

          </style>

          <img src="w5.jpg" alt="">

          <img src="w5.jpg" alt="">


          CSS樣式代碼跟塊級(jí)標(biāo)簽的那個(gè)例子仍然是一樣的,圖片的寬和高、上下邊距修改成功,而2個(gè)圖片不能獨(dú)自占有一行,而是在同一行。如下圖:

          常用的內(nèi)聯(lián)塊級(jí)標(biāo)簽有:img、input、textarea。

          4、區(qū)域標(biāo)簽。

          所謂區(qū)域標(biāo)簽,就是主要用來劃分布局頁面區(qū)域的。如:頭部、主體內(nèi)容、側(cè)邊欄、底部。這樣劃分的好處是:讓頁面布局更加清晰明了。

          常用的區(qū)域標(biāo)簽有:header(頭部)、footer(底部)、nav(導(dǎo)航)、aside(側(cè)邊欄)、section(主體)、article(獨(dú)立內(nèi)容)。

          5、表單標(biāo)簽。

          這個(gè)表單標(biāo)簽我們也是會(huì)經(jīng)常用到的,如:登錄網(wǎng)站的時(shí)候、提交數(shù)據(jù)的時(shí)候。如下圖的評(píng)論表單:

          ?表單常用的標(biāo)簽有:form、input、select、option、textarea 。

          以上就是我們開發(fā)網(wǎng)頁時(shí),會(huì)常用到的HTML標(biāo)簽。當(dāng)然,HTML標(biāo)簽遠(yuǎn)不止這些,尤其是html5出來后,新增了許多的新標(biāo)簽。但是,有些標(biāo)簽在我們開發(fā)中很少用到,所以,這里就沒有做相應(yīng)的介紹。


          主站蜘蛛池模板: 国产乱码精品一区二区三区中文 | 无码人妻啪啪一区二区| 无码国产精品一区二区免费| 国产精品主播一区二区| 国产精品揄拍一区二区久久| 国产精品毛片一区二区| 国产高清一区二区三区视频| 亚洲av无码一区二区三区观看| 中文字幕无码免费久久9一区9| 在线不卡一区二区三区日韩| 国产经典一区二区三区蜜芽| 性色A码一区二区三区天美传媒| 久久精品国产一区二区三区| 无码人妻一区二区三区精品视频| 亚洲AV日韩AV一区二区三曲| 91久久精品无码一区二区毛片| 久久精品亚洲一区二区| 亚洲av日韩综合一区在线观看| 亚洲无线码一区二区三区| 久久无码一区二区三区少妇 | 日韩精品中文字幕无码一区| 中文无码AV一区二区三区| 中文字幕精品亚洲无线码一区应用 | 精品中文字幕一区在线| 国产精品视频无圣光一区| 日本高清天码一区在线播放| 多人伦精品一区二区三区视频| 精品久久久久久无码中文字幕一区| 无码丰满熟妇一区二区| 日韩一区二区三区电影在线观看| 精品国产一区二区三区香蕉事| 国产一区二区三区在线观看免费| 综合激情区视频一区视频二区| chinese国产一区二区| 中文字幕VA一区二区三区| 91视频一区二区| 欧美激情一区二区三区成人| 日本韩国一区二区三区| 国产成人一区在线不卡| 无码AV中文一区二区三区| 亚洲国产系列一区二区三区 |