1 / 142

1.HTML/CSS/JavaScript 先睹为快 2.HTML 3.CSS 4.JavaScript

目录. 1.HTML/CSS/JavaScript 先睹为快 2.HTML 3.CSS 4.JavaScript. 1.1 HTML 代码. <html> <head> <title> 未使用 css ， JavaScript 的 html 网页 </title> </head> <body> <h2> 未使用 css ， JavaScript 的 html 网页 </h2> <hr> <p> 这是一个未使用 css ， JavaScript 的 html 网页 </body> </html>

malik-rodriguez
Download Presentation

1.HTML/CSS/JavaScript 先睹为快 2.HTML 3.CSS 4.JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 目录 • 1.HTML/CSS/JavaScript先睹为快 • 2.HTML • 3.CSS • 4.JavaScript

  2. 1.1 HTML代码 • <html> • <head> • <title>未使用css，JavaScript的html网页</title> • </head> • <body> • <h2>未使用css，JavaScript的html网页</h2> • <hr> • <p>这是一个未使用css，JavaScript的html网页 • </body> • </html> • 使用记事本即可编写HTML代码，扩展名是html或htm。 • 使用浏览器就可以查看其效果。

  3. 1.2 CSS代码 • <html> • <head> • <title>使用了css的html网页</title> • <style type="text/css"> • h2{ font-size:50} • p{font-size:20;font-style:italic} • </style> • </head> • <body> • <h2>使用了css的html网页</h2> • <hr> • <p>这是一个使用了css的html网页 • </body> • </html>

  4. 1.3 JavaScript代码 • <html> • <head> • <title>使用了css和JavaScript的html网页</title> • <style type="text/css"> • h2{ font-size:50} p{font-size:20;font-style:italic} • </style> • <script type="text/JavaScript"> • alert("这是JavaScript起的作用"); • </script> • </head> • <body> • <h2>使用了css和JavaScript的html网页</h2> • <hr> • <p>这是一个使用了css和JavaScript的html网页 • </body> • </html>

  5. 1.4 HTML、CSS、JavaScript的角色 • HTML：超文本标记语言。是网页设计的主要语言。无论网页是否包括动画、多媒体、图形等各种复杂的元素，其基本架构都是HTML. • CSS：层叠样式表。是目前唯一的网页排版样式标准，弥补了HTML在网页格式化方面的不足，帮助用户对页面的布局加以更多的控制。 • JavaScript用于开发Internet客户端应用程序，实现了一种实时、动态、交互的页面功能。它的出现使静态的HTML页面逐渐本客户端可做出响应的动态页面所取代。 • 可以在HTML语言中直接编写CSS和JavaScript代码，也可以独立编写。扩展名分别是.css和.js

  6. 2 HTML • 1:HTML简介 • 2:基本标记 • 3:列表list • 4:表格table • 5:表单form • 6:框架frame • 7:层div

  7. 2.1.1 HTML概念 • HTML • Hyper Text Markup Language 超文本标识语言 • 是一种用来制作超文本文档的简单标记语言。 • 用HTML编写的超文本文档称为HTML文档 • HTML文档：*.htm或*.html • 文件名区分大小写 • 浏览HTML文件的工具:浏览器 • 例：Netscape Navigator ,Microsoft IE,Mazilla FireFox

  8. 2.1.2 HTML文档的编写方法 • 手工直接编写 • 记事本等，存成.htm .html格式，要求用户必须掌握HTML • 使用可视化HTML编 辑 器 • Frontpage、Dreamweaver等,容易产生废码

  9. 2.1.3 HTML 文档结构 <html> <head> <title> my first page </title> </head> <body bgcolor="blue"> <p align="center">This is my first homepage! <hr size=7 width="75%" color="red"> <p align="right"> 这是我的第一张网页！ </body> </html>

  10. 2.1.3 HTML 文档结构 • 标记(签)是HTML语言的基本部分，比如<html>、<head>、<body>、<hr>、<p>。大多数标记总是成对出现，每一对标记一般都有一个开始的标记并且结束的标记总是在开始的标记前加一个斜杠。 • 属性：HTML标记有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。 • <p align=right color=red >my first homepage</p> • <hr size=7 align=center width="75%" color="red"> • 注意： • 标记不区分大小写。例<html><HTML>都可以 • 标记中不要有空格，否则浏览器无法识别。例< title>错误 • 任何空格和回车在代码中无效。插入空格和回车分别用<br> 和&nbsp; • 属性的值可以用双引号引起来，也可以不引，最好引起来 • 各属性之间无先后次序，属性也可省略（即取默认值）

  11. 2.1.3 HTML 文档结构-head(title) • <head>标记出现在文档的开头部分。 <head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。 1:<title> <title>标记定义HTML文档的标题。 <title>与</title>之间的内容将显示在浏览器窗口的标题栏。

  12. 2.1.3 HTML 文档结构-head(meta) 2:<meta>标记 <meta>标记定义网页的一些相关信息，例文件的关键字，作者，网页过期时间等，这些信息不会在浏览器的文档窗口显示 • <meta name="keywords" content="study,computer"> 用来标记搜索引擎在搜索你的页面时所取出的关键词。 • <meta name="author" content=“liukl"> 用来标记文档的作者。 • <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> 用来标记你的页面的解码方式。 • <meta http-equiv="refresh" content="5;URL=http://www.enet.com.cn"> 用来自动刷新网页

  13. 2.1.3 HTML 文档结构-(head)meta • 编写一个网页，要求3秒钟后自动跳转到北软教育首页。 • <html> • <head> • <title>my first page</title> • <meta http-equiv="refresh" content="3;URL=http://www.softedu.org"> • </head> • <body> • <p align=“center”>三秒钟后本网页将自动跳转到北软教育首页</p> • </body> • </html>

  14. 2.1.3 HTML 文档结构-body • <body>表明是HTML文档内容主体部分。在<body>与</body>之间，通常都会有很多其它标记；这些标记和标记属性构成HTML文档的主体部分。 • <body>自身属性主要有： • 1)bgcolor bgcolor属性标志HTML文档的背景颜色。如：bgcolor="#CCFFCC"。 • 2)background background属性标志HTML文档的背景图片。可以使用的图片格式为gif,jpg 如：background=“images/bg.gif"。 • 3)text text属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。 text定义的颜色将应用于整篇文档。

  15. 2.1.3 HTML 文档结构-body

  16. 2.2 基本 HTML 标记 • 1.标题标记<h#> • 2.文字标记 <font> • 3.段落级标记<p><br> • 4.字符级标记 • 5.水平标尺标记<hr> • 6.HTML注释<!-- --> • 6.超级链接<a> • 7.图像标记<img> • 8.移动的文字<marquee>

  17. 2.2.1 标题标记 • 可显示六种大小的标题，即<H1>到<H6>，<H1>为最大，<H6>为最小 <HTML> <HEAD> <TITLE>HTML 简介</TITLE> </HEAD> <BODY> <H1>HTML 简介</H1> <H2>HTML 简介</H2> <H3>HTML 简介</H3> <H4>HTML 简介</H4> <H5>HTML 简介</H5> <H6>HTML 简介</H6> </BODY> </HTML>

  18. 2.2.2 文字标记 • 文字属性标记 • 1.文字颜色 • <font color=#> ... </font> • #=RRGGBB 16 进制数码 • 2.文字字体 • <font face=“#”> ... </font>#=客户端可获得的字体 • 3.文字大小 • <font size=#> ... </font> • #=1, 2, 3, 4, 5, 6, 7等

  19. 2.2.3.段落级标记 • 段落标记(paragraph) <p> • 换行符标记<br> • 预格式化标记<pre>： • HTML的段落与段落之间有一定的空隔。 • 如果不希望出现空隔而只想换行的话，就要用到另一个元素，即<br>元素。 • 利用<pre>标记对网页中文字段落进行预格式化，在输入过程中，按键盘上的回车键，就可以生成一个段落。即浏览器会以文本输入格式显示 • 用三种标记分别实现登鹳雀楼的显示

  20. 2.2.4 字符级标记 • 常用字符级标记 <i>倾斜文本</i> <b>粗体文本</b> <u>下划线文本</u> <s>删除线文本</s> <em>强调文本</em> <center>居中显示文本</center> • 空格标记&nbsp;

  21. 2.2.5 水平线标记 • 水平线 <hr size = #>：设定线宽 <hr width=#>：设定线长 <hr align=#>：设定对齐方式 #=left, right <hr color=#> ：设定线的颜色 • <hr size=7 align=center width="75%" color="red">

  22. 2.2.6 HTML注释 • HTML文档可以插入注释。不但便于对程序排错，也使其他人更易读懂自己的代码 • HTML注释的格式为：<!-- 注释内容 -- >源码依然存在，不会被浏览器所解释 <BODY> <!-- 以下是程序的主体 --> • 注释语句的特点是仅用于程序中某一句或一段语句的作用说明，浏览器在执行过程中将忽略掉注释语句的内容，对其视而不见。

  23. 2.2.7 超级链接 超级链接是用锚元素<a>定义的 • 在<a>元素下，有元素属性href,href的属性值为一个URL地址 • 如：<a href="http://www.enet.com.cn/eschool">指向学院的超级链接</a> • 如：<a href="top.htm">普通超级链接</a> • 如：<a href="../pic/left.htm">普通超级链接</a> • 开一个新的(浏览器)窗口 (Target Window) <a href="URL" target=“_blank"> ... </a>

  24. 2.2.7 超级链接 超级链接的路径 • 绝对路径：指文件的完整路径，包括协议，主机地址等，一般用于网站的外部链接。 • http://www.sina.com/sports/index.html • http://127.0.0.1:8080/digitalhome/a.jpg • 相对路径：指相对于当前文件的路径，它包含了从当前文件指向目的文件的路径，一般用于网站的内部链接。

  25. 2.2.8 图像标记 • <img src=“图片名称”> • <img>的基本属性是src属性，src的属性值为所引用的图片的URL地址。 • src属性是必须的。src的URL可以是绝对地址，也可以是相对地址 • <img src="sample.jpg" width=100 height=100 > • width指定宽度，height指定高度。它们的属性值可以是象素，也可以是%。 • 定义图片替代文本的方法是： • <img src=“图片名称” alt=“这是一张图片”> • 替代文本有两个作用： • 提示：若图片下载成功，把鼠标放在图片上，会出现提示文本。 • 替代：若图片下载不成功，在图片位置出现替代文本。 • 图片的对齐方式 • <img src=“sample.jpg” align=“#” > • #=left,right,top,middle,bottom

  26. 2.2.8 图像标记 • HTML 文档中的图片 • GIF（Graphics Interchange Format ）图像 (.GIF) • 支持无损压缩 • 只支持256色 • JPEG（Joint Photographic Experts Group）图像 (.JPG) • 有损压缩 ，但这个损失是剔除一些视觉上不易察觉的部分。 • 通常用来保存超过256色的图片文件 • PNG（Portable Network Graphics ） • 新兴的网络图片格式，结合了gif和jpeg的优点。 • 可以将图片文件以最小的方式压缩而不造成图片失真 • 支持48bit的色彩。

  27. 2.2.8 图像标记 • 图像的超级链接 • 图像的超级链接是指整个图像的超级链接，当点击图像的任何部分时，都会打开这个超级链接。定义默认超级链接的方法是： • <a href=“http://www.enet.com.cn/eschool”><img src="sample.jpg" ></a> • 图像的热区链接 • 热区就是在图片中特意划分出一个热点区域。当点击图象的热区时，才会打开这个超级链接。 • 需要使用map标记指定热区。

  28. 2.2.9 移动的文字 • 基本语法 <marquee> ... </marquee> • 文字移动属性 (1)方向 ：direction=# • #=left, right,up,down (2)方式： behavior=# • #=scroll(循环), slide(只走一次), alternate(来回走) (3)循环: loop=# • #=次数；若未指定则循环不止(infinite) (4)速度: scrollamount=# (5)延时: scrolldelay=#

  29. 2.3.1 无序列表 • 无序列表由<ul>和<li>元素定义的: <ul> <li>sports</li> <li>food </li> <li>drink </li> <li>friends </li> </ul> • 无序列表的默认符号是圆点。<ul>元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有：disc(圆)、circle （圆圈）、square（方块） • 支持嵌套定义

  30. 2.3.2 有序列表 • 有序列表由<ol>和<li>定义: <ol> <li> sports</li> <li> drink</li> <li> friends</li> </ol> • <ol>元素也有自己的type属性，type属性的属性值有1、A、a、I、i等。例如，我们以A、B、C……作为列表的编号 • <ol>元素还可以定义列表的起始编号，如我们希望列表的第一个编号为5，而不是1，则需要定义<ol>元素的start属性 • 支持嵌套定义

  31. 2.4.1 表格的基本结构 <table>定义表格 <tr> <th>定义表头</th> </tr> <tr>定义表行 <td>…</td>定义单元格 </tr> …….. <tr>定义表行 <td>…</td>定义单元格 </tr> </table>

  32. 2.4.1 表格的基本结构 • <table>元素：定义一个表格。每一个表格只有一对<table>和</table>，一张页面中可以有多个表格。 • <tr>元素：定义表格的行，一个表格可以有多行，所以<tr>对于一个表格来说不是唯一的。 • <td>元素：定义表格的一个单元格。每行可以有不同数量的单元格，在<td>和</td>之间是单元格的具体内容。 • 需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。 • <th>元素：定义表格的表头行，一个表格只能有一个表头行或者没有，所以<th>对于一个表格来说是唯一的或没有。

  33. 2.4.2 表格的属性 • 表格的属性 • width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。 • height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。 • border属性：表格边线粗细 • bgcolor属性：指定表格或某一个单元格的背景颜色。 • background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址 • align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式(left,center,right)。

  34. 2.4.3 单元格的属性 • 单元格属性 • valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括： top：顶端对齐； middle：居中对齐； bottom：底端对齐; baseline：相对于基线对齐; • align属性：指定某一个单元格里的内容（文本、图片等）的水平对齐方式（left,center,right） • colspan：属性值表示当前单元格跨越几列 • rowspan：属性值表示当前单元格跨越几行

  35. 2.4.4 行的属性 • 行属性 1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包 top：顶端对齐； middle：居中对齐；bottom：底端对齐。 baseline：相对于基线对齐。 2、align属性：指定表格或某一个单元格里的内容（文本、图片等）的水平对齐方式(left,center,right) 3、height属性：指定表格中某一行的高度。单位可以是%或者象素

  36. 2.4.5 表格的嵌套 • 在<td> </td>之间插入表格，实现表格嵌套 <table border=3> <tr> <td> <table border=1> <tr><td>导航列表</td></tr> <tr><td>计算机</td></tr> <tr><td>政治</td></tr> <tr><td>军事</td></tr> <tr><td>法律</td></tr> </table> </td> <td> 正文内容 </td> </tr> </table>

  37. 2.4.5 表格的作用 • 表格是用于在 HTML 页面上设计数据和图像布局的常用工具，可使用表格来组织数据，控制页面布局 • 制作网页时，为了以一定的形式将网页中的信息组织起来，同时使网页便于阅读和页面美观，需要对页面的版式进行设计或进行页面 布局。而表格能将网页分成多个任意的矩形区域，表格是网页制作中是常用的一种简单布局工具。 • 表格的作用一般只是控制文本和图像的显示，而不显示表格的边框

  38. 2.4.6 表格举例 <TABLE BORDER = 2 BGCOLOR = lavender > <TR> <TH ALIGN = CENTER COLSPAN = 3>第一季度</TH> <TH ALIGN = CENTER COLSPAN = 3>第二季度</TH> </TR> <TR> <TD>一月</TD> <TD>二月</TD> <TD>三月</TD> <TD>四月</TD> <TD>五月</TD> <TD>六月</TD> </TR> <TR> <TD>1000</TD> <TD>550</TD> <TD>240</TD> <TD>1500</TD> <TD>2765</TD> <TD>1240</TD> </TR> <TR> <TD>3000</TD> <TD>2430</TD> <TD>2500</TD> <TD>1250</TD> <TD>900</TD> <TD>3400</TD> </TR> </TABLE>

  39. 2.5.1 表单form • HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。 • 在HTML里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。 • 表单是网页上的一个特定区域。这个区域是由一对<form>元素定义的。

  40. 2.5.2 表单举例 • 设计一个注册表单，输入姓名，年龄，密码，密码确认，电子邮件，性别，爱好，身份，个人简历，单击提交按钮提交，单击重置按钮重置。 • 姓名，年龄，电子邮件：text • 密码，密码确认：password • 性别：radio • 爱好：checkbox • 身份：select • 个人简历：textarea • 提交按钮：submit • 重置按钮：reset

  41. 2.5.2 表单举例

  42. 2.5.2 表单举例 • <form action="" method="post" name="register" > • 姓名 <input type="text" name="name" value="lkl" disabled><br> • 密码 <input type="password" name="pwd"><br> • 密码确认 <input type="password" name="confirm"><br> • 性别 <input type="radio" name="sex" value="1" checked>男 • <input type="radio" name="sex" value="2" >女<br> • 年龄 <input type="text" name="age"><br> • 电子邮件 <input type="text" name="email"><br> • 爱好<input type="checkbox" name="aihao" value=1checked>体育 • <input type="checkbox" name="aihao“ value=2>音乐 • <input type="checkbox" name="aihao“ value=3>美术<br> • 身份<select name="id"> • <option value="1">学生 • <option value="2" selected>教师 • <option value="3">解放军 • </select><br> • 个人经历<textarea rows="4" cols="50" >请输入个人简历</textarea><br> • <input type=submit name="submit" value="提交"> • <input type=reset name="reset" value="重置"> • </form>

  43. 2.5.2 表单举例

  44. 2.5.2 表单举例 • <form action="" method="post" name="register" > • <table> • <tr> • <td>姓名</td> • <td><input type="text" name="name" value="lkl" disabled></td> • </tr> • <tr> • <td>密码</td> • <td><input type="password" name="pwd"></td> • </tr> • <tr> • <td>密码确认</td> • <td><input type="password" name="confirm"></td> • </tr> • <tr> • <td>性别</td> • <td><input type=“radio” name=“sex” value=“1” checked=“checked”>男 • <input type="radio" name="sex" value="2" >女</td> • </tr> • <tr> • <td>年龄</td> • <td><input type="text" name="age"></td> • </tr>

  45. 2.5.2 表单举例 • <tr> • <td>电子邮件</td> • <td> <input type="text" name="email"></td> • </tr> • <tr> • <td> 爱好</td> • <td> <input type="checkbox" name="aihao" value=1 checked>体育 • <input type=“checkbox” name=“aihao” value=2>音乐 • <input type="checkbox" name="aihao“ value=3>美术</td> • </tr> • <tr> • <td>身份</td> • <td> <select name="id"> • <option value="1">学生 <option value="2" selected>教师 <option value="3">解放军 • </select></td> • </tr> • <tr> • <td>个人经历</td> • <td> <textarea rows="4" cols="50" >请输入个人简历</textarea></td> • </tr> • <tr align=center> • <td colspan=2 ><input type=submit name="submit" value="提交"> • <input type=reset name="reset" value="重置"></td> • </tr> • </table> • </form>

  46. 2.5.3 表单基本语法 1.表单的基本语法: <form action="url"method=* name=?>... <input type=submit> <input type=reset> </form> • action属性：用来定义表单处理程序（一个ASP、JSP等程序）的位置(相对地址或绝对地址)。 • method定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。 GET有数据量限制，POST无以上限制,以文件形式传输

  47. 2.5.3 表单基本语法 2.文本框的基本语法: <input name=? type=text value=** size=*** maxlength=?? > ?  文本框的名字 **  默认值 *** 长度 ??  最大输入字符数 3.密码框的基本语法：数据以圆点形式显示，提高密码安全性 <input name=? type=password size=*** maxlength=??>

  48. 2.5.3 表单基本语法 3.复选框的基本语法: • 在一个表单里的所有多选框可以有一个或多个被选中。 <input name=? type=checkbox value=？checked> //默认选中 <input name=? type=checkbox value=？> 4.单选框的基本语法: • 一个表单里的所有变量名相同的单选框只能够有一个被选中。 <input type=radio name=sex value=**> <input type=radio name=sex value=** checked> // 默认选中 • 各个选项的name必须一样才能达到预期效果 5.标准按钮的基本语法: <input name=? type=button value=？>

  49. 2.5.3 表单基本语法 6.提交按钮和重置按钮的基本语法: <input type="submit" value="提交" name=“B1"> <input type="reset" value="重写" name=“B2"> 7.图象域的基本语法:：相当于漂亮的submit按钮。 <input name=? type=image src=? width=? height=?> 8. 隐藏域的基本语法 隐藏域在网页中对用户是不可见的，用户单击提交按钮提交表单时，隐藏域的信息也被一起发送到服务器。 <input name=? type=hidden value=？>

  50. 2.5.3 表单基本语法 9.文本区域的基本语法: <textarea name=* rows=** cols=**> ... </textarea> 10.下拉菜单的基本语法 <select name="爱好"> <option value=1 selected >音乐 <option value=2 >美术 <option value=3>体育 </select>

More Related