重學HTML

時間 2019-12-08

標籤 html 欄目 HTML 简体版

原文原文鏈接

`HTML`

`HTML`常見元素

`head`區

特色：不會在頁面上留下直接的內容，主要負責頁面的一些資源和描述的加載
meta
- 做用：提供有關頁面的元信息(meta-information),好比編碼格式
- 常見屬性：
  - 【1】charset,表示編碼格式，通常值爲"UTF-8";<meta charset="UTF-8">
  - 【2】name,提供了名稱/值對中的名稱,常見的有值有
    - 【2-1】keywords,搭配content屬性使用作SEO優化;<meta name="keywords" content="HTML,ASP,PHP,SQL">
    - 【2-2】viewport,搭配content屬性使用定義一些用戶使用視口的限制;<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no"">依次表示視口寬度等於設備寬度,初始化縮放比例爲1.0,最大縮放比例1.0,用戶不能夠縮放
title、style、link、script、
base
- 做用：頁面上的全部連接規定默認地址或默認目標<base href="/">
- 常見屬性:
  - 【1】href,值爲URL路徑,規定頁面中全部相對連接的基準 URL(必選屬性)
  - 【2】target,值爲_blank,_parent,_self,_top,framename,在何處打開頁面中全部的連接(非必選屬性)

`body`區

div、section、article、aside、header、footer
p
span、em、strong
table、thead、tbody、tr、td
ul、ol、li、dl、dt、dd
a
form、input、select、textarea、button

`HTML`的理解

所謂的html能夠理解爲一個文檔,由描述文檔的結構組成(標題，摘要，正文···),有區塊和大綱;這樣作的好處是有利於爬蟲去爬取,SEO優化,更加具備語義化等css

`HTML`的版本對比

語法對比

HTML4	XHTML	HTML5
標籤容許不結束	標籤必須結束	標籤容許不結束
屬性不用帶引號	屬性必須帶引號	屬性不用帶引號
標籤/屬性可大寫	標籤/屬性必須小寫	標籤/屬性可大寫
Boolean屬性可省略值	Boolean屬性必須寫值	Boolean屬性可省略值

`HTML5`新增內容

新區塊標籤
- section
- article
- nav
- aside
表單加強(form,input)
- input新增類型,好比日期、時間、搜索等
- 表單驗證:經過增長required,max···屬性對錶單進行校驗
- placeholder
- 自動聚焦(autofocus)
新增語義
- header/footer標籤表示頭尾
- section/article表示區域
  - 和div的區別，div沒有任何語義，在不明確當前區域是作什麼的時候使用而且div不會計入頁面大綱的算法計算範圍
- nav導航
- aside側邊欄。表示一些不是很重要的內容，好比網址的簡介，友情連接等不會進入頁面大綱的內容
- em/strong強調
- iicon

`HTML`元素分類

按默認樣式分

塊級(block)
- 【1】是一個方塊的形狀
- 【2】默認會佔據整行，不會給其它元素留出空間
- 【3】能夠設置寬高
行內(inline)
- 【1】不必定是方形的也能夠說它不必定是有規則形狀的
- 【2】不會獨佔一行
- 【3】不能夠設置寬高
行內塊級(inline-block)
- 【1】是一個方塊的形狀
- 【2】不會獨佔一行
- 【3】能夠設置寬高

按內容分

Flow
- 對文檔流有必定影響的元素
Metadate
Heading
- h1~h6
Sectioning
- section,article,aside,nav
Interactive
- 有互動的元素：跟用戶有交互的元素，好比a,button,select等
Phrasing
- 一些零碎的文本片斷,通常是行內元素
Embedded
- 嵌入其它資源的一些元素好比audio,vidio,img等

參考連接html

`HTML`元素的嵌套關係

基本原則

塊級元素能夠包含行內元素
塊級元素不必定能包含塊級元素
- p不能包含div,section等
行內元素通常不能包含塊級元素
- 提到通常就確定有特殊的，這個特殊的就是a能夠包含塊級元素

常見問題

【1】a>div是否是合法的？爲何？參考文檔
- 根據W3C的html5的規範中，元素a的內容模式(Content model),在其包含塊級元素的時候能夠認爲它是透明的，即瀏覽器在計算盒模型的時候不會講其計算進去，因此這個答案是不必定合法的；以下例中，當咱們將a標籤當作透明的後，第一個div直接被body包裹，合法；第二個div直接被p包裹，不合法。
```
<body>
    <a href="https://www.baidu.com">
        <div>合法的</div>
    </a>
    <p>
        <a href="https://www.baidu.com">
            <div>不合法的</div>
        </a>
    </p>
   
</body>
複製代碼
```

`HTML`元素的默認樣式

默認樣式的意義

試想一個場景哈，當用戶訪問咱們的網站的時候此時用戶的網絡不好，在沒加載css的時候咱們更但願的是用戶能夠看到咱們頁面的結構，和擁有必定的功能，好比select下拉框。因此說html默認樣式的意義對咱們來講是很重要的

默認樣式帶來的問題

表單樣式須要重寫，由於默認樣式很醜很難知足平常的開發

`CSS Reset`

`HTML`面試真題

【1】`doctype`的意義是什麼？

讓瀏覽器以標準模式渲染
讓瀏覽器知道元素的合法性

【2】`HTML`,`XHTML`,`HTML5`的關係？

HTML是屬於SGML的一個應用,SGML是一個很是通用的標記語言
XHTML是屬性XML的一個應用,是HTML進行XML嚴格化的結果
HTML5不屬於SGML或XML,它本身是一個獨立的規範,比XHTML更加寬鬆

【3】`HTML5`有什麼變化？

新的語義化的元素
表單加強
新的API(離線、音視頻、圖形、實時通訊、本地存儲、設備能力)
分類和嵌套變動

【4】`em`和`i`有什麼區別？

em是語義化的標籤，表強調
i是純樣式的標籤，表斜體
HTML5中i不推薦使用，通常用做圖標，表明icon

【5】語義化的意義是什麼？

開發者容易理解
機器容易理解結構(搜索、讀屏軟件)，大綱算法
有助於SEO優化
semantic microtata規範

【6】哪些元素能夠自閉合？

表單元素input
圖片img
br,hr(水平線)
meta,link

【7】`HTML`和`DOM`的關係

HTML是‘死’的
DOM是HTML解析而來的，是活的
JS能夠維護DOM

【8】`property`和`attribute`的區別？

attribute是‘死’的
property是‘活’的

【9】`form`的做用有哪些？

直接提交表單
使用submit/reset按鈕
便於瀏覽器保存表單
第三方庫能夠總體提取值
第三方庫能夠進行表單驗證

相關文章

相關標籤/搜索

html+css+javascript+html

Thymeleaf 教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<