版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第11讲网络程序设计基础HTML,CSS,andASP.NET2/4/2023学习内容一、超文本标记语言（HTML）二、层叠样式表（CSS）三、ASP.NET基础…2…一、超文本标记语言（HTML）HTML基础HTML元素表格表单…3…HTML，超文本标记语言超文本：可加入图片、声音、动画、影视等内容超文本传输协议（http）规定了浏览器在运行HTML文档时所遵循的规则和进行的操作作用：控制页面和内容的外观发布和检索联机文档创建联机表单插入诸如音频剪辑和视频剪辑等对象1.HTML基础…4…<html>
<head><title>HeadFirstLounge</title></head>
<body><h1>WelcometotheHeadFirst…</h1><imgsrc=”drinks.gif”><p>Joinus
<em>Dance…</em>.</p><h2>Directions</h2><p>You’llfindComejoinus!</p>
</body></html>HTML的基本结构…5…ABCDEFG头部文件主体开始结束<标签名字属性1属性2…>内容</标签名字><html><head>
<title>学习html</title></head>
<bodybgcolor=“green”><h1>欢迎来到html世界</h1></body></html>HTML标签…6…标签标识body元素属性提供有关元素的附加信息值分配给属性的内容标题：h1到h6标签用于指定不同级别的标题段落：<P>…</P>标签用于标记段落换行：只要在文本中放入<br>标签，就会强制换行2.HTML元素…7…
<h1>励志一生</h1>
<h2>经典语录</h2>
静坐常思己过，闲谈莫论人非<br/>
两点之间最短的距离并不一定是直线
<br
/>
有志者自有千计万计，无志者只感千难万难。
<h2>爱情故事</h2>
<p>
一个小男孩对小女孩说：“我是你的BF.”<br
/>
女孩问：“什么是BF?”男孩说是BestFriend（最好的朋友）的意思。<br
/>
再后来他们结婚生子到了风烛残年的年纪，老公公对老婆婆说：“我是你的BF.”<br
/>
老婆婆问：“什么是BF?”老公公微笑回答“BeForever!（要永远这样啊！）”
</p>预先格式化：<pre>标签字符格式化：对文本应用粗体、斜体等格式水平线：<HR>标签格式化…8…<pre>
山羊上山，山碰山羊角
水牛下水，水没水牛腰
</pre>
<hr/>
<p>
<b>
大鱼吃小鱼，小鱼吃虾</b>
<i>虾吃水，水落石出</i>
<br/>
<u>
溪<sub>水</sub>归河水，河水归江，
江归海，海阔<sup>天</sup>空</u>
</p><font>标签及其相关属性（如size、color和face）可用于控制网页上文本的显示字体…9…<font
size="4"
color="red"
face="微软雅黑">
水水山山，处处明明秀秀；
<br
/>
晴晴雨雨，时时好好奇奇<br
/>
</font>
<font
size="3"
color="blue"
face="宋体">
重重迭迭山，曲曲环环路；<br
/>
丁丁冬冬泉，高高下下树
</font>字体大小（1到7）颜色（名称或十六进制）字体，各字体间用逗号分隔插入图像标签：<img>，主要属性：src:指定要插入的图像位置align:指定图像相对于文本的对齐方式图像大小（width，height）例：
<imgalign=”right”src=”images/01.jpg”width=”400”height=”200”>图像…10…<ol>:有序列表（列表项以自动生成的顺序显示）<ul>：无序列表（也称为“项目列表”）列表…11…有序列表的属性<litype=I><litype=i><litype=A><litype=a><olstart=n><body>
<ul>
<li>红色</li>
<li>绿色</li></ul>
<ol>
<li>星期一</li><li>星期二</li>
</ol>
</body>超级链接：<ahref=“www…”>网址</a>书签标签：“跳”到文档的某个部分
创建定位标记:
<aname=“marker”>主题名称</a>使用定位标记：<ahref=“#marker”>主题名称</a>E-Mail链接：<ahref="mailto:ybli@">
超级链接…12…<a
href="">武汉大学</a><a
href="#GY">格言</a>
<a
href="#DL">对联</a>
<br/>
<a
name="GY">格言</a>
<br/>
真理惟一可…<a
name="DL">对联</a><br/>
一人为大，….<a
href="mailto:ybli@">李英冰</a>表格组成部分：行、列、单元格、列标题（可选）、表格标题（可选）在HTML文档中，广泛使用表格存放文本和图像3.表格…13…行列列标题单元格表格标题主要标签：<table>,<tr>,<td>,<th>表格标签…14…<table
border="2"
>
<caption>网站分类</caption>
<tr>
<th>购物</th><th>测绘</th>
</tr>
<tr>
<td>京东</td><td
>武汉大学</td>
</tr>
<tr>
<td>淘宝</td><td>国家测绘局</td>
</tr>
</table>【示例】创建表格…15…表单<form>用于采集和提交用户输入的信息4.表单…16…method=“post或get”actionmethod指定提交后由服务器上哪个处理程序处理指定向服务器提交的方法:一般为post或get方法,
post方法比较安全action=“URL”<formaction=“http://”method=“post”>HTML表单的常用控件<input
type=“?”></input>表单常用控件…17…inputtype=“text”单行文本输入框inputtype=“submit”信息提交inputtype=“checkbox”复选框inputtype=“radio”单选框inputtype=“password”密码输入框select下拉框textArea多行文本输入框控件的格式：
<inputtype=“?”name=“?”size=”?”value=“?”maxlength=“?”checked=“?”>表单控件的属性…18…type元素类型：text、password、checkbox、radio、submit、reset、file、hidden和buttonname控件名称，作用域是在form元素内value指定控件的初始值size指定控件的初始宽度maxlength在text或password元素中输入最大字符数checked当输入类型为radio或checkbox时，使用此属性HTML表格与表单（简易计算器）…19…表格有那几个重要组成部分？表单<FORM>有哪些属性？知识问答20二、层叠样式表（CSS）CSS定义样式表的定义样式表的引用DIV+CSS布局…21…DHTML=HTML脚本语言JavaScript++层叠样式表CSS指定网页元素决定元素的大小、颜色和位置操纵网页的元素动态HTML页面CSS：层叠样式表，用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言HTML的缺陷VSCSS的引入
<h2><fontcolor="#0000FF">标题1</font></h2>
<h2><fontcolor="#0000FF">标题2</font></h2><head><style>
H2{font-family:”宋体”;color:red;}</style></head><body><h2>CSS1</h2>
<h2>CSS2</h2></body>1.CSS的概念…22…背景色：background-color:#000000，可以接受任何合法颜色值背景图形：background-image:none，把图片放入背景背景重复：background-repeat:repeat-x，在页面上对背景图形进行平铺文字装饰：text-decoration属性（none,underline,overline,line-through,blink)基本属性…23…属
性CSS名称说
明颜色
color文本属性font-size字体大小font-family字体text-align文本对齐边框属性(用于表单元素)border-style边框样式border-width边框宽度
border-color边框颜色
定位属性(position)top顶部边距（上边距）left左边距width宽度height高度z-indexz轴索引号，用于层常用样式属性…24…CSS样式表样式规则组成，样式规则一般由样式符和属性组成常用样式符：HTML标签、用户自定义类和用户自定义IDCSS样式语法规则：样式符｛属性1：值1；属性2：值2；…｝body
{
margin-left:
0px;
margin-top:
10px;
margin-right:
15px;
margin-bottom:
0px;
background-color:
#ff0000;}2.样式表定义…25…定义格式：
样式符.类名｛属性1：值1；…｝例<head>
<style
type="text/css">
.one{
color:
red;
font-size:18px}</style></head><body>
<p
class="one">Class
one</p>
</body>用户自定义类作为样式符…26….classcolor:green;font-size:20px;{}类别选择器属性值属性值声明声明类别名称定义格式：样式符｛属性1：值1；…｝例<head>
<style
type="text/css">
p
{
color:
red;
font-size:small}
</style>
</head>
<body>
<p>好好学习，天天向上</p>
</body>HTML标签作为样式符…27…h1color:red;font-size:25px;{}选择器属性值属性值声明声明定义格式：例<head>
<style
type="text/css">
#one
{
font-weight:
bold;}
</style>
</head>
<body>
<p
id="one">好好学习，天天向上</p>
</body>用户自定义ID作为样式符…28…#idcolor:yellow;font-size:30px;{}ID选择器属性值属性值声明声明行内样式<body>
<p
style="text-decoration:
underline">武汉</p>
</body>内嵌样式<head>
<style
type="text/css">
p{
color:
#FF00FF;
font-weight:bold}
</style>
</head>
<body>
<p>太阳最红，毛主席最亲</p>
</body>3.样式表的引用…29…StyleSheet.cssa:link{
/*
超链接正常状态下的样式
*/
color:#005799;
text-decoration:
none;}a:visited{
/*
访问过的超链接
*/
color:#000000;
text-decoration:
none;}a:hover{
/*
鼠标放在超链接上的状态
*/
color:
#FFFF00;
text-decoration:
underline;}a:active
{
/*在链接上按下鼠标时的状态*/
color:#005799}制作样式表文件…30…在<head></head>之间通过link引用外部文件例<head><title>外部样式表的引用</title>
<link
href="StyleSheet.css"
rel="stylesheet"
type="text/css"/></head>
<body>
<a
href="">中央人民政府</a>
</body>外部样式表引用…31…页面设计人员把DIV+CSS作为网页布局的行业标准在布局中，div承载的是内容，css承载的是样式DIV的概念DIV（division）意思是“区分”，使用DIV的方法和使用其他标签的方法一样DIV本身是容器性质的SPAN和DIV的区别DIV是一个块级元素，可以包含段落、标题、表格…span是行级容器标签，只能包含文字，不可包含图片、标题…4.DIV+CSS布局…32…每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度(height)，盒子里面的内容到盒子的边框之间的距离即填充(padding)，盒子本身有边框(border)，而盒子边框外与其他盒子之间，还有边界(margin)盒子模型…33…contentpadding-toppadding-bottompadding-leftpadding-rightborder-topborder-bottomborder-rightborder-leftmargin-rightmargin-leftmargin-topmargin-bottom<styletype="text/css">#father{background-color:#a0c8ff;
width:100%;
height:100%;}#block{
background-color:#fff0ac;
padding:10px;
position:absolute;
left:20px; top:40px; }</style>….<divid="father">
<divid="block">absolute</div></div>Position位置…34…<styletype="text/css">#container{
position:relative;
width:100%;}…..</style><divid="container">
<divid="banner">banner</div>
<divid="content">….
</div> <divid="links"> .. /div> <divid="footer">footer</div></div></body>CSS排版：将页面用div分块…35…#container#banner#content#links#footerShow10-HTML+CSS…36…样式表有什么用？分为哪三类？简述盒子模型练习…37…三、ASP.NET基础ASP.NET概述安装IIS&配置IISASP.NET工作原理WEB窗体页…38…Web相关术语网站：万维网上相关网页的集合网页：文件后缀名通常为*.html或*.htm的页面HTML：用于制作网页的超文本标记语言静态网页：只能浏览，不能实现客户端和服务器端的交流互动动态网页：网站页面随用户的输入而变化，能与客户端交流互动1.ASP.NET概述…39…基于公共语言运行时(CLR)基础上的程序开发架构创建动态Web页的服务器端新技术大量工具箱和函数库的支持多语言支持ASP.NET优势…40…ASP.NETVB.NETC#JScript其他语言Web应用程序支持使用和创建Web服务：Web服务通过标准Web协议访问的可编程的应用程序逻辑改进的安全性：ASP.NET与IIS、.NET框架和操作系统所提供的基础安全服务配合使用，共同提供一系列身份验证和授权机制更高的可扩展性：可在单独的机器或数据库的单独进程中维护会话状态，从而允许跨服务器的会话状态管理：通过cookie、查询字符串、应用程序、Session等进行有效的状态管理配置和部署：将配置信息存储在基于XML的配置文件中，使得ASP.NET应用程序更易于部署ASP.NET功能…41…配置IIS设置:IIS(InternetInformationServices,Internet信息服务)-
基于Windows服务器的服务，可帮助在任何Intranet或Internet上发布信息2.安装IIS&配置IIS…42…从“控制面板”中安装IIS单击选择IIS并单击“下一步>”按钮配置属性虚拟目录是由Web
服务器使用的逻辑目录名，与服务器上的物理目录相对应配置IIS…43…使用IIS
创建虚拟目录步骤1：在“默认Web站点”中创建一个虚拟目录。步骤2：给出此虚拟目录的别名。步骤3：选择虚拟目录的位置。步骤4：为此目录选择适当的访问权限。IIS的安装与配置…44…Web.config用来储存Web应用程序的配置信息特定应用程序配置：定义全局常量信息，如配置Access、SQLserver数据库连接<appsettings><addkey=”accessCon”value=”
Provider=Microsoft.Jet,OLEDB.4.0;DataSource=|Dir|db.mdb”><addkey=”sqlCon”
value=”DataSource=(local);Database=database;Uid=sa;Pwd=000”></appsettings>Web.config文件配置…45…位于<system.Web>节中，控制A运行时的行为，如自定义错误页、配置Session变量、全球化设置<system.web><customErrors
mode="on"
defaultRedirect="error.aspx"><sessionStatemode=“InProc”timeout=“10”/><globalization
fileEncoding="gb2312"
requestEncoding="gb2312"
responseEncoding="gb2312"
culture="zh-CN"/></system.web>配置节设置…46…ASP.NET文件的体系结构3.ASP.NET的工作原理…47…文件扩展名说明.aspx用于创建网页和对网页进行编程的核心文件类型.aspx.cs由ASPX或ASCX文件继承的C#代码文件.ascx指明一个ASP.NET用户定义控件.asax包含ASP.NET应用程序级事件的事件语法.asmx供宿主Web服务在本地或远程使用.config配置文件，用于设置应用程序的各种属性.htm标准HTML文件，包含静态元素和内容页面访问运行机制客户端与服务器…48…查询服务器上的网页解释.aspx
页将页面内容编译为中间语言(IL)
存储已预编译页面的本机代码版本存储一些项目，以降低重建成本。存储整个页面，包括对象和数据脚本分为服务器脚本和客户端脚本脚本部分
…49…脚本部分服务器端脚本客户端脚本由服务器执行由浏览器执行C#VBJscriptASP.NET窗体（可视化组件与引用程序分离）4.WEB窗体页…50…Default.aspxDefault.aspx.csWebForm编程逻辑（代码隐藏）.aspx.cs文件可视化组件.aspx文件浏览器中的用户界面用户界面设计用户界面
…51…设计窗口控件放置在设计窗口中的控件浏览器窗口中的用户界面<%@
Page
Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_D
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2024至2030年中国防盗卡箍阀数据监测研究报告
- 2023年日用及医用橡胶制品项目综合评估报告
- 2024至2030年中国百香鹅数据监测研究报告
- 2024至2030年中国水晶塔模型行业投资前景及策略咨询研究报告
- 2024至2030年中国旋风分离式粉末回收设备数据监测研究报告
- 2024至2030年中国工艺车件数据监测研究报告
- 2024至2030年中国四管塔行业投资前景及策略咨询研究报告
- 中华民族现代文明有哪些鲜明特质？建设中华民族现代文明的路径是什么？参考答案三
- 《运动规律人·走路》课件
- 内蒙古巴彦淖尔市(2024年-2025年小学五年级语文)人教版随堂测试（下学期）试卷及答案
- 海洋工程柔性立管发展概况
- 正确认识疼痛ppt课件
- 人教版PEP六年级英语上册期末试卷
- 真空加压油淬炉操作规程
- 小学六年级家长会PPT课件.ppt
- 服装英语：服装专业单词汇总3
- 二沉池施工方案
- 探源民国时期的金融改革历史
- EN331气阀标准
- 文件管理系统毕业设计论文
- 钢筋混凝土工程施工及验收规范最新（完整版）
评论
0/150
提交评论