一、web1.0时代的网页制作

静态网页，所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页，我们当时称为“牛皮癣”网页。例如一篇QQ日志、一篇博文等展示性文章。

网页三剑客 Dreamweaver+Fireworks+Flash”吧，这个组合就是web1.0时代的产物。

二、web2.0时代的前端开发

前端开发”是从“网页制作”演变而来的。

从2005年开始，互联网进入web 2.0时代，由单一的文字和图片组成的静态网页已经不能满足用户的需求，用户需要更好的体验。

在web 2.0时代，网页有静态网页和动态网页。所谓动态网页，就是用户不仅仅可以浏览网页，还可以与服务器进行交互。

web2.0时代的网页不仅包含炫丽的动画、音频和视频，还可以让用户在网页中进行评论交流、上传和下载文件等（交互性）。

三、前端开发都有哪些内容

网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。

HTML:网页的结构

    HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。

CSS:网页的外观

    CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。

JavaScript:页面的行为

    JavaScript是一门脚本语言。

四、开发环境

HTML编辑器，常见的Hbuild、Sublime Text、Dreamweare都可以用来开发HTML。当然PyCharm也支持HTML开发。（*.html / *.htm）

五、HTML

HTML作为一种标记语言它并没有什么逻辑，简单来说就是一些符号，一些有特殊意义的符号，一些浏览器认识的有特殊意义的符号。

1.标签

在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来，如`<html>`、`<p>`都是标签。

HTML中标签通常都是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个`/`，如`<p>标签内容</p>`和`<div>标签内容</div>`。开始标签和结束标签之间的就是标签的内容。

标签之间是可以嵌套的。例如：div标签里面嵌套p标签的话，那么`</p>`必须放在`</div>`的前面。

HTML标签不区分大小写，`<h1>`和`<H1>`是一样的，但是我们通常建议使用小写，因为大部分程序员都以小写为准。

2.HTML文档结构

<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。

<html></html> 称为根标签，所有的网页标签都在<html></html>中。

<head></head> 标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签，头部标签在下一节中会有详细介绍。

<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在<body>标签中的内容（图中淡绿色部分内容）最终会在浏览器中显示出来。

HTML文档包含了HTML标签及文本内容，不同的标签在浏览器上会显示出不同的效果，所以我们需要记住最常见的标签的特性。

3.HTML注释：

  <!-- xx部分 开始 -->

  这里放你xx部分的HTML代码

  <!-- xx部分 结束 -->

前端开发 - HTML - 简介的更多相关文章

  1. 工具-VS2015前端开发工具简介

    每个涉及的工具库都给出了入门介绍.基本概念,以及在VS和ASP.NET中的用法.这个白皮书完全就是一个非常难得的前端开发入门手册. 具体涉及到的工具库有: 流行的JS任务执行器:Grunt和Gulp. ...

  2. 前端开发工程师 - 06.Mini项目实战 - 项目简介

    第6章--Mini项目实战 项目简介 Mini项目简介-Ego社区开发 回顾: 页面制作 页面架构 JavaScript程序设计 DOM编程艺术 产品前端架构 实践课Mini项目--Ego: 主题:漫 ...

  3. “1+X”证书Web前端开发等级考试简介

    考试简介 “1+X”证书制度是为了深入贯彻党的十九大精神和全国教育大会精神,教育部会同国家发展改革委.财政部.市场监管总局制定了<关于在院校实施“学历证书+若干职业技能等级证书”制度试点方案&g ...

  4. 前端开发与SEO

    前端开发中通过一些小习惯,可以有利于SEO,本着蚊子再小也是肉的原则,能抓住自然不能忽略. 1.控制首页链接数量,不能过多,也不要太少.更不要为了凑数而添加 2.扁平化层次,力争跳转三次可以到任何页面 ...

  5. Web前端开发规范手册

    一.规范目的 1.1  概述 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发.  ...

  6. 推荐资料——最受网友力荐的30份HTML前端开发资料

    w3cmark最近会新增一个栏目,专注于搜集前端资源的下载,包括和前端相关的电子书.文档PPT.手册.视频教程等等.而下载的媒介是用微博的微盘,至于为什么选择微盘的,那是因为和微博关联起来,通过微盘上 ...

  7. web前端开发工程师

    web前端开发工程师 百科名片 Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过5年.Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征.在互联网的演化进 ...

  8. 前端开发必备的Sublime 3插件

    Sublime的大名已经无需我介绍了,首先先介绍如何启用插件安装功能: 打开Sublime 3,然后按 ctrl+` 或者在View → Show Console 在打开的窗口里黏贴这个网站上的代码( ...

  9. BAT 前端开发面试 —— 吐血总结

    更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了腾讯和阿里的内推及百度的实习生招聘,在此总结一下 一是备忘.总结提升,二是希望给大家一些参考 其他面试及基础相关可以参考其他博文: ...

随机推荐

  1. MySQL编程API

    1.MySQL API数据结构 MySQL API中用到了很多结构体类型,下面就简单说一下常用的结构体. MYSQL 连接数据库前,必须先创建MYSQL变量,此变量在很多MySQL API函数中会用到 ...

  2. Git和Repo管理使用简要介绍

    在Linux平台下进行Android系统项目开发时,需要Git或repo管理. 一. Git和Repo的区别: 1. Git:Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的 ...

  3. tableview 与 tableview cell

    1.tableview cell: import Foundationimport UIKit class CjwtCell: UITableViewCell { @IBOutlet var lb_c ...

  4. Unix系统编程（）发送信号kill

    与shell的kill命令类似,一个进程能够使用kill系统调用向另一进程发送信号. 之所以选择kill作为术语,因为早期UNIX实现中大多数信号的默认行为是终止进程. #include <si ...

  5. Hadoop中MapReduce计算框架以及HDFS可以干点啥

    我准备学习用hadoop来实现下面的过程: 词频统计 存储海量的视频数据 倒排索引 数据去重 数据排序 聚类分析 ============= 先写这么多

  6. mongodb和redis设计原理简析

    转自:http://blog.csdn.net/yangbutao/article/details/8309539 redis:   1.NIO通信     因都在内存操作,所以逻辑的操作非常快,减少 ...

  7. MyBatis-Spring-Boot 使用总结

    接 MyBatis-Spring 使用总结 .   mybatis开发团队为Spring Boot 提供了 MyBatis-Spring-Boot-Starter . 首先,MyBatis-Sprin ...

  8. 异常之*** buffer overflow detected ***

    *** buffer overflow detected *** 是sprintf()超出buff大小

  9. 【BZOJ】2440: [中山市选2011]完全平方数（莫比乌斯+容斥原理+二分）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2440 我觉得网上很多题解都没说清楚...(还是我太弱了? 首先我们可以将问题转换为判定性问题,即给出 ...

  10. install phalcon on mac with XAMPP

    首先使用brew安装对应版本的phalcon,参考https://docs.phalconphp.com/en/latest/reference/tutorial.html 安装好后会有 phalco ...