HTML+CSS+JS 入门基础ppt课件
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
</html>
9
2.1.3 HTML 文档结构
• 标记(签)是HTML语言的基本部分，比如<html>、<head>、<body>、 <hr>、<p>。大多数标记总是成对出现，每一对标记一般都有一个开始 的标记并且结束的标记总是在开始的标记前加一个斜杠。
• 属性：HTML标记有自己的相关属性，每一个属性还可以由我们网页编 制者赋一定的值。
目录
• 1.HTML/CSS/JavaScript先睹为快 • 2.HTML • 3.CSS • 4.JavaScript
1
1.1 HTML代码
• <html> • <head> • <title>未使用css，JavaScript的html网页</title> • </head> • • <body> • <h2>未使用css，JavaScript的html网页</h2> • <hr> • <p>这是一个未使用css，JavaScript的html网页 • </body> • </html>
11
2.1.3 HTML 文档结构-head(meta)
2:<meta>标记
<meta>标记定义网页的一些相关信息，例文件的关键字，作者， 网页过期时间等，这些信息不会在浏览器的文档窗口显示
<meta name="keywords" content="study,computer">
4
1.4 HTML、CSS、JavaScript的角色
• HTML：超文本标记语言。是网页设计的主要语言。无论网 页是否包括动画、多媒体、图形等各种复杂的元素，其基本 架构都是HTML.
• CSS：层叠样式表。是目前唯一的网页排版样式标准，弥补 了HTML在网页格式化方面的不足，帮助用户对页面的布局 加以更多的控制。
• JavaScript用于开发Internet客户端应用程序，实现了一种实 时、动态、交互的页面功能。它的出现使静态的HTML页面 逐渐本客户端可做出响应的动态页面所取代。
• 可以在HTML语言中直接编写CSS和JavaScript代码，也可
以独立编写。扩展名分别是.css和.js
5
• 1:HTML简介 • 2:基本标记
10
2.1.3 HTML 文档结构-head(title)
• <head>标记出现在文Hale Waihona Puke Baidu的开头部分。
<head>与</head>之间的内容不会在浏览器的文档窗口显 示，但是其间的元素有特殊重要的意义。
1:<title>
<title>标记定义HTML文档的标题。 <title>与</title>之间的内容将显示在浏览器窗口的标题栏。
<p align=right color=red >my first homepage</p> <hr size=7 align=center width="75%" color="red" >
• 注意：
标记不区分大小写。例<html><HTML>都可以 标记中不要有空格，否则浏览器无法识别。例< title>错误 任何空格和回车在代码中无效。插入空格和回车分别用<br> 和 属性的值可以用双引号引起来，也可以不引，最好引起来 各属性之间无先后次序，属性也可省略（即取默认值）
• 3:列表list • 4:表格table • 5:表单form
• 6:框架frame • 7:层div
2 HTML
6
2.1.1 HTML概念
• HTML
Hyper Text Markup Language 超文本标识语言 是一种用来制作超文本文档的简单标记语言。
用HTML编写的超文本文档称为HTML文档 HTML文档：*.htm或*.html 文件名区分大小写
Frontpage、Dreamweaver等,容易产生废码
8
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文件的工具:浏览器 例：Netscape Navigator ,Microsoft IE,Mazilla FireFox
7
2.1.2 HTML文档的编写方法
1. 手工直接编写
记事本等，存成.htm .html格式，要求用户必须掌握 HTML
2. 使用可视化HTML编 辑 器
• 使用记事本即可编写HTML代码，扩展名是html或htm。 • 使用浏览器就可以查看其效果。
2
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>
3
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>
9
2.1.3 HTML 文档结构
• 标记(签)是HTML语言的基本部分，比如<html>、<head>、<body>、 <hr>、<p>。大多数标记总是成对出现，每一对标记一般都有一个开始 的标记并且结束的标记总是在开始的标记前加一个斜杠。
• 属性：HTML标记有自己的相关属性，每一个属性还可以由我们网页编 制者赋一定的值。
目录
• 1.HTML/CSS/JavaScript先睹为快 • 2.HTML • 3.CSS • 4.JavaScript
1
1.1 HTML代码
• <html> • <head> • <title>未使用css，JavaScript的html网页</title> • </head> • • <body> • <h2>未使用css，JavaScript的html网页</h2> • <hr> • <p>这是一个未使用css，JavaScript的html网页 • </body> • </html>
11
2.1.3 HTML 文档结构-head(meta)
2:<meta>标记
<meta>标记定义网页的一些相关信息，例文件的关键字，作者， 网页过期时间等，这些信息不会在浏览器的文档窗口显示
<meta name="keywords" content="study,computer">
4
1.4 HTML、CSS、JavaScript的角色
• HTML：超文本标记语言。是网页设计的主要语言。无论网 页是否包括动画、多媒体、图形等各种复杂的元素，其基本 架构都是HTML.
• CSS：层叠样式表。是目前唯一的网页排版样式标准，弥补 了HTML在网页格式化方面的不足，帮助用户对页面的布局 加以更多的控制。
• JavaScript用于开发Internet客户端应用程序，实现了一种实 时、动态、交互的页面功能。它的出现使静态的HTML页面 逐渐本客户端可做出响应的动态页面所取代。
• 可以在HTML语言中直接编写CSS和JavaScript代码，也可
以独立编写。扩展名分别是.css和.js
5
• 1:HTML简介 • 2:基本标记
10
2.1.3 HTML 文档结构-head(title)
• <head>标记出现在文Hale Waihona Puke Baidu的开头部分。
<head>与</head>之间的内容不会在浏览器的文档窗口显 示，但是其间的元素有特殊重要的意义。
1:<title>
<title>标记定义HTML文档的标题。 <title>与</title>之间的内容将显示在浏览器窗口的标题栏。
<p align=right color=red >my first homepage</p> <hr size=7 align=center width="75%" color="red" >
• 注意：
标记不区分大小写。例<html><HTML>都可以 标记中不要有空格，否则浏览器无法识别。例< title>错误 任何空格和回车在代码中无效。插入空格和回车分别用<br> 和 属性的值可以用双引号引起来，也可以不引，最好引起来 各属性之间无先后次序，属性也可省略（即取默认值）
• 3:列表list • 4:表格table • 5:表单form
• 6:框架frame • 7:层div
2 HTML
6
2.1.1 HTML概念
• HTML
Hyper Text Markup Language 超文本标识语言 是一种用来制作超文本文档的简单标记语言。
用HTML编写的超文本文档称为HTML文档 HTML文档：*.htm或*.html 文件名区分大小写
Frontpage、Dreamweaver等,容易产生废码
8
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文件的工具:浏览器 例：Netscape Navigator ,Microsoft IE,Mazilla FireFox
7
2.1.2 HTML文档的编写方法
1. 手工直接编写
记事本等，存成.htm .html格式，要求用户必须掌握 HTML
2. 使用可视化HTML编 辑 器
• 使用记事本即可编写HTML代码，扩展名是html或htm。 • 使用浏览器就可以查看其效果。
2
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>
3
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>