本文详细介绍了HTML的基础知识，包括HTML的起源、版本、特点和基本结构。阐述了HTML作为Web前端开发的重要组成部分，其简易性、可扩展性和平台无关性的特点。此外，还讲解了HTML标签的类型和常用标签，通过实例帮助读者理解和掌握HTML的使用。最后，总结了HTML在Web开发中的关键作用及其与浏览器的交互方式。
在这个互联网发展迅速的时代，前端工程师也作为一门很吃香的行业在迅速的发展，因为本人就是一名web前端工程师，那么我们接下来就来深入学习如何成为一名资深的web前端工程师。
在学习web前端开发工程师之前，我们得先了解什么是web前端工程师？
Web前端开发工程师:从事Web前端开发工作的工程师。主要进行网站的开发、优化、完善的工作，2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种丰富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
随着Web 2.0概念的普及和W3C组织的推广，网站重构的影响力正以惊人的速度增长。XHTML+CSS布局、DHTML和Ajax像一阵旋风，铺天盖地席卷而来，包括百度、腾讯、淘宝、新浪、搜狐、网易等在内的各种规模的IT企业都对自己的网站进行了重构。
前端开发的入门门槛其实相对较低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。所以，对于从事IT工作的人来说，前端开发是个不错的切入点。
前端包括的技术要点有哪些呢？
Web前端开发技术包括三个要素：HTML、CSS、JavaScript，html:结构层,css：样式层（层叠样式表）,javascript：行为层随着RIA的流行和普及，XML、Flash/Flex、Silverlight和服务器端语言也是前端开发工程师应该掌握的。
一. HTML简介：
万维网（world wide web，简称www) 上的一个超媒体文档称之为一个页面。作为一个组织或者个人在万维网上放置开始点的页面称为主页或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL） 指针，通过激活它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。
超文本标记语言（英文缩写：HTML） 是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言
二.HTML版本:
HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由CERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。
HTML历史上有如下版本：
①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
③HTML 3.2：1997年1月14日，W3C推荐标准。
④HTML 4.0：1997年12月18日，W3C推荐标准。
⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持
三.HTML特点:
超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：
- 简易性： 超文本标记语言版本升级采用超集方式，从而更加灵活方便。
- 可扩展性： 超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。
- 平台无关性： 虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
- 通用性： 另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
四.HTML基本结构:
<！DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
- <!DOCTYPE> 声明有助于浏览器中正确显示网页
<head>元素包含了所有的头部标签元素。在<head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。- 可以添加在头部区域的元素标签为:
<title>, <style>, <meta>, <link>, <script>, <noscript>和<base><title></title>:只能写纯文本<body></body>:网页中99%内容在body中，只要放在body中，最终浏览器才能翻译出来<body>常用属性( bgColor：网页背景色 background：网页背景图片地址 )
五.HTML标签:
标签一般有两种：单标签和双标签
单标签：<br/> <hr/>只有结尾的一端
双标签：<html></html> <body></body>有始有终，有头有尾
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
六.HTML常用标签:
段落标签 ：
<p></p>(具有行间距 常用属性：align：水平对齐方式，取值：left(左)、 center(居中)、 right(右）)
换行标签 <br/>
预定义格式化标签 <pre></pre>(就是写成什么就显示什么)
加粗标签 <b></b>
下划线 <u></u>
倾斜 <i></i>
上标 <sub></sub>
下标 <sup></sup>
水平线 <hr/>
字体标签 <font></font>(基本属性:size:文本大小，取值1-7，慢慢变大 color:颜色值。Face：字体)
超链接标签：<a></a>属性 target:设置是否重新打开一个窗口显示链接(_blank:重新打开一个窗口 _parent:当前页面打开)
图片标签 <img src="(加入图片)">alt属性：在浏览器无法载入图像时，替换文本属性告诉读者的信息。此时，浏览器将显示这个替代性的文本而不是图像
水平线基本属性:size：水平线的粗细，单位一般为 px。color：水平线的颜色。 width：水平线的宽度。 noshade：去掉水平线的阴影(在 HTML 中，noshade 是没有值的属性)
格式<hr size="_" color="_" width="_" noshade="noshade">
标题标记：<h1>……<h6>
功能：定义各种标题。
属性：align 水平对齐方式，取值：left、center、right。HTML字符实体
代表一个半角空格.
<：< ￥：¥ ×：× ÷：÷ boder:表示的是表格的边框宽度
>：>
&：&
七.举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>不会写代码</title>
</head>
<body>
<font color="blue">赠汪伦<sub><font color="black">-李白</font></sub></font><br>
<br>
<font>李白乘舟将欲行，</font><br>
<font size="5" color="yellow" face="宋体">忽闻岸上跳歌声。</font><br>
<font face="隶书">桃花潭水深千尺，</font><br>
<font color="red"><u>不及汪伦送我情。</u></font><hr />
<font>求二元方程组a<sup>2</sup>+b<sup>2</sup>=24的解</font><br>
</body>
</html>
八.总结:
HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
HTML 的关键是标签，其作用是指示将出现的内容
超文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果
扫一扫
2138
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
