前面
我们每天都在浏览着网络上丰富多彩的页面, 那么在网页中所呈现出的绚丽多彩的内容是怎么设计出来的呢? 我们想要自己设计一个页面又该如何来做呢? 对于刚刚接触网页设计的小伙伴来说, 看到网页背后的一堆符号和代码, 是不是会感到有些凌乱."看这里, 看这里", 其实 html 并不复杂, 严格意义上它并不是编程, 它只是一些标记, 也可以说是和浏览器的一些 "约定", 就是告诉浏览器, 要显示什么内容, 这些内容是什么样式.
好了, 不废话了, 来个例子看下:
一个 HTML 小例子
第一步: 新建 "记事本", 把下面这段代码复制到记事本中去, 然后保存.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- 网页的标题
- </title>
- </head>
- <body>
- <p>
- 左手程序 Z 右手诗
- </p>
- </body>
- </HTML>
第二步: 将记事本后缀名 ".txt" 改为 ".html".
image
第三步: 点击 "新建文本文档. html" 这个 HTML 文件, 就可以在浏览器打开了.
image
OK, 是不是很简单, 我们看一下过程:
通过上面的几行代码, 不难看出, HTML 就是由一些用尖括号围起来并且成对出现的标签组成. 不错, HTML 就是由若干标签及其包含的内容组成, 这些标签一般都是成对出现的, 有开始和结束, 但也有部分自闭合标签例外, HTML 的基本结构由以下几个部分组成:
标记符 < HTML > 和 </HTML>, 表明该文件是用 HTML 来描述的, 声明了文档的开头和结尾.
标记符 < head > 和 </head>, 表示 HTML 文档头部信息的开始和结尾. 头部信息主要包括页面的标题, 相关说明等内容, 它不作为网页的内容在浏览器中显示.
标记符 < body > 和 </body>, 网页中要显示的实际内容就在这两个标记符之间, 它是网页的主体部分.
我们再对前面记事本里的代码加上注释, 就会看的更明白.
- <!DOCTYPE HTML>
- <!-- 声明这是一个 HTML 文档 -->
- <HTML>
- <!-- 告诉浏览器网页是从这里开始的 -->
- <head>
- <!-- 这是网页的头部开始 -->
- <title>
- </title>
- <!-- 这是网页的标题, 这里为空 -->
- </head>
- <!-- 这是网页的头部结束 -->
- <body>
- <!-- 这是网页的主体部分开始 -->
- <p>
- 左手程序 Z 右手诗
- </p>
- <!-- 这是要在浏览器上显示的内容 -->
- </body>
- <!-- 这是网页的主体部分结束 -->
- </HTML>
- <!-- 告诉浏览器网页在这里结束了 -->
HTML 小总结
HTML(Hypertext Markup Language) 是用来描述网页的一种语言.
HTML 指的是超文本标记语言, 不是一种编程语言, 而是一种标记语言, 标记语言是一套标记标签 (markup tag).
HTML 使用标记标签来描述网页.
简单说来, HTML 就是我们与浏览器用来沟通交流的语言, 我们通过 HTML 告诉浏览器让它按照我们的意愿展示出我们期望的内容及效果.
认识一下 CSS
大概了解了一下 THML, 我们在来看一下 CSS, 其实 CSS 就是一个标准的 "颜值党", 它基本决定了网页的外观样式. HTML 和 CSS 相辅相成, 它们一个负责网页上要显示的内容, 另一个负责这些内容的布局和样式.
看个小例子, 比如我要调整前面记事本里 HTML 所显示文字的字体, 颜色和大小, 如下:
- <!DOCTYPE HTML>
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title > 网页的标题 </title>
- <!-- 下面是 CSS 样式代码, 与 HTML 在同一个文档中 -->
- <style type="text/css">
- p {
font-family: 微软雅黑; /* 设置标签 P 里面字体 */
- font-size: 12pt; /* 设置标签 P 里面字体大小 */
- color: white; /* 设置标签 P 里面字体颜色 */
- background-color: green; /* 设置标签 P 背景颜色 */
- }
- </style>
- </head>
- <body>
- <p > 左手程序 Z 右手诗 </p>
- </body>
- </HTML>
先看一下在浏览器中的显示效果:
image
不难看出, 在 HTML 文档的头部, 就是 < head></head > 标记的里面加上了 < style></style>, 在这里定了 < p></p > 的样式, 字体是 "微软雅黑", 大小是 "12pt", 颜色是 "白色", 背景是 "绿色".
最后
- <HTML><!--HTML 页面开始标签 -->
- <head><!-- 页面头部标签 -->
- <!-- 在头部标签里一般放置 "标题标签","CSS 样式","JS 代码" 等内容 -->
- <title></title><!-- 页面标题标签 -->
- <style type="text/css">
- /* 页面样式标签 */
- /*type 是个属性, 是说明样式的内容类型, 一般固定就是 "text/css"*/
- /* 在这里可以设置页面各个元素的样式 */
- </style>
- </head><!-- 页面头部结束标签 -->
- <body><!--HTML 页面主体标签, 要在网页上显示的内容都要放在这里面 -->
- <p></p><!--p 标签表示一个段落 -->
- </body><!-- 主体标签结束标记 -->
- </HTML><!--HTML 页面结束标签 -->
来源: http://www.jianshu.com/p/e9b949ee95af