整合營銷服務商

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

          免費咨詢熱線:

          HTML-列表標簽(雙標簽) 208

          表標簽有3種:1)dl,dd與dt(定義列表) 2)ol與li(有序列表) 3)ul與li(無序列表)前兩者一般不怎么用,網頁中運用最多的是第三種

          1)<dl><dd>與<dt>

          <!DOCTYPE html>
          <html>
          <head>
              <title>列表</title>
              <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
          </head>
          <body>
              <dl>
                  <dt>河北</dt>
                  <dd>石家莊</dd>
                  <dd>秦皇島</dd>
                  <dt>河南</dt>
                  <dd>鄭州</dd>
                  <dd>新鄉(xiāng)</dd>
              </dl>
          </body>
          </html>

          2)<ol>與<li>和<ul>與<li>

          它們兩個都有一個type屬性,用來設置序列的顯示樣式(在li前面顯示),type的取值有:1(數字序號)A,a(大小寫字母)I,i(大小寫羅馬數字)disc(實心原點)circle(空心圓圈)square(實心方塊)

          顯示效果

          有序與無序列表的區(qū)別就是type的默認值不同而已

          <!DOCTYPE html>
          <html>
          <head>
              <title>列表</title>
              <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
          </head>
          <body>
              <dl>
                  <dt>河北</dt>
                  <dd>石家莊</dd>
                  <dd>秦皇島</dd>
                  <dt>河南</dt>
                  <dd>鄭州</dd>
                  <dd>新鄉(xiāng)</dd>
              </dl>
              ============================================================
              <ol type="A">
                  <li>北京</li>
                  <li>上海</li>
                  <li>廣州</li>
                  <li>深圳</li>
              </ol>
              =============================================================
              <ul type="circle">
                  <li>北京</li>
                  <li>上海</li>
                  <li>廣州</li>
                  <li>深圳</li>
              </ul>
          </body>
          </html>

          注意:設置屬性時考慮瀏覽器的兼容性

          經過測試ol與ul列表在IE瀏覽器(IE10)下type的這幾個取值都有相應的效果;在谷歌瀏覽器下ol列表只對type值為1、a、A、i、I有效果;ul列表只對type值為disc、circle、square有效果;其他的如蘋果,火狐等瀏覽器自己測試(同一瀏覽器的不同版本不再測試)

          谷歌在顯示效果

          2.1使用嵌套的ul或ol來模擬二級菜單,以后會通過js,css或者Asp.net實現動態(tài)的菜單

          二級菜單

          、標簽的分類:雙標簽和單標簽

          雙標簽:就是成對出現的,類似于這種 <html> </html>

          單標簽:就是可以單個使用的,類似于 <br> 換行標簽 或 <hr>水平線標簽。

          二、標簽屬性的作用:

          標簽的屬性是用來定義文字或字符的 顏色、寬高、粗細、大小、等,這個是標簽屬性的作用。


          三、標簽屬性的特性:

          1、每一個標簽都有自己的屬性,單標簽和雙標簽都有。

          2、一個標簽可以有多個屬性。

          3、每個屬性都有對應的值,值要用單或雙引號引起來。

          4、多個屬性之間使用空格隔開。

          5、屬性沒有順序之分。

          6、字體屬性值,必須是系統(tǒng)可以識別的字體,一般為系統(tǒng)自帶字體。

          7、HTML5 中 font 屬性已經棄用。

          源代碼:↓

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <!--網頁抬頭-->

          <title>中央氣象局</title>

          </head>

          <body>

          <!--水平線的寬度是500像素,這個width就是標簽屬性-->

          <hr width="500">

          <!--下面這個是多個標簽屬性,多個屬性之間用空格隔開-->

          <font color="red" face="黑體" size="7">標簽屬性</font>

          </body>

          </html>

          /一、html

          //a、HTML語法規(guī)范

          //a.1基本語法概述

          1、HTML標簽是由尖括號包圍的關鍵字,例如,

          2、HTML標簽通常是成對出現的,例如和,我們成為雙標簽,標簽對中的第一個標簽是開始標簽,第二個標簽是結束標簽。

          3、有些特殊的標簽是單個標簽(極少情況),例如

          ,我們稱為單標簽

          //a.2標簽關系

          雙標簽關系可以分為兩類:包含關系和并列關系。

          //b、HTML基本結構標簽

          //b.1第一個HTML網頁

          每個網頁都會有一個基本的結構標簽(也稱為骨架標簽),頁面內容也是在這些基本標簽上寫的。

          HTML頁面也稱為HTML文檔

          標簽名

          定義

          說明

          <html></html>

          HTML標簽

          頁面中最大的標簽,我們稱為根標簽

          <head></head>

          文檔的頭部

          注意在head標簽中我們必須要設置的標簽是title

          <title></title>

          文檔的標題

          讓頁面擁有一個屬于自己的網頁標題

          <body></body>

          文檔的主體

          元素包含文檔的所有內容,頁面內容,基本都是放到body里面的

          必須是.html或.htm,瀏覽器的作用是讀取HTML文檔,并以網頁的形式顯示出它們。

          此時,用瀏覽器打開這個網頁,我們就可以預覽我們寫的第一個HTML文件了。

          //c、開發(fā)工具vscode

          1、<!DOCTYPE>標簽
          文檔類型聲明,作用就是告訴瀏覽器使用哪種HTML版本來顯示網頁

          <!DOCTYPE html>這句代碼的意思是:當前頁面采用的是HTML5來顯示頁面。
          

          2、lang語言

          用來定義當前文檔顯示的語言:

          a、en定義語言為英語

          b、zh-CN定義語言為中文

          簡單來說定義為en就是英文網頁,定義為zh-CN就是中文網頁

          其實對于文檔顯示來說,定義成en的文檔也可以顯示中文,定義zh-CN的文檔也可以顯示英文

          這個屬性對于瀏覽器和搜索引擎(百度、谷歌等)還是有作用的

          3、charset字符集

          字符集是多個字符的集合,以便計算機能夠識別和存儲各種文字

          在標簽內,通過標簽的charset屬性來規(guī)定HTML文檔應該使用哪種字符編碼。

          charset常用的值:GB2312、BIG5、GBK和UTF-8,其中UTF-8也稱為萬國碼,基本包含了全世界所有國家需要用到的字符。

          注意:上面語法是必須寫的代碼,否則可能引起亂碼的情況,一般情況下,統(tǒng)一使用"UTF-8"編碼,盡量統(tǒng)一寫成標準的"UTF-8",不要寫成"utf-8"或"UTF8"。

          //d、HTML常用標簽

          //d.1標簽語義

          學習標簽是有技巧的,重點是記住每個標簽的語義,簡單理解就是指標簽的含義,即這個標簽是用來干嘛的

          根據標簽的語義,在合適的地方給一個最為合理的標簽,可以讓頁面結構更清晰。

          //d.2標題標簽

          -

          (重要)

          為了使網頁更具有語義,我們經常會在頁面中用到標題標簽,HTML提供了6個等級的網頁標題集

          -

          特點:

          1、加了標題的文字會變得更加粗,字號也會依次變大。

          2、一個標題獨占一行。

          //d.3段落和換行標簽(重要)

          在網頁中,要把文字有條理地顯示出來,就需要將這些文字分段顯示,在HTML標簽中,

          標簽用于定義段落,它可以將整個網頁分為若干段落。

          <p>我是一個段落標簽</p>標簽語義:可以把HTML文檔分割為若干段落。
          

          特點:
          1、文本在一個段落中會根據瀏覽器窗口的大小自動換行。
          2、段落和段落之間保有一個較大的空隙。

          在HTML中,一個段落中的文字從左到右依次排列,直到瀏覽器的右端,然后自動換行,如果希望某段文本強制換行顯示,就需要使用換行標簽

          <br />
          

          單詞break的縮寫,意為打斷,換行。

          特點:

          1、單標簽

          2、

          標簽只是簡單地開始新的一行,跟段落不一樣,段落之間會插入一些垂直的間距。

          //d.4文本格式標簽

          在網頁中,有時需要為文字設置粗體,斜體或下劃線等效果,這時就需要用到HTML中的文本格式標簽,使文字以特殊的方式顯示

          標簽語義:突出重要性,比普通文字更重要。

          語義

          標簽

          說明

          加粗

          <strong></strong>或者<b></b>

          更推薦使用<strong></strong>標簽加粗,語義更強烈

          傾斜

          <em><em> 或者<i><i>

          更加推薦使用<em><em>標簽,語義更加強烈

          刪除線

          <del><del>或者<s><s>

          更加推薦使用<del><del>標簽,語義更加強烈

          下劃線

          <ins><ins>或者<u><u>

          更加推薦<ins><ins>標簽,語義更加強烈

          //d.5<div>和<span>標簽
          <div>和<span>是沒有語義的,它們就是一個盒子,用來裝內容。

          <div>這是頭部</div>
          <span>今日價格</span>

          div是division的縮寫,表示分割,分區(qū),span意為跨度,跨距。

          特點:

          1、<div>標簽用來布局,但是現在一行只能放一個<div>,大盒子。

          2、<span>標簽用來布局,一行上可以有多個<span>,小盒子

          //d.6圖像標簽和路徑(重點)

          1、圖像標簽

          在HTML標簽中,<img>標簽用于定義HTML頁面中的圖像。

          <img src="圖像url"/>

          單詞image的縮寫,意為圖像

          src是<img>標簽的必須屬性,它用于指定圖像文件的路徑和文件名。

          所謂屬性:簡單理解就是屬于這個圖像標簽的特性。

          圖像標簽的其他屬性:

          屬性

          屬性值

          說明

          src

          圖片路徑

          必須屬性

          alt

          文本

          替換文本,圖像不能顯示的文字

          title

          文本

          提示文本,鼠標放到圖像上,顯示文字

          width

          像素

          設置圖像的寬度

          height

          像素

          設置圖像的高度

          border

          像素

          設置圖像的邊框粗細


          主站蜘蛛池模板: 精品国产aⅴ无码一区二区| 日本一区二区在线不卡| 国产在线一区二区三区在线| 中文字幕一区二区日产乱码| 台湾无码一区二区| 国产福利电影一区二区三区,亚洲国模精品一区 | 人妻aⅴ无码一区二区三区| 国产一区二区精品尤物| 一区二区三区在线观看免费| AV天堂午夜精品一区二区三区| 性色av一区二区三区夜夜嗨| 中文字幕一精品亚洲无线一区| 视频一区二区三区人妻系列| 国模精品一区二区三区视频| 毛片一区二区三区无码| 午夜影院一区二区| 亚洲综合av一区二区三区不卡| 老熟妇仑乱一区二区视頻| 91久久精品一区二区| 秋霞无码一区二区| 亚洲福利电影一区二区?| 精品欧洲AV无码一区二区男男| 91精品国产一区二区三区左线| 日韩精品一区二区三区中文| 午夜福利一区二区三区高清视频 | 在线成人一区二区| 亚洲av色香蕉一区二区三区蜜桃| 日韩一区二区视频在线观看| 国产精品高清一区二区人妖| 欧美日韩精品一区二区在线观看| 亚洲AV香蕉一区区二区三区| AV天堂午夜精品一区二区三区| 国产一区二区三区播放| 一区二区三区久久精品| 国产精品日本一区二区在线播放| 少妇精品无码一区二区三区| 无码少妇丰满熟妇一区二区 | 亚洲一区二区女搞男| 久久久久人妻一区精品色| 午夜性色一区二区三区不卡视频 | 极品少妇一区二区三区四区|