整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天發了一篇干貨，似乎沒人看，好吧，我們來說說技術吧。
HTML5專題是隨性更新，不一定每天更新這個專題。
一個HTML5文檔的最簡單結構是：
結構
相比常規的html更為精簡
<header><section><footer><nav><article><aside>
1、頁眉header、整個頁面的頭部
2、正文article、博文或者新聞的展現
3、頁腳footer、一般用于呈現頁面底部的相關信息，可以放在body最下面，也可以放在article的最下面，只要記住它的作用是呈現其他信息，且不能相互嵌套
4、導航nav、可以出現在header，也可以出現在footer，也可以出現在section，只要保證語義化，即用作導航功能，如配合footer就可以表示為如下形式
5、側邊欄aside、用于頁面上一些與主題聯系不大而相對獨立的區域，通常用于邊欄，例如展示以下內容：快速鏈接、最多訪問、登錄注冊等
6、文檔中的節section、通常表示一段專題性的內容，一般會帶有標題，應用的典型場景有文章的章節、標簽對話框中的標簽頁、或者論文中有編號的部分，section可以說語義化強于div，但是弱于article，也可以這么說吧，article標簽是特殊的section，section是特殊的div，語義遞減。對于 section 和 article 的區分乍看比較難，其實重點就是看看這段內容脫離了整體是不是還能作為一個完整的、獨立的內容而存在，這里面的重點又在完整身上。因為其實說起來 section 包含的內容也能算作獨立的一塊，但是它只能算是組成整體的一部分，article 才是一個完整的整體。
那么section所用到的結構可以如下幾種形式：
①
②
通過上面可以看出，section可以應用的場景很多，但是需要注意的就是保證語義化。
通過第三點所列出的標簽，可以對網站的大綱做一個總結，并不代表正確的大綱就是如此，但是可以起到借鑒作用。
當然了，頁面結構的設計完全取決于開發人員，但是為了更好的體現HTML5的語義化原則，清楚的認識每個標簽所代表的語義就很重要，這里所列出的文檔結構只是一種代表，在<section>里面可以包含更多的新的標簽，諸如<figure><video><hgroup>等，都需要根據需求來確定。
對于使用不支持HTML5的瀏覽器的用戶，同樣有解決的辦法：
可以在<head></head>內部以注釋的形式(這樣的注釋只對IE(包括那些國產的IE內核的瀏覽器)有效)引用這樣一個js，它托管在Google開源服務器上，它可以讓IE8及以下版本的ie也支持那些新的html5標簽(包括IE6).
以上全部還必須使用CSS形成自己的樣式，所謂語義，僅僅是開發人員在查看的頁面的時候可以很清晰的知道頁面結構，何處為頭部何處為內容。
更多前端小知識，盡在https://blog.imcyk.com
網頁設計與制作》
大作業報告
學院：**學院
姓名：
學號：
專業:
摘要：宮崎駿（Miyazaki Hayao，1941年1月5日-），日本知名動畫導演、動畫師及漫畫家， 出生于東京都文京區，1963年進入東映動畫公司，1985年與高煙勛共同創立古卜力工作案，其出品的動漫電影以精湛的技術、動人的故事和溫暖的風格在世界動漫界獨樹一幟，能與美國迪士尼、 夢工廠的作品相比肩，受到全世界不分種族、不分國籍、不分文化的各類觀眾的一致好評。其動國作品大多涉及人類與自然之間的關系、和平主義及女權運動。宮崎駿在日本動畫界占有超重里級 的地位，更在全球動畫界具有無可替代的地位，迪士尼稱他為“動畫界的黑澤明，《時代周刊》評價他為全球最具影響力的人物。
下面是我對web簡單的一個應用，利用dreamwave工具，和photoshop軟件設計了一個具有個人風格的個人網站，首先我先從網站設計的方向和目的、網站設計中涉及的知識點、網站設計的整個流程出發，然后通過自己設計的這個個人網站作品來說明并演示一個完整的網站制作過程。本論文詳細的介紹了整個網站設計的全過程。雖然還有一些不足之處，但頁面整體比較美觀大方，具有線上店鋪風格，效果良好。
設計主要包括以下幾個版塊：
1.人物介紹板塊
2.采訪視頻板塊
3.手稿欣賞板塊
4.主要作品模塊
網站規劃思想
宮崎駿（Miyazaki Hayao，1941年1月5日-），日本知名動畫導演、動畫師及漫畫家， 出生于東京都文京區，1963年進入東映動畫公司，1985年與高煙勛共同創立古卜力工作案，其出品的動漫電影以精湛的技術、動人的故事和溫暖的風格在世界動漫界獨樹一幟，能與美國迪士尼、 夢工廠的作品相比肩，受到全世界不分種族、不分國籍、不分文化的各類觀眾的一致好評。其動國作品大多涉及人類與自然之間的關系、和平主義及女權運動。宮崎駿在日本動畫界占有超重里級 的地位，更在全球動畫界具有無可替代的地位，迪士尼稱他為“動畫界的黑澤明，《時代周刊》評價他為全球最具影響力的人物。
作為宮崎駿的動畫迷，我結合課上所需的HTML網頁知識設計一個介紹宮崎駿的網頁，包含圖文、視頻等多種素材可以選擇。
網站的目錄結構如下：
css ------存放CSS文件
imgs ------存放圖片文件
js -------存放js文件
index.html -----------人物介紹頁面
yinyue.html -----------采訪視頻頁面
shougao.html ---------手稿欣賞頁面
liuyan.html---------主要作品頁面
綜合知識的運用情況
2、使用鏈接：為方便讀者的查閱，在各頁面n****欄都設置了頁面鏈接。
3、插入跳轉菜單為了使讀者能快捷的回到自己感興趣的頁面，于是在各個頁面都插入了跳轉菜單。
網頁中涉及的知識點
1、可視化網站設計制作軟件dreamweaver的熟練使用，站點的創建、導入以及管理；
2、主頁的創建和設置，模塊的保存與應用和子網頁的創建、完成；
3、用photoshop軟件對圖片素材進行必要的處理；
4、網站整體布局和超鏈接的添加；
遇到的問題及解決辦法
難點:
1.body背景圖片顯示問題
2.頁面美觀度不夠高，Dreamewver CS6軟件應用不夠熟練，軟件中所涉及得制作方法以及工具沒有更好的應用。
解決辦法：
1.配色原則：避免網頁雜、亂，有時候單一色彩不為也是一種獨特，用色柔和，減少視覺混亂，對比度強的色彩不能應用于一般網站。
2.字體問題：字體是整個網頁最醒目的部分，若字體不協調會給人一種枯燥的感覺，避免用雜色字體，防止瀏覽者眼花繚亂。
3.制作習慣：制作一個網頁首要的是完美的構思，應該先構思好再動手制作，素材搜集完整，根據主題選材，不能脫離主題，確保所用材料與主題相關。
4.完整性：網站的基本格式完整，相關鏈接，友情鏈接必不可少，這也增加了網頁的方便性
5.合適選取適當尺寸的背景圖片非常重要
網頁截圖
首頁（index.html）:使用了
HTML5結構標簽，對宮崎駿的事跡進行了高度概括。
頭部:（一個頂部圖片和n****）
中間:
尾部:
2 采訪視頻:使用video標簽嵌入一個本地mp4視頻
3手稿欣賞:使用無框線的三行兩列的表格對手稿進行布局排列
4 主要作品：使用帶有框線和背景色的表格對主要作品進行羅列，內部文字居中，超鏈接加藍色下劃線。
心得與體會：
建立一個網站就像蓋一幢大樓一樣，它是一個系統工程，有自己特定的工作流程，你只有遵循這個步驟，按部就班地一步步來，才能設計出一個滿意的網站。首先，我們要確立網站主題。網站主題就是你建立的網站所要包含的主要內容，一個網站必須要有一個明確的主題。特別是對于像我這樣的個人網站，你不可能像綜合網站那樣做得內容大而全，包羅萬象。你沒有這個能力，也沒這個精力。網站的主題無定則，只要是你感興趣的，任何內容都可以，但主題要鮮明，在你的主題范圍內內容做到大而全、精而深。
然后，我們要找材料。明確了網站的主題以后，你就要圍繞主題開始搜集材料了。常言道：“巧婦難為無米之炊”。要想讓自己的網站有血有肉，能夠吸引住用戶，你就要盡量搜集材料，搜集得材料越多，以后制作網站就越容易。材料既可以從圖書、報紙、光盤、多媒體上得來，也可以從互聯網上搜集，然后把搜集的材料去粗取精，去偽存真，作為自己制作網頁的素材。
找到材料后，我們還要規劃網站。一個網站設計得成功與否，很大程度上決定于設計者的規劃水平，規劃網站就像設計師設計大樓一樣，圖紙設計好了，才能建成一座漂亮的樓房。網站規劃包含的內容很多，如網站的結構、欄目的設置、網站的風格、顏色搭配、版面布局、文字圖片的運用等，你只有在制作網頁之前把這些方面都考慮到了，才能在制作時駕輕就熟，胸有成竹。也只有如此制作出來的網頁才能有個性、有特色，具有吸引力。如何規劃網站的每一項具體內容，我們在下面會有詳細介紹。
做好以上三步之后，我們就要選擇合適的制作工具。盡管選擇什么樣的工具并不會影響你設計網頁的好壞，但是一款功能強大、使用簡單的軟件往往可以起到事半功倍的效果。網頁制作涉及的工具比較多，首先就是網頁制作工具了，在這里，我們一般都是用有“網絡三劍客”之稱的Dreamweaver、Fireworks、flash來制作網頁，對于圖片部分的處理，個人覺得Photoshop比較好用。
最后，我們就需要按照規劃一步步地把自己的想法變成現實了，這是一個復雜而細致的過程，一定要按照先大后小、先簡單后復雜來進行制作。所謂先大后小，就是說在制作網頁時，先把大的結構設計好，然后再逐步完善小的結構設計。所謂先簡單后復雜，就是先設計出簡單的內容，然后再設計復雜的內容，以便出現問題時好修改。在制作網頁時要多靈活運用模板，這樣可以大大提高制作效率。網頁做好之后，就要發布到Web服務器上，才能夠讓全世界的朋友觀看，還要不斷地進行宣傳，這樣才能讓更多的朋友認識它。
以上就是我對于網頁制作的一些個人心得，由于本人的技術還不是很成熟，還存在很多的不足(如：背景過于單調和網頁布置不合理)。選擇學習這門課是很正確的選擇，雖然在以后不會再有機會去上了，但我還是會通過各種方式繼續頁設計和制作的，同時很感謝帶我入門的徐兵老師，讓我有機會去學習有關網頁的知識，謝謝！
HTML5+CSS3 Web前端開發與實例教程：微課視頻版》
本書內容
《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》秉承“思政引領，立德樹人”的教育理念，自然融入多維度、深層次的思政元素，全面對標企業和行業需求；引入現代Web前端開發的核心技術，如Flex布局、Grid布局，以及人工智能編程插件，同時融入企業開發實踐，確保學習內容與實際工作緊密相關。全書以一個完整案例為主線，結合綜合項目實戰操作，體現育人、應用和創新三項能力?！禜TML5+CSS3 Web前端開發與實例教程：微課視頻版》配套提供課程思政元素、案例源代碼、PPT課件、課后習題與答案、微課視頻、教案、教學大綱、章節測試、云題庫、實驗報告、學習通在線課程、企業高頻面試題、學科競賽真題等豐富的教學資源，并設有QQ群提供線上學習跟蹤和指導服務。
《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》共分14章，系統地講解Web前端開發的核心技術，主要內容包括Web前端開發概述、HTML5基礎、HTML5頁面元素和屬性、表單、CSS3基礎、CSS3修飾頁面元素、CSS3高級選擇器、CSS3盒子模型、浮動與定位、CSS3高級應用、網頁布局、Flex布局、Grid布局等，并提供“大學生參軍入伍專題網站”和“文創商城”兩個實戰案例。
本書作者
盧欣欣，副教授。長期從事高校教學工作，專注Web應用開發，項目開發經驗豐富。主講《Web程序設計》《高級程序設計》《軟件開發綜合實踐》等課程，先后主編教材2部，參編教材3部。在慕課網上線的《企業網站綜合布局實戰》課程學習人數超15萬人。
崔仲遠，副教授，畢業于北京交通大學。長期從事高校教學工作和軟件項目開發工作，實戰開發經驗豐富。先后承擔《網頁特效設計》《Web前端基礎》《跨平臺腳本開發技術》等多門課程的教學任務，發表學術論文多篇，主編教材2部，參編教材3部、專著1部。主持省級教改項目1項、科研項目1項。
本書讀者
《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》既可作為本?？圃盒Ｓ嬎銠C相關專業的Web程序設計、網頁設計與制作等課程的教材，也可作為Web應用開發人員的自學手冊和技術參考書。
本書目錄
第1章 Web前端開發概述 1
1.1 Web前端開發職責 1
1.2 Web前端開發相關概念 2
1.3 Web前端開發相關技術 3
1.3.1 Web標準 3
1.3.2 HTML 4
1.3.3 CSS 4
1.3.4 JavaScript 5
1.4 Web前端開發工具 5
1.4.1 代碼編輯工具：VSCode 6
1.4.2 代碼運行工具：瀏覽器 8
1.4.3 開發者工具 9
1.4.4 人工智能輔助編程工具 10
1.5 網站設計與開發流程 11
1.6 實戰案例：網頁顯示“社會主義核心價值觀” 12
1.7 本章小結 13
第2章 HTML5基礎 14
2.1 HTML5語法基礎 14
2.1.1 HTML文檔結構 14
2.1.2 HTML標簽語法 17
2.1.3 HTML注釋 18
2.2 文本控制標簽 19
2.2.1 標題標簽 19
2.2.2 段落標簽 20
2.2.3 換行標簽 20
2.2.4 文本格式化標簽 21
2.2.5 特殊字符 22
2.3 圖像標簽 23
2.3.1 網頁常用圖像格式 23
2.3.2 圖像標簽的使用 24
2.3.3 相對路徑與絕對路徑 26
2.4 超鏈接標簽 27
2.4.1 文本鏈接 27
2.4.2 圖像鏈接 28
2.4.3 書簽（錨點）鏈接 28
2.4.4 其他鏈接 30
2.5 列表 30
2.5.1 有序列表 31
2.5.2 無序列表 32
2.5.3 定義列表 34
2.5.4 嵌套列表 35
2.6 表格 36
2.6.1 表格結構 36
2.6.2 表格標簽 37
2.7 視頻和音頻標簽 41
2.7.1 視頻標簽 41
2.7.2 音頻標簽 42
2.8 其他標簽 42
2.8.1 預格式化標簽 42
2.8.2 水平線標簽 43
2.8.3 行內容器標簽 43
2.9 實戰案例：“大學生參軍網站”兵役登記頁面 44
2.10 本章小結 46
第3章 HTML5頁面元素和屬性 47
3.1 文檔結構標簽 47
3.1.1標簽 47
3.1.2標簽 49
3.1.3標簽 50
3.1.4標簽 51
3.1.5標簽 53
3.1.6標簽 53
3.1.7和標簽 54
3.1.8標簽 55
3.2 交互元素 55
3.2.1 標簽 55
3.2.2 標簽 56
3.2.3標簽 57
3.3 文本層次語義標簽 58
3.3.1 標簽 58
3.3.2 標簽 59
3.3.3 標簽 60
3.4 全局屬性 61
3.5 實戰案例：“大學生參軍網站”頁面結構 62
3.6 本章小結 64
第4章 表單 65
4.1 表單概述 65
4.2標簽 67
4.3 標簽 68
4.3.1 單行文本框 69
4.3.2 密碼框 69
4.3.3 文件域 70
4.3.4 單選按鈕和復選框 71
4.3.5 隱藏域 73
4.3.6 按鈕 73
4.3.7 HTML5新增輸入元素 76
4.4 標簽 78
4.5 標簽 79
4.6 選擇列表標簽 80
4.7 多行文本框標簽 83
4.8 表單常用屬性 84
4.9 實戰案例：“大學生參軍網站”網上咨詢表單 86
4.10 本章小結 88
第5章 CSS3基礎 89
5.1 CSS概述 89
5.2 CSS語法規則 90
5.3 CSS樣式的引入方法 91
5.3.1 行內樣式表 91
5.3.2 內部樣式表 92
5.3.3 外部樣式表 93
5.4 CSS基本選擇器 94
5.4.1 標簽選擇器 94
5.4.2 ID選擇器 95
5.4.3 類選擇器 95
5.4.4 通用選擇器 97
5.5 實戰案例：“大學生參軍網站”公共樣式表制作 97
5.6 本章小結 98
第6章 CSS3修飾頁面元素 99
6.1 CSS字體樣式 99
6.1.1 字體粗細屬性 99
6.1.2 字體風格屬性 100
6.1.3 字體大小屬性 101
6.1.4 字體族屬性 103
6.1.5 字體屬性 106
6.2 CSS文本樣式 107
6.2.1 行高屬性 107
6.2.2 顏色屬性 109
6.2.3 文本水平對齊屬性 110
6.2.4 首行縮進屬性 111
6.2.5 文本修飾屬性 111
6.2.6 字符間距屬性 112
6.2.7 字間距屬性 113
6.2.8 字母大小寫屬性 114
6.2.9 文本陰影效果屬性 115
6.3 CSS表格樣式 116
6.4 CSS表單樣式 118
6.4.1 單行文本框美化 119
6.4.2 按鈕美化 120
6.4.3 下拉列表美化 120
6.5 CSS列表樣式 122
6.6 實戰案例：“大學生參軍網站”在線咨詢頁面 123
6.7 本章小結 126
第7章 CSS3高級選擇器 127
7.1 組合選擇器 127
7.1.1 交集選擇器 127
7.1.2 并集選擇器 128
7.1.3 后代選擇器 129
7.1.4 子元素選擇器 130
7.1.5 相鄰兄弟選擇器 131
7.1.6 通用兄弟選擇器 132
7.2 屬性選擇器 133
7.3 偽類選擇器 134
7.4 偽元素選擇器 136
7.5 CSS三大特性 138
7.6 本章小結 141
第8章 CSS3盒子模型 142
8.1 盒子模型概述 142
8.1.1 認識盒子模型 142
8.1.2
標簽 144
8.2 盒子模型的相關屬性 144
8.2.1 內容區域的寬度和高度 144
8.2.2 邊框 145
8.2.3 內邊距 152
8.2.4 外邊距 153
8.3 陰影 155
8.4 box-sizing 156
8.5 背景屬性 158
8.5.1 背景顏色 158
8.5.2 背景圖像 158
8.5.3 圖像平鋪方式 158
8.5.4 背景圖像位置 160
8.5.5 背景圖像固定 161
8.5.6 背景圖像大小 161
8.5.7 背景裁剪 163
8.5.8 背景復合屬性 164
8.5.9 CSS精靈圖 165
8.6 實戰案例：“大學生參軍網站”登錄頁面 166
8.7 本章小結 169
第9章 浮動與定位 170
9.1 標準文檔流 170
9.2 元素的分類 171
9.2.1 塊級元素、行內元素與行內塊元素 171
9.2.2 元素的類型轉換 172
9.3 元素的浮動 173
9.3.1 設置浮動 174
9.3.2 清除浮動 176
9.4 元素的定位 180
9.4.1 定位的概念 180
9.4.2 定位屬性 181
9.4.3 靜態定位 181
9.4.4 相對定位 182
9.4.5 絕對定位 183
9.4.6 固定定位 186
9.4.7 粘性定位 187
9.4.8 層疊等級屬性 188
9.5 實戰案例：“大學生參軍網站”輪播圖效果 190
9.6 本章小結 192
第10章 CSS3高級應用 193
10.1 變換 193
10.1.1 旋轉 194
10.1.2 傾斜 195
10.1.3 縮放 196
10.1.4 平移 197
10.1.5 變換原點 198
10.2 過渡 200
10.3 動畫 202
10.4 實戰案例：“大學生參軍網站”CSS3高級應用 205
10.5 本章小結 208
第11章 網頁布局 209
11.1 網頁布局概述 209
11.1.1 網頁布局的概念 209
11.1.2 網頁布局的流程 210
11.1.3 常見的網頁布局方法 211
11.2 網頁布局命名規范 211
11.3 常見布局的實現 212
11.3.1 單列布局 212
11.3.2 兩列常規布局 214
11.3.3 三列常規布局 216
11.3.4 兩列自適應等高布局 217
11.3.5 三列自適應布局 219
11.4 實戰案例：“大學生參軍網站”首頁主體部分 223
11.5 本章小結 225
第12章 Flex布局 226
12.1 Flex布局概述 226
12.2 Flex布局相關概念 227
12.3 容器屬性 227
12.3.1 display屬性 228
12.3.2 flex-direction屬性 228
12.3.3 flex-wrap屬性 230
12.3.4 justify-content屬性 232
12.3.5 align-items屬性 233
12.3.6 align-content屬性 235
12.4 項目屬性 236
12.4.1 order屬性 236
12.4.2 flex-grow屬性 237
12.4.3 flex-shrink屬性 239
12.4.4 flex-basis屬性 240
12.4.5 flex屬性 241
12.5 實戰案例：“大學生參軍網站”導航條 242
12.6 本章小結 244
第13章 Grid布局 245
13.1 Grid布局概述 245
13.2 Grid布局相關概念 246
13.3 容器屬性 246
13.3.1 display屬性 247
13.3.2 劃分網格 248
13.3.3 行間隔和列間隔 252
13.3.4 項目對齊方式 253
13.4 項目屬性 255
13.4.1 grid-column和grid-row屬性 255
13.4.2 grid-area屬性 257
13.5 實戰案例：“大學生參軍網站”視頻展播列表 258
13.6 本章小結 260
第14章 Web前端項目綜合實踐——文創商城 261
14.1 項目概述 261
14.2 需求分析 262
14.3 原型設計 262
14.4 公共部分的設計與實現 265
14.4.1 重置樣式 265
14.4.2 頁面頭部 265
14.4.3 頁面底部 268
14.4.4 懸浮側邊欄 270
14.5 首頁的設計與實現 271
14.5.1 甄選好物版塊 271
14.5.2 國博文房版塊 274
14.6 商品列表頁的設計與實現 277
14.6.1 商品類型篩選 277
14.6.2 分頁導航 278
14.7 商品詳情頁的設計與實現 279
14.8 本章小結 283
編輯推薦
1HTML5與CSS3是Web前端開發的兩大核心技術，它們不僅是Web前端開發工程師必須掌握的技能，也是高校一門重要的Web前端課程內容
2《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》以“從項目中來到項目中去”為主旨，從Web前端開發的基本概念入手，系統介紹HTML5、CSS3網頁編程技巧。
3《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》采取“知識點講解+示例解析+案例詳講+高頻面試題+實踐操作+學科競賽真題”的遞進式教學模式，引導讀者理解理論知識，掌握開發方法，學會復雜的網站設計技能，全面提升讀者的Web前端開發能力。
4《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》配套資源非常豐富，包括思政元素、案例源代碼、PPT課件、微課視頻、習題與答案、教案、教學大綱、章節測試、云題庫、實驗報告、學習通在線課程，能幫助讀者快速掌握HTML5與CSS3前端技術。
本文摘自《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》，獲出版社和作者授權發布。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
