文章目录
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概述
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
2540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
