-
第1章 HTML5介紹本章節主要講解html5和css3樣式的關系，以及html5標簽語法，文檔結構,最后講解了在html5中的注釋代碼的作用。
1-1 代碼初體驗，制作我的第一個網頁
2021-01-16 14:39歡迎來到HTML+CSS課堂，加入高端大氣上檔次的web前端開發團隊。我們在正式學習之前，先來熱熱身，問候下世界，做個人生中的第一個html網頁吧。 !DOCTYPE htmlhtmlhead meta charset="UTF-8" title制作我的第一個網頁/title/headbody/body/html... -
1-2 html和css的關系
2021-01-16 14:41這一章節我們來學習html與css的關系。我們先來看一下單純的html標簽長什么樣： 代碼如下： p我是一個p標簽/p 我們再來看一下經過css修飾過后html標簽： 代碼如下： p { color: red; border: 1px solid blue; width: 140px; height: 40px; } 技術點的解釋： 1、css是用來修飾html樣式的 2、html本身是有一些默認樣式,如果我們想改變html標簽的樣式,就需要借助css 3、html+css構成了我們網頁的基本頁面結構和樣... -
1-3 html/css使用說明書 - 標簽的語法
2021-01-16 14:521. 標簽 由英文尖括號 和 括起來，如 html 就是一個標簽。 2. html中的標簽一般都是成對出現的，分 開始標簽 和 結束標簽 。結束標簽比開始標簽多了一個 / 。 如： （1） p/p （2） div/div （3） span/span 3. 標簽與標簽之間是可以嵌套的，但先后順序必須保持一致，如：div里嵌套p，那么/p必須放在/div的前面。如下圖所示。 4. HTML標簽不區分大小寫， h1 和 H1 是一樣的，但建議小寫，因為大部分程序員都以小寫為準。 示例代碼： !DOCTYPE h... -
1-4 html5文檔結構
2021-02-26 15:24html文檔結構為下圖： 技術點的解釋： 1.!DOCTYPE html:文檔類型聲明，表示該文件為 HTML5文件。!DOCTYPE 聲明必須是 HTML 文檔的第一行，位于 html 標簽之前 2. html/html標簽對：html標簽位于HTML文檔的最前面，用來標識HTML文檔的開始；/html標簽位于HTML文檔的最后面，用來標識HTML 文檔的結束；這兩個標簽對成對存在，中間的部分是文檔的頭部和主題。 3.head/head標簽對：標簽包含有關HTML文檔的信息，可以包含一些輔助性標簽。如t... -
1-5 認識head標簽
2021-02-26 15:26這一章節我們來學head標簽。我們先來看一下head標簽長什么樣 文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題等，絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。 下面這些標簽可用在 head 部分： 1、head標簽為雙標簽，有尾標簽，head/head。 2、head標簽表示頭部標簽,通常用來嵌套meta、title、style等標簽。 3、title標簽：在title和/title標簽之間的文字內容是網頁的標題信息，它會出現在瀏覽器的標題欄中。網頁的title標簽用于告訴用戶和搜索引... -
1-6 認識body標簽
2021-02-26 15:34在網頁上要展示出來的頁面內容一定要放在body標簽中。如下圖的例子： 在瀏覽器中的顯示效果： 源代碼： !DOCTYPE htmlhtmlhead meta charset="UTF-8" title了不起的蓋茨比/title/headbody !-- 標題標簽 -- h1了不起的蓋茨比/h1 !-- 段落標簽 -- p1922年的春天，一個想要成名名叫尼克卡拉威（托比馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，股票飛漲的時代。為了... -
1-7 html文件注釋
2021-02-26 15:39什么是代碼注釋？代碼注釋的作用是幫助程序員標注代碼的用途，過一段時間后再看你所編寫的代碼，就能很快想起這段代碼的用途。代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能，方便多人合作開發網頁代碼。 語法： !--注釋文字 -- 如：右邊編輯器的代碼的第 8、12 行都是，但是你會發現注釋代碼是不會在結果窗口中顯示出來的。 源代碼： !DOCTYPE HTMLhtml head meta http-equiv="Content-Type" content="text... -
第2章 HTML5語義化標簽本章節主要講解html5中常用語義化標簽，知道哪部分使用什么標簽。
2-1 語義化，讓你的網頁更好的被搜索引擎理解
2021-02-26 15:44在這一章節我們要開始把網頁中常用到的標簽一 一向大家介紹，學習這一章節的時候要記住學習html標簽過程中，主要注意兩個方面的學習：標簽的用途、標簽在瀏覽器中的默認樣式。 標簽的用途：我們學習網頁制作時，常常會聽到一個詞，語義化。那么什么叫做語義化呢，說的通俗點就是：明白每個標簽的用途（在什么情況下使用此標簽合理）比如，網頁上的文章的標題就可以用標題標簽，網頁上的各個欄目的欄目名稱也可以使用標題標簽。文章中內容的段落就得放在段落標簽中等等 講了這么多語義化，但是語義化可以給我們帶來什么樣的好處呢？ 1. 更... -
2-2 <p>段落標簽和使用
2021-02-26 15:55如果想在網頁上顯示文章，這時就需要p標簽了，把文章的段落放到p標簽中。 語法： p段落文本/p 注意一段文字一個p標簽，如在一篇新聞文章中有3段文字，就要把這3個段落分別放到3個p標簽中。如下圖所示： 在瀏覽器中顯示的效果： p標簽的默認樣式，可以在上圖中看出來，段前段后都會有空白，如果不喜歡這個空白，可以用css樣式來刪除或改變它，在后面課程中會學習到。 源代碼： !DOCTYPE htmlhtmlhead meta charset="UTF-8" titlep標簽/title/headbody/bod... -
2-4 使用<hx>標簽為網頁增加標題
2021-02-26 16:12文章的段落用p標簽，那么文章的標題用什么標簽呢？在本節我們將使用hx標簽來制作文章的標題。 標題標簽一共有6個，h1、h2、h3、h4、h5、h6分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。并且依據重要性遞減。h1是最高的等級。 語法： hx標題文本/hx (x為1-6) 文章的標題前面已經說過了，可以使用標題標簽，另外網頁上的各個欄目的標題也可使用它們。 如下圖為騰訊網站： 注意：因為h1標簽在網頁中比較重要，所以一般h1標簽被用在網站名稱上。騰訊網站就是這樣做的。如：h1騰訊網/... -
2-5 使用<div>標簽自定義塊
2021-02-26 16:20在網頁制作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個 div 標簽中，這個div標簽的作用就相當于一個容器。 語法： div/div 確定邏輯部分： 什么是邏輯部分？它是頁面上相互關聯的一組元素。如網頁中的獨立的 欄目版塊 ，就是一個典型的邏輯部分。如下圖所示：圖中用紅色邊框標出的部分就是一個邏輯部分，就可以使用 div 標簽作為容器。 源代碼： div h2熱門課程排行榜/h2 ol li前端開發面試心法 /li li零基礎學習html/li lijavascript全攻略/li /ol/di... -
2-3 使用<span>標簽自定義文字
2021-02-26 16:23這一小節講解span標簽，這個標簽是沒有語義的，它的作用就是為了設置單獨的樣式用的。 如果現在我們想把下面的第一段話美國夢三個字設置成blue（藍色），所以這樣情況下就可以用到span標簽了。 如下面例子： p1922年的春天，一個想要成名名叫尼克卡拉威（托比馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，股票飛漲的時代。為了追尋他的span美國夢/span，他搬入紐約附近一海灣居... -
2-6 <header>標簽定義頭部區域
2021-02-26 16:32從這一章節開始,我們來學習html5新增的語義化標簽,首先我們來學習header標簽，用來定義頭部區域。 例如57自學網頂部部分 那就讓我們開始學習吧... -
2-7 <footer>標簽定義底部區域
2021-02-26 16:39這一章節我們來學習footer標簽，用來定義底部區域。 例如57自學網底部部分 那就讓我們開始吧 源代碼： !DOCTYPE htmlhtmlhead meta charset="UTF-8" titlefooter/title/headbody header我是頭部標簽/header footer我是底部標簽/footer/body/html... -
2-8 <section>定義區段
2021-02-26 16:53這一章節我們來學習section標簽，定義一個區域。 那就讓我們開始吧 源代碼 !DOCTYPE htmlhtmlhead meta charset="UTF-8" titlesection/title/headbody header我是頭部標簽/header section我是一個區域/section footer我是底部標簽/footer/body/html... -
2-9 <aside>定義側邊欄區
2021-02-26 16:54我們繼續我們的快樂代碼之旅。這一章節我們來學習aside標簽，定義一個側邊欄區域。 例如網站中側欄部分 那就讓我們開始吧 源代碼 !DOCTYPE htmlhtmlhead meta charset="UTF-8" titleaside/title/headbody aside我是側邊欄/ aside /body/html... -
第3章 HTML5效果標簽本章主要講解效果標簽，為網頁可以添加換行，空格，水平線等效果。
3-1 使用<br>標簽實現換行效果
2021-03-01 14:58對于上一小節的例子，我們想讓那首詩顯示得更美觀些，如顯示下面效果： 怎么可以讓每一句詩詞后面加入一個折行呢？那就可以用到 br / 標簽了，在需要加回車換行的地方加入br /，br /標簽作用相當于word文檔中的回車。 上節的代碼改為： 語法： xhtml1.0寫法： br / html4.01寫法： br 大家注意，現在一般使用 xhtml1.0 的版本的寫法（其它標簽也是），這種版本比較規范。 與以前我們學過的標簽不一樣， br / 標簽是一個空標簽，沒有HTML內容的標簽就是空標簽，空標簽只需要寫... -
3-2 使用特殊字符 實現空格標簽
2021-03-01 16:33在上一節的例子，我們已經講解過在html代碼中輸入 空格 、 回車 都是沒有作用的。要想輸入空格，必須寫入 nbsp; 。 語法： nbsp; 在html代碼中輸入空格是不起作用的，如下代碼。 在瀏覽中顯示，還是沒有空格效果。 輸入空格的正確方法： 在瀏覽器中的顯示出來的空格效果。如下圖所示。 源代碼： !DOCTYPE htmlhtmlhead meta charset="UTF-8" title空格講解/title/headbody h1感悟夢想/h1 nbsp;nbsp; 來源：作文網作者：為夢想而... -
3-3 使用<hr>標簽實現水平線標簽
2021-03-01 16:38在信息展示時，有時會需要加一些用于分隔的橫線，這樣會使文章看起來整齊些。如下圖所示： 語法： html4.01版本 hr xhtml1.0版本 hr / 注意： 1. hr / 標簽和 br / 標簽一樣也是一個 空標簽 ，所以只有一個開始標簽，沒有結束標簽。 2. hr / 標簽的在瀏覽器中的默認樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不美觀，沒有關系，這些外在樣式在我們以后學習了css樣式表之后，都可以對其修改。 3.大家注意，現在一般使用 xhtml1.0 的版本（其它標簽也是），這種版本... -
4-2 使用<ol><li>標簽實現有序列表
2021-03-01 17:02如果想在網頁中展示 有前后順序 的信息列表，怎么辦呢？如，當當網上的書籍熱賣排行榜，如下圖所示。這類信息展示就可以使用 ol 標簽來制作 有序列表 來展示。 語法： ol li 信息 /li li 信息 /li ...... /ol 舉例： 下面是一個熱點課程下載排行榜： ol li前端開發面試心法 /li li 零基礎學習html /li liJavaScript全攻略/li /ol ol 在網頁中顯示的默認樣式一般為：每項 li 前都自帶一個序號，序號默認從 1 開始，如下圖所示： 源代碼： !DOC...
教程熱門
- 8-7 后代選擇器
- 7-2 CSS樣式的優勢
- 5-4 使用table家庭為網頁添加表格
- 2-2 <p>段落標簽和使用
- 3-3 使用<hr>標簽實現水平線標簽
- 8-10 分組選擇器
- 6-7 使用<textarea>標簽創建文本域
- 1-5 認識head標簽
- 8-6 子選擇器
- 2-8 <section>定義區段
- 5-3 在新建瀏覽器窗口中打開鏈接
- 8-8 通用選擇器
- 5-2 使用<a>標簽為網頁添加超鏈接
- 6-3 placeholder屬性的使用
- 6-8 使用label為input標簽穿上衣服
- 7-3 CSS代碼語法
- 6-9 <label>標簽單選框、復選框的實現，讓用戶選擇
- 6-4 input標簽中的數字框number類型
- 7-1 認識CSS樣式
- 1-7 html文件注釋
掃碼關注微信公眾號獲取播放密碼
