当我们访问一个网站时，发生了什么？

 

　　1. 在地址栏输入一个域名按下回车之后，这一访问请求首先被提交给互联网服务提供商（Internet Service Provider 简称 ISP）——移动、联通等

 

　　2. 域名系统（Domain Name System 简称 DNS）将域名转变成一个 IP 地址

 

　　3. 通过 HTTP 协议访问请求被提交给上一步得到的IP地址

 

　　3. 被请求的服务器找出我们要访问的内容，然后发送给我们网页的代码

 

　　4. 我们的浏览器将网页代码转变成我们容易理解的内容，即我们看到的网页

 

　　这只是一个粗略的描述。在谷歌浏览器（Chrome）中，右键选择查看网页源代码即可看到网页的代码。

 

　　前端是我们访问网页时可以看到的部分，包括 HTML、CSS 和 JavaScript。后端是其他的所有部分。例如一个网站要决定你是不是已经登录，要决定发送给你什么信息等，这些都是在后端完成的。

 

　　打个比喻，你在一家餐馆吃饭，前端就是你餐桌上的东西，后端就是厨房里发生的事。

 

　　HTML（Hyper Text Markup Language）：决定网页的结构

 

　　在这放一张图片在这放一张表格CSS（Cascading Style Sheets）： 决定 HTML 的风格

 

　　这一行文本是紫色这张图片有黄色的边框JavaScript 给网页添加逻辑和交互功能

 

　　做数学运算单击时改变颜色

 

　　HTML被创造于 1989 或 1990 年，最初被用于论文或科技文件的交换和发表上。由于文章在网络上传输时，只能传输纯文本，HTML就使我们能使用粗体、斜体等各种各样的格式。

 

　　例如  就会显示为 粗体，这就是一个元素

 

　　所有的HTML文件都会遵从这一模板。在 Sublime 文本编辑器中，创建一个扩展名为 .html 的新文件，输入 html 按 Tab 即可生成这一模板，输入元素标签如，按Tab即可生成 表示使用的是 HTML5，即最新版本的HTML 是一个 HTML 文件的根元素，所有其他元素都必须在这个元素之中， 元素之中的内容是一个  元素和一个  元素 元素包括 HTML 文件的标题以及脚本（JavaScript）和样式表（CSS）的定义 元素中包括 HTML 文件中的内容注释的格式 ，并不需要手动输入，在 Sublime 中同时按 Ctrl 和 / ，光标所在行就会被注释掉 是标签页上的标题， 至  是各种大小的正文标题块级元素（block level elements）与行级元素

 

　　使用块级元素时会换行，如 使用行及元素不会换行，如  与  都是粗体，但我们使用前者，因为我们想把网页的内容与样式区分开。另外盲人朋友使用阅读设备阅读网络时：会重读，不会

 

　　有序列表

 

　　显示为

 

　　1. Orange

 

　　2. Red

 

　　3. Green

 

　　无序列表

 

　　显示为

 

　　- Orange

 

　　- Red

 

　　- Green

 

　　ol 代表 ordered list，ul 代表 unordered list，li代表 list item

 

　　和  是一般的容器（generic container），把元素划分组别以便加入样式，区别为  是块级容器， 是行级容器，用  会导致换行。

 

　　属性是元素的其他信息，格式为 ,在标签中加入了 key-value pair

 

　　如链接格式为

 

　　-  生成谷歌的链接

 

　　- ，如果 page2 和当前页面在同一目录下，这就是一个到 page2 的链接

 

　　加入样式分栏之后显示会更加直观

 

　　tr 代表 table row ， th 代表 table head ， td 代表 table data 。 thead 和 tbody 只是为了让 head 和 body 的区分更加明显，可以不加。

 

　　虽然 form 和 table 的中文都是表格，但二者的关系不大。form 用来对用户的输入信息划分组别，然后统一进行操作。form 中有 input 、label 等标签，如果只有 form 在实际的网页中你什么都不会看到。下图中的几个输入框就组成了一个 form

 

　　form 的格式为

 

　　action 是目标 URL，输入的信息会被送到这个地址method 是 HTTP 请求的类型

 

　　没有后端的代码，form 实际上什么都不会做。

 

　　填完信息提交之后地址栏变成了  ，由于我未指明 action ，信息还是被送到 HTML 文件所在的地址，问号后面的一串字符叫 query string，以后再介绍。

 

　　label 是 input 前面的信息，这是两种给 input 添加 label 的方法。第一种把 input 放 label 里边，第二种给 input 一个 id ，然后指明 label 对应的 id ，两种方法效果一样。

 

　　Label 小节中的 input 中加入了 required，对于 text 类型的 input 来说这要求用户必须输入，对于 email 类型的 input 来说，必须输入且符合邮箱的格式。

 

　　这是一个下拉菜单，如果 value 值为空，标签中的内容（ :） 或 :| 或 :（ ）被发送。

 

　　单选按钮的 name 值相同才组成单选按钮。Textarea 和 Chechbox 这两个标签一个是文本框，一个是选择框，没什么特别的，在此省略。

 

　　MDN 是个很好的文档在 Sublime 中输入 lorem 按 Tab 会产生一段文本，阮一峰关于Lorem ipsum