一、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. 【手把手教你全文检索】Apache Lucene初探 (zhuan)

    http://www.cnblogs.com/xing901022/p/3933675.html *************************************************** ...

  2. vue 单元测试

    单元测试 配置和工具 任何兼容基于模块的构建系统都可以正常使用,但如果你需要一个具体的建议,可以使用Karma进行自动化测试.它有很多社区版的插件,包括对webpack和browserify的支持. ...

  3. lua工具库penlight--04路径和目录

    使用路径 程序不应该依赖于奇葩的系统,这样你的代码会难以阅读和移植.最糟糕的是硬编码的路径, windows和Unix的路径分隔符正好相反.最好使用path.join,它可以帮助你解决这个问题. pl ...

  4. 存档格式选择--JSON

    游戏里存档可以直接用lua,但是lua需要有一定编程基础:另外可以用ini,不过ini又太简单了,复杂的 格式无法用ini描述:还可以用xml,它的表达能力非常丰富,甚至有限数据库都用xml来作存储结 ...

  5. Odoo 8.0 new API 概述

    相对于7来说,8的api改进了不少,用官方的话来说就是更加面向对象了. 下面探究一下具体的改动. 准备知识:python装饰器的使用 http://blog.csdn.net/thy38/articl ...

  6. [WDT]内部看门狗和外部看门狗

    1. 芯片内部看门狗 内部看门狗通常为芯片内部某个特殊定时器,用户可以通过手动初始化.设置timeout.使能.失能该看门狗,然后在线程中定时去喂狗,从而达到检测应用程序跑飞.跑死的情况. 在Linu ...

  7. ResourceBundle读取utf-8格式properties 中文乱码

    解决方法: ResourceBundle prop = ResourceBundle.getBundle("app");String defaultTunnelName = new ...

  8. php -- PDO属性设置

    设置PDO在处理数据的过程中采用什么方式去处理 PDO::setAttribute:设置属性 PDO::getAttribute:获取属性 语法: bool PDO::setAttribute ( i ...

  9. noip2014滚粗记

    滚粗了..伤心. day0:和baba一起去,但是整天都是下雨啊好不爽,鞋子都湿了啊好不爽,注定是要滚粗?在火车站等了1h后上动车走人...在此期间我还天真的认为火车站的wifi可以被我给破解然后上网 ...

  10. 【BZOJ】1692 & 1640: [Usaco2007 Dec]队列变换(后缀数组+贪心)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1692 http://www.lydsy.com/JudgeOnline/problem.php?id ...