1.网站基本介绍【了解】
| No. | 概念 | 英文 | 说明 |
|---|---|---|---|
| 1 | 输入 | input | 向计算机输入数据，例如鼠标或键盘操作 |
| 2 | 输出 | output | 计算机展现结果，显示器显示 |
| 3 | 交互 | interactive | 交流互动（输入+输出） |
| No. | 概念 | 英文 | 说明 |
|---|---|---|---|
| 1 | 服务器端 | server | 提供计算服务的机器 |
| 2 | 客户端 | client | 为客户提供本地服务的程序 |
| 3 | 浏览器 | browser | 显示网页服务器或者文件系统的HTML文件，并让用户与这些文件交互的一种客户端软件 |
| 4 | 网页 | page | HTML文件 |
| 5 | 网站 | site | 展示特定内容相关网页的集合 |
| 6 | 请求 | request | 客户端发向服务器端的数据(url) |
| 7 | 响应 | response | 服务器端发向客户端的数据(html文件) |
B/S = browser + server
C/S = client + server
1.1 服务器【了解】
| No. | 分类 | 说明 |
|---|---|---|
| 1 | 入门级服务器 | PC |
| 2 | 工作组服务器 | 低档服务器(连接100个左右) |
| 3 | 部门级服务器 | 中档服务器(连接100个左右) |
| 4 | 企业级服务器 | 高档服务器 |
1.2 客户端【了解】
1.3 浏览器【了解】
1.4 网站&网页【了解】
2.网站分类【了解】
| No. | 分类 | 说明 | 举例 |
|---|---|---|---|
| 1 | 博客 | 个人管理、不定期张贴新的文章的网站 | 新浪博客 网易博客 |
| 2 | 论坛 | 获得各种信息服务、发布信息 | 知乎 天涯论坛 新浪论坛 赶集网 58同城 |
| 3 | 门户网站 | 提供综合性互联网信息资源 | 谷歌 雅虎 百度 新浪、网易、搜狐、腾讯 |
| 4 | 企业网站 | 政府企业网络营销和形象宣传 | 政府官网、企业官网 |
| 5 | 行业网站 | 行业及企业提供服务 | 携程、阿里巴巴(天猫、淘宝) |
3.网络广告的盈利方式【了解】
|No.|方式|英文简写|计算依据|举例|
|:-:|:-|:-|:-|
|1|每千人成本| CPM(Cost Per Mille，或者Cost Per Thousand;Cost Per Impressions) |主页浏览人数|爱奇艺|
|2|每点击成本| CPC(Cost Per Click;Cost Per Thousand Click-Through)| 点击次数 |百度推广|
|3|每购买成本| CPP(Cost Per Purchase) | 在线交易 | 返利网|
4.网站开发分工【了解】
|分工|职责|
|:-|
|项目经理|统筹|
|美工|设计psd|
|前端程序员|制作页面|
|后台程序员|开发网站程序|
|测试|测试程序|
5.前端开发工作【了解】
- 页面制作
- 效果制作
- 添加程序
6.课程介绍【了解】
| No. | 名称 | 作用 |
|---|---|---|
| 1 | HTML | 结构 |
| 2 | CSS | 表现 |
| 3 | Javascript | 行为 |
| 4 | JQuery | 轻量级JavaScript库 |
| 5 | Ajax | 异步通信技术 |
| 6 | HTML5 | HTML最新版本 |
| 7 | CSS3 | CSS最新版本 |
| 8 | Bootstrap | 前端UI框架 |
| 9 | AngularJS | 下一代Web应用开发 |
7. HTML是什么?【熟悉】
7.1 简介
- 超文本标记语言 (Hyper Text Markup Language)
- 超文本：超级文本 vs 文本(word,txt,...)
- 标记语言：标记+语言
7.2 语法【掌握】
- 标记标签 (markup tag)
双标签：<标签名>文本内容</标签名>
单标签：<标签名 />
说明：-
尖括号包围的标签名。例如：
<html> -
成对出现=开始标签+结束标签。例如：
<html></html> - 空标签。例如：
<br />
-
尖括号包围的标签名。例如：
HTML的标签名可以是大写(
HTML)也可以是小写(html)，甚至是大小写混写(HtML)，一般都是使用全部小写。
空标签后面的/在HTML中可以省略，在XHTML中不能省略。
- 版本说明【了解】
- HTML4.01
- XHTML
- HTML5
HTML标准由万维网联盟（W3C）制定。
7.3 基本结构【掌握】
<html>
<head>
<title>Hello World</title>
</head>
<body>
Hello World
</body>
</html>
说明：
-
html：网页主体，所有内容包含在里面 -
head：文档的信息，不可见的页面内容 -
title：网页标题，显示在浏览器的页签上 -
body：可见的页面内容，显示在浏览器页面中
html、head和body是可以省略不写的，浏览器也会正常显示。但是规范的网页开发必须有这三个标签。
7.4 第一个网页【掌握】
- 编写第一个HTML
- 步骤一：启动记事本
开始->所有程序->附件->记事本 - 步骤二：保存 HTML文件(
.html扩展名) - 步骤三：用记事本来编辑 HTML
- 步骤四：在浏览器中运行这个 HTML 文件
HTML文件的后缀名可以是
.html也可以是.htm，现在通常都使用.html。
7.5 HTML编辑器(编辑工具)【了解】
|No.|名称|功能|收费/免费|推荐|
|:-:|:-|:-|
|1|记事本(notepad)|只能编辑|免费|不推荐|
|2|notepad++|代码高亮提示|免费|不推荐|
|3|EnEditor|代码高亮提示|免费|不推荐|
|4|Dreamware|专门用于前端开发|收费|推荐|
|5|eclipse|主要用于Java开发|免费|不推荐|
|6|Visual Studio|主要用于.Net开发|收费|不推荐|
|7|Brackets|专门用于前端开发|免费|推荐|
|8|Sublime Text|专门用于前端开发|免费|推荐|
|9|WebStrom|专门用于前端开发|收费|推荐|
|10|HBuilder|专门用于前端开发|免费|推荐|
虽然，上面有许多编辑器不推荐使用，但是在现实开发中，有时根据特定情况是必须使用的。
8.标签
8.1 标签分类【了解】
- 构成分类：单标签/双标签
- 特性分类：块标签/行内标签/行内块标签
- 作用分类：文档结构/文本/文本格式/多媒体/列表/表格/表单/容器
8.2 标签一览【了解】
HTML标签共计有87个标签，主要学习如下38个标签。
| No. | 分类 | 标签 |
|---|---|---|
| 1 | 文档结构(5个) |
html head title meta body
|
| 2 | 文本(10个) |
h1~h6 p pre hr br
|
| 3 | 文本格式(8个) |
font u i b s del ins strong em
|
| 4 | 多媒体(2个) |
img a
|
| 5 | 列表(6个) |
ol ul li dl dd dt
|
| 6 | 表格(8个) |
table tr td th thead tbody tfoot caption
|
| 7 | 表单(6个) |
form fieldset select input textarea button
|
| 8 | 容器(2个) |
div span
|
9. 文本标签【掌握】
| No. | 标签 | 说明 |
|---|---|---|
| 1 | h1~h6 |
标题 |
| 2 | p |
段落 |
| 3 | pre |
预格式文本 |
| 4 | hr |
水平线 |
| 5 | br |
折行 |
10. 文本格式标签【掌握】
| No. | 标签 | 说明 |
|---|---|---|
| 1 | font |
字体 |
| 2 | u |
下划线(underline) |
| 3 | i |
斜体(italic) |
| 4 | b |
加粗(bold) |
| 5 | s |
删除线(strike) |
标签嵌套规则【熟悉】
- 标签只能包含嵌套，不能交叉嵌套。
<b><i>包含嵌套 √ </i></b>
<i><b>交叉嵌套 × </i></b>
- 通常，块标签可以包含行内标签，但是行内标签不能包含块标签。
<h1><i>块标签包含行内标签 √ <i></h1>
<i><h1>行内标签包含块标签 × </h1></i>
- 通常，块标签与块标签并列，行内标签与行内标签并列。
<h1>标题</h1>
<p>段落<b>粗体</b><i>斜体</i></p>
文本标签 vs 文本格式标签
- 文本标签(
h1~h6,p)->块标签 - 文本格式标签(
b,u,i)->行内标签
小技能：FireFox 3D视图
如何知道HTML有哪些标签？查文档
11. 属性
- 语法【掌握】
<标签名 属性名1="属性值1" 属性名2="属性值2"></标签名>
-
font属性【掌握】
| No. | 属性 | 属性值 | 说明 |
|---|---|---|---|
| 1 | face |
字体名 | 字体 |
| 2 | color |
颜色名/颜色值 | 颜色 |
| 3 | size |
1~7 |
大小 |
- 属性规则【熟悉】
- 属性名可以大写(
COLOR)，也可以小写(color)，甚至可以大小写混写(Color)，一般情况下使用小写。 - 属性只能写在开始标签/单标签中，不能写在结束标签中。
- 在一个标签中可以写多个属性，但是属性名不能重复。
- 属性与标签名，属性与属性之间必须有空格。
- 属性值可以使用双引号包裹，也可以使用单引号包裹，甚至可以不加引号。通常情况下使用双引号。
如何知道有哪些属性？属性有哪些属性值？ 查文档
p标签与h1～h6标签的align属性
12. DW的一些常用用法【掌握】
- 新建站点
- 注释
- 代码折叠
13. 元素【掌握】
HTML 元素 HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
14.实例页面
- 新闻详情页面
如何学习HTML？
1. 标签/属性 <=>含义/效果
看到含义/效果知道使用什么标签/属性，看到标签/属性知道出现什么含义/效果。
2. 学会使用文档
在已经学会的标签/属性基础上，查看文档举一反三，了解掌握其他标签的使用方式和页面效果。
3. 单独标签单独使用，组合标签组合使用
- 单独标签：只使用一个标签(
<p>) - 组合标签：同时使用多个标签(
<html><head><body>)
学习技巧
- 照猫画虎
- 熟能生巧
- 举一反三
关于标签和属性
多用+多查
工具：金山词霸
作业
【必做】完成新闻详细页面(新闻部分)
【选做】技术调查
从文档中查出下面标签的作用，并且举例说明。
|No.|标签|说明|页面效果|
|:-:|
|1|em|-|-|
|2|address|-|-|
|3|cite|-|-|
|4|dfn|-|-|
|5|var|-|-|
