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