、HTML與XHTML的區(qū)別
(1)在XHTML 中標簽名稱必須小寫,在HTML 中標簽名稱既可以小寫也可以大寫;
(2)在XHTML 中標簽必須封閉,在HTML中標簽可以不成對出現(xiàn);
(3)在XHTML 中標簽必須嚴格嵌套,HTML對標簽嵌套沒有嚴格規(guī)定;
(4)在XHTML 中屬性名稱必須小寫,在HTML 中也一樣;
(5)在XHTML 中標簽必須用雙引號引起來,HTML中可以不用;
二、特殊符號
三、列表的使用
(1)無序列表
# 打印實心圓點的無序列表 <body> <ul type="disc"> <li>第一</li> <li>第二</li> <li>第三</li> </ul> </body>
(2)有序列表
# 打印數(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)表格的對齊方式
(3)表格的其他屬性
模板提供多個頁面,博客頁面布局格式簡單,沒有復雜的背景、動態(tài)幻燈片展示、欄目、標簽、搜索應有盡有,簡潔又不失大氣,模板來自整理,可適應手機端頁面
* 下載本站模板以及作品僅供學習研究使用 *
編今天的分享主題是顯示屬性、列表屬性、定位屬性;
顯示屬性,它表示了一個框或者盒的表現(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)固定定位的。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。