前端教程(4)html介绍

一 HTML简介

用户使用浏览器打开网页看到结果的过程就是:浏览器将服务端的文本文件(即网页文件)内容下载到本地,然后打开显示的过程。

而文本文件的文档结构只有空格和换行两种组织方式,如此,文本文件在打开显示时,显示的效果将会非常非常非常的单一,

为了让显示的效果不那么单调,我们会偏向使用word一类的文本编辑工具来编排文本内容,编排的原理就是:在编辑文件时会选中各部分内容,然后为内容打上不同的标记,比如什么是标题,什么是段落,然后存放硬盘里,等下次打开时,word会识别之前的标记,然后按照预先编排好的结果显示出来

站在显示文本内容的角度去看,浏览器与word的原理一样,我们可以将浏览器当成一个网页版的只读word,浏览器也必须有一套自己能识别的标记文本的规范,该规范被称为HTML,HTML全称是超文本标记语言(HyperText Markup Language)
“超文本”指的是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本
“标记”指的是在编辑文本时用特殊的记号标记一下各部分内容的意义,该记号称之为标签,比如用标签h1标记标题,用标签p标签段落,如此我们标记一首唐诗就成了如下格式:

<h1>卧石绿</h1>
<p>卧石一支绿</p>
<p>沃枝回芳脾</p>
<p>鱼吻卧石水</p>
<p>卧石答春绿</p>

这样浏览器在接收到文本内容后,就可以按照事先规定好的记号去显示各部分的内容,显示结果如下图

所以我们学习HTML就是在学习一系列的标签

HTML注意事项!!!

#1、记号/标签是不会显示出来的。

#2、虽然用<h1>标记的文本在显示时会被加大加粗,但请务必记住,HTML的作用只有一个它是专门用来对文件做记号来标识其语义的(语义指的是该文本是做什么用的),加大和加粗这种为文本添加样式的操作并不是HTML擅长的,虽然早期的时候确实也用HTML来制作样式,但以后我们专门用CSS来做这件事,这也是一种解耦合的思想

#3、HTML是一个网页的主体部分,也是一个网页的基础。因为一个网页可以没有样式,可以没有交互,但是必须要有网页需要呈现的内容。所以HTML部分是整个前端的基础。

二 HTML发展史

超文本标记语言(第一版):在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准),后来陆续由w3c制定标准

IETF简介

  • IETF是英文Internet Engineering Task Force的缩写, 翻译过来就是"互联网工程任务组"
  • IETF负责定义并管理因特网技术的所有方面。包括用于数据传输的IP协议、让域名与IP地址匹配的域名系统(DNS)、用于发送邮件的简单邮件传输协议(SMTP)等

W3C简介

  • W3C是英文World Wide Web Consortium的缩写, 翻译过来就是W3C理事会或万维网联盟, W3C是全球互联网最具权威的技术标准化组织.
  • W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee
  • W3C负责web方面标准的制定,像HTML、XHTML、CSS、XML的标准就是由W3C来定制的。

Tim Berners-Lee(蒂姆·伯纳斯-李),万维网之父、html设计者、w3c创始人

在HTML的早期发展中,大部分标准都是所谓的retro-spec,即先有实现后有标准。在这种情况下,HTML标准不是很规范,浏览器也对HTML页面中的错误相当宽容。这反过来又导致了HTML开发者写出了大量含有错误的HTML页面

html语言本身有一些缺陷(例如: 内容和形式不能分离;标签单一;数据不能复用等等),随着xml的兴起人们希望xml来弥补html的不足,但是目前有成千上万的网页都是用html编写的,所以完全使用xml来替代html还为时过早,于是W3C在2000年推出了xhtml1.0, 建立xhtml的目的就是实现从html向xml的过度

为了规范HTML,W3C结合XML制定了XHTML 1.0标准,这个标准没有增加任何新的标签,只是按照XML的要求来规范HTML,并定义了一个新的MIME type application/xhtml+xml。W3C的初衷是要求浏览器对这个MIME type实行强错误检查,如果页面有HTML错误,就要显示错误信息。但是由于已有的web页面中已经有了大量的错误,很多开发者拒绝使用新的MIME type。W3C不得已,在XHTML 1.0的标准之后增加了一个附录C,允许开发者使用XHTML语法来写页面,同时使用旧的MIME type,application/html,来分发页面

W3C随后在XHTML 1.1中取消了附录C,即使用XHTML 1.1标准的页面必须用新的MIME type来分发。于是这个标准并没有很多人采用

有了XHTML的教训,W3C在制定下一代HTML标准时(HTML5),就将向后兼容作为了一个很重要的原则。HTML5确实引入了许多新的特性,但是它最重要的一个特性是,不会break已有的网页。你可以将任何已有的网页的第一行改成<!DOCTYPE html>,它就成也一个HTML5页面,并且可以照样在浏览器里正常的展示。

简而言之
1、HTML语法非常宽松容错性强;
2、XHTML更为严格,它要求标签必须小写、必须严格闭合、标签中的属性必须使用引号引起等等;
3、HTML5是HTML的下一个版本所以除了非常宽松容错性强以外,还增加许多新的特性

HTML和XHTML、HTML5区别

原文地址:https://www.cnblogs.com/mayite/p/9096079.html

时间: 2024-11-05 15:17:49

前端教程(4)html介绍的相关文章

好程序员web前端教程分享异步加载CSS的一些方法

好程序员web前端教程分享异步加载CSS的一些方法,在我们写页面的时候,我们做最主要的任务就是提高页面的性能和弹性加载速度,以不会延迟页面的呈现的形式来加载CSS.这是因为在默认情况下, - 浏览器会同步加载外部的CSS - 在下载和解析CSS时会影响所有页面呈现 这两种情况都会导致潜在的延迟. 当然,这也是在开始渲染页面之前,应该至少加载网站的CSS的一部分,并且为了立即将该初始CSS添加到浏览器,我们建议内联css.对于整体数量较少的网站,仅此一项就足够了,但如果CSS很大(例如,大于15到

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

Notepad++前端开发常用插件介绍 Notepad++除了自身的功能强大之外,更是有许多非常的优秀的插件,下面就总结一下前端开发过程一些比较常用的插件. Emmet Emmet的前身是Zen Coding,一款使用仿CSS选择器的语法来快速开发HTML和CSS的插件,是前端开发神器.它无视了编辑器的自动提示和自动完成,秒杀了你自定义的各种快捷键或者 AHK 的热字符串,以智能简洁高效的缩短输入,带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验.现在可以在Notepad++

Struts2.x教程(一) Struts2介绍

一.Struts2是什么 Struts2是在WebWork2基础发展而来的.和Struts1一样, Struts2也是基于MVC的web层框架. 那么既然有了Struts1,为何还要Struts2? Struts2和Struts1虽然都是基于MVC的Web框架,但是它们的实现机制完全不同. Struts1是基于Servlet的实现,并且Struts1的API过分依赖容器,导致了Action开发.测试都非常繁琐,而Struts2是基于过滤器的实现,API不再依赖容器,测试过程中不必再模拟Web容器

web前端自动化测试利器puppeteer介绍

web前端自动化测试利器puppeteer介绍 Intro Chrome59(linux.macos). Chrome60(windows)之后,Chrome自带headless(无界面)模式很方便做自动化测试或者爬虫.但是如何和headless模式的Chrome交互则是一个问题.通过启动Chrome时的命令行参数仅能实现简易的启动时初始化操作.Selenium.Webdriver等是一种解决方案,但是往往依赖众多,不够扁平. Puppeteer是谷歌官方出品的一个通过DevTools协议控制h

好程序员前端教程-关于浏览器的兼容问题

好程序员前端教程-关于浏览器的兼容问题常见浏览器兼容问题:1.li在IE中底部3像素的BUG.解决方案:在< li>上加float:left:即可解决 IE6中奇数宽高的BUG.解决方案:就是将外部相对定位的div宽度改成偶数.高度也是一样的. IE6文字溢出BUG.引发这种BUG有以下几个条件:1)是注释引起的,删除所有注释即可.2)hidden的input直接放在form下.3)display为none的div也有可能引发此bug.4)可以通过外面再包一次DIV解决.由注释造成文字溢出,属

好程序员前端教程-讲给小白:你不知道的HTML5

好程序员前端教程-讲给小白:你不知道的HTML5一.HTML5概念HTML5并不仅仅只是做为HTML标记语言的一个最新版本,更重要的是它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言.HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等,可以帮助开发者创建富互联网应用,同时有令人眼花缭乱的css 3,还提供了一些Javascript API,如地理定位.重力感应.硬件访问等,可以在浏览器内实现类原生应用,制作webApp,甚至结合Canvas我们

好程序员前端教程-javascript的面向对象

好程序员前端教程-javascript的面向对象一.什么是面向对象?1.面向对象就是把构成问题是无分解成多个对象,建立对象不是为了完成某个步骤,而是描述某个事物在这个解决问题的步骤中的行为.2.面向对象是一种思维方法.3·面向对象是一种编程方法.4·面向对象并不只针对某一种编程语言.二.面向对象和面向过程的区别和联系?1.面向过程侧重整个问题的解决步骤,着眼局部或者具体.2·面向对象侧重具体的功能,让某个对象具有这样的功能,更侧重整体.面向过程的优点:1.流程化使得编程任务明确,在开发之前基本考

好程序员前端教程面对对象与原型原型链

好程序员前端教程面对对象与原型原型链一.面向对象:面向对象是一种程序开发的方法,它将对象作为程序的基本单元,将程序和数据封装其中,以提高软件的灵活性.重用性和扩展性.对象是把数据及对数据的操作方法放在一起,作为一个相互依存的整体.再说一下类与对象,类描述了一组有相同特性和相同行为的对象,具有相同属性和相同方法的对象的抽象就是类.即对象的抽象是类,类的实例是对象.在面向对象的编程中,把用类创建对象的过程称为实例化.面向过程与面向对象的区别在于面向过程是一种直接的编程方法,它是按照编程语言的思路考虑

好程序员web前端教程分享JavaScript简写方法

今天好程序员web前端教程为大家分享JavaScript简写方法,小伙伴们快来看一看吧. 1.三元操作符 当想写if...else语句时,使用三元操作符来代替. constx =20; let answer; if(x >10) { answer ='is greater'; }else{ answer ='is lesser'; } 简写: constanswer = x >10?'is greater':'is lesser'; 也可以嵌套if语句: constbig = x >10