华为高校内容组出版 张宇老师 第一章 WEB简史
第一节 Web的诞生
Internet
中文译名为因特网，又叫国际互联网，由所有使用公共语言互相通信的计算机连接而组成的全球网络。历史
起源 20世纪60年代末，冷战时期，美国由国防部高级研究计划局（ARPA）建设了一个军用网叫阿帕网（ARPAnet）.其于1969年启用，仅连接了4台计算机，这就是因特网的前身。 发展 1992年，美国IBM,MCI,MERIT三家公司联合组建了一个高级网络服务公司（ANS）,建立了一个新的网络，叫做ANSnet,从而使因特网走向商业化。 WWW WWW是World Wide Web的缩写，也可以写为W3,中文名为外围网，是集文本，声音，图像，视频等多媒体信息于一身的全球信息资源网络。用户通过浏览器在3W中搜索和浏览自己感兴趣的所有信息。第二节 W3C
W3C
W3C的成立 1944年10月，Tim Berners-Lee在麻省理工学院创立了World Wide Web Consortium,中文名为万维网联盟，该联盟简称为W3C，是Web技术领域最具权威和影响力的国际中立性技术标准机构。 主要工作 W3C最重要的工作是发展Web规范，这些规范描述了Web的通信协议（比如HTML和XHTML）和其他的构建模块。 成员机构W3C 由设立在美国麻省理工大学，欧洲数学与信息学研究联盟，日本庆应大学和中国北京航空航天大学四个全球总部的全球团队联合运营。
Tim Berners-Lee (蒂姆·伯纳斯·李)，万维网的发明者，南安普顿大学与麻省理工学院教授。
第三节 网站
网站
Website中文名为网站，是指在Internet上根据一定的规则，使用HTML等工具制作的用于展示特定内容相关网页的集合。 人们可以通过网站发布自己想要公开的资讯，或利用网站提供相关的网络服务。 网站是在互联网上拥有域名或地址并提供一定网络服务的主机. 是存储文件的空间，以服务器为载体，通过浏览器等进行访问，查找文件，也可通过远程文件传输（FTP）方式上传，下载网站文件。网址
在浏览器中输入网站的地址就可以打开想要访问的网站，这个网站的地址称之为URL,中文为统一资源定位符，简称网址。 URL格式 协议://主机地址+目录路径+参数常用协议
http协议：超文本传输协议，用于从万维网服务器传输超文本到本地浏览器的传输协议。 ftp协议：文件传输协议，通过FTP访问服务器上的文件。 file协议：用于访问本地计算机中的文件。第四节 WEB浏览器
浏览器
是一个显示网站服务器或档案系统内的HTML文件，并让用户与这些文件互动的软件。浏览器内核
负责对网页语法进行结束，浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。常见浏览器
IE浏览器：由微软公司出品，采用Trident内核 Chrome浏览器：由谷歌公司出品，采用Webkit内核，后换成Blink内核。 Firfox浏览器：由Mozilla公司出品，采用Gecko内核。 Safari浏览器：由苹果公司出品，采用Webkit内核 Opera浏览器：由Opera公司出品，采用Persto内核chrome
使用V8引擎，目标是提升稳定性，速度和安全性，并拥有简洁有效的使用界面。 官网：https://www.google.cn/intl/zh-CN/chrome第五节 Web服务器
Web服务器
Web服务器主要提供网上信息浏览服务，Web服务器可以解析HTTP协议，当Web服务器接收到一个HTTP请求时， 会返回一个HTTP响应，这样客户端就可以从服务器上获取网页内容，包括CSS,JS,音频，视频等资源。第二章 初识HTML
第一节 WEB开发
Web开发
主要分为前端开发和后端开发两部分，前端更侧重于页面的展示与客户的交互，后端更侧重于数据的处理与服务的访问。前端开发
前端指的是直接与客户接触的网页，网页上通常有HTML,CSS,Javascript等内容。后端开发
指的是程序，数据库和服务器层面的开发。第二节 WEB标准
WEB标准
Web应用开发需遵循的标准叫Web标准.这里的Web标准由一系列标准的集合. 网页主要由三部分组成：结构标准（XML,HTML和XHTML),表现标准（CSS),行为标准（DOM,Javascript)HTML
用来构成网页的内容，内容就是网页制作者放在页面上想让用户浏览的信息，例如文字，图片，视频等。即用户定义网页的内容。CSS
网页的样式展现，即内容的表现形式，例如字体颜色，背景样式，标题大小等。Javascript
用来定义网页上的交互，控制网页的行为，例如弹出弹框，页面打开关闭，输入内容的提示等。第三节 开发工具
编辑器 Visual Studio Code是微软推出的针对web开发的代码编辑器。
优势
免费 高性能 自定义配置 代码提示功能强大 方便插件扩展第四节 HTML发展史
HTML叫超文本标记语言（HyperText Markup Language),是用来构建网页的一种标记语言。
HTML历史
1993年由互联网工程工作小组（IETF)发布工作草案 1995年发布HTML2.0版本 1997年1月14日由W3C发布HTML3.2版本 1997年12月18日由W3C发布HTML4.0版本 1999年由W3C发布HTML4.01版本 2000年由W3C发布XHTML1.0版本，一种更严格的HTML代码 2014年W3C发布HTML5版本。HTML和XHTML区别
XHTML是可扩展超文本标记语言，是一种更严格，更纯净的HTML语言 XHTML元素必须被正确地嵌套 XHTML元素必须被关闭 标签名必须用小写字母 XHTML文档不许拥有根元素HTML的语义化
HTML5新增加了很多语义化标签，不同HTML标签代表了不同的网页内容优势
语义化HTML会使HTML结构变的清晰，有利于代码的维护 有利于搜索引擎抓取 语义化使代码仍具可读性 语义化会使HTML代码变的更简洁，提高页面加载速度 语义化有助于屏幕阅读器等设备的识别第五节 HTML的标签
标签
HTML是由一系列的标签组成的，标签由尖括号和他们中间的字母和数字组成。如<h1>标签种类
单标签：只有一个标签就能表达完整的含义 例如：<input/> <img/> 双标签：由开始和结束标签一起组成 例如：<div> </div> <span></span>元素
由标签以及起始标签和结束标签之间的文本组成。 一对标签包含的所有内容，其中元素的内容是指开始标签和结束标签之间的内容。 例如：<div>你幸福吗？</div>属性
标签可以有很多属性，属性总是在开始标签中定义。 以名值对的形式出现，其中属性值以双引号包裹。 例如：<div class="name">我姓张</div>第三章 HTML常用标签
第一节 基本结构
HTML基本结构
一个<html></html>内包含 在最前面加上文档声明标签<!doctype> 一个文档头标签<head></head> 一个文档主体标签<body></body>(是可见的页面内容)组成. <!doctype html> <html lang="en"> <head> <title>HTML文档基本结构</title> <head> <body> <div>我是一只小鸭子</div> <body> </html>第二节 标题
标题元素
<h1>~<h6>标签用于定义标题，其中<h1>的重要性最高，<h6>重要性最低。 <h1>标签通常用于最顶层的标题 一个HTML文档之中一般只有一个<h1>标题 标签及其中间的内容统称为元素 <h1>Hello World!</h1>第三节 段落
段落元素
<p>标签用于定义段落，浏览器会自动在其前后创建一些空白 <p>中的文字行数取决于浏览器窗口的宽度 <p>中的连续空格最终都将解析成一个空格第四节 结构标签
Div标签
div是division的含义，用来划分区域，代表网页中的块，所以一般叫它块标签 div标签通常用于包围大块内容，它没有任何特殊的含义 div适合作为最通用的页面容器 div是块级元素span标签
span是内联标签，用在一行文本中，用来修饰文字 span是内联元素第五节 链接
链接
链接是HTML页面的非常重要的一环，可使页面与其他页面建立联系。链接标签
<a>标签是anchor的缩写，用于定义网页链接。链接属性
href属性表示链接的地址，可以是相对地址或绝对地址。 target属性表示点击链接后打开的方式，默认值为"_self",代表在当前窗口打开新链接，若设置"_blank"则代表在新的窗口中打开。 <a href="https://www.baidu.com">这是一个链接</a>适用于大多数 HTML 元素的属性：
class 为html元素定义一个或多个类名（classname）(类名从样式文件引入) id 定义元素的唯一id style 规定元素的行内样式（inline style） title 描述了元素的额外信息 (作为工具条使用)HTML注释
<!-- 这是一个注释 -->第六节 图片
图片标签
img标签用于定义一张图片，属于单标签结构，有两个属性，src代表图片的地址，alt属性代表图片无法显示使得替代文本。 图片的地址可以使用相对路径，也可使用绝对路径。 src属性表示链接的地址，可以是相对地址或绝对地址。 alt属性不要省略，目的是为了更好的兼容无图浏览器，图片会提示成alt属性内的文字。 在img标签上，还可以通过增加height属性和width属性来设置图片的宽度和高度。 样例 <img src="abc.jpg" alt = "样例" width="104" height="142" />第七节 列表
无序列表
使用<ul>标签定义无序列表，<li>标签定义列表项，无序列表即列表项内容没有前后顺序。 可以在ul标签上使用type属性定义图形符号的样式，当属性值为disc时，显示为点；值为square时，显示为块；值为circle时，显示为圆。有序列表
使用<ol>标签定义，<li>标签定义列表项。 有序列表前缀通常为数字或字母。自定义列表
使用<dl>标签定义自定义列表，内部可以有多个列表项，每个列表项用<dt>定义标题，用<dd>定义列表项。 <dl>标签定义了自定义列表（definition list） <dl>标签用于结合<dt>(定义列表中的项目）和<dd>(描述列表中的项目）第四章 表格标签
第一节 表格标签
表格元素
表格用<table>标签定义，里面由若干行和列的单元格组成。 在表格元素中，<tr>表示表格中的一行，<td>表示列。 表格可以定义标题，用<caption>标签定义。结构
<thead><tbody><tfoot>分别定义表格的头部，主体，底部。第二节 行
行标签
使用,其内部可以使用，表格的第一行标签。
第三节 列
列标签
<td>标签常用属性 colspan用于定义单元格跨行 rowspan用于单元格跨列。 align/valign="center"/"right"/"left",表示行或列单元格内容居中/左/右。 标签属性，border表示添加图框，cellspacing表示表格线的宽度设置，cellpadding表示表格内容与边线间距。第五章 表单
第一节 表单标签
表单元素
<form>标签定义表单，两个重要属性action和method.action定义表单提交的地址，method定义表单提交的方式。 表单提交方式，get和post. 其他的表单控件元素必须放在form标签内部。第二节 input
表格元素
input是一个单标签元素，属性type表示input的表单类型，input标签通过type来定义不同的表单控件。 单文本框：可输入一行文本的表单控件 例如：<input type="text"/> 单选按钮：具有相同name属性的单选按钮只能选择一个。 例如：<input type="radio"/> 多选按钮：可以选中多个的选择框 例如：<input type="checkbox"/> 按钮：普通按钮 例如：<input type="button"/> 提交按钮：会触发将表单数据提交到服务器的功能 例如：<input type="submit"/> 重置按钮：会清除表单中的所有数据，恢复表单中的原始值 例如：<input type="reset"/> 文件上传按钮：用于文件上传 例如：<input type="file"/>第三节 select
select元素
<select>用来定义列表，<option>用来定义列表项。示例：
<select name="course"> <option value="Math">数学</option> <option value="Chinese">语文</option> <option value="English">英语</option> </select>扩展
HTML 格式化标签
HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式，如：粗体 or 斜体。 这些 HTML 标签被称为格式化标签 <b> 定义粗体文本 <em> 定义着重文字 <i> 定义斜体字 <small> 定义小号字 <strong> 定义加重语气 <sub> 定义下标字 <sup> 定义上标字 <ins> 定义插入字 <del> 定义删除字HTML “计算机输出” 标签
<code> 定义计算机代码 <kbd> 定义键盘码 <samp> 定义计算机代码样本 <var> 定义变量 <pre> 定义预格式文本HTML 引文, 引用, 及标签定义
<abbr> 定义缩写 <address> 定义地址 <bdo> 定义文字方向 <blockquote> 定义长的引用 <q> 定义短的引用语 <cite> 定义引用、引证 <dfn> 定义一个定义项目。