什么是网页慕课视频播放-界面设计导论-MOOC慕课视频教程-柠檬大学

当前课程知识点：界面设计导论 > 第四章：从设计到实现：H5网页基础概念 > （1）什么是网页 > 什么是网页

大家好

本节课我们来了解一下网页的概念

网页呢是一种结构化文档

什么是结构化文档呢

结构化文档是由标题

章节段落等逻辑结构组成

实际就是为文档建立一个框架

使你的文档看起来不会杂乱无章

每一部分都紧密联系

从而形成一个整体

例如报纸杂志书籍

以及我们填写的各种申请表格等等

均包含了标题内容插图表格空格等格式

网页也是一种结构化的文档

并采用网络媒介展现出来

网页的制作要用html语言来实现

html语言是一门标记语言

大家可能刚一听到会觉得很复杂

其实我们每天都会遇到各种标记

例如在word中可以修改添加文本样式

修改文本结构插入表格或者图片等等

都需要相应的元素进行标记以便操作

我们先来看一个最简单的h5程序

这就是一个最简单的h5程序

大家可以把这段程序

对应的修改到webstrome中看一下效果

在示例中我们看到

如 <body></p> <p>这些尖控号以及它们内部包含的单词或字母</p> <p>被称为标签</p> <p>它们也就是刚才我们所提到的标记</p> <p>示例的文档中包含的标题</p> <p>是我的第一个网页</p> <p>以及内容文字</p> <p>是写在尖括号P中间的标签</p> <p>包含的文字内容</p> <p>我们现在在编程环境里</p> <p>把这个代码输入进去来理解一下</p> <p>先在<title>标签里输入我的第一个网页</p> <p>在<body>标签中添加一个h1标题标签</p> <p>中间输入我的第一个网页</p> <p>然后再增加两个<P>标签</p> <p>分别添加文字内容</p> <p>随便写一些文字内容</p> <p>再添加一个</p> <p>写好以后呢</p> <p>我们把鼠标移至在编辑窗口的右上角</p> <p>会出现可以进行查看效果使用的</p> <p>浏览器的相应的图标</p> <p>我们可以在浏览器中查看</p> <p>代码的运行效果</p> <p>例如点击Chrome这个浏览器看一下效果</p> <p>这就是用户在浏览器中看到的效果</p> <p>例如<title>部分显示在这里</p> <p><h1>部分显示在这里</p> <p><P>的部分显示在这里</p> <p>大家可以在代码上做一些任意的修改</p> <p>看一看效果</p> <p>了解一下相应的对应关系</p> <p>我们今后的代码</p> <p>都会是以这样的形式来完成</p> <p>例如我们在这个上面</p> <p>做一些变动和调整</p> <p>把这个标题的标签给换成<h2></p> <p>在<title>中间呢我们去掉两个字</p> <p>来看一下效果</p> <p>再来看一下效果</p> <p>看<title>部分已经有了变化</p> <p>标签部分也有了变化</p> <p>好本课就讲到这里</p> <p>非常感谢大家的学习</p> <p>谢谢</p> </div> <div> <h2>界面设计导论课程列表：</h2> <h4>第一章：界面设计概述</h4> <p> -课程简介 <p class="leaf_9071363"> --<a href="/course/playview/THU13051000657/9071363/1">课程简介</a> </p> </p> <p> -（1）什么是界面 <p class="leaf_9071364"> --<a href="/course/playview/THU13051000657/9071364/1">什么是界面</a> </p> </p> <p> -（2）界面设计为什么重要 <p class="leaf_9071366"> --<a href="/course/playview/THU13051000657/9071366/1">界面设计为什么重要</a> </p> </p> <p> -（3）UI的进化 <p class="leaf_9071367"> --<a href="/course/playview/THU13051000657/9071367/1">UI的进化</a> </p> </p> <p> -（4）设计师的自我修炼 <p class="leaf_9071368"> --<a href="/course/playview/THU13051000657/9071368/1">新手的疑问</a> </p> <p class="leaf_9071369"> --<a href="/course/playview/THU13051000657/9071369/1">访谈｜linkedin设计师-顾盼</a> </p> <p class="leaf_9071370"> --<a href="/course/playview/THU13051000657/9071370/1">访谈｜爱奇艺设计师-张乙申</a> </p> <p class="leaf_9071371"> --<a href="/course/playview/THU13051000657/9071371/1">访谈｜爱奇艺用户体验设计中心负责人-李威</a> </p> <p class="leaf_9071372"> --<a href="/course/playview/THU13051000657/9071372/1">访谈｜创新工厂人工智能工程院副总裁-吴卓浩</a> </p> </p> <p> -第一章总结 <p class="leaf_9071373"> --<a href="/course/playview/THU13051000657/9071373/1">第一章总结</a> </p> </p> <p> -第一章：界面设计概述--课后习题 </p> <h4>第二章：GUI设计心法</h4> <p> -本章概述 <p class="leaf_9071375"> --<a href="/course/playview/THU13051000657/9071375/1">本章概述</a> </p> </p> <p> -（1）为什么设计？ <p class="leaf_9071376"> --<a href="/course/playview/THU13051000657/9071376/1"> 为什么设计？</a> </p> </p> <p> -（2）界面设计流程 <p class="leaf_9071377"> --<a href="/course/playview/THU13051000657/9071377/1">界面设计流程</a> </p> </p> <p> -（3）视觉优化原理 <p class="leaf_9071378"> --<a href="/course/playview/THU13051000657/9071378/1">视觉优化原理</a> </p> </p> <p> -（4）可用性评估的基本原则 <p class="leaf_9071379"> --<a href="/course/playview/THU13051000657/9071379/1">可用性评估的基本原则</a> </p> </p> <p> -第二章：GUI设计心法--课后习题 </p> <h4>第三章：界面设计元素</h4> <p> -本章概述 <p class="leaf_9071382"> --<a href="/course/playview/THU13051000657/9071382/1">本章概述</a> </p> </p> <p> -（1）信息结构与交互设计（1-4） <p class="leaf_9071383"> --<a href="/course/playview/THU13051000657/9071383/1">第一讲</a> </p> <p class="leaf_9071384"> --<a href="/course/playview/THU13051000657/9071384/1">第二讲</a> </p> <p class="leaf_9071385"> --<a href="/course/playview/THU13051000657/9071385/1">第三讲</a> </p> <p class="leaf_9071386"> --<a href="/course/playview/THU13051000657/9071386/1">第四讲</a> </p> </p> <p> -（2）界面草图与原型设计 <p class="leaf_9071387"> --<a href="/course/playview/THU13051000657/9071387/1">界面草图与原型设计</a> </p> </p> <p> -（3）视觉设计原则 <p class="leaf_9071388"> --<a href="/course/playview/THU13051000657/9071388/1">视觉设计原则</a> </p> </p> <p> -（4）文字与阅读 <p class="leaf_9071389"> --<a href="/course/playview/THU13051000657/9071389/1">字体设计</a> </p> </p> <p> -（5）图标 <p class="leaf_9071390"> --<a href="/course/playview/THU13051000657/9071390/1">图标</a> </p> </p> <p> -（6）色彩 <p class="leaf_9071391"> --<a href="/course/playview/THU13051000657/9071391/1">色彩</a> </p> </p> <p> -（7）动效 <p class="leaf_9071392"> --<a href="/course/playview/THU13051000657/9071392/1">动效设计概述</a> </p> <p class="leaf_9071393"> --<a href="/course/playview/THU13051000657/9071393/1">动效小制作1</a> </p> <p class="leaf_9071394"> --<a href="/course/playview/THU13051000657/9071394/1">动效小制作2</a> </p> </p> <p> -（8）第三章小结 <p class="leaf_9071395"> --<a href="/course/playview/THU13051000657/9071395/1">第三章小结</a> </p> </p> <p> -（9）学生个人作品网站主页设计体会 <p class="leaf_9071396"> --<a href="/course/playview/THU13051000657/9071396/1">张铁汉</a> </p> <p class="leaf_9071397"> --<a href="/course/playview/THU13051000657/9071397/1">案例：国家地理杂志的APP改版设计</a> </p> </p> <p> -第三章：界面设计元素--大作业 </p> <h4>第四章：从设计到实现：H5网页基础概念</h4> <p> -前言 <p class="leaf_9071399"> --<a href="/course/playview/THU13051000657/9071399/1">前言</a> </p> </p> <p> -（1）什么是网页 <p class="leaf_9071400"> --<a href="/course/playview/THU13051000657/9071400/1">什么是网页</a> </p> </p> <p> -（2）标签与元素 <p class="leaf_9071401"> --<a href="/course/playview/THU13051000657/9071401/1">标签与元素</a> </p> </p> <p> -（3）文本格式化、块级元素与行内元素 <p class="leaf_9071402"> --<a href="/course/playview/THU13051000657/9071402/1">文本格式化、块级元素与行内元素</a> </p> </p> <p> -（4）如何使用H5进行网页布局 <p class="leaf_9071403"> --<a href="/course/playview/THU13051000657/9071403/1">如何使用H5进行网页布局</a> </p> </p> <p> -（5）目录、目录结构及在页面中插入图片 <p class="leaf_9071404"> --<a href="/course/playview/THU13051000657/9071404/1">目录、目录结构及在页面中插入图片</a> </p> </p> <p> -（6）CSS样式表 <p class="leaf_9071405"> --<a href="/course/playview/THU13051000657/9071405/1">CSS样式表</a> </p> </p> <p> -（7）CSS盒子模型 <p class="leaf_9071406"> --<a href="/course/playview/THU13051000657/9071406/1">CSS盒子模型</a> </p> </p> <p> -（8）CSS控制文本 <p class="leaf_9071407"> --<a href="/course/playview/THU13051000657/9071407/1">CSS控制文本</a> </p> </p> <p> -（9）CSS背景、特效、动画 <p class="leaf_9071408"> --<a href="/course/playview/THU13051000657/9071408/1">CSS背景、特效、动画</a> </p> </p> <p> -（10）初识javascript及jquery <p class="leaf_9071409"> --<a href="/course/playview/THU13051000657/9071409/1">初识javascript及jquery</a> </p> </p> <p> -总结 <p class="leaf_9071410"> --<a href="/course/playview/THU13051000657/9071410/1">总结</a> </p> </p> <h4>《界面设计导论》作品分享活动</h4> <p> -邱艺芸-清华大学艺术博物馆APP设计 <p class="leaf_9071411"> --<a href="/course/playview/THU13051000657/9071411/1">邱艺芸</a> </p> </p> <p> -潘俊丞-阿甘跑步改版界面设计——“趣跑” <p class="leaf_9071412"> --<a href="/course/playview/THU13051000657/9071412/1">潘俊丞</a> </p> </p> <p> -王婧-星巴克改版设计 <p class="leaf_9071413"> --<a href="/course/playview/THU13051000657/9071413/1">王婧</a> </p> </p> <p> -李向阳-DIY服装app设计 <p class="leaf_9071414"> --<a href="/course/playview/THU13051000657/9071414/1">李向阳</a> </p> </p> <p> -相宸卓-效率软件改版设计 <p class="leaf_9071415"> --<a href="/course/playview/THU13051000657/9071415/1">相宸卓</a> </p> </p> <p> -周文欣-“你好，安德烈”app设计 <p class="leaf_9071416"> --<a href="/course/playview/THU13051000657/9071416/1">周文欣</a> </p> </p> <h4>2020年春活动：“和美院学生聊聊界面设计”</h4> <p> -走近游戏交互设计 <p class="leaf_9071417"> --<a href="/course/playview/THU13051000657/9071417/1">走近游戏交互设计</a> </p> </p> <p> -《稻之道》(作者：于汉杰) <p class="leaf_9071418"> --<a href="/course/playview/THU13051000657/9071418/1">稻之道-于汉杰</a> </p> </p> <p> -《思想咖啡》(作者：艾瑞雯) <p class="leaf_9071419"> --<a href="/course/playview/THU13051000657/9071419/1">思想咖啡-艾瑞雯</a> </p> </p> <p> -《稻香村京八件销售网页设计》(作者：王依柳) <p class="leaf_9071420"> --<a href="/course/playview/THU13051000657/9071420/1">《稻香村京八件销售网页》(作者：王依柳)</a> </p> </p> </div> <script> var learn_list = localStorage.getItem('learn_list'); var learn_list_data = {}; if(learn_list != null){ learn_list_data = JSON.parse(learn_list); }else{ } $(document).ready(function(){ var appid = new Vue({ el: '#leaf_now', data: { learn_list: learn_list_data } }); }); </script> <h2>什么是网页笔记与讨论</h2> <div> <div class="mx-wi">  <div id="SOHUCS" sid="x_play_9071400"></div> <script charset="utf-8" type="text/javascript" src="https://cy-cdn.kuaizhan.com/upload/changyan.js" ></script> <script type="text/javascript"> window._config = { showScore: true }; window.changyan.api.config({ appid: 'cy2uGzAqyhYo', conf: 'prod_19bc916108fc6938f52cb96f7e087941' }); </script> </div> <div> <h2>也许你还感兴趣的课程:</h2> <div class="list_box"> <ol> <li class="l_item"> <a href="/course/sign/cqupt12021003811/" target="_blank"> <img src="https://qn-next.xuetangx.com/FkmJQamZDHyh9GF-jQM7WQS8leXh" class="iteam_img"><br> 财务管理(2021秋) </a> </li> <li class="l_item"> <a href="/course/sign/xatzy08061004064/" target="_blank"> <img src="https://qn-next.xuetangx.com/Fo72J2oLuEG77gmqYq2XZLcgvSHS" class="iteam_img"><br> PLC电气控制技术(2021秋) </a> </li> <li class="l_item"> <a href="/course/sign/ctgu05031004433/" target="_blank"> <img src="https://qn-next.xuetangx.com/FvTyHjsdIWL-csvsCmn368PUBOCM" class="iteam_img"><br> 新闻学概论(2021秋) </a> </li> <li class="l_item"> <a href="/course/sign/gxic56011003728/" target="_blank"> <img src="https://qn-next.xuetangx.com/04aa329da5b198fbef981611e9ef912b" class="iteam_img"><br> 数控加工编程及仿真(2021秋) </a> </li> <li class="l_item"> <a href="/course/sign/hlju12021005030/" target="_blank"> <img src="https://qn-next.xuetangx.com/FsjXX7jJQNCbthj0HFzwrqYiZu1Y" class="iteam_img"><br> 创业项目管理(2021暑假班) </a> </li> <li class="l_item"> <a href="/course/sign/ahtcm0710fu042201/" target="_blank"> <img src="https://qn-next.xuetangx.com/16190765113203.png" class="iteam_img"><br> 生物化学(2021秋) </a> </li> <li class="l_item"> <a href="/course/sign/nkzy63031003695/" target="_blank"> <img src="https://qn-next.xuetangx.com/FqVjbU-e4shOoR_U3Lm8VxayPIxc" class="iteam_img"><br> 成本核算与管理(2021秋) </a> </li> <li class="l_item"> <a href="/course/sign/hlju12021005028/" target="_blank"> <img src="https://qn-next.xuetangx.com/16278691201401.png" class="iteam_img"><br> 创新创业管理(2021暑假班) </a> </li> <li class="l_item"> <a href="/course/sign/ctgu13031001990/" target="_blank"> <img src="https://qn-next.xuetangx.com/c1597a97b06054d664824b91af939647" class="iteam_img"><br> 动作捕捉技术与应用(2021秋) </a> </li> <li class="l_item"> <a href="/course/sign/nxu08021002484/" target="_blank"> <img src="https://qn-next.xuetangx.com/80a3d855301b94349b636f0bc6335071" class="iteam_img"><br> 工程制图(2021秋) </a> </li> <li class="l_item"> <a href="/course/sign/THU13051000657/" target="_blank"> <img src="https://qn-next.xuetangx.com/11c1b2bcec0751764ba68602a53a0e1e" class="iteam_img"><br> 界面设计导论(2021秋) </a> </li> <li class="l_item"> <a href="/course/sign/BUPT07011000040/" target="_blank"> <img src="https://qn-next.xuetangx.com/15668718153140.jpg" class="iteam_img"><br> 高等数学习题课(2021秋) </a> </li> <li class="l_item"> <a href="/course/sign/thu05021002107/" target="_blank"> <img src="https://qn-next.xuetangx.com/8c2a43551327d618cd8f7529ae03953b" class="iteam_img"><br> 实用日语会话（Practical Japanese Conversation）(2021秋) </a> </li> <li class="l_item"> <a href="/course/sign/LUIBE00001000728/" target="_blank"> <img src="https://qn-next.xuetangx.com/2a7d90d8577daeedf7c912b83ed0c307" class="iteam_img"><br> 揭开潜意识心理的奥秘(2021秋) </a> </li> <li class="l_item"> <a href="/course/sign/NJUST12021000231/" target="_blank"> <img src="https://qn-next.xuetangx.com/15675993903221.jpg" class="iteam_img"><br> 现代管理学(2021秋) </a> </li> <li class="l_item"> <a href="/course/sign/THU07011000412/" target="_blank"> <img src="https://qn-next.xuetangx.com/15668841843317.jpg" class="iteam_img"><br> 线性代数(2)(2021秋) </a> </li> <li class="l_item"> <a href="/course/sign/THU08091000327/" target="_blank"> <img src="https://qn-next.xuetangx.com/15730306601191.jpg" class="iteam_img"><br> 计算几何(2021秋) </a> </li> <li class="l_item"> <a href="/course/sign/THU07021000338/" target="_blank"> <img src="https://qn-next.xuetangx.com/ca2cb0d40774a95c838da77909dd6b65" class="iteam_img"><br> 力学(2021秋) </a> </li> <li class="l_item"> <a href="/course/sign/AFEU08091001148/" target="_blank"> <img src="https://qn-next.xuetangx.com/fa85ac5b237fba4079fc98a1de5efec9" class="iteam_img"><br> 系统工程(2021秋) </a> </li> <li class="l_item"> <a href="/course/sign/THU08011000273/" target="_blank"> <img src="https://qn-next.xuetangx.com/15982579251278.png" class="iteam_img"><br> 创客培养：趣味力学实验与制作(2021秋) </a> </li> </ol> </div> </div>  <style> #live2dcanvas { border: 0 !important; } </style> <div id="live2d-widget"></div> <em>© <a href="//www.08nm.com">柠檬大学</a>-<a href="//x.08nm.com">慕课导航</a> 课程版权归原始院校所有，<br>本网站仅通过互联网进行慕课课程索引，不提供在线课程学习和视频，请同学们点击报名到课程提供网站进行学习。</em> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-9153503103133608", enable_page_level_ads: true }); </script>  <link rel="stylesheet" type="text/css" href="/asset/js/live2d/assets/waifu.min.css?v=1.4.2"/>  <script src="/asset/js/live2d/assets/jquery.min.js?v=3.3.1"></script>  <script src="/asset/js/live2d/assets/jquery-ui.min.js?v=1.12.1"></script> <div class="waifu"> <div class="waifu-tips"></div> <canvas id="live2d" class="live2d"></canvas> <div class="waifu-tool"> <span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span> </div> </div> <script src="/asset/js/live2d/assets/waifu-tips.min.js?v=1.4.2"></script> <script src="/asset/js/live2d/assets/live2d.min.js?v=1.0.5"></script> <script type="text/javascript"> /* 可直接修改部分参数 */ live2d_settings['modelId'] = 5; // 默认模型 ID live2d_settings['modelTexturesId'] = 1; // 默认材质 ID live2d_settings['modelStorage'] = true; // 不储存模型 ID live2d_settings['canCloseLive2d'] = true; // 隐藏关闭看板娘按钮 live2d_settings['canTurnToHomePage'] = false; // 隐藏返回首页按钮 live2d_settings['waifuSize'] = '300x380'; // 看板娘大小 live2d_settings['waifuTipsSize'] = '250x60'; // 提示框大小 live2d_settings['waifuFontSize'] = '14px'; // 提示框字体 live2d_settings['waifuToolFont'] = '28px'; // 工具栏字体 live2d_settings['waifuToolLine'] = '28px'; // 工具栏行高 live2d_settings['waifuToolTop'] = '-30px'; // 工具栏顶部边距 live2d_settings['waifuDraggable'] = 'axis-x'; // 拖拽样式 live2d_settings['waifuEdgeSide'] = 'right:0'; live2d_settings['aboutPageUrl'] = 'http://x.08nm.com/'; // 关于页地址, '{URL 网址}' /* 在 initModel 前添加 */ initModel("/asset/js/live2d/assets/waifu-tips.json?v=1.4.2") </script> <script type="text/javascript"> var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fba2ae2bb4d86cc69d39f54dc4539bed5' type='text/javascript'%3E%3C/script%3E")); </script> </body> </html>

什么是网页在线视频

什么是网页

什么是网页课程教案、知识点、字幕