1. 了解 WEB 1. 1. 了解网页

网页主要由文本、图像和超链接等元素组成。 当然，除了这些元素之外，网页还可以包含音频、视频和Flash。

1.2. 浏览器

浏览器是显示和运行网页的平台。 常用的浏览器包括 IE、Firefox、Chrome、Safari 和 Opera。 我们通常称它们为“五巨头”浏览器。

也许你最熟悉的是IE浏览器，但是他的响应速度实在是太慢了。

我们可以通过百度的流量研究院来查看目前浏览器的市场占有率。 2008年，著名互联网巨头谷歌发布了旗下首款浏览器Chrome。 像王思聪一样，没有别的办法。 他出生于一个富二代官二代家庭。 背景太强大了，而且确实拥有得天独厚的天赋。 来自微软，唯我无敌； 统治世界，永远。

1.3. 常见浏览器内核

浏览器内核的英文叫：Rendering Engine，中文翻译也有很多。 排版引擎、解释引擎、渲染引擎现在通称为浏览器内核。 他负责读取网页内容、组织信息、计算网页的显示方式并显示页面。 目前浏览器的种类有很多种，但最流行的有以下几种：

浏览器

核心

评论

IE

三叉戟

IE、猎豹安全、360极速浏览器、百度浏览器

火狐浏览器

壁虎

可惜这几年已经没落了，打开速度慢，升级频繁，猪般的队友闪现，神一般的对手chrome。

苹果浏览器

网络工具包

现在很多人错误地将webkit称为chrome内核（尽管chrome内核已经是blink了）。 苹果感觉自己的妻子被人抢了，于是他在公共厕所里哭晕了过去。

铬合金

铬/闪烁

在Chromium项目中开发Blink渲染引擎（浏览器核心），内置于Chrome浏览器中。 Blink 实际上是 WebKit 的一个分支。 国内大部分浏览器最新版本均采用Blink内核二次开发

歌剧

眨

现在跟随 chrome 一起使用 Blink 内核。

移动终端上的浏览器内核主要是指系统外部浏览器的内核。 他有两个阵营：

就Android手机而言，Webkit内核是使用最多的一种。 国产浏览器大多宣称自己的内核，基本属于Webkit的二次开发。 在iOS和WP7平台上，由于系统原因，大部分系统都有自己的浏览器内核，通常是Safari或IE内核Trident。 1.4. 网络标准

Web标准并不是某个标准，而是W3C等标准化组织制定的一系列标准的集合。 W3C万维网联盟是世界上最著名的标准化组织。 自1994年成立以来，迄今已发布了近百项与万维网相关的标准，为万维网的发展做出了突出贡献。 W3C类似于现实世界中的联合国。

1.4.1. 为什么要遵守WEB标准

通过上述浏览器的不同核心，我们知道它们显示的页面或者排版略有不同，所以我们需要制定一个统一的标记来显示相同​​的内容

1.4.2. Web 标准的好处

遵循Web标准可以让我们编写的页面更加规范和统一，有很多好处：

让Web的发展前景更加广阔。 内容可以通过更广泛的设备访问。 更容易被搜索和救援引擎搜索。 降低网站流量成本。 使网站更易于维护。 提高页面浏览率。 1.4.3. Web标准的构成

Web设计主要包括三个方面：结构、表现和行为。 通俗地说就是HTML、CSS、JS。

标准

阐明

评论

结构

结构体是用来对网页元素进行组织和分类的，我们主要学习HTML。

表现

用于设置网页元素的布局、颜色、大小等外观样式，主要参考CSS

行为

行为是指网页模型的定义和交互的编写。 我们主要学习Javascript

1.4.4. 总结 1.5。 html5的发展路径

1.6、XHTML

XHTML可扩展超文本标记语言（英语：eXtensible HyperText Markup Language，XHTML），是一种标记语言，表达形式与超文本标记语言（HTML）类似，但句型更为严格。 从继承关系来看，HTML是基于标准通用标记语言（SGML）的应用程序，它是一种非常灵活的标记语言，而XHTML是基于可扩展标记语言（XML），它是SGML的子集。 XHTML 1.0 于 2000 年 1 月 26 日成为 W3C 推荐标准。

二、HTML骨架 2.1、HTML定义

HTML的全称是Hyper Text Markup Language（超文本标记语言），它是一种用来描述网页的语言。 HTML 不是一种编程语言html5的下拉列表，而是一种标记语言，它是一组标记标签。 网页由网页元素组成。 这些元素通过html标签来描述，然后通过浏览器解析后可以显示给用户。

所谓超文本有两层含义：

因为它可以添加图片、声音、动画、多媒体等内容（**赶上文字限制**）。 不仅如此，它还可以从一个文件跳转到另一个文件，将文件与世界各地的主机链接起来（**超链接文本**）。 2.2、HTML骨架标签

在日常生活书信中，我们必须遵守共同的约定。 否则会显得很无格式，根本不适合阅读。

HTML有自己的语言句子骨架格式，这是我们学习HTML的第一步。

标签名

定义

阐明

HTML 标签

页面中最大的标签，我们成为根标签

肚皮医生

注意，我们在head标签中必须设置的标签是title

文件的标题

让页面有自己的页面标题

文件正文

元素包含了文档的所有内容，页面的内容基本都放在了body上

HTML标签名、类名、标签属性和大多数属性值统一大写。

2.3. 标签

在HTML页面中，带有“”符号的元素被称为HTML标签，如上面提到的

、 、 都是HTML骨架结构标签。

HTML标签名、类名、标签属性和大部分属性值统一用小写。

2.4、元件分类2.4.1、常规元件（双标）

 内容    
  我是文字  

2.4.2. 空元素（单个标签）

空元素由单个标签表示。 简单来说，它不需要包含内容，只有一个开始标签，不需要关闭。 这样的独身狗标签很少，加起来也不多。 我们只需要记住更多。

2.5、HTML标签关系

双标签的相互关系主要有两种类型：

嵌套关系 并行关系 2.5.1、嵌套关系

类似于父子关系。
  
	 

2.5.2. 平行关系

类似于兄弟情谊。

2.5.3. 总结 如果两个标签之间是嵌套关系，子元素最好缩进一个tab（一个tab为4个空格）。 如果是并列关系，最好是上下对齐。 2.6。 文件类型

 
他的作用是声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

2.7、页面语言

最常见的有两个值：

en 将语言定义为俄语。 zh-CN 将语言定义为英语。 2.8、字符集

字符集（Character set）是多个字符的集合。 为了让计算机能够准确地处理各种字符集，需要进行字符编码，以便计算机能够识别和存储各种字符。

UTF-8是目前最常用的字符集编码方法html5的下拉列表，常用的字符集编码方法有gbk和gb2312。

3. HTML中常见的标签

首先 HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。

3.1、排版标签

排版标签主要与css配合使用，展示网页的结构，是网页排版最常用的标签。

3.1.1、标题标签

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

标题标签语义：用作标题，按重要性降序排列

   标题文本   
   标题文本   
   标题文本   
   标题文本   
   标题文本   
   标题文本   

3.1.2. 段落标签

段落标签可以将 HTML 文档划分为多个段落。 要在网页中有序地显示文本，段落标签是离不开的。 就像我们平时写文章一样，整个网页也可以分为几个段落。

  文本内容  

3.1.3. 水平线标签

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

它是创建跨越页面水平线的标签。 他可以在网页中显示默认样式的水平线。

3.1.4、换行标签

在HTML中，段落中的文本会按照从左到右的顺序排列，直到浏览器窗口的右端，然后手动换行。 如果希望一段文本换行显示，则需要使用换行标签。

3.1.5、div和span

div和span没有语义，它们是我们网页布局的主要两个包。 它是用来安装我们的网页元素的，但是它们是不同的。

div标签用于布局，但现在一行中只能放置一个div。 span标签用于布局，可以将多个span放在一行上。 3.1.6。 排版标签总结

标签名

定义

阐明

标题标签

用作标题，按重要性降序排列

段落标签

可以将 HTML 文档拆分为多个段落

水平线标签

没什么可说的，只是一句台词

换行符

div标签

是用来布局的，但是现在一行只能放一个div

跨度标签

对于布局，可以将许多跨度放置在一行上

3.2. 文本低格式标签

在网页中，有时需要对文本设置宋体、斜体或逗号的效果。 这时就需要利用HTML中的文本低帧标签来以特殊的形式显示文本。

标签

显示疗效

和

文本以粗体显示

和

文本以_斜体_显示

和

文本显示时带有删除线

和

文本以破折号的形式显示

3.3. 标签属性

所谓属性就是手机的颜色、手机的规格、颜色等外部特征。 例如，我们描述手机的特性如下：

在使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以利用HTML标签的属性来设置。 其基本句型如下：

 内容 
  

3.4、图片标签img

如果要在网页上显示图像，则需要使用图像标签。 接下来详细介绍图片标签及其相关属性。 （这是一只独身狗），他的句子格式如下：

他还具有其他几个共同属性。

属性

属性值

描述

源代码

图片的url地址

图形路径

替代

文本

无法显示图像时的替代文本

标题

文本

鼠标悬停时显示的内容

宽度

像素

设置图像的长度

高度

像素

设置图像的高度

边界

数字

设置图像边框的长度

注意：

一个标签可以有多个属性，这些属性必须写在开始标签中，标签名称之前。

属性没有特定的顺序，标签和属性、属性和属性之间用空格分隔。

标签的任何属性都有一个默认值，如果省略该属性，则采用默认值。

对于键值对，采用格式 key="value"。

正常的



 带有边框的



有提示文本的



有替换文本的

2.5. 链接标签

在 HTML 中创建超链接非常简单，只需包含带有标签的文本即可。 他的句型是：

文本或图像

属性

影响

链接地址

用于指定链接目标的url地址，（必需属性）当href属性应用于标签时，具有超链接的功能

目标

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

注意：

外部链接：需要添加www.baidu.com 内部链接：链接到内部页面的名称即可，如<a href="index.html"> 如果当时没有确定链接目标，则href link标签的属性值通常定义为“#”（即href=“#”）表示该链接暂时为空。 不仅可以创建文本超链接，还可以添加网页中各种网页元素的超链接，如图像、表格、音频、视频等。 2.6． 注释标签

HTML中还有一个特殊的标签——注释标签。 如果需要在HTML文档中添加一些易于阅读和理解但不需要在页面上显示的注释文本，则需要使用注释标签。

评论内容不会显示在浏览器窗口中，但也会作为HTML文档内容的一部分下载到用户计算机上，在查看源代码时可以看到。 注释是供人阅读的，目的是为了更好地解释这部分代码的作用，程序并不执行这段代码，其句子格式如下：

         
    快捷键是：ctrl + /       
	或者 ctrl +shift + / 

2.7. 小路

在实际工作中，我们的文件不能随意放置，否则很难快速找到它们，所以我们需要一个文件夹来管理它们。 目录文件夹和根目录有两个概念：

目录文件夹是一个普通的文件夹，里面只存放我们制作页面需要的相关材料，比如html文件、图片等。 打开的目录文件夹的第一级是根目录。

页面上会有很多图片，通常我们新建一个文件夹专门用来存放图片文件（images），然后插入图片，这时候我们需要用“path”的形式来指定图片的位置图像文件。 路径可分为：

相对路径。 绝对路径。 2.7.1、相对路径

根据引用文件的网页位置构建的目录路径。 因此，当存储在不同目录下的网页引用同一个文件时，所使用的路径会有所不同，因此称为相对路径。

路径分类

象征

阐明

同一水平路径

只需输入图像文件的名称。

下一级路径

“/”

父路径

“.../”

文件名前添加“.../”，如果是上两级则需要使用“.../.../”，以此类推。

简单来说，相对路径就是从这个文件开始寻找我们的目标文件。

2.7.2. 绝对路径

绝对路径是指以网站根目录为基准的目录路径。 之所以称为绝对，是指当所有网页引用同一个文件时，所使用的路径是相同的。 她有交流驱动器路径或完整的网络地址。

2.8. 特殊字符

有些特殊符号我们在html中直接使用比较困难或者不方便，这时候我们可以使用下面的替换代码。

虽然有很多，但我们平时用的比较少。 大家要记住空格、大于号、小于号。 基本上就够了。 回去检查一下剩下的。

总结：

它以运算符 & 开头，以分号运算符 ; 结束。 它们不是标签，而是符号。 HTML 中不能使用小于号“”特殊字符，浏览器会将其解释为标签。 要正确显示它们，请在 HTML 源代码中使用字符实体。4． 形式

4.1、表单的作用

Table 仍然是当今常用的标签，但它不用于布局。 最常见的是显示和显示表格数据。 **因为它可以让数据显示特别规则，而且可读性非常好。

一张清新淡雅的表格，可以将琐碎的数据井然有序地呈现出来。 虽然div布局也可以做，但是没有table那么方便。 以最近火热的资金为例（如果需要这个脚本可以私聊我）：

4.2. 创建一个表

在 HTML 网页中，为了创建表格，需要使用与表格相关的标签。

    ...
  
  ...

  

    
单元格内的文字

前面的句型包含三对基本的 HTML 标签，即 table、tr 和 td。 它们是创建表的基本标签，缺一不可。 下面我们来详细解释一下

table 用于定义表格标签。

tr 标签用于定义表中的行，必须嵌套在 table 标签中。

td 用于定义表格中的单元格，必须嵌套在标签中。

字母td指的是表格数据（table data），即数据单元格的内容。 现在我们明白了，表最适合的地方就是存储数据。

4.3. 表单属性

表中有一些我们不经常使用的属性。 这里我们重点关注单元格间距和单元格填充。

4.4. 情况1

我们说了这么多，光说不练是不行的。 我们来做一个简单的案例来巩固一下。

   
  
姓名
   
性别
 
年龄
  
   
  
刘德华
 
男
 
55
  
   
  
郭富城
 
男
 
52
  
   
  
张学友
 
男
 
58
  
   
  
黎明
   
男
 
18
  
   
  
刘晓庆
 
女
 
63
  

4.5. 标题标签

一般情况下，标题单元格位于表格的第一行或第一列，文本为粗体且居中。

如果我们要定义表头，只需要将相应的单元格标签替换为表头标签即可。 th也是一种细胞，但它与普通的td细胞不同。 它将居中并加粗其上方的文本。

		
  
			
姓名
 
			
性别
			
电话
		
		

			
小王
			
女
			
110
		
		

			
小明
			
男
			
120
		
	
	

4.6. 表标题

如果我们要画一个有标题的表格，也很简单，用标签来定义就可以了。

   
我是表格标题

注意：

title 元素定义表格标题，通常居中并显示在表格上方。 标题标签必须紧跟在表格标签之后。 该标签仅当存在于表中时才有意义。 4.7. 4.7.1. 合并单元格概述

合并单元格是我们常用的操作，但是合并起来并不是很复杂。 我们通常有两种形式进行合并：

跨行合并：rowspan=“合并单元格数”。 跨列合并：colspan="合并单元格数"。

4.7.2. 合并单元格的三步过程 首先确定是跨行合并还是跨列合并。按照先上后下、先左后右的原则找到目标单元格，然后写出合并方法和单元格数量被合并。 例如：删除多余单元格Cell 4.8、表格定义结构

对于比较复杂的表格，表格的结构相对复杂，因此表格分为表头、表体和表尾三部分。 并且这三个部分都标有：thead、tbody、tfoot，以便更好的区分表结构。

4.9 总结

标签名

定义

阐明

表单选项卡

这是一个方形的包包

表格行标签

行标签仅在表标签内有意义

细胞标签

单元格标签是一个容器级元素，可以容纳任何东西

标题单元格标签

它仍然是一个单元格，但其上的文本将居中并加粗

表格标题标签

表格标题，跟随表格，与表格中心对齐

clospan 和 rowspan

合并属性

合并单元格

5. 清单

列表最大的特点就是整齐、整齐、有序，类似于表格，但可以自由度更高的组合。

5.1、无序列表ul

无序列表中的各个列表项之间没有顺序级别，它们是并行的。 其基本句型如下：

  
列表项1
  
列表项2
  
列表项3
  ......

比如新闻是乱序的，无需排队，先到先得，先显示最后发布的内容。

总结：

只能嵌套，不允许直接输入其他标签或标签内的文字。 和之间相当于一个可以容纳所有元素的容器。 无序列表会有自己的style属性，放下那个style，让CSS来吧！ 5.2. 有序列表ol

有序列表是一个有顺序的列表，每个列表项按照一定的顺序排列和定义。 有序列表的基本句子格式如下：

  
列表项1
  
列表项2
  
列表项3
  ......

所有特性与ul基本一致。 但实际上它比使用无序列表要好得多。

5.3、自定义列表

定义列表通常用于解释和描述术语或名词，定义列表的列表项之前没有项目符号。 其基本语句如下：

  
名词1
  
名词1解释1
  
名词1解释2
  ...
  
名词2
  
名词2解释1
  
名词2解释2
  ...

定义列表通常用于解释和描述术语或名词，定义列表的列表项之前没有项目符号。 其基本语句如下：

5.4、列表总结

标签名

定义

阐明

无序标签

只能包含li，没有顺序，后面我们布局中最常用的列表

订购标签

顺序只能包含li，用量较少

自定义列表

里面有2个兄弟姐妹，dt和dd

6. 表 6.1。 表格概览

现实中的表格和我们去交通银行办理信用卡时填写的表格类似。如下图

**功能： **

该表格的目的是收集用户信息。 在我们的网页中，我们也需要和用户进行交互，收集用户信息，这时候我们也需要表单。 在HTML中，一个完整的表单一般由三部分组成：表单控件（也称为表单元素）、提示信息和表单字段。

表单控件：

包含特定的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：

表单通常还需要包含一些解释性文字，提示用户填写和操作。

表单字段：

它相当于一个容器，用来容纳所有的表单控件和提示信息，通过它可以定义用来处理表单数据的程序的url地址以及数据提交到服务器的方式。 如果不定义表单字段，表单中的数据很难发送到后端服务器。

6.2、输入控制

6.2.1、类型属性 6.2.2、值属性

用户名: 

6.2.3、名称属性

用户名:  

name 表单的名称，这样后台就可以通过name属性找到这个表单。 页面中有多种表单，名称的主要作用是区分不同的表单。

6.2.4、检查属性 6.2.5、总结

属性

阐明

影响

类型

表格类型

用于指定不同的控件类型

价值

形式价值

表单上默认显示的文本

姓名

表格名称

页面中有多种表单，名称的主要作用是区分不同的表单。

检查过

默认选择

表示从头开始选择单选或复选按钮

6.3、标签标签

label标签用于绑定表单元素。 当点击label标签时，绑定的表单元素将获得输入焦点。 我们以两种形式绑定元素：

第一种用法是使用标签直接包含输入表单，适合单一表单选择。

for 属性的第二个用法指定标签绑定到哪个表单元素。

6.4、文本区域控件

  文本内容

他有两个职能：

使用textarea控件可以轻松创建多行文本输入框。

cols = "每行字符数" rows = "显示行数" 实际开发中我们不使用

文本框和文本字段的区别

形式

姓名

区别

默认值显示

对于场景

输入类型=“文本”

文本框

只能显示一行文字

单个标签，按值显示默认值

用户名、昵称、密码等

文本区域

文本域

可以显示多行文本

双标签，默认值在标签中间

留言板

6.5、选择下拉列表

如果有多个选项供用户选择，为了节省空间，我们可以使用select控件来定义一个下拉列表。

  选项1
  选项2
  选项3
  ...

注意：

选项中至少包含一对选项。 当选项中定义了selecting=“selected”时，当前项为默认选中项。但是我们实际开发中会少用6.6，form表单域

在HTML中，form标签用于定义表单字段来收集和传输用户信息，表单中的所有内容都会提交到服务器。

  各种表单控件

共同属性：

属性

属性值

影响

行动

网址地址

用于指定接收和处理表单数据的服务器程序的url地址。

方法

获取/发布

提交方法用于设置表单数据，其值为get或post。

姓名

姓名

用于指定表单的名称，以区分同一页面上的多个表单。

每个表单都应该有自己的表单字段。 我们现在做页面，不写是看不到效果的，但是如果我们早点学过ajax后台交互，肯定需要form表单字段。