【全面系統講解CSS】學習筆記-第二章 HTML常見元素和理解

一、HTML概要

在這裏插入圖片描述

1.1、HTML常見元素

在這裏插入圖片描述
在這裏插入圖片描述
左邊是沒有設置視口,右邊設置了視口,則會按照屏幕大小去加載。
在這裏插入圖片描述

1.2、HTML重要屬性

在這裏插入圖片描述
a標籤默認在當前窗口打開,如果需要在新的窗口打開可以如下圖設置。
在這裏插入圖片描述
form屬性可以在獲取表單內的內容和跟js的一些驗證插件結合使用,會很方便。
比如獲取form屬性內的內容,重置form表單填寫的內容等等

1.2.1、獲取Html頁面框架

打開html頁面後點擊這個網頁鏈接就可以查看網頁的框架。
在這裏插入圖片描述
網頁鏈接在下面,直接拖拉到瀏覽器收藏中即可使用。鼠標左鍵按住拖動下面紅色框中的內容。
在這裏插入圖片描述
獲取Html頁面架構

1.3、HTML版本

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

1.4、HTML元素默認樣式

css reset
Reset CSS
normalize.css
下面的這個方式,比較簡單粗暴。簡單在於代碼簡單,達到的樣式效果基本符合我們的要求。粗暴在於,* 會使得頁面加載的效率可能不是很好。(但基本不需要考慮這個問題,如果在不想研究這個css reset問題)
在這裏插入圖片描述

1.5、HTML元素分類

按默認樣式分:

  1. 塊級block:默認情況下會佔據整行;
  2. 行內inline(大多爲跟文本相關的元素):會和別的元素結合顯示;
  3. inline-block(表單元素,下拉元素):對外層表現爲inline;對內表現爲block;
    按內容分:
    在這裏插入圖片描述

1.6、HTML元素嵌套關係

  1. 塊級元素可以包含行內元素;
  2. 塊級元素不一定能包含塊級元素;(p不能包含div)
  3. 行內元素一般不能包含塊級元素;(a能包含div)

1.7、HTML面試真題

doctype的意義是什麼?以標準模式渲染;讓瀏覽器知道元素的合法性;
在這裏插入圖片描述

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章