HTML+CSS+JS基礎知識

HTML
1.基本概述
對於學習html的學習,更多的就是記住這些標籤的含義以及會使用即可,這是前端最重要的知識。

註釋的語句爲:<!-xxx->

整個HTML頁面主要分爲兩個部分:頭部head 身體body.

下面我們來介紹標籤:標籤分爲單標籤和雙標籤,單標籤是爲一個箭頭結尾的。雙標籤是要有頭有尾的結束。

在html的角度來講,標籤分爲:

文本標籤:<p></p> ,<span></span> ,<a> ,<b></b>,<i></i>,<u></u>,<em></em>

容器標籤:<div></div>,h1~h6一系列標籤,<li></li>,<dt></dt>,<dd></dd>

<br/>換行標籤

<hr>水平線標籤

<b></b> <strong></strong>對字體加粗

<em></em>對字體使用斜體

<img src=“xxx”/>圖像標籤

<a href=“xxx”></a> 超鏈接標籤

<table></table> 定義一個表格的標籤

<tr></tr> 設置行 配合colspan可以顯示橫跨幾格

<td></td>設置列 配合rowspan可以顯示縱跨幾格

<ol></ol>—><li></li> 實現有序列表

<ul></ul>—><li></li>實現無序列表

<dl></dl>—><dt></dt>自定義一個列表

內聯框架

<iframe></iframe> 在網頁中嵌入一個指定大小的方塊,用於顯示新的網頁效果

該標籤可以配合其他的標籤一起使用,用於實現網頁套網頁的效果

<form></form> 用於設置一個表單

<input type=“xxx”>該標籤常用於我們前端的輸入框類型,十分常用

<select></select>—><option></option> 這兩個標籤的配合使用,可以實現下拉框的功能

<textarea></textarea>這個標籤用於留言框的展示


2、思維導圖:


CSS
1、思維導圖


2、引入樣式的四種方式
1.直接在行內使用style標籤進行樣式的編寫。

2.在head部,自己編寫對應的css樣式。

3.使用link標籤,引入外部的一家寫好的樣式

4.在style標籤內部使用@import導入外部已經寫好的樣式



3、選擇器(本章重點)
選擇器的位置可以寫在頭部與身體部分的中間

3.1基本選擇器(三個)
1.標籤選擇器:標籤{}    對頁面中的指定的標籤進行樣式選擇

2.類選擇器:.標籤{}    一定要記得前面有一個.我們在自己的頁面標籤中,可以設置對應的class屬性

3.id選擇器:#標籤{}        可以設置id屬性。



3.2層次選擇器(四個)
1、後代選擇器:標籤a 標籤b{}

用於指定某個標籤後面的所有標籤的變化形式。就像名字說的後代,只要標籤a的後代裏面出現了標籤b,那麼標籤b就會發生變化

2、子選擇器:標籤a > 標籤b{}

與後代選擇器不同,子選擇器的控制範圍只有一代。即標籤a的子代出現了標籤b纔會變化,其他代不影響。

3、相鄰兄弟選擇器:標籤a + 標籤b{}

以標籤a爲主導,如果標籤a的同級標籤下含有標籤b,那麼這個標籤b就會發生對象的變化,不過只有第一個兄弟纔會變化,其他的無效。

4、通用選擇器:標籤a ~ 標籤b{}

以標籤a爲主導,如果標籤a的同級標籤下含有標籤b,那麼這個標籤b就會發生對象的變化不過。通用選擇器更像是對相鄰兄弟選擇器的一個擴充,因爲它將相鄰兄弟選擇器中的不相鄰的那些兄弟也帶了進來。

3.3、僞類選擇器
一般僞類選擇器是和結構選擇器一起使用的,合稱結構僞類選擇器

ul li :last-child{}

類似這種形式,先使用了後代選擇器,然後冒號,最後一個孩子。

這一個可以用一用,效果還是挺好看的

標籤:hover{}

如果鼠標移動到上面的時候,會變化顏色


3.4、屬性選擇器
正則式和屬性選擇器的結合:

=:全等於
*=:包含於
^=:以等號後的爲開頭的
$=:以等號後的爲結尾的
使用類似於數組的格式,結合id選擇器和類選擇器a[id*=“xx”]、a[class^=“xx”]對元素進行效果的渲染
文章轉自https://blog.csdn.net/qq_46695047/article/details/105932641
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章