开发板实验指导书for L1 2.docx
《开发板实验指导书for L1 2.docx》由会员分享，可在线阅读，更多相关《开发板实验指导书for L1 2.docx（25页珍藏版）》请在冰豆网上搜索。
开发板实验指导书forL12
基于VisualStduio的网页前端设计实践
1实验目的
1掌握HTML前端架构搭建
2掌握CSS进行前端界面美化
3学会使用JavaScript编制人机交互功能
4尝试编制一个简单的登陆验证功能和个人主页界面
2前端开发简介
前端开发包括HTML、CSS、JavaScript三部分，HTML为结构层，负责从语义的角度搭建页面结构；CSS为样式层，负责从审美的角度美化页面；JavaScript为行为层，负责从交互的角度提升用户体验。
1HTML
“HTML”指超文本标记语言，标准通用标记语言下的一个应用。
包括“头”部分（英语：
Head）、和“主体”部分（英语：
Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
网页的本质就是超级文本标记语言，通过结合使用其他的 Web技术（如：
脚本语言、 公共网关接口、组件等），可以创造出功能强大的网页。
因而，超级文本标记语言是万维网（ Web）编程的基础，也就是说 万维网是建立在超文本基础之上的。
超级文本标记语言之所以称为超文本标记 语言，是因为文本中包含了所谓“ 超级链接”点。
超级文本标记语言是 标准通用标记语言下的一个应用，也是一种规范，一种 标准，它通过标记符号来标记要显示的网页中的各个部分。
网页 文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉 浏览器如何显示其中的内容（如：
文字如何处理，画面如何安排，图片如何显示等）。
浏览器按顺序阅读网页 文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。
但需要注意的是，对于不同的 浏览器，对同一标记符可能会有不完全 相 同的解释，因而可能会有不同的显示效果。
一个网页对应多个 HTML文件， 超文本标记语言文件以.htm（磁盘操作系统 DOS限制的外语缩写）为 扩展名或.html（外语缩写）为 扩展名。
可以使用任何能够生成 TXT类型 源文件的文本编辑器来产生超文本标记语言文件，只用修改文件 后缀即可。
标准的超文本标记语言 文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：
），即超文本标记语言文件的开头与结尾标志和超文本标记语言的 头部与实体两大部分。
有三个双标记符用于 页面整体结构的确认。
标记符,说明该 文件是用超文本标记语言（本标签的中文全称）来 描述的,它是 文件的开头;而,则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。
标签
描述
定义了文档的信息
</p><p>定义了文档的标题</p><p><base></p><p>定义了页面链接标签的默认链接地址</p><p><link></p><p>定义了一个文档和外部资源之间的关系</p><p><meta></p><p>定义了HTML文档中的元数据</p><p><script></p><p>定义了客户端的脚本文件</p><p><style></p><p>定义了HTML文档的样式文件</p><p>2CSS</p><p>CSS指层叠样式表（CascadingStyleSheets）</p><p>CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。</p><p>CSS以HTML为基础控制页面布局和样式，为页面提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。</p><p>2.1行内样式</p><p>所有的标签都有一个默认样式，我们称为浏览器样式，或者默认样式，引入CSS行内样式，是通过在标签中设置style属性来达到实现控制标签的样式的效果。</p><p>例如：</p><p><h1style="color:</p><p>red;">这是指该标题颜色为红色</h1></p><p>Style属性中，可以设置多条的CSS样式。</p><p>2.2嵌入样式</p><p>在head标签中，嵌套一个style标签，在style标签中可以书写CSS的样式内容。</p><p>Style标签有一个属性type属性，默认值就是text/css,可以省略。</p><p>例如demo：</p><p><styletype="text/css"></p><p>p{</p><p>color:</p><p>green;/*设置前景色，也就字体的颜色*/</p><p>background-color:</p><p>silver;</p><p>}</p><p>ul{</p><p>background-color:</p><p>red;</p><p>}</p><p></style></p><p>2.3CSS注释</p><p>CSS的注释语法/*注释的内容*/</p><p>注释不能嵌套，比如：</p><p>/*注释的*/内容*/</p><p>/*dsfsdfsd/**/*/</p><p>多行注释：</p><p>/*</p><p>放多行的注释内容1</p><p>放多行的注释内容2</p><p>*/</p><p>一般用于模块的注释</p><p>/*S导航条开始*/</p><p>ul{</p><p>background-color:</p><p>red;</p><p>}</p><p>/*E导航条结束*/</p><p>3JavaScript</p><p>3.1代码存放位置</p><p>放在head标签中如果没有style代码放在title标签下，如果有style，那么代码放在style下面。</p><p>还可以放在另外一个标签上body标签，但是初学阶段的学习建议不要放在body中。</p><p>3.2关于JavaScript代码的书写格式</p><p><scripttype=”text/javascript”></p><p>代码块。</p><p></script></p><p><javascript></p><p>alert（“ljkwlfklj”）;</p><p></javascript></p><p>注意不存在javascript标签，只有<script>。</p><p>3实验步骤</p><p>任务一：</p><p>登陆界面实现</p><p><!</p><p>DOCTYPEhtml></p><p><htmllang="en"></p><p><head></p><p><metacharset="utf-8"></p><p><title>Login-BootstrapAdminTemplate
BootstrapAdminTemplate
Don'thaveanaccount?
BacktoHomepage