一、学习目标

主要是学习web开发中的一些基本性的概念，例如b/s架构，web服务器，dns等等。同时还要学习HTML标记语言，懂得基本的HTML页面的制作。

二、互联网相关知识

在正式讲解网站开发之前，我们先了解一下软件开发行业的一些基础性的知识。只有充分了解这些知识后，在日后的开发中我们才能做到更加的游刃有余。

2.1 什么是软件？

对于没接触过软件开发的同学来说，可能会产生一个疑问，什么是软件呢，什么是c/s架构，什么是b/s架构，什么是网站开发，什么是静态网站，什么是动态网站，什么是lamp架构？带着这些疑问，欢迎大家走进我们的学习之旅。

什么是软件呢？软件就是一个可以运行在操作系统之上的工具，可以帮助人类完成一些日常生活中的事情。例如我们常见的QQ软件，wps软件，IE浏览器.....目前的软件主要分为两类类型：
系统软件：window操作系统 、Linux操作系统 、Unix操作系统 、IOS操作系统等.... 对于这些计算机来说，必须要安装这些系统软件之后，我们才可以使用计算机。没有安装系统软件的电脑被称为裸机。
应用软件：迅雷下载软件、 QQ聊天工具、飞秋.....对于这些应用软件来说，都是由程序员进行开发的，可以帮助我们处理一些日常生活中的事情。

2.2 软件体系架构

对于应用软件又可以分为两个大类：
c/s架构：c代表客户端、s代表服务器端。其主要的特点是安装和维护都是由用户来操作的。例如QQ聊天工具需要用户自己去下载，然后安装和更新。

b/s架构：b代表浏览器、s代表服务器端。其主要的特点是开发和维护都是由服务器端维护的，浏览器只负责展示。还有基于web的应用软件，例如在线OA、进销存系统.....我们常说的网站就是属于b/s架构中的一种。

2.3 b/s软件体系架构

我们学习的网站开发就是属于b/s软件体系架构，日后我们重点学习的是b/s软件体系架构，对应c/s架构体系我们不做过多的研究。对应网站开发，我们又可以分为两大类型：

静态网站：一般指的都是由html超文本标记语言书写的文件，不需要后台编程语言以及数据库参与的网站。通过超链接把页面文件关联起来。常见的文件类型后缀如.html、.htm、.shtml等。

动态网站：一般指的都是由后台编程语言书写的文件，通常情况下还需要数据库参数。常见的后缀如.php、.jsp、.asp等。

2.4 什么是上网？

就是使用电脑里面的浏览器在地址栏输入一个网站 http://www.baidu.com 然后在我们电脑上的浏览器里面会呈现一个界面，通过点击页面上的某些内容获取不同观赏体验，则为上网。

访问百度页面

2.5上网的原理是什么呢？

那么上网的原理是什么呢？我们是如何在浏览器上见到我们看到的内容呢？

上网就是请求数据，网页上的内容，怎么就被我们看见了？什么是上网？

我们先不直接解决这个问题，我们做一个小实验。我们每个人的电脑里面，都有一个神秘的文件夹：

C:\Users\asion\AppData\Local\Microsoft\Windows\Temporary Internet Files

这个文件夹叫做临时文件夹（文件夹知道存在就可以了，不用自己试着去找）。

image.png

我们打开IE浏览器，访问百度首页。结果，这个文件夹中又多了很多的内容：

image.png

通过这个实验，目前为止，我们可以得出结论，上网的时候，是有真实的、物理的文件传输的！
所以我们经常感觉第二次打开网页，比第一次快，这是因为第一次打开网页的时候，所有的图片都已经存过来了。
所以现在也能够解释，为什么每次都用360能清理一堆垃圾，释放很多硬盘空间。

我们发现，浏览了一个百度首页，就出来那么多的文件，所以现在我们的幼小的心灵中，就要有一个初步的认识，网页不是一个文件，而是一堆文件。

我们可以回答刚才的问题了，“上网”究竟是是什么？答案：上网就是请求数据，就是文件传输。

服务器上存放着网页的相关文件，包括html文件、css文件、js文件、图片等。当我们打开浏览器，输入网址，我们的计算机就会对这些文件发出HTTP请求。

服务器收到请求之后，会把这些文件通过HTTP协议，传输到我们的计算机中（保存到了刚才那个临时文件夹中）。这些文件，将在我们计算机本地的浏览器中，进行渲染、呈递。

也就是说，本来人家文件好好的在服务器上睡大觉，你一输入网址，就把这些文件传输到本地计算机来了。当这些文件在传输到自己的计算机中后，浏览器进行进行渲染，为以后显示信息。

在上面的过程中，我们提到了服务器和浏览器、http协议，那么什么是服务器呢，什么是浏览器呢....？

2.6 服务器

● 服务器就是计算机，只不过比咱们用的笔记本的配置牛逼了很多，并且24小时不断电，不关机。
● 服务器上存储着网页的相关文件。一旦有访问者浏览网站，服务器就将发送这些文件给访问者。
● 服务器一旦关机，网站就无法访问了。

image.png

image.png

2.7 浏览器

image.png

浏览器是安装在客户的电脑里面的一个软件，能够让用户上网。
浏览器有版本之分，有浏览器兼容问题，我们的课程将详细介绍浏览器兼容问题。

2.8 HTTP协议

HTTP是Hypertext Transfer Protocol的简写，翻译过来是超文本传输协议。

这是一个文件的传输协议，我们上网的时候，所有的文件都是通过HTTP这个协议，从服务器上传输到客户的电脑里面的。那么什么是协议呢？
答：协议就是双方用来通信的一个标准，需要双方进行遵守、我们日常生活中也有很多的协议，例如常见的婚前财产协议、马关协议。那么对于我们浏览器和服务器进行交互，也需要协议，不然远程服务器怎么知道浏览器需要什么东西，或者浏览器如何接受服务器返回的信息呢？这就是有名的http协议。后面的我们会专门学习http协议，这里知道即可。

现在我们必须要树立一个思想，就是每一个网址，都对应着确定的服务器上的文件。
比如网址：
http://www.baidu.com/1.html
就是服务器上面的1.html文件

http://www.baidu.com/
看似没有精确到一个文件，但是有一个规定，则浏览器默认返回的就是index.html首页文件。

http://www.baidu.com/aaa/b.html
服务器上面有一个aaa文件夹，这个文件夹里面有一个b.html文件。

服务器演示：

image.png

上面都没不是太理解，也不要着急，后面我们慢慢的就理解了，只需要记住：
访问的网页是真实物理的文件。并且一个网页是很多的物理文件组成的：html文件、图片文件、js文件、css文件。这些文件要通过特殊软件才能上传到服务器上。然后就能让用户看了。用户通过浏览器，输入网址，服务器上面的文件就会通过http请求悄悄地传输到用户的电脑中的临时文件夹中，在用户的电脑的浏览器中执行、渲染、显示。

三、静态网站开发

在我们的课程体系里面，我们先学习静态网站的开发，需要掌握那些技术呢？主要是如下技术：
html超文本标记语言：主要是用来实现页面的结构。
css层叠样式表：主要是设置页面的样式，例如页面字体的大小，颜色等。
javascript脚本语言：主要是制作页面的一些动态效果，负责和用户的交互。例如点击页面上的某处，弹出一个对话框。

3.1 认识什么是纯文本文件txt

windows中自带一个软件，叫做记事本。记事本保存的文档格式就是txt格式，就是英语text的缩写。术语上，称呼这个文件叫做“纯文本文件”。

image.png

那么什么是纯文本文件呢？
答：只能保存基本的文本信息，不能保存对文本的修饰，例如我们表示这个是标题，这个是段落，图片等信息则无法保存。我们可以和word文件做一下对比即可。发现word可以保存除了文本的基本信息，还能保存对文本信息的修饰。
纯文本文件就是这样的文件：
1） 只有文本，没有样式；
2） 用记事本等纯文本编辑器可读，不是乱码
需要注意的是我们网站开发里面的html、css、js都是纯本文的。
那么我们该如何适应记事本来书写HTML文件呢？以及什么是HTML文件呢？

3.2 HTML之hello world

HTML是英语HyperText Markup Language的缩写，超文本标记语言。是负责描述文档语义的语言。
.html就是HTML文件的后缀。

现在，来制作我们人生中第一个网页，

1. 新建一个txt文件：

   
   
   image.png

也就是说，html本质上和txt没有任何区别，他们都是纯文本文件。

2. 我们强行把这个文件的拓展名，从txt更改为html，我们会发现小图标就变成浏览器的小图标了。

   
   
   image.png

3. 在“打开方式”中，用记事本可以编辑它。
   现在要养成 编辑器里面编辑 → 保存ctrl+s → 浏览器里面刷新F5 的习惯。

   
   
   image.png

思考：什么是文件的扩展名呢？
答：就是一个文件的文件名后面，以 .(点号)开始到结尾的部分称为扩展名，通过扩展名我们可以区分出文件的类型，例如word文件，图片文件，文本文件等。同时也可以通过文件的扩展名来关联那个应用程序来处理这个文件。

注意事项：部分同学的电脑里面可能隐藏了已知文件类型的默认的扩展名，则我们需要开启文件扩展名的显示。
这里以window7作为演示。

1. 选中【组织】-->【文件夹和搜索选项】

   
   
   image.png

2. 取消【隐藏已知文件类型的扩展名】

   
   
   image.png

3.3 html到底做了什么？

在百度百科上复制一下乔布斯的个人简介信息，然后粘贴到HTML文件里面，然后使用浏览器打开，查看现象。

image.png

浏览器效果：

image.png

当我们使用浏览器打开HTML文件后，发现是所有的文字都是混做一团的。那是为什么呢？
答：纯文本txt文件是不能描述文档的语义的，文档中不知道谁是主标题，谁是副标题，谁是段落。所以html应运而生。

下面就是一个html文件的演示，就是通过html标签对儿，来给文本增加语义：

<h1>史蒂夫・乔布斯 （美国苹果公司联合创始人）简介</h1>

<h2>个人信息</h2>

<p>史蒂夫・乔布斯[1]  （Steve Jobs，1955年2月24日―2011年10月5日[2]  ），出生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。[3] 
1976年4月1日，乔布斯签署了一份合同，决定成立一家电脑公司。[1]  1977年4月，乔布斯在美国第一次计算机展览会展示了苹果Ⅱ号样机。1997年苹果推出iMac，创新的外壳颜色透明设计使得产品大卖，并让苹果度过财政危机。[4]  2011年8月24日，史蒂夫・乔布斯向苹果董事会提交辞职申请。[5] 
乔布斯被认为是计算机业界与娱乐业界的标志性人物，他经历了苹果公司几十年的起落与兴衰，先后领导和推出了麦金塔计算机（Macintosh）、iMac、iPod、iPhone、iPad等风靡全球的电子产品，深刻地改变了现代通讯、娱乐、生活方式。乔布斯同时也是前Pixar动画公司的董事长及行政总裁。[6] 
2011年10月5日，史蒂夫・乔布斯因患胰腺癌病逝，享年56岁。[2] </p>

<h2>早年经历</h2>

<p>1955年2月24日，史蒂夫・乔布斯出生在美国旧金山。刚刚出世就
青年时期的史蒂夫.乔布斯
青年时期的史蒂夫.乔布斯
被父母遗弃了。幸运的是，保罗・乔布斯和克拉拉・乔布斯――一对好心的夫妻领养了他。[8] 
乔布斯生活在美国“硅谷“附近，邻居都是惠普公司的职员。在这些人的影响下，乔布斯从小迷恋电子学。一个惠普的工程师看他如此痴迷，就推荐他参加惠普公司的“发现者俱乐部“，这是个专门为年轻工程师举办的聚会，每星期二晚上在公司的餐厅中举行。在一次聚会中，乔布斯第一次见到了电脑，他开始对计算机有了一个朦胧的认识。[11] </p>

<h3>早期发展</h3>

<p>苹果公司成立初期，“苹果“机的生意清淡。1976年7月，一个偶然的机遇给“苹果“公司带来了转机。零售商保罗・特雷尔（Paul Jay Terrell）来到了乔布斯的车库，当看完乔布斯演示完电脑后，决定订购50台整机，这是做成的第一笔生意。
史蒂夫・乔布斯公司。[15] </p>

浏览器效果：

image.png

html提供了很多标签对儿，可以给文本增加不同的语义。比如：
<h1> </h1>标签对儿，主标题
<h2> </h2>标签对儿，二级标题
<p> </p> 标签对儿，普通段落

现在的业界的标准，网页技术严格的三层分离：html就是负责描述页面的语义；css负责描述页面的样式；js负责描述页面的动态效果的。
所以，html不能让文字居中，不能更改文字字号、字体、颜色。因为这些都是属于样式范畴，都是css干的事儿；html不能让盒子运动起来，因为这些属性行为范畴，都是js干的事儿。
html只能干一件事儿，就是通过标签对儿，给文本增加语义。这是html唯一能做的。

html中，除了语义，其他什么都没有。

html是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述文字的语义，这些标签在浏览器里面是看不到的，所以称为“超文本”，所以就是“超文本标记语言”了。
所以，接下来，我们肯定要学习一堆html中的标签对儿，这些标签对儿能够给文本不同的语义。

标签对儿是由起始标签和结束标签组成的：
<h1>乔布斯个人简介</h1>
<h1> 起始标签
</h1> 结束标签

比如，面试的时候问你，h1标签有什么作用？
正确答案：给文本增加主标题的语义
错误答案：给文字加粗、加黑、变大

四、Sublime编辑器

4.1 简介

书写代码肯定需要一款的代码编辑工具的，任何的纯文本编辑器都能够编辑html代码，比如记事本、editplus、notepad++。但是所谓工欲善其事必先利其器，在我们作为程序猿的生涯中，不可避免的需要一款高大上的代码编辑器，那就是著名的sublime Text。

image.png

比较有名的专门制作网页的工具有：
DreamWeaver (Adobe公司的产品，该工具属于一个老牌编辑器，对于现在的web开发来时，不是一个最好的选择)
Sublime （高效率的程序书写工具）
WebStorm （更高级的项目级别编程工具）
HBuilder（国人开发的一款编辑，相当的吃内存）

image.png

不管用什么编辑器，你都要知道，做网页和工具无关，任何的纯文本编辑器都能够做网页。我们学习的是代码，而不是所谓的工具。不过，不可否认，一个好的工具，确实能够提高工作效率，代码书写的速度，但是本质上讲，记事本也能书写网页。

sublime的中文意思是“华丽的”，是2011年开始流行的代码编辑器，可以编辑java、c、php等很多语言。
html、css、js在sublime中支持非常好。界面也非常漂亮，安装简单、小巧、插件多。

今后我们的文件，如何用sublime编辑呢？很简单，将HTML文件直接拖进来。
一定要记住，保存的时候，一定要文件的扩展名一定要书写为 .html，表示存为网页的格式。

4.2 入门使用-HTML基本骨架

image.png

image.png

效果如下：

image.png

4.3 常见快捷键使用

sublime中的常用快捷键：
ctrl + + 放大文字
ctrl + - 缩小文字

ctrl + shift + d 复制当前行
删除当前行（直接使用ctrl + l 选中当前行，使用ctrl + x 剪切）
ctrl + shift + ↑ 上移当前行
ctrl + shift + ↓ 下移当前行

先掌握上面的这些快捷键。

五、sublime之emmet插件

5.1 基本使用
在上面我们输入
html:xs
然后在按一下
tab键
即可自动填充html的基本骨架，这个功能是由sublime的emmet插件提供的，那么接下来我们就来简单的学习一下该插件。以后击打html标签的时候，仅仅需要输入标签的名字，然后按tab就可以自动生成标签对儿了。

比如，输入p然后按tab，软件自动生成：
<p></p>

5.2 项目搭建

什么是一个项目呢？
答：就是把网站开发的所有的文件统一放在一个目录进行管理。

如何操作呢？
在操作系统创建一个文件夹，然后把该文件夹拖到sublime编辑器即可。

image.png

六、HTML基本语法-骨架

6.1 基本骨架

可以使用sublime快速生成。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />

<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

<title>Document</title>
</head>
<body>
    这里书写内容
</body>
</html>

对于上面的基本骨架，我们一部分一部分的学习。

6.1.1 文档声明头

任何一个标准的HTML页面，第一行一定是一个以

<!DOCTYPE ……

开头的语句。
这一行，就是文档声明头，DocType Declaration。由于HTML语言，也经过了很长时间的发展，存在很多版本，则我们需要告诉浏览器使用哪个html的版本去解析该html文件。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

到底有哪些规范呢？
首先我们先确定一件事儿，我们现在学习的是HTML4.01这个版本，这个版本是基本上所有的浏览器都能支持其标签，包含低版本的IE6。同时还有目前流行的HTML5，但是该版本里面的标签存在很大的兼容性问题，例如IE9才开始支持该版本的部分的标签。

w3c简介
例如：同样的代码，如果我们不按照标准来写doctype这样的话在IE浏览器下和标准浏览器下的解析效果是不一样。
代码：

image.png

效果：

image.png

解释：对于同样的一份代码，但是不同的浏览器解析的效果是不一样的，这样就苦了程序员，需要按照各自的浏览器的要求去书写兼容性的代码。这个时候有一个叫做w3c的组织就看不过去了，则统一制定了标准，要求所有的浏览器的厂商按照同一个标准去解析html代码，减轻代码编写时候对兼容性的考虑。

6.1.2 字符集

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

字符集用meta标签定义，meta表示“元”。“元”配置，就是表示基本的配置项目。
charset就是charactor set“字符集”的意思。

浏览器就是通过meta来看页面需要使用什么样的字符集的来解析，比如你保存的时候meta写的，和声明的不匹配，那么浏览器就是乱码。

中文能够使用的字符集两种：
第一种：UTF-8
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

第二种：gb2312
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
也可以写成gbk
<meta http-equiv="Content-Type" content="text/html;charset=gbk">

思考：那么是是字符集呢？

例如：页面使用utf-8编码，但是页面使用gbk解析，这样的话，就会出现乱码。
代码：

image.png

效果：

image.png

6.1.3 关键字和页面描述

设置页面描述：
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />

只要设置的Description的页面，那么百度就根据里面的描述来收录我们的网站。当用户在在百度搜索某些和我们description里面设置的关键字一样的时候，百度则会满足条件的页面进行返回，这个技术叫做SEO，search engine optimization，搜索引擎优化。

设置页面关键字：
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。
Keywords就是“关键词”的意思。

6.1.4 title标签

<title>网页的标题</title>
title也是有助于SEO搜索引擎优化的。表现形式为：

image.png

七、HTML语法特性

7.1 HTML对换行不敏感，对tab不敏感

HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。

百度为了追求极致的显示速度，所以HTML标签都没有换行、都没有缩进（tab），HTML和换不换行无关，标签的层次依然清晰，只不过程序员不可读了。

image.png

7.2 空白折叠现象

HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。
例如如下的代码里面有空格、缩进、换行。

<p>
    我喜欢

            编程
</p>

效果：

image.png

7.3 标签要严格封闭

标签必须有严格的开始和结束；虽说有的时候不加结束标签，页面也可以正常显示；但是作为一个合格的程序员还是建议按照标准来实现。

八、HTML常见标签

8.1 h和p标签

8.1.1 h标题

8.1.3 审查元素

h是容器级的标签。理论上里面可以放置p、ul，只是法律上的允许，在语义上，不要这么写。
通过标签嵌套，这里需要讲解一下chrome浏览器的审查元素。

例如：编写一个个人简介
错误写法：
<p>
<h2>乔布斯简介</h2>
乔布斯是一个非常了不起的人物.....
</p>
浏览器不允许你这么做，我们使用Chrome的F12审查，你会发现，浏览器自己把p封闭掉了，不让你去包裹h1。
正确写法
<h2>乔布斯简介</h2>
<p>乔布斯是一个非常了不起的人物.....</p>

九、img-图片标签

9.1 能用的图片类型
页面上可以插入图片，能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别，css课上讲。
不能往网页中插入的图片格式是：psd、ai

9.2 语法
HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。

插入方法：

img是英语image“图片”的简写
src 是英语source“资源”的简写，千万不要写成scr。
src是img标签的属性，baby.jpg是这个属性的值。

这个标签和我们之前学的，都不一样，因为这个标签不是“对儿”。自封闭标签，也称为单标签。

为什么？原因很简单，如果是对儿，里面就要有内容，表示给这个内容增加语义。比如

图片就是一个图片，不需要给什么文字增加语义，所以就是自己一个人活得挺好：

常见的单标签有哪些呢？
常见单标签如下：

案例1：我们现在需要在页面上输出如下的古诗。
作者：白居易
离离原上草，一岁一枯荣。
野火烧不尽，春风吹又生。
远芳侵古道，晴翠接荒城。
又送王孙去，萋萋满别情。

代码：

效果：

案例2：有的时候，我们需要给内容对内容做一个分割输出，这个时候可以使用

效果：

9.3 alt属性
alt属性：alt是英语alternate“替代”的意思，就表示不管因为什么原因，当这个图片无法被显示的时候，出现的替代文字。
代码：

效果：

9.4 相对路径
HTML中插入图片，所以现在有两个文件，一个html文件，一个是jpg文件。
我们关心的就是这两个文件的相对位置。即使这个网站项目，被用u盘拷给了别人，只要相对路径不变。图片一定能够正常显示。

当图片在文件夹里面的时候：

代码：

效果

如果在很深的文件夹中，也不怕，可以一直罗列下去即可。

如果情况变得复杂，我们的图片在当前html文件的上一层的文件夹中

代码：

面试题：

标准答案：
1<img src="../../photo/1.png" />
解释：
现在document是最大的文件夹，里面有两个文件夹work和photo。work中又有一个文件夹叫做myweb。myweb文件夹里面有index.html。 所以index.html在myweb文件夹里面，上一级就是work文件夹，上两级就是document文件夹。通过document文件夹当做一个中转站，进入photo文件夹，看到了1.png。

十、超链接

10.1 基本写法
一个网站，是由很多html网页组成的，html网页之间能够通过超级链接互相跳转，从而形成了“网”。所以才有“互联网”一说。

语法：

效果图：

a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。

href是英语hypertext reference超文本地址的缩写。代表前往的网页地址，可以是相对路径，也可以是绝对路径。

相对路径
和自己在同一个服务器，从自己出发的页面。一般都是 ./lst.html 或者 ../goods.html这样

绝对路径
使用http：//这样开头的网站是绝对路径。例如我们希望点击前往百度。

10.2 a标签的另外两个属性
title 悬停文本
展示效果：

target 是否在新窗口中打开
target实际上是“目标”的意思。

blank就是“空白”的意思，就表示新建一个空白窗口。为啥有一个_ ，就是语法规定。也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了，就是在新的空白标签页中打开。

10.3 页面内的锚点
定义：
可以在页面当定义锚点，所谓的锚点，就是一个小标记，这个小标记是用户不可察觉的，用户不知道这里有一个标记。主要用于本页面之前的跳转，常见的使用场合是小说网站，或者在线手册。
演示：
http://www.motie.com/book/11137/chapter
http://document.thinkphp.cn/manual_3_2.html#page_trace

效果展示：

代码实操：

1. 定义锚点：锚点用name属性来设置，在一个a标签上面设置name属性（或者id属性），不需要设置href属性，那么就是页面的一个锚点。

2.使用a链接指向某个锚点：

3. 那么网址上的效果如下：

10.4 a是一个文本级的标签

1.比如一个段落中的所有文字都能够被点击
p包裹a：

而不是a包裹p：

a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。

2. 能够制作能被点击的图片

十一、列表

在web开发中，有3中类型的列表
11.1 无序列表
无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。
ul：英语unordered list，“无序列表”的意思。
li：英语list item ， “列表项”的意思。

你会发现，这是我们学习的第一个“组标签”，就是要么不写，要么就要写一组。
例如我们要列出中国的一线城市：

效果：

也就是说，所以的li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
浏览器会默认的给无序列表小圆点的“先导符号”。但是，我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。

错误演示
下面的是错误的，因为必须用ul包裹：

下面的也是错误的，因为ul里面只能有li标签，而不能有别的：

ul标签实际应用场景
导航条：

li里面放置的内容可能很多：例如当当的搜索页面里面展示的列表项

ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放，比如：

11.2 有序列表

ordered list 有序列表，用ol表示
代码：

效果：

注意：浏览器会自动增加阿拉伯序号，也就是说，ol和ul就是语义不一样，怎么使用都是一样的。
ol里面只能有li，li必须被ol包裹。li是容器级。

ol这个东西用的不多，如果想表达顺序，大家一般也用ul：

11.3 定义列表
定义列表也是一个组标签，不过比较复杂，出现了三个标签：
dl表示definition list 定义列表
dt表示definition title 定义标题
dd表示definition description 定义描述信息
dt、dd只能在dl里面；dl里面只能有dt、dd
代码：

效果：

表达的语义是两层：

1. 是一个列表，列出了html、css、js三个项目
   2）每一个词儿都有自己的描述项，dd是负责对dt的解释说明

注意：一般我们都是使用ul来描述列表的。

十二、div和span

div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。
在后面的CSS学习中，我们将知道，这两个东西，都是最最重要的“盒子”。

div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。
div标签是一个容器级标签，里面什么都能放，甚至可以放div自己

span也是表达“小区域、小跨度”的标签，但是是一个“文本级”的标签。
就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
span里面是放置小元素的，div里面放置大东西的：

div标签是最最重要的布局标签，例如下面的布局页面

对于上面的布局一般叫做“div+css”。div标签负责布局，负责结构，负责分块。css负责样式。

十三、表单

表单就是收集用户信息的，就是让用户填写的、选择的。例如，网站提供的注册、登录等功能。

form是英语表单的意思。form标签里面有action属性和method属性，在学习Ajax时候我们详细的学习。稍微提一下：action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。

13.1 文本框

input表示“输入”，指的是这是一个“输入小部件”，
type表示“类型”，
text表示“文本”，指的是类型是一个文本框的输入小部件。
效果：

value表示“值”，value属性就是默认有的值，文本框中已经被填写好了：

效果：

13.2 密码框

也就是说，input标签很神奇，又是文本框，又是密码框。
到底是啥？看type属性的值是什么，来决定。
如果type=”text” 文本框
如果type=”password” 密码框
效果：

13.3 单选按钮

效果：

注意：对于单选按钮，只能选一个，术语叫做“互斥”。
radio是“收音机”的意思，input的type的值，如果是radio就是单选按钮。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。

单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。

默认被选择，就应该书写checked=”checked”

13.4 复选框

也是input标签，type是checkbox。

复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）

13.5 下拉列表
select就是“选择”，option“选项”。
select标签和ul、ol、dl一样，都是组标签。

13.6 多行文本框（文本域）
text就是“文本”，area就是“区域”。

效果：

这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。

cols属性表示columns“列”，rows属性表示rows“行”。
值就是一个数，表示多少行，多少列。

13.7 三种按钮
按钮也是input标签，一共有三种按钮：
普通按钮：

button就是英语“按钮”的意思。value就是“值”的意思，按钮上面显示的文字。

提交按钮：

submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。

这个按钮点击，表单真的能提交。这个表单就会被提交到，form标签的action属性中的那个页面中去。但是需要我们学习PHP之后，才能对提交的数据进行处理。

重置按钮：

效果：

reset就是“复位”的意思。点击该按钮后会清空表单里面输入的内容。

13.8 label标签
本质上讲，“用户名”这三个汉字，和input元素没有关系。

label就是解决这个问题的。

input元素要有一个id，然后label标签就有一个for属性，和id相同，就表示绑定了，这个label和input就有绑定关系了。

十四、HTML杂项

14.1 HTML注释

任何的程序、代码都有注释，注释就是给程序员看的，不影响程序的。
适当的注释，能够让我们的程序更加可读，所以用中文提示自己，这里的程序是干什么的。

HTML注释的语法

image.png

Sublime中按ctrl+/ 就是注释

14.2 字符实体

我们想在页面上输出“<h1>”这些字符，但是HTML认为这是一个标签，还没封闭。
例如：很开心啊，今天我们学习了<h1>标签，老师说这个标签是主标题的语义。
代码：

image.png

效果：

image.png

这个时候并没有正常显示h1标签，浏览器而是对其进行了解析。那么该如何处理呢？

image.png

所以，我们可以使用如下的符号来代替 < 或者 >。
&lt;
就是<的字符实体，什么意思呢？就是用常用字符表示这些符号的方式。
lt 就是英语less than 小于的意思；

&gt;
就是>的字符实体。
gt就是greater than 大于的意思。

&copy;
就是© 版权符号。

&nbsp;
nbsp就是英语non-breaking spacing不打断空格的意思，就是空格。

所以：如何要在 哈哈 之间加上四个空格该如何处理呢？
空出了4个字的格，可以防止空白折叠现象。

14.3 HTML废弃标签介绍

HTML现在只负责语义，而不负责样式。但是HTML一开始，连样式也包办了。
这些样式的标签，都已经被废弃。

font标签

image.png

文本相关的标签

image.png

这些标签，是有着浓厚的样式的作用，干涉了css的作用，所以HTML抛弃了他们。

水平线

image.png