葵花宝典_新版葵花宝典1视频分区

WEB简介

1.1web的诞生

1986年美国国家科学基金会在政府的资助下，用TCP/IP协议建立了NSFNET网络。NSFNET网络与1989年改名为Internet，且向公众开放。从此，Internet便在全球各地普及起来。

时至今日，Internet常用的服务可以概括至一下几种

• E-mail：电子邮件

• FTP:文件传输，用户可以通过该协议进行文件传输或者访问，由于安全问题，其使用场景越来越少

• BBS：电子公告，最早主要用来是公布信息，现在的BBS已经发展成功能齐全的社区，可以实现信息公告、线上交谈、分类讨论、经验交流、文件共享等

• WWW：world wide Web 中文名称万维网，也被称为Web，是Internet中发展最迅速的部分

• Web是Internet的一个应用，它的诞生也是极其富有戏剧性的，具体同学们自己去了解

1.2WEB相关概念

1.2.1WWW

​ WWW，World Wide Web 的缩写，也可写为W3、Web,中文名为万维网。WWW是Internet的最核心部分。它是Internet上哪些支持WWW服务和HTTP协议的服务器集合

​ WWW在使用上分为Web客户端和Web服务器，用户可以使用Web客户端(即我们常说的浏览器)访问Web服务器上的页面

1.2.2WebSite

​ WebSite,中文名为网站，是指在Internet上根据一定的规则，使用HTML等工具制作的用于展示特定内容相关网页的集合

1.2.3URL

​ URL，Uniform Resource Locator的缩写，中文名为统一资源定位符，俗称网址，他是可以从互联网上得到的资源的位置和访问方法的一种简介的表示，是互联网上标准资源的地址。在WWW上浏览或者查询信息，必须在网页浏览器上输入查询目标的地址

​ URL的格式一般如下

​ 协议://主机地址(IP地址)+目录路径+参数 （主机地址和IP地址详解见两天讲AJAX的教案，属于计算机网络知识）

​ 常见的协议有

​

需要注意的是

​ 1.URL只能用ASCII字符集通过因特网进行发送，如果包含非ASCII字符集的字符，则需要进行转换。例如 中文会被转成一些带有%的字符串。(这就是为什么在处理get请求时咱们需要处理乱码问题的原因)

​ 2.URL中不能包括空格，URL编码通常会使用"+"替换空格，如“hello world”会转换成“hello+world”

1.2.4 Web标准

Web应用开发需要遵循的标准就是Web Standard(Web标准)，这里Web标准是一系列标准的集合。网页主要由三部分组成：结构标准(XML、HTML、和XHTML)，表现标准（CSS）,行为标准（DOM，JavaScript）

1.2.5Web浏览器

​ Web浏览器，简称浏览器，是一个显示网页服务器或者档案系统内的HTML文件，并让用户与这些文件互动的软件。主流浏览器有下列

1.2.6Web服务器

Web服务器的主要功能是提供网上信息浏览服务。Web服务器可以解析HTTP协议，当Web服务器接收到一个HTTP请求时，会返回一个HTTP响应，这样客户端就可与从服务器上获取网页（HTML），包括CSS JS 音频 视频等资源

2019.11.5===============

HTML

1.1HTML简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

• 基本组成标签
  • 声明为 HTML5 文档
  • 元素是 HTML 页面的根元素
  • 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
  • 元素包含了可见的页面内容
• 什么是HTML标签
  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

1.2HTML版本

从初期的网络诞生后，已经出现了许多HTML版本:

1.2.1通用声明

• HTML5
  • < !DOCTYPE html>
• HTML 4.01
  • < !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
    “http://www.w3.org/TR/html4/loose.dtd”>
• XHTML 1.0
  • < !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

1.2.2字符集

< meta charset=“UTF-8”>

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文 包括6763个汉字

BIG5 繁体中文 港澳台等用

GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312

UTF-8则包含全世界所有国家需要用到的字符

通常我们一般都使用utf-8
1

1.3HTML标签的语义化

白话： 所谓标签语义化，就是指标签的含义。

为什么要有语义化标签

1. 方便代码的阅读和维护
2. 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
3. 使用语义化标签会具有更好地搜索引擎优化

核心：合适的地方给一个最为合理的标签。

语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。

不管是谁都能看懂这块内容是什么。

遵循的原则：先确定语义的HTML ，再选合适的CSS。

1.4HTML标签（重要）

1.4.1排版标签

排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

1.4.1.1标题标签 (熟记)

单词缩写： head 头部. 标题

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即

<h1>、<h2>、<h3>、<h4>、<h5>和<h6>

标题标签语义：  作为标题使用，并且依据重要性递减
1

其基本语法格式如下：

<hn>   标题文本   </hn>
1

注意： h1 标签因为重要，尽量少用，不要动不动就向你扔了一个h1。 一般h1 都是给logo使用。

1.4.1.2段落标签( 熟记)

单词缩写： paragraph 段落

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

<p>  文本内容  </p>
1

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

1.4.1.3水平线标签

单词缩写： horizontal 横线

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，

---

就是创建横跨网页水平线的标签。其基本语法格式如下：

<hr />是单标签
1

在网页中显示默认样式的水平线。

1.4.1.4换行标签(熟记)

单词缩写： break 打断 ,换行

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

<br />
1

这时如果还像在word中直接敲回车键换行就不起作用了。

1.4.1.5div span标签(重点)

div span 是没有语义的 是我们网页布局主要的2个盒子

div 就是 division 的缩写 分割， 分区的意思 其实有很多div 来组合网页。

span, 跨度，跨距；范围

语法格式：

<div> 这是头部 </div>    <span>今日价格</span>
1

1.4.1.6文本格式化标签(熟记)

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

b i s u 只有使用 没有 强调的意思 strong em del ins 语义更强烈

1.4.1.7标签属性

属性就是特性 比如 手机的颜色 手机的尺寸 ，总结就是手机的。。

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
1

语法规则（牢记）

1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。

2.属性之间不分先后顺序，标签名与属 性、属性与属性之间均以空格分开。

3.任何标签的属性都有默认值，省略该属性则取默认值。

采取 键值对 的格式 key=“value” 的格式

比如:

<hr width="400" />   
1

1.4.1.8图像标签img (重点)

单词缩写： image 图像

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签以及和他相关的属性。其基本语法格式如下：

该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

<img src="图像URL" />
1

1.4.1.9链接标签(重点)

单词缩写： anchor 的缩写 。基本解释 锚, 铁锚 的

在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
1

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

注意：

1.外部链接 需要添加 http:// www.baidu.com

2.内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

1.4.1.9.1锚点定位 （难点）

通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：

1.使用“a href=”#id名>“链接文本"</a>创建链接文本。

2.使用相应的id名标注跳转目标的位置。
1
2
3

1.4.1.9.2base 标签

base 可以设置整体链接的打开状态

base 写到 之间

1.4.1.10特殊字符标签

1.4.1.11注释标签

在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。其基本语法格式如下：
​

    <!-- 注释语句 -->
1

注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

1.5路径

路径可以分为： 相对路径和绝对路径

1.5.1对路径

1. 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src=“logo.gif” />。
2. 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src=“img/img01/logo.gif” />。
3. 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如<img src="…/logo.gif" />。

1.5.2绝对路径

绝对路径

“D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

1.6列表标签

什么是列表？

把数据制成表,以表显示

容器里面装载着文字或图表的一种形式，叫列表。

列表最大的特点就是 整齐 、整洁、 有序

1.6.1无序列表 ul （重点）

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>
1
2
3
4
5
6

注意

 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
 2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
 3. 无序列表会带有自己样式属性,可以用css清楚样式
1
2
3

1.6.2有序列表 ol

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>
1
2
3
4
5
6

所有特性基本与ul 一致。

但是实际工作中， 较少用 ol ，但1+X的缘故，同学们也要将其记住

1.6.3自定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>
1
2
3
4
5
6
7
8
9
10