HTML是什么？
HTML（Hyper Text Markup Language）是用来描述网页的一种语言，也叫超文本标记语言。
HTML文档就是前端工程师设计网页时使用的语言，浏览器会根据HTML文档的描述，解析出它所描述的网页。
查看网页的HTML代码
打开风变编程教学网站：
在网页任意地方点击鼠标右键，然后点击"显示网页源代码"。（Windows系统的快捷键Crtl+u）。
浏览器会弹出一个新的标签页
在网页空白处点击右键，然后选择检查（快捷方式Ctrl+Shift+i）。
点击后的效果
注：标亮的部分就是网页的HTML代码
将鼠标放在HTML源代码上，左边网页上有一些内容会被标量。这其实就是这行代码所描述的网页内容，一左一右，相互对应。
HTML的层级
HTML源代码和网页，就像建筑图制和房子。房子有不同楼层所组成，每一层中，都会包含一些房间，一个房间还可能划分几个更小的房间，每个小房间是由门、窗、墙壁、地板等等构建组成的。
HTML源代码中有一些小三角，每一个三角形都可以展开或合上。
每一个可以展开和合上的小三角形里包含的内容，都是一个层级，它很像电脑中一层一层的文件夹。
HTML的组成
标签和元素
实例
尖括号<>中间的字母，就叫做标签。
标签通常是成对出现的：前面的是开始标签，例<body>；后面的是结束标签，如</body>。
常见元素：
注：HTML标签是可以嵌套标签的，而且可以多层嵌套。
网页头和网页体
HTML文档的基本是有网页头和网页体组成的
HTML文档的最外层标签一定是<html>，里面嵌套着<head>元素与<body>元素。<head>元素代表了网页头，<body>元素代表了网页体。
网页头里面的内容
<meta charset='utf-8'>定义了HTML文档的字符编码。
<title>元素定义网页的标题
而网页体，就是显示在网页中的内容了。
网页体中依次有四个内容：
<h1>元素代表一级标题，<h2>元素代表二级标题等等 。然后<p>元素，代表段落文本。
属性
HTML标签可以通过设置属性来为HTML元素描述更多信息
实例
这行代码给<h1>元素添加了一个style属性，属性中的内容规定了这行文字的颜色。
style属性可以用来定义网页文本的样式，比如字体大小、颜色、间距、对齐方式等等。
href属性——添加链接
除了style和href，HTML中还有两个很常用的属性，即class与id。
实例
<style>元素的内容，是对.book网页布局的具体描述
.book中的.对应class。因此，网页头中的.book和网页体中的class='book'是有联系的。
在网页头里面，定义了class属性，属性值为'book'，然后下面一长串代码是对这个class属性的描述；接着再再网页体中调用，所以看到了<div class='book'>。
类似建筑师会做门表图，规定好每一种门的详细尺寸和样式，然后给每个门都起个名字。
网页头的<style>元素中定义了.book的样式，因此，凡是class='book'的元素都会继承它的样式。
id属性和class属性的用法类似，给元素定义id和class的目的都是为了查找、定位元素，或者为元素设置样式。
而id属性用于表示唯一的元素，而class用于标识一系列的元素。
常用HTML属性总结
一起来读HTML
点击URL：
网页中点击右键——检查
在网页头中定义了编码、选项卡之类的内容，里面的<style>元素也定义了一些样式。
网页体，点击三角符号折叠，内部的结构
网页体有三大部分，<div id='header'>元素的部分，<div id='article'>元素的部分，和<div id='footer'>元素的部分。
三部分分别是：顶部的标题、中间的内容、以及底部。
首个<div>元素是网页的顶部标题：id='header'
然后是<div id='article'>元素，对应的是中间的正文部分。
底部对应着的<div id='footer'>
继续点开HTML的<div id='article'>元素，折叠三角符号
<div id='article'>元素分为两部分，分别是对应着网页中间的左边栏和正文部分。
第一个<div>元素，id='nav'，对应着侧边栏。
可以看到<div>元素中，包含了三个<a>元素，内容是：科幻小说、人文读物、技术参考。
第二个<div>元素对应着右边正文部分，id='main'
在<div id='main'>中，又包含了三个<div>元素，它们都用同样的属性。每个<div>元素分别介绍了一本书的内容。
修改网页
打开网页，点击开发者工具的左上角
点击它，然后再把鼠标放在网页中，和点击源代码的情景相反，当数标放在网页上，右边代码区中描述它的代码会被标亮出来。
这是以后要经常用到的功能，用来定位所要查找的网页内容的源代码。
通过修改HTML源代码，是可以修改网页的。
实例：修改网页的标题
把鼠标放在网页"这个书苑不太冷"，看到网页源代码中，标题所在的这个元素被标亮了，接下来修改这里的内容。
把鼠标点上去，双击，就和修改word文档一样。
改完之后，按下enter确认。左边的文字就变成了你刚才输入的样子。最后关掉开发者工具就可以啦。
拓展练习
通过修改HTML源码，修改明星的微博。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60345.shtml
