前端基础（一）HTML

1、前言

一直都想把前端基础知识点梳理一下，由于种种原因（主要是因为懒(●'◡'●)），一直拖到了现在。好了，废话不多说，直接开干！

`因特网和万维网`

很多同学搞不清楚因特网和万维网的区别，这里简单介绍一下。

因特网（Internet）

也叫互联网，是由全球各地的计算机通过海底光缆，光纤，双绞线，电磁波等物理介质互相连接组成的网络。因特网内的计算机之间可以相互通信，传递资源。

万维网（ World Wide Web，简称www）

是一个由超文本文件相互连接组成的系统，它将因特网上的文本、图像、声音等资源链接到一起。世界各地的计算机连接只要到因特网，就可以用浏览器软件来获取这些信息资源。因此，万维网只是因特网功能的一部分。使用万维网服务必须有：服务器和浏览器。

`上网`

我们说的上网，是指让计算机设备（PC,智能手机，平板电脑...）接入因特网，在因特网上开展各种活动。

因特网为我们提供了非常丰富的服务。

万维网服务（www）
邮件首发（E-mail）
文件传输（FTP）
在线交流（QQ，微信，陌陌...）
在线游戏（王者荣耀，绝地逃生）

因特网上大多内容是免费的，但是我们上网却不是免费的。需要向运营商缴纳一定的费用，用于运营商安装，维护光缆，卫星，等通信必须的物理设备。

`软件架构`

常见的软件架构有两种，

B/S（即浏览器/服务器，browser/server）
C/S（即客户端/服务器client/server）

我们前端开发，主要是B/S架构。无须安装特定的软件，只要有浏览器的计算机中，就可以访问应用。
而C/S架构，必须要安装特定的软件。比如王者荣耀，必须安装特定的客户端，才能和其他玩家一起游戏。

2、初识网页

`纯文本`

纯文本文件用来保存单纯的文字信息，这些信息没有颜色，排版等样式。
文件大小只由文字的数量决定：
一个汉字占2个字节，
一个英文字母占1个字节。

`什么是HTML`

HTML：Hyper Text Mark-up Language，超文本标记语言

它是使用纯文本来描述网页内容结构的一种标记语言。比如文字，图片，多媒体等。
是目前互联网上应用最为广泛的语言。

html文件是纯文本文件的一种，但是与普通的纯文本又有所区别。
它有一个最基本的特征：
可以将网络上的其它文档与当前文档链接起来，进而组成一个网----万维网。
一个文件如果以 .html为扩展名，那么它就是一个网页。

`HTML发展史简述`

蒂姆·伯纳斯·李（Tim Berners-Lee），是欧洲原子核研究中心（CERN）的一名物理学家。他为了让各国的核物理学家能够通过计算机传递信息，及时沟通。在1989年，他开发出世界上第一个 Web服务器和浏览器。允许研究员通过网络查询其他研究员的联系方式。
蒂姆为他的发明定名为：World Wide Web，即（WWW）。
1991年8月6日，CERN上线了地球上第一个网站，解释了万维网的概念，
1993年4月30日，CERN宣布万维网对所有人免费使开放。
1994年10月，lee老师建立了万维网联盟（World Wide Web Consortium，简称W3C），致力于制定各种网页技术的标准规范。
2017年，lee老师因“发明万维网、第一个浏览器和使万维网得以扩展的基本协议和算法”而获得2016年度的图灵奖。

第一版 ——1993 ——草案
HTML 2.0 ——1995年11月 ——标准
HTML 3.2 ——1997年1月14日 ——标准
HTML 4.0 ——1997年12月18日 ——标准
HTML 4.01 ——1999年12月24日 ——标准
HTML 5 ——2014年10月28日 ——标准

`HTML编辑和浏览`

编辑

编辑网页要使用编辑工具，如最简单的记事本，还有比较智能的集成开发环境（IDE），如 Brakets，Sublime Text，Webstorm等等。使用自己觉得趁手的就行了。

浏览

编辑好的网页是拿来给用户看的，用户通过浏览器可以看到网页的内容，
以下是市场上最流行的五大浏览器。其中谷歌浏览器是对最新版HTML5支持最好的浏览器，非常适合用于开发和调试。

`第一个网页`

右键新建一个文本文档，
用记事本打开，输入一些内容，
将其后缀名改为.html
用浏览器打开。

我们可以看到，在html文件中，不管我们怎么换行。
在浏览器中浏览时，所有的文字都会挤在一起。
因为这些文字都没有语言的意义，浏览器就按照自己的方式来处理（删除多余空格，只留下一个）。

在HTML文件中使用标签可以让网页中的内容变得有意义：
只需要用相应的标签对将文字包裹起来即可：
<p>段落</p>
上述代码，告诉浏览器，“段落”两个字应该被当作段落处理。
标签只是为了给浏览器看，而对于用户是不可见的。

2、基本语法

一个网页中，可能包含下列常见的元素：

文字

图片（gif，png，jpg）

动画（gif，swf）

视频（mp4）

音频（mp3）

超链接

表单

每一种网页元素在html中都有相应的标签与之对应。

`HTML元素和标签`

元素：

从开始标签到结束标签所有的代码，是一个元素。

元素可以添加属性，属性为元素指定一些效果。

属性以键值对的形式出现，如width=300;color=”red”
属性写在元素的开始标签中，如有多个，用空格分离即可。

如：

<img  width=100  height=200 />

wdth属性和height属性让图片具备了指定的宽高。

`元素内部可以嵌套其他元素`

比如：


<div>
      <p> 
          <span>
          内容
          </span> 
      </p> 
</div>

以上的代码，我们可以说：

p元素是div元素的 “子元素”，span元素是div元素的 “后代元素”。 div元素是p元素的 “父元素”，div元素是span元素的 “祖先元素”。

`HTML代码的规范`

代码缩进：

空格，换行不会影响到显示在浏览器中的效果。
为了代码便于调试，美观，易读。我们要养成良好的缩进代码习惯。

代码注释：

我们写的代码要方便别人阅读，所以很多代码都需要写一些注释，解释代码的功能。
注释的代码会被浏览器忽视。
html中有专门的标签来写注释。

<! -- 这里是注释的内容 -->

在大多数IDE中，添加注释的快捷键是：ctrl + /

3、常见元素

`结构元素`

与网页文件的结构相关的一些元素有如下四个：

<!DOCTYPE html>
<html>…</html> 
<head>…</head>    
<body>…</body>

<!DOCTYPE html>

它位于文档最开始的位置，告诉浏览器当前页面使用了HTML的哪个版本，
各版本网页声明的写法有所区别：
HTML5：

<!DOCTYPE html>

HTML4：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

低版本的html标准不支持高版本的某些功能，但高版本的标准可以兼容低版本。
所以我们直接写成<!DOCTYPE html>即可。
IDE软件自动生成以上元素的快捷键是：
html5： ! + Tab或 html:5 + Tab
html4： html:4t + Tab

<html>…</html>

该元素告诉浏览器这是一个html文档，
<html> 与 </html> 标签分别限定了文档的开始和结束，
html元素是其它元素的容器。除了声明以外的所有元素，按照规范都应该包裹在其内部。
html元素有两个子元素：head和body

<head>…</head>

该元素也是一个容器。一些不需要当作内容来显示的元素，按照规范都应该包裹在其内部。
比如这些元素：

<title>…</title> ----------------网页的标题
<meta>…</meta>--------------网页的元信息
<style>…</style>---------------网页应用的样式
<script></ script >--------------网页应用的脚本
...

以上信息都不会在浏览器的显示区域进行展示。

元信息：

用<meta>标签定义。
元信息可以设置如下信息：

a.字符集
b.作者
c.关键字

 <meta name=“keywords” content= “磨 剪刀 菜刀 水果刀">

d.网页的描述

 <meta name=“description” content=“一个磨刀的网站">

e.刷新时间

 <meta http-equiv=“refresh” content=“10;url=http://www.baidu.com">

…

下面我对，上面几种数据，再详细说一下：

任何信息在计算机中都是用二进制码来表示。如：0010，11010。
这是由计算机的组成决定的：

  计算机cpu是由电路组成，而电路只有开和关两种状态。
  计算机磁盘是由小磁铁组成，而磁铁只有正和负两种磁极。

1.字符集

 <meta charset="UTF-8">

计算机可以按照一定的规则将二进制信息转换成人类可以识别的符号。
这种转换信息的规则就是字符集。常见的字符集有：ASCII，Unicode , GB2312，GBK，UTF-8

不同的字符集针对同种事物采用的编码格式不一样，
就像对于下图的动物，不同国家的人对它采取不同的称呼：

 英国人用英语称呼它为：panda
 中国人用中文称呼它为：熊猫

计算机也类似，对于汉字的“你”字，

 用Unicode码表示：    \u4f60
 用ASCII码表示：    &#20320;

对同样的字符使用不同的字符集编码，就会出现不同的结果，也就是乱码问题出现的根源。

网页文档默认的字符格式是UTF-8，又称“万国码”，它包含了全世界所有国家需要用到的字符。
如果以后在网页中遇到乱码的情况。

1.确保文档本身的字符集为UTF-8，可以用记事本打开，另存为UTF-8形式；
2.确保文档内部的meta元素设置的字符集为UTF-8

2.网页描述

<meta name="description" content="描述内容">

使用搜索引擎搜索某个页面的时候，会出现一段用于描述网站的文字。这些文字就是网站的描述信息，可以使用meta标签来设置。

3.作者信息

<meta name=“author” content=“I’m king">

4.关键词

<meta name="keyword" content="关键词内容">

搜索引擎通过关键词抓取网页。

<body>
定义文档的主体。按照规范，我们应当将所有需要被浏览器显示的内容放到body元素内部。

<body>

定义文档的主体。按照规范，我们应当将所有需要被浏览器显示的内容放到body元素内部。

`格式元素`

格式元素的作用是为网页中的内容添加一定的格式。

1.P元素

它属于文本级元素，内部只能放置文本，图片，表单元素。如果放置了其他标签，也会被浏览器自动处理。浏览器中的开发者工具中可以查看到它的处理结果。

2.列表元素

列表标签的主要作用是使特定的内容有序化
列表标签有三种，分别是：

无序列表，
有序列表
定义列表。

a.无序列表

无序列表元素的列表项之间，没有先后顺序。
由<ul>和<li>元素定义的:

<ul>
        <li>吃</li>
        <li>喝</li>
        <li>* </li>
        <li>赌</li>
</ul>

ul：英文单词unordered list的缩写，表示没有顺序的列表；
li：英文单词list item的缩写，表示列表的项。
按照规范这两个元素都不应该单独使用。

无序列表的默认符号是圆点。
ul元素的type属性，可以改变列表项的符号。
取值有：

disc(圆)
circle（圆圈）
square（方块）

实际开发中一般不会使用到这些样式，而是使用CSS进行样式的设计。

b.有序列表

有序列表元素的列表项之间，有一定的先后顺序。
由<ol>和<li>定义:

 <ol>
       <li> 洗 </li>
       <li> 剪 </li>
       <li> 吹 </li>
       <li> 烫 </li>
 </ol>

ol元素也有自己的type属性，取值有：

1（数字）
A（大写字母）
a（小写字母）
I（大写罗马字母）
i（小写罗马字母）
ol元素还可以定义列表的起始编号，如我们希望列表的第一个编号为5，而不是1，则需要定义<ol>元素的start属性

c.定义列表

定义列表，通常用在标题下方有内容的场景中。
由<dl>,<dt>,<dd>定义:

<dl>
        <dt>列表标题</dt>    
        <dd>列表内容</dd>    
        <dd>列表内容</dd>
</dl>

dl：是definition list的缩写，表示定义一个列表
dt：是definition title的缩写，表示定义标题，dt是dl中的项。
dd：是definition description的缩写，表示定义描述，dd中的内容是用来描述dt的

三种列表在开发中最常用的是ul。其他两种了解即可。

3.表格元素

将内容放在表格中，可以显得更加整齐。
html中，以下标签用于构建表格：

创建一个表格：

定义一个表格，至少需要4种标签：table，tr，td，tbody.如果代码中缺省的tbody，会被浏览器自动补充。

上述代码构建的表格，并不是我们想象中的样子。
我们需要为这三个元素添加一些属性，让表格变得稍微好看一些。

表格的美化：

1. border 和 bordercolor

给表格设置边框和边框颜色，只能设置给<table>标签。

2. bgcolor

设置背景颜色，写在<table>标签中对整个表格生效；
写在<tr>中对某一行中的所有单元格生效；
写在<td>中对某个单元格生效。

3. align

设置对其方式，写在<table>标签中调整表格在网页中的位置；
写在<tr>中对某一行的所有单元格内容生效；
写在<td>中对某个单元格中的内容生效。

4. cellpadding 和 cellspacing

cellpadding用于设置单元格内部间距，
cllspacing用于设置单元格与单元格之间的距离。设置给<table>标签

5. width 和 height

设置表格的宽高。
tr标签不能设置宽度，因为它的宽度与整个表格的宽度一致。
单元格的宽度不管设置多少个，都以最大的为准。

6. rowspan属性和colspan属性：

实际的应用中的表格一般都是不标准的。
有些单元格可能占据多行，多列的情况。
如：

让一个单元格跨越多行。

<td rowspan=‘4’> 内容</td>

让一个单元格跨越多列。

<td colspan=‘2’> 内容</td>

跨行和跨列会导致一些单元格本来的位置被占据，
为了使布局整齐，我们需要将位置被占据了的单元格删除。

表格总结：

单元格元素中可以嵌套任何元素。
最开始的网页，设计师们就是使用表格来对网页进行排版和布局的。
现在表格网布局已经成为历史。

`文本元素`

文本标签的作用是让网页中的文字具备某种样式。常见的文本标签有：

"strong" 和 "em" 标签表示的是语言的意义，
可以理解为更委婉地告诉浏览器该文本的重要性。语义化更加便于人理解。

而"i" 和"b" 标签直接告诉浏览器应该如何显示文本。
按照w3c官方规范，建议使用"strong"和"em"标签。

`图像元素`

在页面上插入图片。图片的格式可以是：jpg,gif,png,bmp.
将图片的地址赋值给src属性即可：
<img src = “img/1.jpg”>
img是image的缩写。图像元素是单标签元素，只有一个标签。

图像元素的属性：

src	单词source的缩写，图片的地址，即可以是本地地址，也可以是网络地址。
alt	单词altermate的缩写，代替。如果图片加载失败了，可以在网页上看到它的值。
border	图片的边框宽度
width	图片的宽度，如果不设置，就是图片本身的宽度。
height	图片的高度。
title	当鼠标移到图片上方的时候显示的文字。

路径

凡是需要从外部引入资源的元素都需要使用src这个属性。
从HTML文档和资源的位置关系来看，它们的位置关系可以分为相对路径和绝对路径。

1.相对路径：

从自己出发找到别人的位置。
a.如果资源在HTML文档的同一级目录，直接引用文件名即可：

<img  src = “1.jpg”  >

b.如果资源在HTML文档的同级目录下的文件夹中，加上文件夹名即可：

<img  src = “img/1.jpg”  >

c.如果资源在HTML文档的上级目录中，就用”../”来表示上一级，”../../”表示上两级，以此类推：

<img  src = “../../1.jpg”  >

站点网页文件不管拷贝到哪里，文件和图片的相对路径关系都是不变的。
但是资源和网页必须在同一个盘符下。也就是在D盘的html文件不应该引用C盘的资源。

2.绝对路径：

绝对路径就直接写具体地址即可：
a.如果在网络上：

<img  src = "http://pic.365j.com/article/image/201701/20/daee240651.jpg">

b.如果在本地硬盘：

<img src="file://D:\imge\1.jpg" >

第二种方式没有任何意义，开发项目中不会用到的。因为实际项目中的服务器是大多是linux系统，没有windows系统这样的C盘，D盘。

`锚点元素a`

生活中船舶的锚，是用于将船体稳定在水中的某个地方。

与其类似，HTML中也有一个元素，叫做锚元素a。它也被叫做超链接。
它作用是将用户的视线抛到指定的目标上去。
这个目标可以是：

当前页面的某个位置，
其它的网页或其它网页的某个位置
邮件地址。

通过超链接，可以将因特网中的资源相互连接，组成一个个网站，进而组成万维网。
这也是HTML超文本标记语言的意义所在。

1.链接到当前页面的某个位置有两种形式：

id，这种形式对页面中的任意元素都有效。

<a href=“#mydiv"> 百度官网</a>
<div id=“mydiv”> 内容</div>

name，这种形式只对a元素有效。

<a href=“#zhangsan"> 百度官网</a>
<a name=“zhangsan” href=“”>这是叫做张三的锚点元素</a>

2.链接到其它网页：

链接到其他网页：

<a href="http://www.baidu.com"> 百度官网</a>

点击网页上的文字“百度官网”即可跳转到百度的首页。
href 是 hypertext reference的缩写，意思是超文本地址。
它的值可以是具体的资源地址，比如图片，mp3，mp4等。用于文件的下载。

链接到其它网页的某个位置：

<a href=“1.html#mydiv"> 百度官网</a>

3.链接邮件：

锚点元素还能启动当前计算机安装的邮件软件以发送邮件。

<a href=“mailto:xx@qq.com”>目标邮箱</a>

除了href之外，锚元素有另外的属性：
target：目标，是否在新窗口中打开。不写该属性就默认在当前窗口打开。
如果要在新窗口打开文档，就将其值设置为”_blank”；

title：鼠标移到锚点标签上方时，显示的文字。
锚点标签中除了可以放文字之外，还能放图片。可以点击图片进行链接。

`表单元素`

html表单是站点搜集用户信息的重要手段。
表单主要用于让用户输入信息，然后提交给服务器。
表单在网页中无处不在。

表单是网页上的一个特定区域。由form元素定义。

需要提交到服务器的信息都在form里面的的各种表单元素中填写。

<form action=“url” method=“get” >
     <input type="text" name="username">
     ... 
</form>

action属性：表示你要将数据提交到的目标地址。
method属性：表示你希望用什么方式将数据提交。有get、post…等方式。

get有数据量限制，post无限制。
如果只是获取数据，用get；涉及私密数据的提交，那么就用post。

用来采集信息的元素有很多，比较常见的有：

1.单选框：

多个选项中只能选择一个。

示例代码：

<input type="radio" name="fruit" value = "Apple"> 苹果
<input type="radio" name="fruit" value = "Orange"> 桔子
<input type="radio" name="fruit" value = “Mango”> 芒果

注意：

1.要达到互斥效果，必须将这些选项的name值设置为相同的值。
2.用checked属性可以让某一项默认选中。

2.复选框，

多个选项中可以选择多个。

示例代码：

<input type="checkbox" name="fruit" value ="apple">苹果
<input type="checkbox" name="fruit" value ="orange">桔子
<input type="checkbox" name="fruit" value =“mango”>芒果

注意：

1. 这些选项的name值必须设置为相同的值。
2. 用checked可以让某一项默认选中。

3.lable标签

可以看到，我们写文本框，密码框，单选框，多选框的时候，旁边的提示文字都是和这些控件没有任何关系的。如：

<input type="checkbox" name="fruit" value ="apple">苹果

点击苹果二字，是不会选中多选框的。

HTML中的lable标签用来将文本和表单控件绑定在一起。用法如下：

<input type=“checkbox” name=“fruit” value =“apple“ id=“apple”>   
<label for=“apple”>苹果</label>

id可以唯一地标识某个元素，for将lable中的文本与表单控件绑定起来。
这时，我们点击文字，就相当于点击了表单控件。

下拉列表

下拉列表，鼠标点击，可以出现一个列表，用于选择信息。

示例代码：

<select name= "city" >  
      <option value=“cd”> 成都 </option>  
      <option value=“xa”> 西安 </option>
      <option value=“sz”> 深圳 </option>
      <option value=“bj”> 北京 </option>
</select>

多行文本输入框

多行文本框，可以输入多行文字。

<textarea name=“advice" cols ="50" rows = "3"></textarea>

cols表示textarea的宽度（列），
rows表示textarea的高度（行）。

标签对中间不写内容，如果写了，会被当作默认值。

表单中的信息填写好了之后，我们需要用户点击按钮来将其提交到action属性指定的地址。HTML提供了一种提交按钮来完成这个提交操作。

<input type= “submit” >

如果信息填写有错，想要全部重新填写。我们不用一个一个地删除。
HTML提供了另外一种重置按钮来清除信息。

<input type= "reset" >

这两种按钮有默认的文字，“提交”和“重置”，
如果想在按钮上显示其他文字，就设置一个value值即可。

<input type= “reset” value= “ 自定义文字” >

“提交”和“重置”按钮是两种特殊的按钮，自身已经具备了特定的功能。虽然功能不同，但是长相是相同的。

实际开发中，我们更多的是赋予某个按钮其他功能，这就需要用到普通按钮。普通的按钮写法如下：

方式一：<input type= “button“ value= “ 显示到按钮上的文字“ >

方式二：<button> 我是普通按钮 </button>

普通按钮的行为一般使用JavaScript脚本设置。

`字符实体`

在 HTML 中，很多特殊字符需要用字符实体来实现。

比如‘>’ 对应的字符实体是 “&gt” 。(greater than的缩写)

更多的字符实体见：http://www.w3cschool.cn/htmlt...

HTML部分完。

前端基础（一）HTML

1、前言

一直都想把前端基础知识点梳理一下，由于种种原因（主要是因为懒(●'◡'●)），一直拖到了现在。好了，废话不多说，直接开干！

因特网 和 万维网

很多同学搞不清楚因特网和万维网的区别，这里简单介绍一下。

上网

我们说的上网，是指让计算机设备（PC,智能手机，平板电脑...）接入因特网，在因特网上开展各种活动。

万维网服务（www）

邮件首发（E-mail）

文件传输（FTP）

在线交流（QQ，微信，陌陌...）

在线游戏（王者荣耀，绝地逃生）

因特网上大多内容是免费的，但是我们上网却不是免费的。需要向运营商缴纳一定的费用，用于运营商安装，维护光缆，卫星，等通信必须的物理设备。

软件架构

2、初识网页

纯文本

什么是HTML

HTML发展史简述

HTML编辑和浏览

编辑

浏览

第一个网页

2、基本语法

HTML元素和标签

标签：

元素：

元素内部可以嵌套其他元素

HTML代码的规范

代码缩进：

代码注释：

3、常见元素

结构元素

与网页文件的结构相关的一些元素有如下四个：

元信息：

1.字符集

2.网页描述

3.作者信息

4.关键词

格式元素

1.P元素

2.列表元素

a.无序列表

b.有序列表

c.定义列表

3.表格元素

表格的美化：

1. border 和 bordercolor

2. bgcolor

3. align

4. cellpadding 和 cellspacing

5. width 和 height

6. rowspan属性和colspan属性：

表格总结：

文本元素

图像元素

路径

1.相对路径：

2.绝对路径：

锚点元素a

1.链接到当前页面的某个位置有两种形式：

2.链接到其它网页：

3.链接邮件：

表单元素

1.单选框：

2.复选框，

3.lable标签

下拉列表

多行文本输入框

字符实体

村里有个小芳是姑娘

引用和评论

腾讯新闻中心首页改版啦

前端开发工具

Jerry和您聊聊Chrome开发者工具

面向企业级前端应用的开发框架 UI5 的发展简史介绍

html如何实现跳转到锚点

这些年

一个用JavaScript生成思维导图(mindmap)的github repo

`因特网和万维网`

`上网`

`软件架构`

`纯文本`

`什么是HTML`

`HTML发展史简述`

`HTML编辑和浏览`

`第一个网页`

`HTML元素和标签`

`元素内部可以嵌套其他元素`

`HTML代码的规范`

`结构元素`

`格式元素`

`文本元素`

`图像元素`

`锚点元素a`

`表单元素`

`字符实体`