網(wǎng)頁制作的文本標(biāo)記(完整版)_第1頁
網(wǎng)頁制作的文本標(biāo)記(完整版)_第2頁
網(wǎng)頁制作的文本標(biāo)記(完整版)_第3頁
網(wǎng)頁制作的文本標(biāo)記(完整版)_第4頁
網(wǎng)頁制作的文本標(biāo)記(完整版)_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

HTML標(biāo)記的分類:1)頭部標(biāo)記：title,meta,link,style2)文本標(biāo)記：font,b,i,u,strong,3)段落標(biāo)記：p,hn,pre,marquee,br,hr4)列表標(biāo)記：ul,ol,li,dl,dt,dd5)超鏈接標(biāo)記：a,map,area6)圖像及媒體元素標(biāo)記：img,embed,object7)表格標(biāo)記：table,tr,td,th,tbody8)表單標(biāo)記：form,input,textarea,select,option,fieldset,legend9)框架標(biāo)記：frameset,frame,iframe10)容器標(biāo)記：div,span11)單標(biāo)記：<br/>(強制換行)，<hr/>(水平線)，<img/>，<input/>，<meta/>，<link/>12)成組標(biāo)記：table，form，ul,ol,dl,frameset，fieldset行內(nèi)元素和塊級元素：行內(nèi)元素：a，img，font(文字屬性)，b，i，u，span，input塊級元素：p,div,hn,pre,hr,ul,ol,li,form公共屬性：align（水平對齊方式），valign(垂直對齊方式)，border（邊框），title（提示文字），src（鏈接的文件路徑），style（引入CSS行內(nèi)樣式），id，name特有屬性：<ahref（鏈接的目標(biāo)），target（窗口打開方式）><inputtype（元素的類型），size（含義依據(jù)type而不同）>在HTML語言規(guī)范的基礎(chǔ)上，XHTML對標(biāo)記還有下面一些額外的要求：1）標(biāo)記名和屬性名、屬性值必須小寫；2）屬性值必須用雙引號引起；3）所有標(biāo)記包括單標(biāo)記都必須封閉；4）不允許省略屬性值。<html><head><title></title></head><body><imgsrc="圖片路徑"alt="光標(biāo)移到圖片的所顯示的內(nèi)容"width=""/><p>（上下）一個段落的文字內(nèi)容</p><span>左右順序排列的文字</span><pre>保持文本內(nèi)容的原形</pre><nobr>強制不換行</nobr><hrsize="2"(水平線的厚度)width="5"(水平線的寬度)noshade="noshade"(是否要陰影)color="#FF0000"(顏色)align="center"(水平對齊方式)/><b>粗體文字</b><i>斜體文字</i><u>加下劃線</u><em>加粗，傾斜</em><sup>內(nèi)容</sup>(上標(biāo))<sub>...</sub>(下標(biāo))<fontface="黑體"size="+6"color="#00000FF">文字內(nèi)容</font>(編輯文字的屬性)<ul><li><ahref="">首頁</a></li>（超鏈接）<li>...</li><li>...</li></ul>(無序列表)ol,li(有序列表)<body><h2>一個定義列表：</h2><dl><dt>計算機(jī)</dt>（標(biāo)題）<dd>用來計算的儀器......</dd>（文段內(nèi)容）<dt>顯示器</dt><dd>以視覺方式顯示信息的裝置......</dd></dl>table表格：<tablewidth="400"border="1"cellspacing(單元格間距即單元格和單元格的距離)="0"cellpadding(單元格邊距即單元格和單元格內(nèi)容的距離)="0"><th>...</th>(表頭)<caption>…</caption>(表格標(biāo)題)<tr>(行)<td>...</td>(列ttr)</tr></table表格table標(biāo)簽的屬性：1、width屬性：指定表格或某一個表格單元格的寬度。單位可以是%或者象素。2、height屬性：指定表格或某一個表格單元格的高度。單位可以是%或者象素。3、border屬性：表格邊線粗細(xì)4、bordercolor屬性：指定表格或某一個單元格的邊框顏色。5、bordercolorlight屬性：亮邊框的顏色6、bordercolordark屬性：暗邊框的顏色c7、bgcolor屬性：指定表格或某一個單元格的背景顏色。<styletype="text/css">p{屬性：屬性值；}</style></head><body><p>我的樣式表</p><p>第二段落</p><div>第三段落</div></body>（2）類選擇符(在整體上實現(xiàn)不一致的效果)<head><styletype="text/css">.div1{屬性：屬性值；}.div2{屬性：屬性值；}.left{屬性：屬性值； }.right{屬性：屬性值； }</style></head><body><divclass="div1">我的樣式表</div><pclass="div1">第二段文字</P><divclass="div2">第三段文字</div><pclass="left">文字居左顯示</p><pclass="right">文字居右顯示</p></body>（3）id選擇符（具有最高優(yōu)先級）<styletype="text/css">#footer{屬性：屬性值}</style></head><body><divid="footer">聯(lián)系我們:<ahref="mailto:demo@">demo@</a></div></body>（4）偽類：a:link超鏈接的初始狀態(tài)a:visited已經(jīng)訪問后的鏈接狀態(tài)a:hover鼠標(biāo)滑過鏈接時的狀態(tài)a:active點擊狀態(tài)時<styletype="text/css">a:hover{color:#ff00ff;text-decoration:none;}</style></head><body><ahref="/"target="_blank">百度</a></body>（5）子選擇類:語法格式：選擇符1選擇符2選擇符1和2直接使用空格分隔，其含義是第一個選擇符中的第二個選擇符。注意：選擇符1必須和選擇符2有嵌套關(guān)系，否則無法正常使用<styletype="text/css">divp{width:500px;height:150px;background:#009900;}</style></head><body><div><p>包含在div里面的p元素</p></div><div>獨立的div元素</div><p>獨立的p元素</p>(6)選擇符分組（群選擇符）語法格式：選擇符1，選擇符2，…..每個選擇符之間用“,”分隔<styletype="text/css">div,p,h1{width:500px;height:150px;background:#009900;color:white;}</style></head><body><div>div元素</div><p>p元素</p><h1>h1元素</h1>div的嵌套<divid=“top”>網(wǎng)頁頭部</div><divid=“main”><divid=“l(fā)eft”>網(wǎng)頁左邊</div><divid=“right”>網(wǎng)頁右邊</div></div><divid=“bottom”>網(wǎng)頁底部</div>邊界（margin）屬性補白（padding）屬性<html><head><title>CSS設(shè)置填充屬性</title><style>div{width:400px;height:300px;background:red;padding:50px20px30px40px;}</style></head><body><div>我的樣式表</div></body></html>邊框樣式border分為上、右、下、左四個子屬性和一個border-style綜合屬性。頂部邊框樣式border-top-styleBorder-top-style：none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;None：沒有邊框Hidden：隱藏邊框Dotted：點線邊框Dashed：虛線邊框Solid：實線邊框Double：雙線邊框Groove：3D凹槽邊框Ridge：菱形邊框Inset：3d凹邊Outset：3d凸邊邊框的綜合屬性border:border-width||border-style||border-color<html><head><title>CSS設(shè)置邊框?qū)傩?lt;/title><style>.dashed{border-top-style:dashed;}</style></head><body><divclass="dashed">我的樣式表</div></body></html>浮動定位：float//none、right、left浮動元素使得div塊可以左右并排清除浮動屬性：clear//none、right、left、both相對定位：position：relative(相對于其原來位置不同方向的偏移)屬性值：top(從上向下位移)、left(從左向右)、right、bottom<styletype="text/css">div{position:relative;top:50px;left:50px;}<style><body><div>11111</div></body>絕對定位：position：absolute(以距離它最近的設(shè)置了定位屬性的父級元素為定位基準(zhǔn)，若它所有的父級元素都沒有設(shè)置定位屬性，則以瀏覽器窗口為定位基準(zhǔn))屬性值：top、left、right、bottom制作三角形<styletype="text/css">#nav{font-size:14px;}#nava{display:block;/*將行內(nèi)元素a設(shè)置為塊級元素，從而具有塊級元素的特點*/color:#ff0000;background-color:#99ccff; text-align:center; text-decoration:none; padding:6px16px; margin:02px; border:1pxsolid#3399ff; float:left;/*將每個塊設(shè)置為左浮動*/ position:relative;/*讓b元素以a元素為定位基準(zhǔn)*/ }#nava:hover{ color:#ffffff; background-color:#993300; }#nava:hoverb{border:8pxsolid#ffffff; border-top-color:red;/*以上兩條形成紅色下三角形*/overflow:hidden; height:0px; width:0px;position:absolute; top:30px; left:35px;/*以上3條相對于a元素邊框的右下邊*/ }</style></head><body><divid="nav"><ahref="#"><b></b>中心簡介</a><ahref="#"><b></b>政策法規(guī)</a><ahref="#"><b></b>常用下載</a><ahref="#"><b></b>為您服務(wù)</a><ahref="#"><b></b>技術(shù)支持</a></div></body>規(guī)</a><ahref="#"><b></b>常用下載</a><ahref="#"><b></b>為您服務(wù)</a></div></body>背景圖片：background其屬性：background-colorbackground-imagebackground-

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論