HTML入門

xml:從數據角度來說,是數據的存儲和傳遞方式

xml文件規則:
1.xml語言沒有固定標簽和屬性,都是自定義的(要說明)

將HTML的語法用xml的嚴格標準去寫,這樣的文檔被稱為“xhtml”文檔

 xhtml:
 1.將單標簽使用"/"結束:即<hr>→<hr/>
 2.將無值的屬性改寫為有值:讓其值等于其屬下名就可以:即   noshade="noshade"
 3.標簽都使用小寫,屬性都加引號(單雙引號都可以)標簽別錯位書寫

網頁的文檔類型

一個html文件的第一行代碼通常就是用來聲明網頁文檔類型,格式如下:

<!doctype 聲明語句>

文檔類型(DTD):不同的HTML的版本

鏈接標簽

<a href="設定鏈接的目標網頁文件 url" target="設定要打開該網頁的瀏覽窗口的名字" >內容部分</a>

其中url就是“網頁網址的意思”。

瀏覽器窗口通常是有名字的。

  內部固定名字和含義的窗口:
  _blank:新的窗口(空白窗口)
  _self: 當前網頁本身的窗口
  _parent: 當前窗口的“上一級”窗口
  _top:當前窗口所在的窗口層級中最頂層的窗口
在新窗口打開
 url 值“鏈接地址”,通??梢苑忠幌虑樾危? 1.絕對地址:通過該設定的地址就可以直接找到所需的網頁地址。
   ①本地絕對地址,形式類似:file:///D:/abc/def/hij.html
   ②互聯網絕對地址,形式類似:http://www.abc.com/def/hij.html
 2.相對地址:需要通過所設定的地址加上當前網頁本身的地址結合才能找到需要的網頁文件
  相對地址是指相對于當前網頁的本身的地址來找出正確的地址
   ①   ./    ——代表本身的地址(當前地址),及當前網頁地址,通??梢允÷?   ②  ../      ——代表當前網頁地址的“上一層”地址(路徑)
   ③   /      ——代表當前網頁的最頂層路徑,這在web應用中才有效。

鏈接的變種形式:錨點

 錨點其實是指一個網頁中的某個位置。
 錨點的作用:讓用戶在一個比較長的網頁中可以快速定位其所需要的內容(位置)。
 錨點的實現:由兩個a標簽配合使用:
           設定錨點鏈接:<a href="#錨點名">內容部分</a>
           設定錨點的名字(錨的位置):<a name="錨點名"></a>

錨點的應用——返回頂部

回到頂部

鏈接的其他應用:

發送郵件:
<a href=”mailto:12500791@qq.com”>無聊的時候給我   Email</a>
 文件下載:
<a href=”文件的路徑url”>點我下載</a>

其他相關標簽:

link:用于引入其他文件,主要是css文件。
base:用于設定當前網頁中的所有a鏈接的目標打開窗口:<base tareget=”_blank” /> 

這兩個標簽都在head標簽中使用。
圖片標簽
 <img src="圖片文件路徑 url"  alt=”設定圖片的描述” 
  width=”100”  height=”50” border=”1”  align=”left || center  || right” />
  alt屬性:主要給搜索引擎使用使索搜引擎可以“識別”該圖的具體內容。
  border:用于設定圖片的邊框線的“粗細”,單位還是px。
  align:用于設定圖片的定位方式:靠左,劇中,靠右

圖像映射:指在一張圖片上,產生多個不同的鏈接

  圖像映射技術需要使用一張圖片,以及一個可以對該圖片進行“區域劃分”的map標簽實現,劃分出的每個“小”區域可以單獨設定
 鏈接。 設定的小區塊可以有3種形狀:
  矩形:
             <areashape="rect" coords="矩形的左上角坐標和右下角坐標" href="01圖片標記.html" >
  圓形:
              <area shape="circle" coords="圓心的坐標和半徑" href="01圖片標記.html">
  多邊形:
              <area shape="poly"coords="連續的點的坐標"href="01圖片標記.html" >
 ps:在計算機中,通常坐標都是以“左上角”為原點,向右為x正方向,向下為y正方向。
圖片映射技術
表格:將一定范圍的區域劃分為“行列對齊”的若干個“格子”的一種技術。

表格的三個標簽:

 <table>
<tr>
    <td>這個td中才是放置具體“內容部分”的區域</td>
</tr>
 </table>

 table:用于“聲明”一個表格
 tr:用于設定一個表格中的“一行”,多行就使用多個tr配   對。
 td:用于設定一個行中的“一列”(單元格),多個列就使用多個td。
 th:用于設定一個“標題單元格”。只要可以用td,就可以用td。
 一個表格可以有多行,一個行可以有多列。

表格中的單元格可以進行“合并”操作,是通過td上的兩個屬性來實現。

 table常用屬性:
width:
height:
border:設定表格的邊框線,其實會應用整個表格的  所有“邊框線”(每個單元格)
cellpadding: 設定單元格中的內容與單元格的邊框線之間的“間距”,單位是px
cellspacing: 設定相鄰的兩個元格的邊框線之間的“間距”,單位是px
bgcolor=”yellow”  設定表格的總體上的背景顏色
background=”圖片地址url”: 設定表格的總體上的背景圖
    caption:設定標題文字
align=”left // center // right”: 設定表格總體上的定位方式。
bordercolor:設定邊框線的顏色
td常用屬性:
width:
heigh
bgcolor=”yellow”  設定單元格的背景顏色
background=”圖片地址url”: 設定單元格的背景圖
align=”left // center // right”: 設定單元格中的內容的水平對齊方式
valign=”top // middle // bottom”: 設定單元格中的內容的垂直對齊方式
colspan=”5”:  表示該單元格會水平向右邊合并5個“原始單元格”,其本身相當于“跨”5個列。
rowspan=”3”:  表示該單元格會垂直向下邊合并3個“原始單元格”,其本身相當于“跨”3個行。

表格區域劃分
thead:代表表格的“頭部”區域
tbody:代表表格的“中部”區域(主體區域)
tfoot:代表表格的“尾部”區域,同樣可以放tr。

表格案例
顯示效果
常用字符實體

字符實體其實就是用某種特殊的符號來代表某種具有特定含義的字符。

字符實體
 ps:<pre>想寫的代碼</pre>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,321評論 6 543
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,559評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 178,442評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,835評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,581評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,922評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,931評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,096評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,639評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,374評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,591評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,104評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,789評論 3 349
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,196評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,524評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,322評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,554評論 2 379

推薦閱讀更多精彩內容

  • 一. HTML、XML、XHTML 有什么區別 1. 三者基本特征 HTML,超文本標記語言(Hyper Text...
    遠山黛子閱讀 313評論 0 2
  • ********** 未經本人允許,嚴禁轉載任何網站 ********** 本人在慕課網學習HTML+CSS基礎課...
    zhaolion閱讀 10,995評論 46 548
  • 查看作者原文 一、前端開發做什么 傳統前端:html+css+js HTML5大前端:各種端的兼容開發、Ajax+...
    秋風喵閱讀 607評論 0 2
  • 1.HTML、XML、XHTML HTML 超文本標記語言,標準通用標記語言下的一個應用。“超文本”就是指頁面內可...
    姚小帥閱讀 339評論 0 1
  • 20出頭的仙女們,最大的焦慮不是脫單、脫貧,而是脫發。 別人羨慕我們有大把好時光可以浪費,可他們沒看到...
    盒飯穎閱讀 203評論 0 0