前端开发 - HTML - 简介

[TOC]

一、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部分 结束 -->

原文地址:https://www.cnblogs.com/alice-bj/p/8966687.html

时间: 2024-11-05 20:46:04

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

WEB前端开发学习----简介

放暑假没事,看到网上关于HTML5 和 CSS3的讨论很多.所以想要趁暑假学习一下web前端. 由于HTML与CSS入门比较轻松,所以我认为可以同时进行HTML, CSS和JavaScript 的学习.今天是第一天的学习记录.全是大白话方便理解. 1 什么是web前段? 我们看到的网站一般分为两部分,第一部分是浏览器和用户之间的交流,也称为前端(front-end),第二部分是浏览器和服务器之间进行的交流(B/S),也就是后端(back-end).一般来说前端是使用HTML,CSS,javasc

网页前端开发,对于图片慢加载简介

http://www.cnblogs.com/qingseyuandi/p/loadingLater.html 网页前端的图片慢加载给网页显示的成本降低了不少,因此我在这边简单的介绍一下慢加载的一个技术原理,希望能起到抛砖引玉的作用,写的不好的地方希望指正,谢谢~~   技术背景 现在的网页系统,对于一些对图片资源比较多,并且一次性无法浏览完整个网页的情况下,图片慢加载可以提高客户端的体验,如IT大头:淘宝,网易,新浪等等...  技术原理   技术说穿了其实也就那么回事,懂了就简单了,呵呵~

web前端开发规范

本文原创,这里首先声明,转载注明本文出处,翻版必究! web前端开发规范的现实意义 1.提高团队的协作能力 2.提高代码的重复利用率 3.可以写出质量更高,效率更好的代码 4.为后期维护提供更好的支持 5.可读性高 一.命名规则 1.html命名规则: a.文件名称命名规则:统一使用小写英文字母.数字.下划线的组合,不得包含汉字空格和特殊字符 2.命名原则:方便理解.方便查找 b.索引文件命名原则:index.html.index.htm.index.asp.index.aspx.index.j

Web前端开发规范手册

一.规范目的 1.1 概述 ..................................................................................................................................... 1 二.文件规范 2.1 文件命名规则...................................................................................

Web前端开发推荐阅读书籍、学习课程下载

转自http://www.xuanfengge.com/fe-books.html 前言 学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学习和跟着有经验的同事学习,读书也是必不可少的.书中有着相对完整的知识体系,每读一本好书都会带来一次全面的提高. 而如果深一脚浅一脚的学习,写出代码的质量会参差不齐.初学者的首要任务是成为靠谱的熟练开发者,能够稳定的输出有一定质量的代码. 前端技术发展速度特别快,总是涌现出很多新的东西,需要不断的学习

麦子新课上线之web前端开发规范

同学们,Web前端开发又有课程上线啦!对Web前端感兴趣的同学们,速来围观哦~~下面简单介绍一下课程. [学霸学新,课快人一步] 课程简介: Web前端开发规范,可以帮助同学们,了解web前端开发规范的意义,掌握前端开发中的开发规范,掌握web前端开发中的实用技巧.面对企业团队开发,可以很快融入团队合作中,高效率的完成团队给予的任务. 课程地址→http://www.maiziedu.com/course/web/621-8960/ 老师简介: 何虎:8年软件开发经验,擅长互联网应用程序开发,曾

web前端开发——react入门

一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了.由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具.React是MVC中的V层,是视图层面的一个框架.React是创建虚拟dom(vi

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

w3cmark最近会新增一个栏目,专注于搜集前端资源的下载,包括和前端相关的电子书.文档PPT.手册.视频教程等等.而下载的媒介是用微博的微盘,至于为什么选择微盘的,那是因为和微博关联起来,通过微盘上传后,第一时间分享给粉丝查看和下载,所以希望喜欢的朋友关注我们的微博 @w3cmark . 资料名称 <最受网友力荐的30份HTML前端开发资料>. 资料简介 今天推荐的资料是一份PDF,是51cto弄的一份关于前端开发资料的整理.里面总共推荐了30分相关资料,包括有<HTML5高级程序设计

麦子学院-Web前端开发工程师系列培训教程

HTML+CSS基础入门1.课程介绍2.html的语法3.html的基本结构4.html的文档设置标记上(格式标记)5.html的文档设置标记下(文本标记)6.html图像标记img7.html超链接的使用8.html表格相关的标记9.html表格实战<简单的网页布局>10.html框架详解与框架布局实战11.HTML表单设计(上)12.HTML表单设计(下)13.使用CSS样式的方式14.定义CSS样式(CSS选择器)15.CSS常用属性(颜色属性)16.css常用属性(字体相关属性)17.