《ASP NET》课件第二章 Html、javascript和css基础_第1页
《ASP NET》课件第二章 Html、javascript和css基础_第2页
《ASP NET》课件第二章 Html、javascript和css基础_第3页
《ASP NET》课件第二章 Html、javascript和css基础_第4页
《ASP NET》课件第二章 Html、javascript和css基础_第5页
已阅读5页，还剩43页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

本章知识想把第一章所述的系统自行开发出来，还是有不少需要学习和提高的地方。下面，让我们首先从最基础的内容开始学习。第一个项目就是Html，这是开发Web程序的最基础的知识其次是javascript，这是界面客户端交互性的基石再次是css，这是让界面美观有序的基本技能2.1Html基础2.1.1概述2.1.2常见的标签介绍2.1.3网页布局2.1.4表单2.1.1Html概述HTML是超文本标记语言(HyperTextMarkupLanguage)的英文缩写，它不是编程语言，只是一种标记语言。HTML使用标记标签来描述网页。HTML标签(HTMLtag)是由尖括号包围的关键词，比如<html>，大部分HTM标签是成对出现的，比如<p>和</p>，标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签。也有少部分是单个标签，如换行符<br/>。HTML文档就是通常所说的网页，它包含HTML标签和内容。网页浏览器（如IE、360浏览器等）的作用是读取HTML文档，并以网页的形式显示。HTML标签不会显示在浏览器中，只在后台起到解释作用。下面是一个简单的案例（大家可以把它复制到一个文本文件中，并将该文本文件的后缀从txt修改为htm。然后通过IE浏览器打开查看效果，后面的案例也可以都这样操作）。2.1.1Html概述<html><head><ttitle>我的第一个网页</title></head><body><h1>MyFirstHeading</h1><p>Myfirstparagraph.</p></body></html>2.1.2常见标签<html>元素，网页全局框架<html><body><p>Thisismyfirstparagraph.</p></body></html>2.1.2常见标签<body>元素，网页的主体<body><p>Thisismyfirstparagraph.</p></body>2.1.2常见标签<head>元素，网页的头部<head>元素是所有头部元素的容器。<head>内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。在html文档中，<head>与<body>平级，二者都是<html>的下级。以下标签都可以添加到head部分：<title>、<base>、<link>、<meta>、<script>以及<style>。<html><head></head><body><p>Thisismyfirstparagraph.</p></body></html>2.1.2常见标签<title>元素，网页的标题<title>标签定义文档的标题。title元素在所有HTML/XHTML文档中都是必需的。它能够：定义浏览器工具栏中的标题；提供页面被添加到收藏夹时显示的标题；显示在搜索引擎结果中的页面标题。一个简化的HTML文档如下：<html><head><title>Titleofthedocument</title></head><body>Thecontentofthedocument......</body></html>2.1.2常见标签<p>元素，引入段落<p>Thisismyfirstparagraph.</p>这个<p>元素定义了HTML文档中的一个段落，拥有一个开始标签<p>，以及一个结束标签</p>。元素内容是：Thisismyfirstparagraph。2.1.2常见标签<h1>-<h6>元素，引入标题HTML标题(Heading)是通过<h1>-<h6>等标签进行定义的。实例如下：<h1>Thisisaheading</h1><h2>Thisisaheading</h2><h3>Thisisaheading</h3>2.1.2常见标签<a>元素，引入超级链接HTML链接是通过<a>标签进行定义的。实例如下：<ahref="">百度搜索</a>2.1.2常见标签<img>元素：引入图像HTML图像是通过<img>标签进行定义的。实例如下：<imgsrc="test.jpg"width="104"height="142"/>注意：此处需要在网页的同一个目录下准备一张名为“test.jpg”的图像2.1.2常见标签<table>元素：引入表格表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母td指表格数据（tabledata），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。<tableborder="1"><tr><td>row1,cell1</td><td>row1,cell2</td></tr><tr><td>row2,cell1</td><td>row2,cell2</td></tr></table>2.1.2常见标签如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性border来显示一个带有边框的表格：<tableborder="1"><tr><td>Row1,cell1</td><td>Row1,cell2</td></tr></table>2.1.2常见标签表格的表头使用<th>标签进行定义。大多数浏览器会把表头显示为粗体居中的文本：<html><head></head><body><tableborder="1"><tr><th>Heading</th><th>AnotherHeading</th></tr><tr><td>row1,cell1</td><td>row1,cell2</td></tr><tr><td>row2,cell1</td><td>row2,cell2</td></tr></table></body></html>2.1.2常见标签<ul>元素，引入无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于<ul>标签。每个列表项始于<li>。<ul><li>Coffee</li><li>Milk</li></ul>2.1.2常见标签<ol>元素，引入有序列表同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。<ol><li>Coffee</li><li>Milk</li></ol>2.1.2常见标签<dl>元素，引入自定义列表自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。<dl><dt>Coffee</dt><dd>Blackhotdrink</dd><dt>Milk</dt><dd>Whitecolddrink</dd></dl>2.1.3网页布局div元素是用于分组HTML元素的块级元素。下面的例子使用五个div元素来创建多列布局：案例

网页布局示例演示，并讲解2.1.3网页布局使用HTML<table>标签是创建布局的一种简单的方式。可以使用<div>或者<table>元素来创建多列。CSS用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。下面的例子使用三行两列的表格-第一和最后一行使用colspan属性来横跨两列：案例

表格布局示例，讲解并演示2.1.4表单文本域（TextFields）当用户要在表单中键入字母、数字等内容时，就会用到文本域。<form>Firstname:<inputtype="text"name="firstname"/><br/>Lastname:<inputtype="text"name="lastname"/></form>2.1.4表单单选按钮（RadioButtons）当用户从若干给定的的选择中选取其一时，就会用到单选框。<form><inputtype="radio"name="sex"value="male"/>Male<br/><inputtype="radio"name="sex"value="female"/>Female</form>2.1.4表单复选框（Checkboxes）当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。<form><inputtype="checkbox"name="bike"/>Ihaveabike<br/><inputtype="checkbox"name="car"/>Ihaveacar</form>2.1.4表单表单的动作属性（Action）和确认按钮当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。<formname="input"action="xxx.aspx"method="get">Username:<inputtype="text"name="user"/><inputtype="submit"value="Submit"/></form>假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到"xxx.aspx"的页面。由xxx.aspx页面负责处理输入的数据。2.2javascript基础2.2.1基本语法2.2.1几个小案例2.2.2如何在页面上嵌入javascript2.2.3javascript综合案例2.2.1基本语法变量数据类型

重点强调无类型选择结构：If、Switch、For循环、while循环、do/while循环Break语句结合教材上的代码讲解2.2.2几个小案例点击事件-案例

事件响应改变文字-案例

改变文字灯泡开光事件-案例

灯泡开关2.2.3如何在页面上嵌入javascript<head>中的JavaScript函数下列代码中，一个JavaScript函数放置到HTML页面的<head>部分。该函数会在点击按钮时被调用：案例head中嵌入javascript2.2.3如何在页面上嵌入javascript<body>中的JavaScript函数这个案例中，我们把一个JavaScript函数放置到HTML页面的<body>部分。该函数会在点击按钮时被调用：案例body中嵌入javascript2.2.3如何在页面上嵌入javascript外部的JavaScript可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码，是一种通用代码的开发方法。外部JavaScript文件的文件扩展名是.js，可以通过.net工程中添加新项来制作，如下图：如需使用外部文件，请在<script>标签的"src"属性中设置该.js文件：<html><body><scriptsrc="myScript.js"></script></body></html>提示：外部脚本js文件中不能包含<script>标签。2.2.4javascript综合案例DOM案例1深刻诠释了如何把网页控件本身作为参数传递，并利用不同事件进行控制。案例DOM案例1DOM案例2诠释了如何把dom、事件响应和css进行结合。案例DOM案例22.3CSS基础2.3.1CSS样式表的三种嵌入形式2.3.2CSS基本语法2.3.3CSS高级语法2.3.4ID选择器2.3.5类型选择器2.3.1CSS样式表的三种嵌入形式外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部：<head><linkrel="stylesheet"type="text/css"href="mystyle.css"/></head>浏览器会从文件mystyle.css中读到样式声明，并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的html标签。样式表应该以.css扩展名进行保存。下面是一个样式表文件的例子：hr{color:sienna;}p{margin-left:20px;}body{background-image:url("images/back40.gif");}2.3.1CSS样式表的三种嵌入形式内部样式表当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style>标签在文档头部定义内部样式表，就像这样:<head><styletype="text/css">hr{color:sienna;}p{margin-left:20px;}body{background-image:url("images/back40.gif");}</style></head>2.3.1CSS样式表的三种嵌入形式内联样式由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style属性可以包含任何CSS属性。本例展示如何改变段落的颜色和左外边距：<pstyle="color:sienna;margin-left:20px">Thisisaparagraph</p>2.3.1CSS样式表的三种嵌入形式多重样式如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。例如，外部样式表拥有针对h3选择器的三个属性：h3{color:red;text-align:left;font-size:8pt;}2.3.1CSS样式表的三种嵌入形式而内部样式表拥有针对h3选择器的两个属性：h3{text-align:right;font-size:20pt;}2.3.1CSS样式表的三种嵌入形式假如拥有内部样式表的这个页面同时与外部样式表链接，那么h3得到的样式是：color:red;text-align:right;font-size:20pt;即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。2.3.1CSS样式表的三种嵌入形式案例

lesson3-test1.htm案例

lesson3-test1.css案例Internalstylesheet的案例2.3.2CSS基本语法CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。selector{declaration1;declaration2;...declarationN}选择器通常是您需要改变样式的HTML元素。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（styleattribute）。每个属性有一个值。属性和值被冒号分开。selector{property:value}2.3.2CSS基本语法下面这行代码的作用是将h1元素内的文字颜色定义为红色，同时将字体大小设置为14像素。在这个例子中，h1是选择器，color和font-size是属性，red和14px是值。h1{color:red;font-size:14px;}下面的示意图为您展示了上面这段代码的结构：2.3.2CSS基本语法多重声明：提示：如果要定义不止一个声明，则需要用分号将每个声明分开。p{text-align:center;color:red;} 建议每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：p{text-align:center;color:black;font-family:arial;}2.3.2CSS基本语法案例CSS基本语法案例2.3.3CSS高级语法选择器的分组你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。h1,h2,h3,h4,h5,h6{color:green;}2.3.3CSS高级语法继承及其问题根据CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则：body{font-family:Verdana,sans-serif;}根据上面这条规则，站点的body元素将使用

人人文库> 全部分类> 教育资料 > 中学教育

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论