阅读目录

1.标签

2.HTML目录结构

3.HTML注释

一、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. Sublime Text前端开发工具介绍

    Sublime Text前端开发工具介绍.. Sublime Text这款前端开发工具中的非常优秀的特性进行介绍 ------------ sublime text 3 3114 注册码 —– BEG ...

  2. web前端开发教程系列-1 - 前端开发编辑器介绍

    目录: 前言 一. Webstorm 1. 优点 2. 缺点 3. 教程 4. 插件 5. 技巧 二. SublimeText 1. 优点 2. 缺点 3. 教程 4. 插件 5. 技巧 前言 由于很 ...

  3. WEB常用前端开发调试工具介绍

    只要是设计开发,就需要进行调试,尽管相对来说,前端的调试要简单一些,但使用一些调试工具或插件还是能提高你的工作效率.下面是一些主要用于IE浏览器环境和Firefox浏览器环境等的调试工具简介. 一.I ...

  4. Sublime Text 3前端开发常用优秀插件介绍

    . 首页 博客园 联系我 前言:关于Sublime Text 3. Package Control插件管理. Package Control使用方法/安装Emmet插件. Emmet插件. JsFor ...

  5. 前端开发自动化工作流工具，JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  6. Notepad++前端开发常用插件介绍 - BorisHuai前端修炼 - 博客频道 - CSDN

    Notepad++前端开发常用插件介绍 - BorisHuai前端修炼 - 博客频道 - CSDN.NET http://blog.csdn.net/borishuai/article/details ...

  7. 前端开发工具Brackets介绍，安装及安装Emme插件时踩过的坑

    对于前端开发的园友来说有可能IDE工具有很多,层次不穷,还有每个人的喜好及习惯也不一样,因为我是一名后端开发的.Net程序员,但是大家都知道,现在都提倡什么全栈工程师,所以也得会点前端开发,所以我对于 ...

  8. 初学者Web介绍一些前端开发中的基本概念用到的技术

    Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...

  9. web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 规范 HTML结构详解 {前端之前端初识}

    前端之前端初识   前端初识 本节目录 一 web标准 二 浏览器介绍 三 开发工具介绍 四 HTML介绍 五 HTML颜色介绍 六 规范 七 HTML结构详解 一 web标准 web准备介绍: 1. ...

  10. Notepad++前端开发常用插件介绍

    Notepad++前端开发常用插件介绍 Notepad++除了自身的功能强大之外,更是有许多非常的优秀的插件,下面就总结一下前端开发过程一些比较常用的插件. Emmet Emmet的前身是Zen Co ...

随机推荐

  1. [UI] 03 - Bootstrap: component

    前言 一.框架体系 Bootstrap 是基于 HTML5.CSS3.JAVASCRIPT. 教程被分为: Bootstrap 基本结构. Bootstrap CSS. Bootstrap 布局组件 ...

  2. [UI] 04 - Bootstrap: layout & navigation

    前言 一.资源 From: http://www.imooc.com/code/2881 Ref: http://www.runoob.com/try/bootstrap/layoutit/[拖拽布局 ...

  3. 11代理模式Proxy

    一.什么是代理模式 Proxy模式又叫做代理模式,是构造型的设计 模式之一,它可以为其他对象提供一种代理(Proxy)以 控制对这个对象的访问. 所谓代理,是指具有与代理元(被代理的对象)具有 相同的 ...

  4. java.util.Stack(栈)的简单使用

    import java.util.Stack; import org.junit.Before; import org.junit.Test; /** * Stack(栈)继承了Vector类,底层实 ...

  5. Oracle迁移至PostgreSQL工具之Ora2Pg

    1. 描述 Ora2Pg是一个免费的工具,用于将Oracle数据库迁移到PostgreSQL兼容的模式.它连接您的Oracle数据库,自动扫描并提取它的结构或数据,然后生成可以装载到PostgreSQ ...

  6. js中的原型继承

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. .Net Core 部署到Ubuntu 16.04 中的步骤

    需要安装的工具 .Net Core Nginx反向代理服务器(相当于Windows下的IIS) Supervisor(进程管理工具) .Net Core安装方法请参阅 官方文档 安装完成后就可以在项目 ...

  8. sonar-scanner的执行流程和对ClassLoader,动态代理的使用

    最近项目上使用了sonarqube来提供静态代码检查的服务,在看sonar-scanner的源码的时候,发现sonar-scanner用来分析的jar包是从sonar的服务器上下载下来的,使用自定义的 ...

  9. HTML+CSS：圆形和圆角图片格式

    效果展示 实现代码 <!DOCTYPE html> <html> <head> <title>JcMan</title> <style ...

  10. Linux之vmware安装

    环境准备  mac            用     vmware  fusion                      虚拟机            和  iterm2      远程连接工具, ...