2022-09-19 13:34 梁莉菁 萍乡学院 在网页设计(Web前端开发) 九期课程中提问：

话题2：谈谈你对响应式网页布局技术的理解

请查阅相关资料，谈谈你对响应式网页布局技术的理解。请勿简单复制粘贴网络资源。

• 2022-10-18 19:10 张佳鑫

  在刚接触响应式布局的时候，认为就是在拖拽网页的时候页面的内容随着页面的缩小和放大一起进行等比例的缩小和放大，结果等学过了一些 WEB 前端之后我明白了响应式布局是一个网站能够兼容多个平台的布局的一种方式，它的优点有：面对多个不同分辨率的设备能够灵活的改变自身的布局，而它的缺点也很明显：它在适应各个设备的同时也增加了代码的累赘，在兼容各种设备是工作量大，会使页面的加载变慢。

查看全部(1条)

2022-09-19 13:34 梁莉菁 萍乡学院 在网页设计(Web前端开发) 九期课程中提问：

话题1：谈谈你对Html5+CSS3新特性的理解

选择某一具体的点或面，谈谈你对Html5+CSS3新特性的理解。请勿简单复制粘贴网络资源。

• 2022-10-18 19:10 张佳鑫

  html5:
  用于绘画的 canvas 元素以及 SVG
  用于媒介回放的 video 和 audio 元素
  拖拽（ Drag 和 drop ）地理定位（ Geolocation )
  对本地离线存储的更好的支持
  localStorage -没有时间限制的数据存储sessionStorage ﹣针对一个 session 的数据存诸

查看全部(1条)

2022-09-19 17:53 梁莉菁 萍乡学院 在网页设计(Web前端开发) 九期课程中提问：

话题1：请总结一下本章焦点轮播图效果与跑马灯效果两大案例的技术要点。

请用自己的语言总结一下本章中焦点轮播图效果与跑马灯效果两大案例制作时最重要的知识点与技术要点。

• 2022-10-13 20:44 张佳鑫

  轮播图主要运用于网页上对图片内容进行循环轮回播放，能够在单个网页中轮回播放多种图片，丰富网页效果，方便用户对网页进行操作。

查看全部(1条)

2022-09-19 17:53 梁莉菁 萍乡学院 在网页设计(Web前端开发) 九期课程中提问：

话题2：谈谈网页设计中的JavaScript的功能与意义

查阅相关资源，请简要概括一下，你觉得JavaScript在网页设计中扮演什么角色，即承担了何种重要功能，有何种意义。

• 2022-10-13 20:43 张佳鑫

  javascript 的作用：1、嵌入动态文本与 HTML 页面；2、对浏览器事件做出响应；3、读写 HTML 元素；4、在数据被提交到服务器之前验证数据；5、检测访客的浏览器信息；6、控制 cookies ，包括创建和修改等。JavaScript 是 Web 开发领域中的一种功能强大的编程语言，主要用于开发交互式的 Web 页面。在计算机、手机等设备上浏览的网页，其大多数的交互逻辑几乎都是由 JavaScript 实现

查看全部(1条)

2022-09-23 13:22 梁莉菁 萍乡学院 在网页设计(Web前端开发) 九期课程中提问：

谈谈你对Html5中新增的表单Input输入类型的理解

Html5中新增了多个表单Input输入类型，你挑选一个或几个你感受最深感觉实用性最强那种新增类型进行简要的概括与阐述。

• 2022-10-13 20:36 张佳鑫

  项天鹰
  关注
  html5新增的input输入类型,HTML5新增的8类INPUT输入类型介绍 转载
  2021-06-03 13:54:14
  
  项天鹰
  
  码龄4年
  
  关注
  已经有的输入类型 html代码示例：
  
  复制代码代码如下:
  
  文本域
  
  单选按钮
  
  复选框
  
  下拉列表
  
  密码域
  
  提交按钮
  
  可单击按钮
  
  图像按钮
  
  隐藏域
  
  重置按钮
  
  文件域
  
  在html5中，增加了多个新的表单input输入类型，通过使用这些新增元素，可以实现更好的输入控制和验证。
  
  1、email类型的应用
  
  email类型的input元素是一种专门用于输入e-mail地址的文本输入框，在提交表单的时候，会自动验证email输入框的值。
  
  复制代码代码如下:
  
  2、url类型的应用
  
  url类型的input元素提供用于输入url地址这类特殊文本的文本框。
  
  复制代码代码如下:
  
  3、number类型的应用
  
  number类型的input元素提供用于输入数值的文本框。
  
  复制代码代码如下:
  
  4、range类型的应用
  
  range类型的input元素提供用于输入包含一定范围内数字值得文本框，在网页中显示为滚动条。
  
  复制代码代码如下:
  
  5、日期检出类型的应用
  
  输入类型 html代码 功能说明
  
  复制代码代码如下:
  
  date
  
  选取日、月、年
  
  month
  
  选取月、年
  
  复制代码代码如下:
  
  week
  
  选取周和年
  
  复制代码代码如下:
  
  time
  
  选取时间(小时和分钟)
  
  复制代码代码如下:
  
  datetime
  
  选取时间、日、月、年(utc时间)
  
  复制代码代码如下:
  
  datetime-local
  
  选取时间、日、月、年(本地时间)
  
  6、search类型的应用
  
  search类型的input元素提供用于输入搜索关键词的文本框。
  
  复制代码代码如下:
  
  input[type="search"]{
  
  -webkit-appearance:textfield;
  
  }
  
  7、tel类型的应用
  
  tel类型的input元素提供专门用于输入电话号码的文本框。
  
  复制代码代码如下:
  
  8、color类型的应用
  
  color类型的input元素提供专门用于设置颜色的文本框。

查看全部(1条)

2022-09-19 17:52 梁莉菁 萍乡学院 在网页设计(Web前端开发) 九期课程中提问：

请谈谈网页设计时为什么会弃用表格布局的方式？

曾几何时，表格布局是网页布局的主要方式，请查询相关资源，谈谈网页设计时为什么会弃用表格布局的方式？另外，如果发现网络资源中有设计得特别精美的表格案例页面，请贴出网址与大家分享，并分析一下其技术特点与制作方法。

• 2022-10-13 20:29 张佳鑫

  ● table 比其它 html 标记占更多的字节。（造成下载时间延迟，占用服务器更多流量资
  源）
  ● table 会阻挡浏览器渲染引擎的渲染顺序。
  （会延迟页面的生成速度，让用户等待更
  久的时间）
  ● table 里显示图片时需要你把单个、有逻辑性的图片切成多个图。（增加设计的复杂度，增加页面加载时间，增加 http 会话
  数）
  ●在某些浏览器中， table 里的文字的拷贝会出现问题。（会让用户不悦）
  ● table 会影响其内部的某些布局属性的生效
  （比如里的元素的height :100%)（限制页面设计的自由性）

查看全部(1条)

2022-09-21 21:03 梁莉菁 萍乡学院 在网页设计(Web前端开发) 九期课程中提问：

简要地概括并阐述个人对超链接制作技术的理解。

超链接是网页技术的灵魂，请查阅并找寻网络中制作得特别精巧又富有特色的导航栏案例，将案例网址贴出来与大家分享，并请用自己的语言概括一下本章所讲述的各种超链接与导航栏的制作技术要点，简要地概括并阐述个人对超链接制作技术的理解。

• 2022-10-13 20:19 张佳鑫

  超级链接简单来讲，就是指按内容链接。
  
  超级链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

查看全部(1条)

2022-09-23 18:32 梁莉菁 萍乡学院 在网页设计(Web前端开发) 九期课程中提问：

谈谈你对网页布局技术的理解？

网页布局技术经历了表格布局，DIV+CSS布局，响应式布局等多次更新进化，请查询相关网络资源，谈谈你对网页布局技术的理解？可以仅从网页布局技术的某一方面入手，简要概括自己的观点。

• 2022-10-13 20:10 张佳鑫

  DIV＋CSS网页布局:
  第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。
  另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对 应的什么CSS语句。 当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。
  结构化HTML
  我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。
  如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。
  外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来，CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。
  HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。
  开始思考
  首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。
  如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块：
  标志和站点名称
  主页面内容
  站点导航(主菜单)
  子菜单
  搜索框
  功能区(例如购物车、收银台)
  页脚(版权和有关法律声明)
  我们通常采用DIV元素来将这些结构定义出来，类似这样：
  ＜div id="header"＞＜/div＞
  ＜div id="content"＞＜/div＞
  ＜div id="globalnav"＞＜/div＞
  ＜div id="subnav"＞＜/div＞
  ＜div id="search"＞＜/div＞
  ＜div id="shop"＞＜/div＞
  ＜div id="footer"＞＜/div＞
  这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。
  根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。
  使用选择器是件美妙的事
  id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标 题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则，就可以完全不同于#content里的图片规则。
  另外一个例子是：你可以通过不同规则来定义不同内容块里的链接样式。类似这样：#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如，通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络 设备中(PDA还是手机或者网络电视)有影响，它们可以被定义为任何的表现外观。
  一个仔细结构化的HTML页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用blockquote标签，只要使用p标签，并对p 加一个CSS的margin规则就可以实现缩进目的。p是结构化标签，margin是表现属性，前者属于HTML，后者属于CSS。(这就是结构于表现的 相分离.)
  良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码＜table width="80%" cellpadding="3" border="2" align="left"＞，现在可以只在HTML中写＜table＞，所有控制表现的东西都写到CSS中去，在结构化的HTML中， table就是表格，而不是其他什么(比如被用来布局和定位)。
  亲自实践一下结构化
  上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现DIV嵌套的情况，你会看到"container"层中又有其它层，结构类似这样：
  ＜div id="navcontainer"＞
  ＜div id="globalnav"＞
  ＜ul＞a list＜/ul＞
  ＜/div＞
  ＜div id="subnav"＞
  ＜ul＞another list＜/ul＞
  ＜/div＞
  ＜/div＞
  嵌套的div元素允许你定义更多的CSS规则来控制表现，例如：你可以给#navcontainer一个规则让列表居右，再给#globalnav一个规则让列表居左，而给#subnav的list另一个完全不同的表现。
  用CSS替换传统方法
  下面的列表将帮助你用CSS替换传统方法：
  HTML属性以及相对应的CSS方法
  HTML属性
  CSS方法说明
  align="left"
  align="right" float: left;
  float: right; 使用CSS可以浮动 任何元素:图片、段落、div、标题、表格、列表等等
  当你使用float属性，必须给这个浮动元素定义一个宽度。
  marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用CSS, margin可以设置在任何元素上, 不仅仅是body元素.更重要的，你可以分别指定元素的top, right, bottom和left的margin值。
  vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;
  a:visited: #339;
  a:hover: #999;
  a:active: #00f;
  在HTML中，链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器，页面不同部分的链接样式可以不一样。
  bgcolor="#FFFFFF" background-color: #fff; 在CSS中，任何元素都可以定义背景颜色，不仅仅局限于body和table元素。
  bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以设置边框(boeder)，你可以分别定义top, right, bottom和left
  border="3"cellspacing="3" border-width: 3px; 用CSS，你可以定义table的边框为统一样式，也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。
  你可以使用 table, td or th 这些选择器.
  如果你需要设置无边框效果，可以使用CSS定义： border-collapse: collapse;
  ＜br clear="left"＞
  ＜br clear="right"＞
  ＜br clear="all"＞
  clear: left;
  clear: right;
  clear: both;
  许多2列或者3列布局都使用 float属性来定位。如果你在浮动层中定义了背景颜色或者背景图片，你可以使用clear属性.
  cellpadding="3"
  vspace="3"
  hspace="3" padding: 3px; 用CSS，任何元素都可以设定padding属性，同样，padding可以分别设置top, right, bottom and left。padding是透明的。
  align="center" text-align: center;
  margin-right: auto; margin-left: auto;
  Text-align 只适用于文本.
  象div，p这样的块级可以通过margin-right: auto; 和margin-left: auto;来水平居中
  一些令人遗憾的技巧和工作环境
  由于浏览器对CSS支持的不完善，我们有时候不得不采取一些技巧(hacks)或建立一种环境(Workarounds)来让CSS实现传统方法同样的效 果。例如块级元素有时侯需要使用水平居中的技巧，盒模型bug的技巧等等。

查看全部(1条)

2022-09-19 14:10 梁莉菁 萍乡学院 在网页设计(Web前端开发) 九期课程中提问：

请谈谈你对Html5语义化新特点的理解？

Html5新增了许多语义化标签，为什么要新增这些语义化标签，有什么重要作用与意义？请查阅Html5语义化新特点的相关资料，谈谈你对Html5语义化的理解。注意不要简单地复制粘贴网络资源，简要地概括说明你个人的观点即可。

• 2022-10-13 19:59 张佳鑫

  HTML的语义化指的是合理正确的使用语义化的标签来创建页面结构，从标签上即可以直观的知道这个标签的作用，而不是滥用div
  header、 nav、 main、 article、 section、 aside、 footer 等
  1.代码结构清晰，易于阅读，利于开发和维护
  2.有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重
  3.在没有css的样式下，页面也能呈现出很好的内容结构，代码结构。

查看全部(1条)

2022-09-19 13:42 梁莉菁 萍乡学院 在网页设计(Web前端开发) 九期课程中提问：

你怎么理解Web标准中的结构与表现分离的意义

网页设计中通常提到要结构与表现相分离，你怎么理解网页设计中结构与表现分离的意义

• 2022-10-13 19:39 张佳鑫

  当讨论到Web标准时，一些事情总是被提及，那就是结构和表现分离的重要性。
  刚开始的时候理解结构和表现的不同之处可能很困难，特别是如果你不习惯于思考文档的语义结构时。
  然而，理解这点是很重要的，因为，当结构和表现分离后，用 CSS 文档来控制表现就是很容易的一件事了。
  结构 是由文档中的主体部分，再加上语义化、结构化的标记。
  表现 是你赋予内容的一种样式。在大多数情况下，表现就是文档看起来的样子，但是它同样可以影响一个文档“听”起来的样子----毕竟不是每个人使用的都是图像化的浏览器。
  尽可能的把结构和表现相分离。
  理论上讲，你应该用一个 HTML 文档来保存内容与结构，用一个 CSS 文档来控制整个文档的表现。
  如今表现与结构的未分离的网站还是很普遍的。
  所以我们刚开始学习要养成好的习惯，把它们分别放到分开的文件中，XHTML文件可以链接并共享外部的CSS和JavaScript文档的

查看全部(2条)

查看更多