1. 程式人生 > >HTml +CSS3知識點總結:

HTml +CSS3知識點總結:

一,html+css基礎
1-1
Html和CSS的關係
學習web前端開發基礎技術需要掌握:HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實現什麼的:
1. HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓使用者瀏覽的資訊,可以包含文字、圖片、視訊等。
2. CSS樣式是表現。就像網頁的外衣。比如,標題字型、顏色變化,或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
3. JavaScript是用來實現網頁上的特效效果。如:滑鼠滑過彈出下拉選單。或滑鼠滑過表格的背景顏色改變。還有焦點新聞(新聞圖片)的輪換。可以這麼理解,有動畫的,有互動的一般都是用JavaScript來實現的。

1-2
1, HTML標籤不區分大小寫,<h1>和<H1>是一樣的,但建議小寫,因為大部分程式設計師都以小寫為準。


1-3
一個HTML檔案是有自己固定的結構的。
<html>
    <head>...</head>
    <body>...</body>
</html>
程式碼講解:
1. <html></html>稱為根標籤,所有的網頁標籤都在<html></html>中。
2. <head> 標籤用於定義文件的頭部,它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標籤,頭部標籤在下一小節中會有詳細介紹。

3. 在<body>和</body>標籤之間的內容是網頁的主要內容,如<h1>、<p>、<a>、<img>等網頁內容標籤,在這裡的標籤中的內容會在瀏覽器中顯示出來。


1-4
1,下面這些標籤可用在 head 部分:
<head>
    <title>...</title>
    <meta>
    <link>
    <style>...</style>
    <script>...</script>
</head>
2,程式碼註釋不僅方便程式設計師自己回憶起以前程式碼的用途,還可以幫助其他程式設計師很快的讀懂你的程式的功能,方便多人合作開發網頁程式碼。

語法:
<!--註釋文字 -->
3,CSS註釋程式碼
就像在Html的註釋一樣,在CSS中也有註釋語句:用/*註釋語句*/來標明(Html中使用<!--註釋語句-->)


1-5
1,語義化:說的通俗點就是:明白每個標籤的用途(在什麼情況下我可以使用這個標籤才合理)比如,網頁上的文章的標題就得用標題標籤,網頁上的各個欄目的欄目名稱也可以使用標題標籤。
2,語義化的作用
1). 更容易被搜尋引擎收錄。
2). 更容易讓螢幕閱讀器讀出網頁內容。


二,認識標籤(第一部分)
2-1
如果想在網頁上顯示文章,這時就需要<p>標籤了,把文章的段落放到<p>標籤中。
語法:
<p>段落文字</p>


2-2
<hx>標籤來製作文章的標題。
標題標籤一共有6個,h1、h2、h3、h4、h5、h6分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。並且依據重要性遞減。<h1>是最高的等級。
語法:
<hx>標題文字</hx> (x為1-6)
文章的標題前面已經說過了,可以使用標題標籤,另外網頁上的各個欄目的標題也可使用它們


2-3
有了段落又有了標題,現在如果想在一段話中特別強調某幾個文字,這時候就可以用到<em>或<strong>標籤。
       但兩者在強調的語氣上有區別:<em> 表示強調,<strong> 表示更強烈的強調。並且在瀏覽器中<em> 預設用斜體表示,<strong> 用粗體表示。兩個標籤相比,目前國內前端程式設計師更喜歡使用<strong>表示強調


2-4
<em>、<strong>、<span>的區別:
1. <em>和<strong>標籤是為了強調一段話中的關鍵字時使用,它們的語義是強調。
2. <span>標籤是沒有語義的,它的作用就是為了設定單獨的樣式用的,把一段話圈起來,然後用css設定樣式。


2-5
p標籤,短文字引用
  比如在你的網頁的文章裡想引用某個作家的一句詩,這樣會使你的文章更加出彩,那麼<q>標籤是你所需要的。
語法:
<p>引用文字</p>
1,注意要引用的文字不用加雙引號,瀏覽器會對q標籤自動新增雙引號。
2,注意這裡用<p>標籤的真正關鍵點不是它的預設樣式雙引號(如果這樣我們不如自己在鍵盤上輸入雙引號就行了),而是它的語義:引用別人的話


blockquote標籤,長文字引用
  <blockquote>的作用也是引用別人的文字。但它是對長文字的引用
<p>標籤是對簡短文字的引用,比如說引用一句話就用到<p>標籤。
語法:

相關推薦

HTml +CSS3知識點總結

一,html+css基礎1-1Html和CSS的關係學習web前端開發基礎技術需要掌握:HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實現什麼的:1. HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓使用者瀏覽的資訊,可以包含文字

HTML DOM知識點補充

nbsp data-* nodes first 子節點 remove class rip ttr DOM Console 控制臺對象提供了瀏覽器的debug的方法支持。 常用的:console.log()。 ??coffeescript中,這個方法不加括號。 DOM D

JS知識點總結(1)判斷一個對象是否為空對象

http 通過 空數組 知識點 height ring 常見 總結 分享圖片 判斷一個對象是否為空對象,本文給出三種判斷方法: 最常見的思路,for...in...遍歷屬性,為真則為“非空數組”;否則為“空數組” 2.通過JSON自帶的.stringif

CSS3知識點總結

1、相鄰兄弟選擇器,通用兄弟選擇器 2、屬性選擇器,理解下面語句 ①[id]{color:red;}                 

Python基礎知識點總結【Pycharm安裝與配置】【建立專案】【運算子】【資料型別】

一.Python 學習及開發環境(pycharm)安裝與配置      視訊講課老師說這個很好用,至於安裝很簡單,就是去 http://www.jetbrains.com/pycharm/ 這裡下載,記得下載專業版的哦,選擇自己對應的版本,然後就是點、點、點就好了呢。溫馨提

知識點總結 c#,使用自定義型別來作為Dictionary的Key

首先來看一個變數的定義: /// <summary> /// key依次是StationId,channelId,deviceId,paraType,dataId,dataTypeId,logicalDeviceIndex,paraHandle,

CSS3 知識點總結

邊框的知識點: 1.border-radius: border-radius設定的值越大,弧度越大,可以用具體數值10px來設定,也可以用20% 百分比來設定;你也可以只設置一個或其中幾個角的弧度,就像這樣: div{ width:10

HTML知識點總結

utf-8和utf8   之前一直都沒有關注過兩種寫法有什麼不同,但在專案中出現了錯誤,就記錄了一下。   “UTF-8” 是標準寫法,php 在 Windows 下邊英文不區分大小寫,所以也可以寫

HTML+CSS知識點總結

一,html+css基礎 1-1 Html和CSS的關係 學習web前端開發基礎技術需要掌握:HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實現什麼的: 1. HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓使用者瀏覽的資訊,可以

CCNA day04 知識點總結交換機部分

交換機部分 七層模型:物理層、資料鏈路層、網路層、傳輸層、會話層、表示層、應用層 1.物理層:        功能:負責0101的傳送與接受,它是電器特徵。        物理層:各種線纜、RJ45頭、電壓、頻率、集線器(HUB)等        傳輸單位:位元流

30 張圖解 | 高頻面試知識點總結面試官問我高併發服務模型哪家強?

文章每週持續更新,原創不易,「三連」讓更多人看到是對我最大的肯定。可以微信搜尋公眾號「 後端技術學堂 」第一時間閱讀(一般比部落格早更新一到兩篇) 面試中經常會被問到高效能服務模型選擇對比,以及如何提高服務效能和處理能力,這其中涉及作業系統軟體和計算機硬體知識,其實都是在考察面試者的基礎知識掌握程度,但如

HTML5與CSS3知識點總結

+ [HTML常用標籤總結](https://blog.csdn.net/weixin_43461520/article/details/110143997) + [手摸手帶你學CSS](https://blog.csdn.net/weixin_43461520/article/details/1118274

HTML 第四章初識CSS3知識點

CSSS3基本選擇器1,標籤選擇器(通過標籤來作為選擇器的名稱)。2,類選擇器(名稱可以自定義,前面必須加一點,可以通過class來選擇)3,id選擇器(名稱以#開頭後面可以自定義,可以通過id來選擇)以上三種選擇器如果同時呼叫id選擇器優先順序最高》CSS3的高階選擇器1,

HTML知識點總結

服務 外部 倒序 菜單項 script ova validate 手指 esc table元素 table用來創建表格,表格也可以用來布局,但是嵌套過於復雜,不利於靈活布局,已經幾乎沒人用它來布局了。 表格基本上有如下幾個標簽構成

vue2.0(八)、外賣App彈窗部分知識點總結

leave service eas 總結 icon main 在線支付 false amp 本篇文章是對外賣App彈窗部分知識點的總結。 知識點一:如何從接口取出不同的圖片。      答:     1、header.vue:          代碼: <

HTML,CSS,JS個別知識點總結

控制 IT 排列 效果 內容 one 默認 type relative   <input>是自閉合標簽,沒有<input></input>一說,只能寫作<input/>。   <div>可以是行標簽也可以作為塊標簽

C#知識點總結系列3、C#中Delegate和Event以及它們的區別

的區別 sent () exit 功能 final 通知 bsp t對象 1.Monitor.Enter(object)方法是獲取鎖,Monitor.Exit(object)方法是釋放鎖,這就是Monitor最常用的兩個方法,當然在使用過程中為了避免獲取鎖之後因為異常,致鎖

Spring Boot (基礎篇)Spring Boot知識點總結

Spring Boot簡介 SpringBoot 以便捷開發、快速部署著稱。設計目的是用來簡化新Spring應用的初始搭建以及開發過程。 SpringBoot 致力於簡潔,讓開發者寫更少的配置,程式能夠更快的執行和啟動 SpringBoot 設計原則就是 約定優於配置。並且

HTML知識點總結(練習題)

1、HTML文件的基本結構 2、status的三個常見狀態的意思①200   ②304   ③404 3、<meta/>標籤的三個常見屬性 4、轉義字元       ①<

HTML標籤和知識點總結

這是我自己返回網頁看了看,總結的一些知識點,應該比較全面了 一、HTML 1、歷史特性: (1) HyperText Markup Language超文字標記語言,是一門標記語言。2010年正式推出HTML5,HTML是製作網頁的基礎語言,主要用於描述超文字中內容的顯示方式。 (2)XHT