HTML5/CSS3筆記

時間 2019-11-16

標籤 html5 html css3 css 筆記欄目 HTML5 简体版

原文原文鏈接

前言: 前端無非就是圍繞標籤、屬性、屬性值這三個詞展開的. (標籤也能夠叫作元素, 元素的內容是開始標籤與結束標籤之間的內容)css

*常規標籤
<標籤屬性1="屬性值1" 屬性2="屬性值2"></標籤> # 一個標籤能夠沒有屬性也能夠有多個屬性, 屬性和屬性之間不分前後順序.
*空標籤
<標籤屬性1="屬性值1" 屬性2="屬性值2" /> # 空標籤沒有結束標籤, 用"/"代替.html

*HTML標題: <h1>這是一個標題</h1> 最重要的(字體最大)
<h2>這是一個標題</h2> 次重要的
<h3>這是一個標題</h3> 次之
注: 瀏覽器會自動地在標題的先後添加空行。前端

*align屬性: left, right, center(默認是align="left"左對齊)瀏覽器

*HTML段落: <p>這是一個段落</p> //用p標籤不只會換行, 並且上下都會有一行的間距.服務器

*換行: <br> //用br換行標籤, 只會換行, 不會有間距.函數

*空格: &nbsp # 右鍵摺疊(folding), 摺疊全部, 再展開全部, 空格部分就會所有被摺疊起來.oop

*pre元素: <pre>內容</pre> , 其做用是使pre包裹的內容保持原始格式(主要是保持空格和換行)佈局

*絕對路徑和相對路徑字體

絕對路徑(與html文檔的位置無關): ui

1. 服務器中的位置: http://www.baidu.com/animal/panda.png

2.本地存儲中的位置: D:/picture/animal/panda.png

相對路徑(與html文檔的位置有關):

1.同一個目錄下: ./文件名或直接寫文件名

2.在當前目錄的下級目錄下: ./xxx/文件名

3.在當前目錄的上級目錄下: ../文件名

4.在當前目錄的上上級目錄下: ../../文件名

*連接: <a href="http://www.runoob.com">這是一個連接</a>

*圖像: <img src="/images/logo.png" width="200" height="100" > 注: 路徑不區分斜線的方向.

<img src="/images/logo.png" width="25%" height="100" > 注: 圖片的寬度屬性能夠設置百分比, 可是高度是不定的因此不能設置百分比.

*title屬性: 當鼠標移動到一個元素上的時候會顯示提示說明文字.

*音樂: <embed src="/static/music.mp3" hidden="true" autostart="true" loop="true"> # <body></body>中添加
注: hidden=true表明隱藏播放 , autostart=true表明自動播放 , loop=true表明循環播放

*水平線: <hr> 標籤在 HTML 頁面中建立水平線。

*註釋: Ctrl+/

*加粗: <b> 內容 </b>

*斜體: <i> 內容 </i>

*加下劃線: <u>內容</u>

*<ul></ul> : 無序列表
*<ol></ol>: 有序列表

*<li></li> : 列表內的列表項

*html函數格式: {% 循環 %} {{ 內含變量 }} {# 註釋 #}

*<meta></meta>: 標籤提供關於HTML文檔的元數據, 元數據不會顯示在頁面上，可是對於機器是可讀的, 典型的狀況是，meta元素被用於規定頁面的描述、關鍵詞、文檔的做者、最後修改時間以及其餘元數據, 標籤始終位於head元素中.

*<link></link>: 外鏈標籤, 做用是將較長較多的文件內容放到另外一個文件而後再引用進來, 好比一個CSS選擇器要設置的屬性和屬性值太多, 爲避免在html文件中佔用太多位置, 在另外寫一個css文件, 而後再外鏈到這個html文件裏面來.

*HTML佈局: 通常用div來進行網頁佈局, 不建議使用老式的table佈局.

CSS筆記:
*標籤分類: 1.塊級元素; 塊級元素默認獨佔一行, 塊級元素能夠自定義設置寬度和高度, 不設置寬高的時候默認與父級元素同樣寬高, 塊級元素通常做爲其餘元素的容器.
==>常見的塊級元素有: div, di, dt, dd, ol, ul, li, fieldset, (h1-h6), p, form, hr, colgroup, col, table, tr, td等
2.內聯元素; 始終以行內逐個進行顯示, 內聯元素不能設置寬度和高度.
3.內聯塊級元素; 在內聯中的塊級元素也能夠設置寬度和高度.

*CSS選擇器: 選擇器通常在head內, 寫在<style type="text/css">選擇器</style> , 選擇指定body內的標籤, 對其內容進行修飾配置.
選擇器格式: xxx{屬性1:屬性值1; 屬性2:屬性值2...;} # 屬性與屬性值之間用冒號相連, 每一個屬性要空一格並以分號結尾, 因爲標籤的屬性太多了, 不用刻意記, 須要用到的時候查一下就行.
例: <style type="text/css">
p{background-color:red; height:200px; width:300px;} # 該選擇器對p標籤內塊級元素的背景顏色、寬度和高度屬性設置對應的屬性值.
div{background-color:yellow;} # 該選擇器對div標籤內塊級元素的背景顏色屬性設置對應的屬性值.
</style>

1.標籤選擇器 2.id選擇器 3.class選擇器 4.*通配符(全局選擇器) 5.交集選擇器 6.並集選擇器(羣組選擇器) 7.後代選擇器 8.子選擇器 9.僞類選擇器
經常使用的有: 標籤選擇器 ==> 語法: 標籤名稱{屬性1:屬性值1 屬性2:屬性值2;}
id選擇器 ==> 語法: #id名{屬性:屬性值;}
class選擇器 ==> 語法: .class類名{屬性:屬性值;}
並集選擇器 ==> 語法: 標籤1, 標籤2, 標籤3{屬性:屬性值;} # 標籤123...是並集關係, 不是嵌套關係.
後代選擇器 ==> 語法: 父元素子元素{屬性:屬性值;} # 子元素是嵌套在父元素內的, 例如:div裏面嵌套p.
*通配符(全局選擇器) ==> 語法: *{屬性:屬性值;}

*選擇器的權重: 在有多個選擇器指向同一個塊級元素的時候, 就有一個選擇器的優先級的問題了. id選擇器 > class選擇器 > 標籤選擇器