HTML基礎

HTML協(xié)議簡介

Web服務本質
瀏覽器發(fā)請求 --> HTTP協(xié)議 --> 服務端接收請求 --> 服務端返回響應 --> 服務端把HTML文件內(nèi)容發(fā)給瀏覽器 --> 瀏覽器渲染頁面
HTML是什么?
超文本標記語言(Hypertext Markup Language, HTML)是一種用于創(chuàng)建網(wǎng)頁的標記語言。
本質上是瀏覽器可識別的規(guī)則碧库,我們按照規(guī)則寫網(wǎng)頁道宅,瀏覽器根據(jù)規(guī)則渲染我們的網(wǎng)頁。對于不同的瀏覽器摩幔,對同一個標簽可能會有不同的解釋。(兼容性問題)
網(wǎng)頁文件的擴展名:.html或.htm
HTML不是什么?
HTML是一種標記語言(markup language)辜限,它不是一種編程語言,也就是說他的邏輯性并沒有那么強

HTTP結構

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>******</title>
</head>
<body>
</body>
</html>
  • !DOCTYPE html>聲明為HTML5文檔严蓖。
  • <html>薄嫡、</html>是文檔的開始標記和結束的標記。是HTML頁面的根元素颗胡,在它們之間是文檔的頭部(head)和主體(body)毫深。
  • <head>、</head>定義了HTML文檔的開頭部分毒姨。它們之間的內(nèi)容不會在瀏覽器的文檔窗口顯示费什。包含了文檔的元(meta)數(shù)據(jù)。
  • <title>、</title>定義了網(wǎng)頁標題鸳址,在瀏覽器標題欄顯示瘩蚪。
  • <body>、</body>之間的文本是可見的網(wǎng)頁主體內(nèi)容稿黍。

標簽

學習html首先就要學習標簽疹瘦,標簽就類似于html中的關鍵字,不同的標簽負責完成不同的功能巡球。
接下來就按照HTML主體結構的順序來總結不同的標簽

在這之前

 <!--注釋內(nèi)容-->

寫什么都不能忘了注釋

<!DOCTYPE> 標簽

<!DOCTYPE> 聲明必須是 HTML 文檔的第一行言沐,位于 <html> 標簽之前。
<!DOCTYPE> 聲明不是 HTML 標簽酣栈;它是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令险胰。

<head常用標簽>

head可以說是網(wǎng)頁的頭文件,包含網(wǎng)頁的一些信息矿筝,但是卻不會顯示出來

head.png

表格已經(jīng)總結的很清楚了起便,而meta屬性算是其中比較復雜的屬性了,包含http-equiv屬性和name兩種屬性窖维。

<body內(nèi)常用標簽>

h1~h6: 字號越來越小 但是都是粗體 一般用作標題
img: src源文件路徑 網(wǎng)絡或者本地都可以 alt 如果圖片找不到了顯示什么 title 鼠標放在圖片上顯示什么 id 圖片的標簽 style 設計風格
a: href 鏈接 target 在target頁面打開鏈接 #id 跳到當前頁的這個id處
b: 將字體加粗
i :字體變?yōu)樾斌w
s : 下劃線
u : 表示刪除的橫線
p: 段落標記 分段
hr : 水平線
br : 換行
特殊符號 &nbsp 空格; &copy 版權標識c; &lt 小于; &gt 大于; &reg 注冊符號...
而特殊符號的目的是為了防止輸出內(nèi)容與html標簽混淆

  • html 當中無論多少空格都當成一個 除非用&nbsp表示空格

兩個重要標簽

div標簽和span標簽:表現(xiàn)形式與正常無異
div單獨一行
div單獨一行
span接成一行span接成一行span接成一行span接成一行
他們的特點就是沒有特點榆综,所以寫網(wǎng)頁時用的比較多,可塑性很強

  • 標簽分類:
    • 塊級標簽 h1~h6 div p hr
      默認占瀏覽器寬度(單獨占一行)
      能設置長和寬
    • 內(nèi)聯(lián)標簽(行內(nèi)標簽) a img u s i b span
      根據(jù)內(nèi)容決定長度
      不能設置長和寬
  • 標簽的嵌套規(guī)則
    1. 行內(nèi)標簽不能嵌套塊級標簽
    2. p標簽不能嵌套塊級標簽 p標簽不能嵌套div p 內(nèi)的標簽會被自動修改
    • div可以套div 最常用

一些特殊的結構

  • 列表:
    無序列表 前面有實心圓或者別的符號表示開端
    有序列表 前面用數(shù)字表示順序
    1.無序列表
        <ul type="disc">
          <li>第一項</li>
          <li>第二項</li>
        </ul>

type屬性:
disc(實心圓點铸史,默認值)
circle(空心圓圈)
square(實心方塊)
none(無樣式)
2.有序列表

        <ol type="1" start="2">
          <li>第一項</li>
          <li>第二項</li>
        </ol>

type屬性:
1 數(shù)字列表鼻疮,默認值
A 大寫字母
a 小寫字母
Ⅰ大寫羅馬
ⅰ小寫羅馬
3.標題列表 帶縮進的三級標題

        <dl>
          <dt>標題1</dt>
          <dd>內(nèi)容1</dd>
          <dt>標題2</dt>
          <dd>內(nèi)容1</dd>
          <dd>內(nèi)容2</dd>
        </dl>
  • 表格:
        <table>表格開始
          <thead>表頭
          <tr>表示一行
            <th>序號</th>表示一列
            <th>姓名</th>
            <th>愛好</th>
          </tr>
          </thead>
          <tbody>表格主體
          <tr>
            <td>***</td>
            <td>***</td>
            <td>***</td>
          </tr>
          <tr>
            <td>***</td>
            <td>***</td>
            <td>***</td>
          </tr>
          </tbody>
        </table>
  • 不寫thead也可以,但是良好的習慣是要求寫的
    屬性:
    border: 表格邊框.
    cellpadding: 內(nèi)邊距
    cellspacing: 外邊距.
    width: 像素 百分比.(最好通過css來設置長寬)
    rowspan: 單元格豎跨多少行
    colspan: 單元格橫跨多少列(即合并單元格)

又開新坑了,數(shù)據(jù)庫學完了琳轿,高級用法卻遲遲沒有整理判沟,拖延癥害人啊

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市崭篡,隨后出現(xiàn)的幾起案子挪哄,更是在濱河造成了極大的恐慌,老刑警劉巖媚送,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件中燥,死亡現(xiàn)場離奇詭異,居然都是意外死亡塘偎,警方通過查閱死者的電腦和手機疗涉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來吟秩,“玉大人咱扣,你說我怎么就攤上這事『溃” “怎么了闹伪?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我偏瓤,道長杀怠,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任厅克,我火速辦了婚禮赔退,結果婚禮上,老公的妹妹穿的比我還像新娘证舟。我一直安慰自己硕旗,他們只是感情好,可當我...
    茶點故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布女责。 她就那樣靜靜地躺著漆枚,像睡著了一般。 火紅的嫁衣襯著肌膚如雪抵知。 梳的紋絲不亂的頭發(fā)上墙基,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天,我揣著相機與錄音辛藻,去河邊找鬼碘橘。 笑死互订,一個胖子當著我的面吹牛吱肌,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播仰禽,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼氮墨,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了吐葵?” 一聲冷哼從身側響起规揪,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎温峭,沒想到半個月后猛铅,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡凤藏,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年奸忽,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片揖庄。...
    茶點故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡栗菜,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蹄梢,到底是詐尸還是另有隱情疙筹,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站而咆,受9級特大地震影響霍比,放射性物質發(fā)生泄漏。R本人自食惡果不足惜暴备,卻給世界環(huán)境...
    茶點故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一桂塞、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧馍驯,春花似錦阁危、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至混弥,卻和暖如春趴乡,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蝗拿。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工晾捏, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人哀托。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓惦辛,卻偏偏與公主長得像,于是被迫代替她去往敵國和親仓手。 傳聞我的和親對象是個殘疾皇子胖齐,可洞房花燭夜當晚...
    茶點故事閱讀 43,514評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 學習目標: 了解常用瀏覽器 掌握WEB標準 理解標簽語義化 掌握常用的排版標簽 掌握常用的文本格式化圖像鏈接等標簽...
    淡淡瘋閱讀 1,257評論 0 3
  • HTML基礎 本文包括 HTML基本知識與結構 HTML常見標簽 標簽寫法與嵌套的討論 HTML、CSS嗽冒、java...
    廖少少閱讀 2,082評論 2 21
  • 前言 本系列文章主要是基于W3school這個學習網(wǎng)站來總結的呀伙,之所以會自己總結一番,一來是因為網(wǎng)站中的實例效果添坊,...
    AR7_閱讀 4,044評論 4 70
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案剿另? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,737評論 1 92
  • 02 高手戰(zhàn)略 在高價值區(qū),做正確的事 處處有機會贬蛙,就等于處處沒機會雨女;競爭越是開放,個人越需要打磨深思熟慮后做選擇...
    Emma在路上閱讀 824評論 0 1