溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了HTML和css的入門知識(shí)點(diǎn)有哪些的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇HTML和css的入門知識(shí)點(diǎn)有哪些文章都會(huì)有所收獲，下面我們一起來看看吧。
一，web前端技術(shù)
問題：你寫網(wǎng)頁能不能遵循web標(biāo)準(zhǔn)？你知不知道web前端技術(shù)都有什么？
Web前端技術(shù)是由w3c組織制定的一系列技術(shù)的集合，主要包括：
HTML – 結(jié)構(gòu)標(biāo)準(zhǔn)： 負(fù)責(zé)網(wǎng)頁內(nèi)容（布局）
CSS – 表現(xiàn)標(biāo)準(zhǔn)、樣式標(biāo)準(zhǔn)：美化
JavaScript，簡(jiǎn)稱js，行為標(biāo)準(zhǔn)：負(fù)責(zé)行為動(dòng)作、表單驗(yàn)證、數(shù)據(jù)交互
二，html發(fā)展歷史
html1.0 – 1993年起草了一個(gè)草案，純文本格式
html2.0
html3.0
html4.0 – 意識(shí)：語法松散：Aa – xhtml1.0（x表示嚴(yán)格型的，相對(duì)嚴(yán)格：能兼容低版本） -- xhtml2.0（想法：絕對(duì)嚴(yán)格） -- 瀏覽器廠商反對(duì)：咱們自己研發(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)記
標(biāo)題： h2-h7
段落 p
布局區(qū)塊： div
特殊效果文字小圖片： span
圖片標(biāo)簽 – img
HTML概述及HTML文檔基本結(jié)構(gòu)
HTML概述
HTML是HyperText Mark-up Language的首字母簡(jiǎn)寫，意思是超文本標(biāo)記語言，超文本指的是超鏈接，標(biāo)記指的是標(biāo)簽，是一種用來制作網(wǎng)頁的語言，這種語言由一個(gè)個(gè)的標(biāo)簽組成，用這種語言制作的文件保存的是一個(gè)文本文件，文件的擴(kuò)展名為html或者h(yuǎn)tm。
HTML文檔基本結(jié)構(gòu)
一個(gè)html的基本結(jié)構(gòu)如下：
或者：
第一行是文檔聲明，第二行是“<html>”標(biāo)簽和最后一行“</html>”定義html文檔的整體，“<head>”標(biāo)簽和“<body>”標(biāo)簽是它的第一層子元素，“<head>”標(biāo)簽里面負(fù)責(zé)對(duì)網(wǎng)頁進(jìn)行一些設(shè)置以及定義標(biāo)題，設(shè)置包括定義網(wǎng)頁的編碼格式，外鏈css樣式文件和JavaScript文件等，設(shè)置的內(nèi)容不會(huì)顯示在網(wǎng)頁上，標(biāo)題的內(nèi)容會(huì)顯示在標(biāo)題欄，“<body>”內(nèi)編寫網(wǎng)頁上顯示的內(nèi)容。
一個(gè)html文件就是一個(gè)網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁。
HTML文檔快速創(chuàng)建
新建一個(gè)html文檔后，可以用快捷鍵的方式快速創(chuàng)建html文檔?？旖萱I：！+ tab鍵，或者h(yuǎn)tml:5+tab鍵
HTML標(biāo)簽入門
標(biāo)簽語法：
學(xué)習(xí)html語言就是學(xué)習(xí)標(biāo)簽的用法，html常用的標(biāo)簽有20多個(gè)，學(xué)會(huì)這些標(biāo)簽的使用，就基本上學(xué)會(huì)了HTML的使用。
標(biāo)簽的使用方法：
塊元素標(biāo)簽（行元素）和內(nèi)聯(lián)元素標(biāo)簽（行內(nèi)元素）
標(biāo)簽在頁面上會(huì)顯示成一個(gè)方塊。除了顯示成方塊，它們一般分為下面兩類：
塊元素：在布局中默認(rèn)會(huì)獨(dú)占一行，寬度默認(rèn)等于父級(jí)的寬度，塊元素后的元素需換行排列。
內(nèi)聯(lián)元素：元素之間可以排列在一行，設(shè)置寬高無效，它的寬高由內(nèi)容撐開。
常用塊元素標(biāo)簽
1、標(biāo)題標(biāo)簽，表示文檔的標(biāo)題，除了具有塊元素基本特性外，還含有默認(rèn)的外邊距和字體大小
2、段落標(biāo)簽，表示文檔中的一個(gè)文字段落，除了具有塊元素基本特性外，還含有默認(rèn)的外邊距
3、通用塊容器標(biāo)簽，表示文檔中一塊內(nèi)容，具有塊元素基本特性，沒有其他默認(rèn)樣式
常用內(nèi)聯(lián)元素標(biāo)簽
1、超鏈接標(biāo)簽，鏈接到另外一個(gè)網(wǎng)頁，具有內(nèi)聯(lián)元素基本特性，默認(rèn)文字藍(lán)色，有下劃線
2、通用內(nèi)聯(lián)容器標(biāo)簽，具有內(nèi)聯(lián)元素基本特性，沒有其他默認(rèn)樣式
3、圖片標(biāo)簽，在網(wǎng)頁中插入圖片，具有內(nèi)聯(lián)元素基本特性，但是它支持寬高設(shè)置。
其他常用功能標(biāo)簽
1、換行標(biāo)簽
2、html注釋：
html文檔代碼中可以插入注釋，注釋是對(duì)代碼的說明和解釋，注釋的內(nèi)容不會(huì)顯示在頁面上，html代碼中插入注釋的方法是：
常用html字符實(shí)體
代碼中成段的文字，如果文字間想空多個(gè)空格，在代碼中空多個(gè)空格，在渲染成網(wǎng)頁時(shí)只會(huì)顯示一個(gè)空格，如果想顯示多個(gè)空格，可以使用空格的字符實(shí)體，代碼如下：
在網(wǎng)頁上顯示 “<” 和 “>” 會(huì)誤認(rèn)為是標(biāo)簽，想在網(wǎng)頁上顯示“<”和“>”可以使用它們的字符實(shí)體，比如：
網(wǎng)頁布局原理
標(biāo)簽在網(wǎng)頁中會(huì)顯示成一個(gè)個(gè)的方塊，先按照行的方式，把網(wǎng)頁劃分成多個(gè)行，再到行里面劃分列，也就是在表示行的標(biāo)簽中再嵌套標(biāo)簽來表示列，整體按照先整體，后局部，先大后小的順序來書寫結(jié)構(gòu)。
布局示例
根據(jù)網(wǎng)頁布局的原理以及上面的實(shí)例，寫出網(wǎng)頁的html結(jié)構(gòu)代碼。
標(biāo)簽語義化
在布局中需要盡量使用帶語義的標(biāo)簽，使用帶語義的標(biāo)簽的目的首先是為了讓搜索引擎能更好地理解網(wǎng)頁的結(jié)構(gòu)，提高網(wǎng)站在搜索中的排名（也叫做SEO），其次是方便代碼的閱讀和維護(hù)。
帶語義的標(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只負(fù)責(zé)文檔的結(jié)構(gòu)和內(nèi)容，表現(xiàn)形式完全交給CSS，html文檔變得更加簡(jiǎn)潔。
css基本語法
css的定義方法是：
選擇器 { 屬性：值； 屬性：值； 屬性：值；}
選擇器是將樣式和頁面元素關(guān)聯(lián)起來的名稱，屬性是希望設(shè)置的樣式屬性，每個(gè)屬性有一個(gè)或多個(gè)值。屬性和值之間用冒號(hào)，一個(gè)屬性和值與下一個(gè)屬性和值之間用分號(hào)，最后一個(gè)分號(hào)可以省略，代碼示例：
css引入頁面的方式有三種：
1、行內(nèi)式：通過標(biāo)簽的style屬性，在標(biāo)簽上直接寫樣式。
2、嵌入式：通過style標(biāo)簽，在網(wǎng)頁上創(chuàng)建嵌入的樣式表。
3、外鏈?zhǔn)剑和ㄟ^link標(biāo)簽，鏈接外部樣式文件到頁面中。
1、標(biāo)簽選擇器
標(biāo)簽選擇器，此種選擇器影響范圍大，一般用來做一些通用設(shè)置，或用在層級(jí)選擇器中。
舉例：
2、類選擇器
通過類名來選擇元素，一個(gè)類可應(yīng)用于多個(gè)元素，一個(gè)元素上也可以使用多個(gè)類，應(yīng)用靈活，可復(fù)用，是css中應(yīng)用最多的一種選擇器。
舉例：
3、層級(jí)選擇器
主要應(yīng)用在標(biāo)簽嵌套的結(jié)構(gòu)中，層級(jí)選擇器，是結(jié)合上面的兩種選擇器來寫的選擇器，它可與標(biāo)簽選擇器結(jié)合使用，減少命名，同時(shí)也可以通過層級(jí)，限制樣式的作用范圍。
關(guān)于“HTML和css的入門知識(shí)點(diǎn)有哪些”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“HTML和css的入門知識(shí)點(diǎn)有哪些”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
