當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

Html----编写

發(fā)布時(shí)間：2024/9/21 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 Html----编写小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

　　文檔的編輯

選擇文檔---->修改文檔后綴名（.thml）--->用瀏覽器打開(kāi)(解釋和執(zhí)行HTML源代碼的工具)

　　瀏覽器主要分類(lèi)及內(nèi)核

火狐（Firefor）--->GechoIE（Internet Explore）---->Trident谷歌（Chrome）--->Webkit蘋(píng)果（Safari）---->Webkit歐朋（Opera）----->Presto/Blink主要用來(lái)渲染html,CSS渲染引擎，解析引擎

　　HTML文檔結(jié)構(gòu)

<html>---html標(biāo)簽的起始標(biāo)簽<head><title>標(biāo)題</title></head><body>這是我們的主戰(zhàn)場(chǎng)</body> </html>---html標(biāo)簽的結(jié)束標(biāo)簽

　　標(biāo)簽（標(biāo)記）的語(yǔ)法：

HTML標(biāo)簽的分類(lèi)：雙標(biāo)簽、單標(biāo)簽雙標(biāo)簽：<tag 屬性1='屬性值1' 屬性2='屬性值2'></tag> 單標(biāo)簽：<tag 屬性1='屬性值1' 屬性2='屬性值2'/> tag泛指所有標(biāo)簽的名稱(chēng)

? ? ?編輯html標(biāo)簽的注意事項(xiàng)：

1 必須要符合基本語(yǔ)法
2 必須要定義文檔類(lèi)型 <!DOCTYPE html>:告訴瀏覽器這是一個(gè)html文檔，方便瀏覽器渲染htmldocument：文檔type：類(lèi)型
3 必須要定義文檔的字符編碼gb123:中文簡(jiǎn)體編碼gbk：中文編碼utf-8：國(guó)際編碼<meta http-equiv='content-type' content='text/html;charset=utf-8'/>把content關(guān)聯(lián)到http頭部，告訴瀏覽器準(zhǔn)備接受一個(gè)html文檔，并以u(píng)tf-8的字符編碼來(lái)進(jìn)行解析<meta name='description' content='描述信息'/><meta name='keywords' content='關(guān)鍵字'/>方便瀏覽器的搜索引擎搜索相關(guān)網(wǎng)站meta標(biāo)簽要放在head標(biāo)簽里面
4 文檔類(lèi)型編碼必須和網(wǎng)頁(yè)字符編碼一致，如果用記事本，另存為設(shè)置編碼
5 必須要符合代碼風(fēng)格---層層縮進(jìn)
6 所有標(biāo)簽都必須為英文小寫(xiě)，屬性與屬性之間用一個(gè)空格分開(kāi)，屬性與屬性值用等號(hào)連接，屬性值用英文的單/雙引號(hào)包住

---------------------------------------------------------------

1 <body></body>標(biāo)簽 body標(biāo)簽的常用屬性： text='顏色' 顏色的表示方法： a 英文單詞：(三原色---rgb）r:red g:green b:blue yellow pink white black.... b 十六進(jìn)制： red:#ff0000 green:#00ff00 blue:#0000ffbgcolor='顏色'---表示body標(biāo)簽的背景色background='圖片路徑'---表示背景圖片圖片：.jpg .png(透明圖片) .gif(動(dòng)態(tài)圖)。。。路徑--- 絕對(duì)路徑：相對(duì)于磁盤(pán)的路徑，物理路徑相對(duì)路徑：在同一文件夾下面html文檔找圖片的位置同級(jí)關(guān)系：直接引用文件名上一級(jí)關(guān)系：../圖片名下一級(jí)關(guān)系：文件夾名/圖片名 ---------------------------------------------------------------

2 文本格式標(biāo)簽

<br/>:換行標(biāo)簽特殊字符標(biāo)簽：  ---空格 <---< >---> "---" ©---版權(quán)號(hào)電腦的單位：基本單位：字節(jié)（b）一個(gè)字符占一個(gè)字節(jié)，一個(gè)漢字占兩個(gè)字節(jié) 最小單位：位（bit） 1b=8bit; lkb(千字節(jié))=1024b 1M(兆)=1024kb標(biāo)題標(biāo)簽:<hn></hn>---n:1---6 特點(diǎn)： a 雙標(biāo)簽 b 字體加粗 c 自動(dòng)換行 d 1-6逐級(jí)減小段落標(biāo)簽：<p></p> p標(biāo)簽的屬性： align="center/left/right":水平對(duì)齊方式預(yù)編譯標(biāo)簽：<pre></pre> 特點(diǎn)：原樣輸出，自動(dòng)換行水平分割線：<hr/> 屬性： color="顏色" size="粗細(xì)" width="寬度" align="center/left/right"文本居中：<center></center>

---------------------------------------------------------------
3 字符格式標(biāo)簽

<b></b>:字體加粗 <i></i>:文本傾斜 <u></u>:下劃線 <s></s>:刪除線 <sub></sub>:下標(biāo) <sup></sup>:上標(biāo) <small></small>:字體變小 <font></font>:字體標(biāo)簽屬性： size="12px" color="顏色" face="字體"所有的字符格式標(biāo)簽都不換行，并且都是雙標(biāo)簽所有的字符格式標(biāo)簽最好都放在文本格式標(biāo)簽里面<img/>:圖片標(biāo)簽屬性： src='路徑' width="50px/50%" height="50px/50%" border="2px" title="提示信息"---當(dāng)鼠標(biāo)放上去的時(shí)候，就顯示title所對(duì)應(yīng)的屬性值 alt="提示信息"---當(dāng)圖片在瀏覽器上顯示不出來(lái)的時(shí)候，就會(huì)顯示alt所對(duì)應(yīng)的屬性值HTML注釋： a 屏蔽掉HTML代碼（不在瀏覽器中顯示） b 標(biāo)注注釋

---------------------------------------------------------------
?表格標(biāo)簽：

<table> <tr> <td>內(nèi)容</td> </tr> </table>tr:代表的是表格的行標(biāo)簽 td:代表的是表格的列標(biāo)簽table的屬性： border="2px":邊框粗細(xì) bordercolor="顏色"：表框顏色 width="500px":表格的寬度 height="500px":表格的高度 bgcolor="顏色":表格的背景顏色 background="路徑":表格的背景圖 align="left/right/center":表格水平對(duì)齊方式 cellspacing="5px":單元格與單元格之間的間距 cellpadding="5px"：內(nèi)容與單元格邊框的距離tr的屬性： height:行的高度 bgcolor="顏色":行的背景顏色 background="路徑":行的背景圖 align="left/right/center":當(dāng)前行的水平對(duì)齊方式 valign="top/middle/bottom":垂直方向?qū)R方式td的屬性： width:單元格的寬度 height:單元格的高度 bgcolor="顏色":單元格的背景顏色 align="left/right/center":單元格的水平對(duì)齊方式 valign="top/middle/bottom":單元格的垂直方向?qū)R方式 rowspan="5":合并行 colspan="5":合并列<table> <thead><tr><th></th></tr></thead> <tbody><tr><td></td></tr><tbody> </table> thead:表格表頭 th:文字自動(dòng)加粗，文字自動(dòng)居中如果沒(méi)有表頭的話： <table> <tr><td>內(nèi)容</td></tr> </table>

---------------------------------------------------------------

5 列表標(biāo)簽

(1) 有序列表 <ol><li></li></ol> ol標(biāo)簽的屬性： type="1/a/A/i/I",默認(rèn)為數(shù)字排序 start="10",表示從第十項(xiàng)開(kāi)始，并且只能是數(shù)字 (2)無(wú)序列表 <ul><li></li></ul> ul標(biāo)簽的屬性: type="square(方塊)/disc(實(shí)心圓)/circle(空心圓)"，默認(rèn)為實(shí)心圓 (3)語(yǔ)義列表 <dl> <dt>標(biāo)題部分</dt> <dd>內(nèi)容</dd> </dl>---------------------------------------------------------------

6 超鏈接標(biāo)簽(a標(biāo)簽)

<a href="http://www.baidu.com">百度一下</a> a標(biāo)簽的屬性： href="路徑"http:超文本傳輸協(xié)議，是客戶(hù)端和服務(wù)端請(qǐng)求和應(yīng)答的標(biāo)準(zhǔn) http/https---https加密的 www:world wide web(萬(wàn)維網(wǎng)、環(huán)球網(wǎng))，簡(jiǎn)稱(chēng)web w3c:萬(wàn)維網(wǎng)聯(lián)盟 w3school:萬(wàn)維網(wǎng)聯(lián)盟的中國(guó)社區(qū) 萬(wàn)維網(wǎng)聯(lián)盟的創(chuàng)始人：蒂姆.伯納斯.李（互聯(lián)網(wǎng)之父）a、外部鏈接： <a href="http://www.baidu.com">百度一下</a> b、內(nèi)部鏈接： <a href="項(xiàng)目的相對(duì)路徑">百度一下</a> //跳轉(zhuǎn)到本地項(xiàng)目的某個(gè)頁(yè)面c、建立錨點(diǎn)：通過(guò)錨點(diǎn)可以找到相對(duì)標(biāo)簽的位置 <a href="#pig">找豬頭</a> <p id="pig">豬頭</p> //pig叫錨點(diǎn)值(hash值)，錨點(diǎn)值必須要與你要找的標(biāo)簽的id名要一致 <a href="相對(duì)路徑#pig" target="_blank">找豬頭2</a> //可以找到本地項(xiàng)目的某個(gè)頁(yè)面的標(biāo)簽d、通過(guò)href可以做功能性鏈接：郵箱、qq鏈接 <a href="mailto:hehedaWebMail@nbsp.com">站長(zhǎng)郵箱</a>target="_self/_blank" _self:在自身窗口打開(kāi) _blank：在新窗口打開(kāi)

轉(zhuǎn)載于:https://www.cnblogs.com/liaohongwei/p/7017136.html

總結(jié)

以上是生活随笔為你收集整理的Html----编写的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

html

上一篇：关于WebApi 跨域问题的解决的方式
下一篇： boost实用工具：创建一个禁止复制的类