我们每天都在浏览着各种各样的网站，这些网站都是怎么做的你知道吗？
其实它没有你想的那么神秘，他们都是基于本文的主题——HTML 。
学习使我快乐
什么是HTML？
HTML（Hyper Text Markup Language）——顾名思义，它的中文名称叫超文本标记语言，是一种用于创建网页的标准标记语言。
网页浏览器可以读取HTML文件，并将其渲染成可视化网页，这就形成我们看到的网页了，HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如<html>），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。
关于HTML标签
HTML的语言形式为尖括号包围的HTML元素（如<html>），我们称之为HTML标签，页面上的所有元素都是由各种标签组成的。
值得注意的是HTML中的标签一般都是成对出现的，括号中包含元素名称，结束标签前加“/”，除了一些特殊的标签如input之外，也就是说一般都是这种形式<code><html></html></code>或这种<code><input /></code>。
一个基本的网页由以下标签组成：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body></body>
</html>
<code><!DOCTYPE> </code>声明必须是 HTML 文档的第一行，位于 <html> 标签之前。(初学者可以不必太关注这里，写的时候会用就行)
<code><html></html> </code>是用来包主所有HTML标签的，只有这样才能正确显示；
<code><html></html></code>中一般包含<code><head></head></code>和<code><body></body></code>两部分，<code><head></head></code>是网页的头部信息，例如<code><title></title></code>，这里的内容就是浏览器中每一个标签页的名字；<code><body></body></code>里就是页面上要显示的内容。
常用的HTML标签
文字相关标签：
h -- 定义标题1至标题6 h1, h2, h3, h4, h5, h6，文字大小依次减小
p -- html段落标签p
div -- html层div
strong -- 定义要强调显示的内容strong
em -- 定义内容为斜体
span -- 定义部分区块
列表标签：
ul -- 无序列表
ol -- 有序列表
li -- 列表项
表格类标签：
table -- 定义html表格table
tr -- 定义表格行
td -- 定义表格列
th -- 定义表项
图像与链接类标签：
a -- html链接标签
img -- html添加图片
表单类标签：
form -- html表单标签form
input -- 定义一个表单的输入域input
select -- 定义可选择的html表单select
textarea -- 定义一个多行的文字输入域textarea
更多标签请参见http://www.w3school.com.cn/tags/
开始第一个网页
纸上得来终觉浅，根据上面的介绍我们来创建第一个网页吧！
首先找一个用的顺手的编辑器，创建一个名为index.html文件，如果用的是文本编辑器先将后缀名改为txt，保存代码后将后缀名改为html即可，在文件中输入以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>你好，旧时光</h1>
</body>
</html>
<code><meta charset="UTF-8"></code>是用来设置编码方式为UTF-8，不加的话中文就会显示为乱码。
选择用浏览器打开index.html文件就可以看到如下效果啦：
第一个网页，棒棒哒
练练手
有没有觉得自己棒棒哒，快给自己鼓个掌吧，好啦，趁热打铁，快来做练习。
注：以下练习都可以在我的代码中找到源代码，仅供参考
1. 实现下图中的列表
分析：
1）判断要用什么标签？
毫无疑问，列表当然得用HTML中的列表类标签啦；
2）划分区块
我们先划分一下图中的内容，可以看到JavaScript 和 Java属于同一级无序列表，在这两级下面都有两个有序列表，再下一级是一个无序列表；
效果图
2. 实现下图中的表格
分析：
- 目标是一个表格，所以得用到HTML中表格相关的标签；
- 表格从大的看分为两部分，表的题目和内容；
- 表格中并不是每一个表项都只占一个单元格，有的跨行，有的跨列；
- 表格有边框，且内容居于单元格的中间；
了解了这些，实现起来就很容易了，在HTML中tr 标签所包裹的是一行，td 包裹的是一列，值得提到的是HTML中跨行跨列的实现，比如''名称一栏''，它就是跨了两行，同理，''2016-11-22'' 一栏跨了两列。
跨行跨列的实现请参见
http://www.splaybow.com/html-table-rowspan-colspan.shtml
效果图
3. 使用正确的标签生成如图试卷
这个我就不分析了，如果有兴趣的话可以自己练练，同样代码可以在我的代码中找到，仅供参考哦。
网友评论