文章目录
- HTML+CSS+JavaScript
- 1.1 认识网站与网页
- 1.1.1 网站,网页和主页
- 1.1.2 静态网页和动态网页
- 1.2 网页的基本元素
- 1.3 网页布局结构
- 1.4 Web标准
- 1.4.1 什么是Web标准
- 1.4.2 建立Web标准的优点
- 1.4.3 理解表现和结构和分离
- 1.5 HTML语法基础
- 1.5.1 HTML概述
- 1.5.2 HTML语法结构
- 1.5.3 HTML编写规范
- 1.5.4 HTML文档结构
- 1.6 创建HTML文档
- 1.7 网页头部标签
- 1.7.1 title标签
- 1.7.2 meta标签
- 1.7.3 link标签
- 1.7.4 script标签
- 1.7.5 案例
- 1.8 注释和特殊符号
- 1.8.1 注释
- 1.8.2 特殊符号
- 1.9 实训案例——制作宇宙商务页面版权信息
HTML+CSS+JavaScript
将网页内容,外观样式,动态效果分离
技术 | 作用 |
---|---|
HTML | 网页结构 |
CSS | 网页样式及表现 |
JavaScript | 网页行为与功能 |
1.1 认识网站与网页
1.1.1 网站,网页和主页
网站:Web Site
,已注册的域名,主页或Web服务器。
网站=网站地址(域名)+网站空间=n网页*
通过浏览器的,实现网页的跳转,从而实现浏览整个网站
网页:Web Page
,存放在Web服务器供客户端用户浏览的文件,在Internet上传输。
主页:Homepage
,输入网站地址,浏览器自动连接到这个网址所指向的网络服务器,并出现一个默认网页(index.html default.html),该网页称为主页。
1.1.2 静态网页和动态网页
静态网页:由WWW服务器不加处理通过URL直接传输给客户端。一般由HTML/CSS组成。
动态网页:根据不同的浏览者请求来显示不同的内容。
动态网页(程序运行的区域不同)=客户端动态网页+服务器动态网页
客户端动态网页:不需要与服务器进行交互。动态网页技术:JavaScript
服务器端动态网页:需要与客户端共同参与,客户通过浏览器发出的页面请求后,服务器通过URL携带的参数运行服务器端程序,产生的结果页面再返回客户端。
1.2 网页的基本元素
- 文本
- 图片和动画
GIF,JPEG和PNG - 超链接
指向另一个网页或者相同网页的不同位置 - 导航栏
引导浏览者游历站点,文本链接/图形按钮 - 交互表单
“搜索”,“注册”…等输入框 - 特效元素
1.3 网页布局结构
块级元素——快级标签
行级元素——行级标签
1.4 Web标准
1.4.1 什么是Web标准
Web标准是一系列的标准集合
包括有:
- 结构(Structure)
- 表现(Presentation)
- 行为(Behavior)
对应的标准:
-
结构化标准语言——HTML,XHTML,XML
HTML(HyperText Markup Language)
:超文本标记语言。
编写网页的主要语言
XML(The eXtensible Markup Language)
:可扩展置标语言。
最初设计目的用于弥补HTML的不足,以强大的拓展性满足网络信息发布的需要,后来逐渐被用于网络数据的转换和描述。
XHTML(The eXtensible HyperText Markup Language)
:可拓展超文本置标语言。
由于XML数据转换能力过于强大,完全可以替代HTML。但是面对已有的成千上万的站点,在HTML4的标准进行拓展得到XHTML。 -
表现标准语言——CSS
CSS(Cascading Style Sheets)
:层叠样式表。与HTML结合使用,达到分离外观和结构,使站点的访问及维护更容易。 -
行为标准语言——W3C,DOM,ECMAScript
DOM(Document Object Model)
:文档对象模型。
ECMAScript
:ECMA制作的标准脚本语言(JavaScript)。
1.4.2 建立Web标准的优点
- 增强网站用户体验
- 确保网站文档长期有效
- 简化代码
- 适用性增强
- 普及性增强
1.4.3 理解表现和结构和分离
内容:文档,图片等纯粹的数据信息本身。
结构:格式化,使其段落分明,结构得当。
表现:字体大小,正文颜色,背景修饰等艺术渲染手段
行为:对内容的交互及操作效果。
1.5 HTML语法基础
1.5.1 HTML概述
HTML百度释义
1.5.2 HTML语法结构
HTML文档(网页)=HTML标签+被标签的内容(纯文本)
- 标签:
开始标签:<标签>
结束标签:</标签>
tip:
“<”与“>”之间不留字符。
可能不用</标签>结尾,如换行标签<br/>
-
属性:
属性名=值 -
元素
包含在标签内的整体内容
1.5.3 HTML编写规范
-
标签规范
单标签,双标签都必须关闭
建议都用小写字母
可以嵌套,不能交叉
一行可以包括多个标签,但标签内的单词不能分为多行去写
换行、回车和空格在显示中是无效的 -
属性规划
不是所有的标签都有属性
属性值都要双引号括起来 -
元素
块级元素可以包含行级元素和块级元素,行级元素只能其他行级元素
有几个特殊的块级元素只能包含行级元素,不能包含块级元素。
<h1> <h2> <h3> <h4> <h5> <h6> <p> <dt>
1.5.4 HTML文档结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档标题</title>
</head>
<body>
网页内容
</body>
</html>
- HTML文档标签:文档以
<html>
开始,以</html>
结束 - HTML文档头标签
<head>
<meta charset="UTF-8">
<title>文档标题</title>
</head>
文档头部内容可以是标题名或文本文件地址、创作信息等网页信息说明。
-
文档编码
<meta charset="UTF-8">
为使浏览器正确通过解释和W3C代码校验,应该使文档的编码和实际的编码一致。 -
HTML文档主体标签
<body>
网页内容
</body>
定义网页上显示的主要内容和格式。
1.6 创建HTML文档
1.7 网页头部标签
职能:在网页的头部一般应有页面的介绍信息。例如页面标题,描述,标题,关键词,链接的CSS样式文件和客户端的JavaScript脚本文件。
页面的摘要信息=页面标题+页面描述
摘要信息的生成:
页面标题标签内容–>摘要信息的标题
页面描述标签的内容&&正文–>描述
为了使自己发布的网页能被百度、谷歌搜索引擎搜索,在制作网页时需要注意编写网页的摘要信息。
1.7.1 title标签
页面标题标签,将HTML文件的标题显示在浏览器的标题栏中,用以说明文件的用途(不显示在文本窗口中,以窗口的名称显示)
<title>标题名</title>
例如搜狗网源代码
1.7.2 meta标签
元信息标签,可重复出现在头部标签中,用以指出本页的作者、制作工具、所包含的关键字,以及其他一些描述网页的信息。
<meta name="参数" content="参数值">
name的属性有多种,分为keywords
和description
。
前者是搜索引擎网页使用的关键字,后者是搜索引擎网站的主要内容
例如搜狗网源代码
1.7.3 link标签
关联标签:用于定义当前文档与Web集合中其他文档的关系,建立一个树状链接组织。并不将其他文档实际链接到当前文档,只是提供链接该文档的一个路径,常用于链接CSS样式文件。
1.7.4 script标签
脚本标签:用于为HTML文档定义客户端脚本信息。
1.7.5 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>爱家商城</title>
<meta name="keywords" content="爱家商城,网上购物,在线支付,电子商务"/>
<meta name="description" content="爱家商城销售产品近60种,注册用户遍及全国32个省、市自治区和直辖市。我们的宗旨是“温馨家庭,从我做起”。">
</head>
<body>
网页内容
</body>
</html>
1.8 注释和特殊符号
1.8.1 注释
<!--注释内容-->
1.8.2 特殊符号
特殊符号 | 字符实体 |
---|---|
空格 | |
大于 | > |
小于 | < |
引号 | " |
版权号 | © |
1.9 实训案例——制作宇宙商务页面版权信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>版权信息</title>
</head>
<body>
<hr>
<p style="font-size: 12px;text-align: center">Copyright © 2017 宇宙商务
All rights reserved. 热线:400-111-1111</p>
</body>
</html>
运行结果:
Copyright © 2017 宇宙商务 All rights reserved. 热线:400-111-1111
更多推荐
1. 网页设计简介
发布评论