這篇文章主要介紹了HTML和css的入門知識點有哪些的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇HTML和css的入門知識點有哪些文章都會有所收獲，下面我們一起來看看吧。

成都創(chuàng)新互聯(lián)成立以來不斷整合自身及行業(yè)資源、不斷突破觀念以使企業(yè)策略得到完善和成熟，建立了一套“以技術(shù)為基點，以客戶需求中心、市場為導(dǎo)向”的快速反應(yīng)體系。對公司的主營項目，如中高端企業(yè)網(wǎng)站企劃 / 設(shè)計、行業(yè) / 企業(yè)門戶設(shè)計推廣、行業(yè)門戶平臺運營、成都app軟件開發(fā)公司、移動網(wǎng)站建設(shè)、微信網(wǎng)站制作、軟件開發(fā)、雅安服務(wù)器托管等實行標(biāo)準化操作，讓客戶可以直觀的預(yù)知到從成都創(chuàng)新互聯(lián)可以獲得的服務(wù)效果。

一，web前端技術(shù)

問題：你寫網(wǎng)頁能不能遵循web標(biāo)準？你知不知道web前端技術(shù)都有什么？

Web前端技術(shù)是由w3c組織制定的一系列技術(shù)的集合，主要包括：

HTML – 結(jié)構(gòu)標(biāo)準： 負責(zé)網(wǎng)頁內(nèi)容（布局）

CSS – 表現(xiàn)標(biāo)準、樣式標(biāo)準：美化

JavaScript，簡稱js，行為標(biāo)準：負責(zé)行為動作、表單驗證、數(shù)據(jù)交互

二，html發(fā)展歷史

html1.0 – 1993年起草了一個草案，純文本格式

html2.0

html3.0

html4.0 – 意識：語法松散：Aa – xhtml1.0（x表示嚴格型的，相對嚴格：能兼容低版本） -- xhtml2.0（想法：絕對嚴格） -- 瀏覽器廠商反對：咱們自己研發(fā)html自己用 – html5.0

最終：html5.0仍然是w3c研發(fā)

工作：xhtml1.0 + html5.0

vscode:

標(biāo)簽語法：  <標(biāo)簽的名字>內(nèi)容 -- 雙標(biāo)記

<標(biāo)簽名> -- 單標(biāo)記

標(biāo)題： h2-h7

段落  p

布局區(qū)塊： div

特殊效果文字小圖片： span

圖片標(biāo)簽 – img

HTML概述及HTML文檔基本結(jié)構(gòu)

HTML概述

HTML是HyperText Mark-up Language的首字母簡寫，意思是超文本標(biāo)記語言，超文本指的是超鏈接，標(biāo)記指的是標(biāo)簽，是一種用來制作網(wǎng)頁的語言，這種語言由一個個的標(biāo)簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm。

HTML文檔基本結(jié)構(gòu)

一個html的基本結(jié)構(gòu)如下：

或者：

第一行是文檔聲明，第二行是“”標(biāo)簽和最后一行“”定義html文檔的整體，“”標(biāo)簽和“”標(biāo)簽是它的第一層子元素，“”標(biāo)簽里面負責(zé)對網(wǎng)頁進行一些設(shè)置以及定義標(biāo)題，設(shè)置包括定義網(wǎng)頁的編碼格式，外鏈css樣式文件和JavaScript文件等，設(shè)置的內(nèi)容不會顯示在網(wǎng)頁上，標(biāo)題的內(nèi)容會顯示在標(biāo)題欄，“”內(nèi)編寫網(wǎng)頁上顯示的內(nèi)容。

一個html文件就是一個網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁。
 

HTML文檔快速創(chuàng)建

新建一個html文檔后，可以用快捷鍵的方式快速創(chuàng)建html文檔?？旖萱I：！+ tab鍵，或者html:5+tab鍵

HTML標(biāo)簽入門

標(biāo)簽語法：

學(xué)習(xí)html語言就是學(xué)習(xí)標(biāo)簽的用法，html常用的標(biāo)簽有20多個，學(xué)會這些標(biāo)簽的使用，就基本上學(xué)會了HTML的使用。

標(biāo)簽的使用方法：

塊元素標(biāo)簽（行元素）和內(nèi)聯(lián)元素標(biāo)簽（行內(nèi)元素）

標(biāo)簽在頁面上會顯示成一個方塊。除了顯示成方塊，它們一般分為下面兩類：

塊元素：在布局中默認會獨占一行，寬度默認等于父級的寬度，塊元素后的元素需換行排列。

內(nèi)聯(lián)元素：元素之間可以排列在一行，設(shè)置寬高無效，它的寬高由內(nèi)容撐開。

常用塊元素標(biāo)簽

1、標(biāo)題標(biāo)簽，表示文檔的標(biāo)題，除了具有塊元素基本特性外，還含有默認的外邊距和字體大小

2、段落標(biāo)簽，表示文檔中的一個文字段落，除了具有塊元素基本特性外，還含有默認的外邊距

3、通用塊容器標(biāo)簽，表示文檔中一塊內(nèi)容，具有塊元素基本特性，沒有其他默認樣式

常用內(nèi)聯(lián)元素標(biāo)簽

1、超鏈接標(biāo)簽，鏈接到另外一個網(wǎng)頁，具有內(nèi)聯(lián)元素基本特性，默認文字藍色，有下劃線

2、通用內(nèi)聯(lián)容器標(biāo)簽，具有內(nèi)聯(lián)元素基本特性，沒有其他默認樣式

3、圖片標(biāo)簽，在網(wǎng)頁中插入圖片，具有內(nèi)聯(lián)元素基本特性，但是它支持寬高設(shè)置。

其他常用功能標(biāo)簽

1、換行標(biāo)簽

2、html注釋：

html文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的內(nèi)容不會顯示在頁面上，html代碼中插入注釋的方法是：

常用html字符實體

代碼中成段的文字，如果文字間想空多個空格，在代碼中空多個空格，在渲染成網(wǎng)頁時只會顯示一個空格，如果想顯示多個空格，可以使用空格的字符實體，代碼如下：

在網(wǎng)頁上顯示 “<” 和 “>” 會誤認為是標(biāo)簽，想在網(wǎng)頁上顯示“<”和“>”可以使用它們的字符實體，比如：

網(wǎng)頁布局原理

標(biāo)簽在網(wǎng)頁中會顯示成一個個的方塊，先按照行的方式，把網(wǎng)頁劃分成多個行，再到行里面劃分列，也就是在表示行的標(biāo)簽中再嵌套標(biāo)簽來表示列，整體按照先整體，后局部，先大后小的順序來書寫結(jié)構(gòu)。

布局示例

根據(jù)網(wǎng)頁布局的原理以及上面的實例，寫出網(wǎng)頁的html結(jié)構(gòu)代碼。

標(biāo)簽語義化

在布局中需要盡量使用帶語義的標(biāo)簽，使用帶語義的標(biāo)簽的目的首先是為了讓搜索引擎能更好地理解網(wǎng)頁的結(jié)構(gòu)，提高網(wǎng)站在搜索中的排名（也叫做SEO），其次是方便代碼的閱讀和維護。

帶語義的標(biāo)簽

1、h2——h7：表示標(biāo)題

2、p：表示段落

3、img：表示圖片

4、a：表示鏈接

不帶語義的標(biāo)簽

1、div：表示一塊內(nèi)容

2、span：表示行內(nèi)的一塊內(nèi)容

所以我們要根據(jù)網(wǎng)頁上顯示的內(nèi)容，使用適合的標(biāo)簽，可以優(yōu)化之前的代碼。

css概述

為了讓網(wǎng)頁元素的樣式更加豐富，也為了讓網(wǎng)頁的內(nèi)容和樣式能拆分開，CSS由此思想而誕生，CSS是 Cascading Style Sheets 的首字母縮寫，意思是層疊樣式表。有了CSS，html中大部分表現(xiàn)樣式的標(biāo)簽就廢棄不用了，html只負責(zé)文檔的結(jié)構(gòu)和內(nèi)容，表現(xiàn)形式完全交給CSS，html文檔變得更加簡潔。

css基本語法

css的定義方法是：

選擇器 { 屬性：值； 屬性：值； 屬性：值；}
 

選擇器是將樣式和頁面元素關(guān)聯(lián)起來的名稱，屬性是希望設(shè)置的樣式屬性，每個屬性有一個或多個值。屬性和值之間用冒號，一個屬性和值與下一個屬性和值之間用分號，最后一個分號可以省略，代碼示例：

css引入頁面的方式有三種：

1、行內(nèi)式：通過標(biāo)簽的style屬性，在標(biāo)簽上直接寫樣式。

2、嵌入式：通過style標(biāo)簽，在網(wǎng)頁上創(chuàng)建嵌入的樣式表。

3、外鏈式：通過link標(biāo)簽，鏈接外部樣式文件到頁面中。

1、標(biāo)簽選擇器

標(biāo)簽選擇器，此種選擇器影響范圍大，一般用來做一些通用設(shè)置，或用在層級選擇器中。

舉例：

2、類選擇器

通過類名來選擇元素，一個類可應(yīng)用于多個元素，一個元素上也可以使用多個類，應(yīng)用靈活，可復(fù)用，是css中應(yīng)用最多的一種選擇器。

舉例：

3、層級選擇器

主要應(yīng)用在標(biāo)簽嵌套的結(jié)構(gòu)中，層級選擇器，是結(jié)合上面的兩種選擇器來寫的選擇器，它可與標(biāo)簽選擇器結(jié)合使用，減少命名，同時也可以通過層級，限制樣式的作用范圍。

關(guān)于“HTML和css的入門知識點有哪些”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“HTML和css的入門知識點有哪些”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。