整合營銷服務(wù)商

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

          免費咨詢熱線:

          HTML基礎(chǔ)知識之列表和表格的使用

          、HTML與XHTML的區(qū)別

          (1)在XHTML 中標簽名稱必須小寫,在HTML 中標簽名稱既可以小寫也可以大寫;

          (2)在XHTML 中標簽必須封閉,在HTML中標簽可以不成對出現(xiàn);

          (3)在XHTML 中標簽必須嚴格嵌套,HTML對標簽嵌套沒有嚴格規(guī)定;

          (4)在XHTML 中屬性名稱必須小寫,在HTML 中也一樣;

          (5)在XHTML 中標簽必須用雙引號引起來,HTML中可以不用;

          二、特殊符號

          • 表示空格;
          • "表示雙引號;
          • &表示&符號;
          • >表示大于號>;
          • <表示小于號<;
          • &copy?表示版權(quán)符號?;

          三、列表的使用

          (1)無序列表

          • 無序列表是一個項目列表,使用項目符號標記無序列表的項目,無序列表也就是沒有順序的列表;
          • 無序列表的type屬性取值有三種,分別是circle(圓圈)、disc(實心圓點)、square(方塊);
          # 打印實心圓點的無序列表
          
          <body>
           <ul type="disc">
           <li>第一</li>
           <li>第二</li>
           <li>第三</li>
           </ul>
          </body>
          

          (2)有序列表

          • 有序列表也是由一個個列表項組成,列表想既可以使用數(shù)字標記,也可以使用字母標記;
          • 有序列表的type屬性取值有5中,分別是1(數(shù)字)、i(小寫羅馬字母)、I(大寫羅馬字母)、a(小寫字母)、A(大寫字母);
          # 打印數(shù)字排序的有序列表
          
          <body>
           <ol type="1">
           <li>我最愛椰奶</li>
           <li>第二愛可樂</li>
           <li>第三愛橙汁</li>
           </ol>
          </body>
          

          (3)定義列表

          • 定義列表是當無序列表和有序列表都不適合時,通過自定義列表來完成自定義展示,所以定義列表不僅僅是一個項目列表,而是項目和注釋的組合;
          <body>
           <dl>
           <dt>春曉</dt>
           <dd>春眠不覺曉,處處聞啼鳥</dd>
           <dd>夜來風雨聲,花落知多少</dd>
           </dl>
          </body>
          

          四、表格的使用

          (1)表格的基本結(jié)構(gòu)

          • 單元格:表格的最小單位,一個或多個單元格縱橫排列組成了表格;
          • 行:一個或多個單元格橫向堆疊形成了行;
          • 列:一個或多個單元格縱向堆疊形成了列;
          <table>
           <tr>
           <td>第一行第一列</td> 
           <td>第一行第二列</td> 
           <td>第一行第三列</td> 
           </tr>
           <tr>
           <td>第二行第一列</td> 
           <td>第二行第二列</td> 
           <td>第二行第三列</td> 
           </tr>
          </table>
          

          (2)表格的對齊方式

          • align屬性:left表示水平居左、center表示水平居中、right表示水平居右;
          • valign屬性:top表示垂直置頂、middle表示垂直居中、bottom表示垂直靠底;

          (3)表格的其他屬性

          • th:一種特殊的單元格,加粗并居中;
          • caption:表格標題;
          • cellspacing:規(guī)定單元格之間的空間;
          • cellpadding:規(guī)定單元邊沿與其內(nèi)容之間的空白;
          • colspan:表格跨列;
          • rowspan:表格跨行;

          欄縱向個人博客模板Html(提供多頁面下載)

          模板提供多個頁面,博客頁面布局格式簡單,沒有復雜的背景、動態(tài)幻燈片展示、欄目、標簽、搜索應有盡有,簡潔又不失大氣,模板來自整理,可適應手機端頁面

          * 下載本站模板以及作品僅供學習研究使用 *

          編今天的分享主題是顯示屬性、列表屬性、定位屬性;

          首先,我們先來了解一下關(guān)于顯示屬性

          顯示屬性,它表示了一個框或者盒的表現(xiàn),具有2層含義,分別是顯示方式顯示效果

          1.顯示方式,即display屬性,具體是指一個框的表示形式,它自己固定的取值候選:

          a)none:表示讓這個元素不顯示,隱藏起來,同時這個元素是不占據(jù)這個文檔的空間的。

          b)block:表示讓這個元素以塊級元素的形式顯示,在它后面的元素是會另外起一行,這個時候的元素是可以自己定義它的高度和寬度的。如果你想設(shè)置一個行內(nèi)元素的高和寬,或者想讓一個隱藏了的元素顯示的話,這個方式就是非常好的。

          c)inline:表示讓這個元素以行內(nèi)元素的形式顯示,這個時候后面的元素會緊跟著前面的元素,并列顯示,同事也不能設(shè)置高度和寬度。

          d)inline-block:表示讓這個元素以行內(nèi)塊的形式顯示,其實就是一個行內(nèi)元素,不過這個行內(nèi)元素可以設(shè)置高度和寬度了。如果你不想讓這個元素的后面元素另外起一行又想改變這個元素的高度和寬度,那這個方法是極好的。

          以上4個候選取值,就是display的取值詳解,語法規(guī)范就是display:none/block/inline/inline-block,具體的按照實實際開發(fā)需求。練習的時候,可以每個都試一試,看看它們分別是什么效果。

          2.顯示效果,就是元素顯示了之后,再設(shè)置它的一些效果,先簡單的介紹4個效果:

          a)visibility屬性,即表示這個元素的顯示與否,取值有visible(顯示的,也是默認值)、hidden(不顯示),這個屬性看似和上訴的顯示方式挺像的,它們有一個非常明顯的區(qū)別就是,display為none時,它是不占據(jù)空間的;而visibility為hidden時,它雖然是看不見的,但是它會占據(jù)頁面空間,可能會影響文檔的排版問題,這需要特別的注意。

          b)opacity屬性,即表示這個元素的透明度,取值范圍就是0至1,其中0表示完全透明,1表示完全不透明,記住取值越大,越不透明。

          c)vertical-align屬性,即表示這個元素的垂直對齊,取值可以有:top/middle/bottom baseline;基線對齊

          d)cursor屬性即光標,表示當你的鼠標在經(jīng)過這個元素時候,鼠標顯示的樣式;取值有:pointer(手的形狀)、default(默認)、crosshair(顯示為“+”)、text(顯示為“I”)、wait(顯示為 等待)、help(顯示為“?”)

          其次,我們了解一下列表屬性

          列表,就是講這部分的內(nèi)容按照一定的順序排列,可以是橫向的也可以是縱向的,她有列表樣式屬性、列表項圖像屬性、列表項位置、列表綜合屬性。

          1.列表樣式即list-style-type,分為有序列表、無序列表,有序的列表是按照數(shù)值排序、羅馬數(shù)字排序,無序列表就是列表項為實心圓、空心圓、實心矩形。

          無序列表的取值為:none(無標記)、disc(實心圓)、circle(空心圓)、square(實心矩形)

          有序列表的取值為:none(無標記)、decimal(數(shù)字)、lower-roman(小寫的羅馬數(shù)字)、upper-roman(大寫的羅馬數(shù)字)

          2.列表項圖像即list-style-image,表示列表項圖像不想取值為數(shù)字或者實心圓等時,可以自定義一個圖像;語法規(guī)范:list-style-image:url(文件路徑)

          3.列表項位置即list-style-position,就是li前面標識的位置,取值有:outside(標識在li外)、inside(標識在li內(nèi))

          4.列表的總和屬性即list-style,語法規(guī)范:list-style:type url position 實例list-style:circle url(xxxx.jpg) inside

          以上就是列表的一些樣式了,可以自己打打代碼,看看具體的效果

          最后,我們了解一下定位屬性

          定位 position,就是元素在文檔的位置,當需要對元素的位置進行修改時,就需要用到定位啦!

          定位分為:普通流定位、浮動定位、相對定位、絕對定位、固定定位

          定位的屬性就是:position,取值有:static(靜態(tài)定位即普通流定位)、relative(相對定位)、absolute(絕對定位)、fixed(固定定位)

          display屬性在使用的時候,需要配合top\bottom\left\right屬性使用,表示偏移量。

          z-index屬性,表示當多個元素重疊的時候,誰在前面誰在后面,值越大越靠近用戶

          接下來詳解各個定位:

          1.相對定位:就是這個元素相對于自己本身的位置偏移指定的量數(shù);具體的實現(xiàn)方式(二步曲)就是先定義定位方式,再定義指定偏移量:即display:relative;left\top\right:xxpx;常常用于彈出菜單的實現(xiàn)

          2.絕對定位:就是這個元素相對了已經(jīng)定義為相對定位的最近的父級;實現(xiàn)的方式同上,display為absolute,常用的場景非常多。

          3.固定定位:就是將元素固定在網(wǎng)頁的某個位置處,不跟隨滾動條發(fā)生滾動;實現(xiàn)方式同上,display為fixed,常用于網(wǎng)頁固定的小廣告,多數(shù)情況下是相對與body實現(xiàn)固定定位的。


          主站蜘蛛池模板: 中文字幕一区二区精品区| 亚洲中文字幕无码一区| 亚洲国产高清在线一区二区三区 | 无码人妻一区二区三区免费| 丰满岳乱妇一区二区三区| 亚洲色精品三区二区一区| 熟女精品视频一区二区三区| 东京热无码av一区二区| 一区二区三区视频网站| 免费萌白酱国产一区二区| 久久精品无码一区二区三区不卡 | 国产精品视频一区二区噜噜| 无码AⅤ精品一区二区三区| 日本韩国一区二区三区| 亚洲综合av一区二区三区| 99精品国产一区二区三区不卡| 国产亚洲一区二区三区在线观看 | 久久无码一区二区三区少妇| 在线精品自拍亚洲第一区| 久久久久人妻精品一区三寸| 久久久久人妻精品一区三寸| 无码日韩人妻av一区免费| 韩国女主播一区二区| 国产亚洲综合一区二区三区| 国产精品亚洲一区二区三区在线观看 | 久久国产香蕉一区精品| 一区二区三区四区在线视频| 日韩精品一区二区三区不卡 | 亚洲国产福利精品一区二区| 无码乱码av天堂一区二区| 一本久久精品一区二区| 日韩精品一区二区三区老鸦窝| 成人h动漫精品一区二区无码| 无码人妻精品一区二区三区9厂| 天天躁日日躁狠狠躁一区| 亚洲AV无码一区二区三区国产| 久久精品无码一区二区三区日韩 | 国产丝袜视频一区二区三区| 日本一区二区三区在线观看| 亚洲午夜精品一区二区公牛电影院| 中文字幕在线一区二区在线|