?

開始從零基礎系統地學習前端知識了，雖說html和css多少了解一些，但是學著還是能發現很多新大陸....

?

一. HTML中head標簽

1.?<meta>標簽：

　　meta標簽里是一些基礎的輔助信息，一般不在頁面上顯示出來。

　　（1）<meta charset="utf-8" />　　定義的頁面字符集。

　　（2）<meta name="keywords" content="開發者,博客園,開發者,程序猿,程序媛,極客,編程,代碼,開源,IT網站,Developer,Programmer,Coder,Geek,技術社區" />　　這里是為爬蟲方便提供的關鍵字信息，在使用搜索引擎的時候保護這些關鍵字的會被索引到然后被搜索到。

　　（3）<meta name="description" content="博客園是一個面向開發者的知識分享社區。自創建以來，博客園一直致力并專注于為開發者打造一個純凈的技術交流社區，推動并幫助開發者通過互聯網分享知識，從而讓更多開發者從中受益。博客園的使命是幫助開發者用代碼改變世界。" />　　這里是會顯示在搜索引擎摘要里的一些內容。

? ? ? ? ? ? ? ?

　　（4）<meta name="robots"content="none">　　用于告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。content的參數有all,none,index,noindex,follow,nofollow。默認是all。

?　 ?（5）特別要注意的http-equiv屬性，相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。比如：

　　A) ?<meta http-equiv="Refresh"content="2;URL=https://www.baidu.com">　　?間隔 content的秒數時間后刷新頁面，可以重定向到其他URL。

?　 ?B) ?<meta http-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/"> 　　設置socket值和過期時間等。

　　C）<metahttp-equiv="expires"content="Fri,12Jan200118:18:18GMT"> 　　設置頁面過期時間，過期以后需要從新從服務器獲取信息。

2. 在head中其他的重要標簽：

　　（1）<link rel="shortcut icon" href="//common.cnblogs.com/favicon.ico" type="image/x-icon" /> 　　是設置頁面在瀏覽器標簽欄上的小圖標，如圖所示。

　　　　　　?

　　（2）<title>博客園 - 開發者的網上家園</title> 設置標簽上的文字信息，也可以參考上圖。

?

?

二. HTML中body標簽

1. 內聯標簽和塊標簽的概念

　　html的標簽主要可分類為內聯和塊標簽兩種，可以通過css樣式里的display來設置，內聯的值為inline，塊為block，還有一種inline-block。

　　（1）塊級標簽示例：<p><h1><table><ol><ul><form><div>

　　特點包括：總是在新行上開始；高度，行高以及外邊距和內邊距都可控制；寬度缺省是它的容器的100%，除非設定一個寬度。它可以容納內聯元素和其他塊元素。

?

　　（2）內聯標簽示例：<a><input><img><sub><sup><textarea><span>

?　　特點包括：和其他元素都在一行上，直到該行填滿；高，行高及外邊距和內邊距不可改變；寬度就是它的文字或圖片的寬度，不可改變；內聯元素只能容納文本或者其他內聯元素。

　　設置height，上下的margin和padding無效，或可通過line-height來設置。

?

　　（3）inline-block：就是將對象呈現為inline對象，但是對象的內容作為block對象呈現。之后的內聯對象會被排列在同一行內。比如給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。

?

?

三. CSS

　　1. 選擇器！

　　趕腳選擇器應該是CSS的核心了，如果不是直接在行內元素處寫css，則我們必須在外部的css中定義所有內容，那么勢必會面對定義的屬性如何與HTML內的元素關聯起來的問題。選擇器就是告訴CSS屬性對哪些元素起作用的。主要包括如下的選擇方式：

　　（1）* 通配選擇器，可以匹配所有的元素；如 * {margin 0}，就會給所有的標簽加上這個樣式。

　　（2）通過標簽選擇，即給所有的某標簽加上屬性；如 p {margin 0}，就會給所有的p標簽加上這個樣式。

　　（3）通過class來選擇，我們在定義HTML的時候可以給元素加上class命名，多個元素可以有相同的class；如有一些標簽我們命名其 class="aaa"，通過 .aaa{margin 0}，就可以給所有class為aaa的加上樣式。

　　（4）通過id來選擇，HTML的標簽還可以定義id，這個id必須是唯一的；如我們命名一個標簽 id="bbb"，通過 #bbb{margin 0}，就可以添加樣式。

　　（5）限定后代的組合選擇：上述除了通配符意外，任意的選擇方法，我們都可以通過空格的方式組合起來，組合多次，其意思就是從最前面的標簽開始找，找到最后面都符合的標簽設定樣式。最前面的表示在最外層，然后依次向里面推進；如 .aaa ul li .bbb a {color:white}，意思就是從所有class aaa的標簽開始找，到里面的ul，再到li，再到class為bbb的里面的所有超鏈接標簽，設定其顏色。

　　（6）我們還可以給多個選擇賦予同樣的樣式，通過","逗號來講所有要加上同樣樣式的放在一起，可以節省很多空間和人力...比如 body,p,ul,li,h1,h2,h3?{margin:0px;}。

　　（7）通過子元素選擇；這個方式和（5）有點像，但是這個子元素是嚴格限定了必須是直接子元素才會被選擇，如果被嵌套在了其他子元素里面（類似孫子之類的...）就選擇不到了。比如<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>和?<h1>This is <em>really <strong>very</strong></em> important.</h1>，如果通過?h1 > strong {color:red;}來選擇，前者是可以添加上樣式的，后者就不行了，因為后者的string嵌套在了內層的em里面。

?　 ?（8）通過相鄰元素來選擇：這個描述起來比較抽象，示例如下：h1 + p {margin-top:50px;} 會給所有緊接在h1標簽后面的p標簽設定樣式。

?

未完待續....

還需要些其他一些選擇器，css的繼承和覆蓋原則，盒子模型...

?

?

?

轉載于:https://www.cnblogs.com/nigel-woo/p/5722470.html

總結

以上是生活随笔為你收集整理的HTML与CSS基础知识补遗（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。