整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天发了一篇干货，似乎没人看，好吧，我们来说说技术吧。
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布局，以及人工智能编程插件，同时融入企业开发实践，确保学习内容与实际工作紧密相关。全书以一个完整案例为主线，结合综合项目实战操作，体现育人、应用和创新三项能力。《HTML5+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前端开发与实例教程：微课视频版》既可作为本专科院校计算机相关专业的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小时内与您取得联系。
