HTML筆記

html

HTML的相關定義

  1. 什么是HTML?

HTML是負責描述文檔語義的語言

  1. HTML的語言特征

HTML是以標簽對的形式出現的锡凝,我們將被描述的文檔寫在對應標簽對之間

下面是HTML的標準框架

  <!DOCTYPE html> <!--定義文檔類型-->
  <html>
  <head>  
  <!--html頭锋玲,這里是做文件配置的,例如編碼格式-->
              <title></title>  <!--文檔標題-->
          </head> <!--這里是<head>對應的標簽值-->
      <body> <!--主要的文檔就寫在這术吝,這里是文檔主體-->
      
      </body> 
  </html> 

body里面存放內容勾效,body里面可以有很多的標簽對,一對對的的標簽對的作用嵌器,是給文本添加語義(段落肛真,標題,文字等內容)

html提供了很多標簽對爽航,可以給純文本增加不同的語義毁欣。比如

```html
<h1> </h1> <!--標簽對:主標題-->
<h2> </h2> <!--二級標題-->
<p> </p> <!--定義段落-->
```

標簽對是有起始標簽和結束標簽組成的

現在的業(yè)界標準的,網頁技術嚴格的三層劃分:

html:就是負責定義頁面的語義

css:負責描述頁面的樣式

js:負責描述頁面的動態(tài)效果

  1. 編碼方式岳掐、關鍵字和頁面描述

    • 字符集

字符集使用meta標簽定義凭疮,meta表示“元”,就是表示項目當前的基本配置串述;中文能夠使用的字符集有兩種:1:utf-8(這個用的范圍比后面一個廣执解,但占的內存較大);2gb2312(這個只適用于中文,占的內存相對較小)

  • 關鍵字和頁面描述

meta除了可以設置編碼,還可以設置關鍵字和頁面描述衰腌;只要設置了description頁面描述新蟆,那么百度搜索的百度快照,就能顯示這些語句右蕊,這個技術叫做SEO琼稻,search engine optimization

<!--名字就是關鍵字, 內容就是你要在百度快照中寫的東西-->
<meta name="名字" content="內容">
  1. 圖片的加載
    HTML插入圖片的時候饶囚,有兩個文件帕翻,一個是HTML文件,一個JPG的文件萝风,插入圖片的時候要寫兩個文件的相對位置嘀掸,這樣當將項目拷貝給別人的時候,也可以正常顯示规惰,最好是將圖片和HTML文件擋在同一個路徑
  • 如果圖片文件在HTML的上層路徑

<img src="../1.jpg"/>
<!--使用../后退一層睬塌,../可以疊加使用-->

  • 如果圖片文件在HTML的下層路徑

<img src="下層路徑的文件名/1.jpg"/>

  1. 超鏈接

一般來說一個網站,是有很多個HTML網頁組成歇万,HTML網頁能夠通過超鏈接互相跳轉揩晴,形成“網”

  • 語法格式
<a href="網頁地址">顯示跳轉網頁的內容</a>

a指的是英語中anchor“錨”,就好像這個網頁往其它網頁跳轉贪磺。文本級標簽 href hypertext reference 縮寫 超文本鏈接

  • a標簽的屬性

title:懸浮文本(提示性文字)


<a href="url" title="提示性文字">點擊還未跳轉的時候效果</a>

target:是否在新窗口中打開


<a href="url" target="_blank">開啟新的界面</a>

  1. 頁面中的錨點
    所謂錨點硫兰,就是一個小標記,這個小標記使用戶不可察覺的缘挽,用戶不知道為何有這個點
  • 一般錨點也是用a標簽來設置瞄崇,不過是使用name/id屬性

<a name="first">首頁</a>
<a id="second">頁面一</a>

  • 如何調用錨點

<a href="first">錨點</a>
<a href="second">錨點</a>

  • 為什么要使用錨點

首先這個錨點在頁面最頂端顯示呻粹;在HTML頁面內容過的情況下壕曼,用戶可以直接看到頁面上指定的內容,用戶體驗會好一點

  1. 列表
  • 列表分為有序列表和無序列表

無序列表等浊,用來表示一個列表的語義腮郊,并且每個項目各每個項目之間是不分先后的

ul就是英語unordered list(無序列表)的縮寫

li就是英語list item(列表項)的縮寫

所有的li不能單獨存在,必須包裹在ul里面筹燕;反過來說轧飞,ul的“兒子”不能是別的東西,只能是li撒踪;ul的作用是增加無序列表的“語義”的


有序列表过咬,用來表示一個列表的語義,列表中的每一個項目都是有序的

ol和ul就是語義不一樣制妄,使用方法都是一樣的

ol里面只能有l(wèi)i掸绞,li必須被ol包裹。li是容器級

ol這個東西用的不多耕捞,如果想表達順序衔掸,一般用ul


有序列表和無序列表的差別不大烫幕,無序列表用的相對多一點

  1. 定義列表

    定義列表也是一個組列表,不過比較復雜敞映,有三個標簽

    dl表示definition list 定義列表
    dt表示definition title 定義標題
    dd表示definition description 定義表述詞
    

    dt较曼、dd只能在dl里面;dl里面只能有dt振愿、dd

    <!--仿京東首頁最底部-->
    <dl>
        <dt>購物指南</dt>
        <dd>
        <a href="#">購物流程</a> </br>
           <a href="#">會員介紹</a> </br>
              <a href="#">生活旅行/團購</a> </br>
                 <a href="#">常見問題</a> </br>
                    <a href="#">大家電</a> </br>
                       <a href="#">聯系客服</a>
         </dd>
    </dl>
        
    
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末捷犹,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子埃疫,更是在濱河造成了極大的恐慌伏恐,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,126評論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件栓霜,死亡現場離奇詭異翠桦,居然都是意外死亡,警方通過查閱死者的電腦和手機胳蛮,發(fā)現死者居然都...
    沈念sama閱讀 95,421評論 3 400
  • 文/潘曉璐 我一進店門销凑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人仅炊,你說我怎么就攤上這事斗幼。” “怎么了抚垄?”我有些...
    開封第一講書人閱讀 169,941評論 0 366
  • 文/不壞的土叔 我叫張陵蜕窿,是天一觀的道長。 經常有香客問我呆馁,道長桐经,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,294評論 1 300
  • 正文 為了忘掉前任浙滤,我火速辦了婚禮阴挣,結果婚禮上,老公的妹妹穿的比我還像新娘纺腊。我一直安慰自己畔咧,他們只是感情好,可當我...
    茶點故事閱讀 69,295評論 6 398
  • 文/花漫 我一把揭開白布揖膜。 她就那樣靜靜地躺著誓沸,像睡著了一般。 火紅的嫁衣襯著肌膚如雪壹粟。 梳的紋絲不亂的頭發(fā)上拜隧,一...
    開封第一講書人閱讀 52,874評論 1 314
  • 那天,我揣著相機與錄音,去河邊找鬼虹蓄。 笑死犀呼,一個胖子當著我的面吹牛,可吹牛的內容都是我干的薇组。 我是一名探鬼主播外臂,決...
    沈念sama閱讀 41,285評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼律胀!你這毒婦竟也來了宋光?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,249評論 0 277
  • 序言:老撾萬榮一對情侶失蹤炭菌,失蹤者是張志新(化名)和其女友劉穎罪佳,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體黑低,經...
    沈念sama閱讀 46,760評論 1 321
  • 正文 獨居荒郊野嶺守林人離奇死亡赘艳,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,840評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了克握。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蕾管。...
    茶點故事閱讀 40,973評論 1 354
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖菩暗,靈堂內的尸體忽然破棺而出掰曾,到底是詐尸還是另有隱情,我是刑警寧澤停团,帶...
    沈念sama閱讀 36,631評論 5 351
  • 正文 年R本政府宣布旷坦,位于F島的核電站,受9級特大地震影響佑稠,放射性物質發(fā)生泄漏秒梅。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,315評論 3 336
  • 文/蒙蒙 一讶坯、第九天 我趴在偏房一處隱蔽的房頂上張望番电。 院中可真熱鬧岗屏,春花似錦辆琅、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,797評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至暇屋,卻和暖如春似袁,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,926評論 1 275
  • 我被黑心中介騙來泰國打工昙衅, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留扬霜,地道東北人。 一個月前我還...
    沈念sama閱讀 49,431評論 3 379
  • 正文 我出身青樓而涉,卻偏偏與公主長得像著瓶,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子啼县,可洞房花燭夜當晚...
    茶點故事閱讀 45,982評論 2 361

推薦閱讀更多精彩內容

  • HTML需要掌握標簽 標簽(空格分隔): H5+CSS [TOC] 常用標簽 img 注意點 和H系列標簽/p標簽...
    袁俊亮技術博客閱讀 2,052評論 1 8
  • 什么是瀏覽器 常見主流瀏覽器有5種: IE材原、谷歌、火狐季眷、Safarri余蟹、歐朋; 瀏覽器主要有2個功能 1:將網頁渲...
    Sky_Boss閱讀 597評論 0 0
  • W3C簡介 萬維網聯盟(World Wide Web Consortium,W3C)子刮,又稱W3C理事會. 萬維網的...
    wdsea閱讀 252評論 0 0
  • <! Doctype html>聲明文檔類型 向搜索引擎表示該頁面是html語言威酒,并且語言為英文網站,其"lang...
    深眸靈瞳閱讀 974評論 1 1
  • momo無聞閱讀 237評論 8 2