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