网页设计之HTML基础
本篇文章将环绕HTML来让你简单明了的知道它的历史和了解HTML的构成元素，及一些HTML编译软件及HTML与主流浏览器的关系，一些网站的搭建工作，甚至HTML标签与标签的书写规范。
一、HTML的概述及发展历史
什么是html?
html (hyper text markup language)是一种超文本标记语言；不是一种编程语言，而是一种标记语言,由标记标签组成；
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
HTML发展史
- 超文本标记言（第一版）--在1993年6月作为互联网工程工作小组（IETF)工作草案发布（ 并非标准 ):
- HTML 2.0--1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布过时
- HTML 3.2--1997年1月14日，W3C推荐标准
- HTML 4.0--1997年12月118日，W3C推荐标准
- HTML4.01 ( 小改进)--1999年12月24日，W3C推荐标准
- HTML 5--2014年10月28日，W3C推荐标准
二、网页的构成元素
初探网页构成元素
1、文本详细的传达内容信息
可编辑文本最常用的字体是：宋体和微软雅黑
可编辑文本的字号通常为：12px、14px、16px、18px
2、图像形象并直观的展示网页内容
JPG:色彩还原好、体积不是很大但不支持透明
PNG：清晰、无损压缩、支特透明、本身颜色具有透明度
GIF:体积小、支持动画和透明效果（本身无透明度的效果)但色彩还原较低
PNG和GIF虽然都支持透明度，但PNG支持图像本身的透明信息，而GIF支持透明区域，不支持本身的透明信息。
3、动画
常用的动画格式主要有两种:
种是SWF动画（flash)，一种是GIF动画(简单动画)
4、音乐
网页中常用的音乐格式有WMA及MP3
5、视频
网页中常用的视频格式有RM、WMV、FLV三种格式
6、3D特效 html5+Css3
新兴的网页特效元素，目前比较流行
浏览器上显示出来的各种内容及效果都是通过代码实现的
代码才是构成网站的根本
- HTML超文本标记语言
构成网页的整体结构、组成网页中基本元素(文字、图片、表单等)
- CSS层叠样式表(用来控制htm|元素)(静态页面)
对网页中的元素(html标签)进行精确的样式控制(背景、颜色、位置等)
- Javascript (简称JS)网页脚本语言
数据验证、控制网页中特效和交互功能(鼠标事件、焦点图转换等)
- PHP、ASP.JSP、NET (程序语言)（动态页面)
网站后台程序，管理网站数据和用户数据的更新、修改。
三、HTML编译软件介绍及主流浏览器
常见编辑器
- Hbuilder
- Dreamweaver
- Sublime
- WebSorm
世界五大主流浏览器
- Firefox
- Opera
- IE
- Safari
- Chrome
四、网站搭建准备工作
网站根目录及作用
建立根目录文件夹注意问题
1、用文件夹来保存文档
2、根目录下的所有文件夹、图片、html格式网页必须以字母、数字、和下划线结合来命名。不能用中文命名，也不能用特殊字符(包括空格、括号）。
根目录下的存储网页中图片的文件夹常用的命名为image或者简写img
3、一个网站的首页必须用index.html 或 defaut.html 来命名。
五、HTML标签与标签书写规范
html书写规范
1、由尖括号包围的关键词，比如<html>(定义文件为网页文件html);
2、通常是成对出现的，比如<html>和</html>；
3、标签对中的第一个标签是开始标签，第二个标签是结束标签;
4、也有单独呈现的标签，如：<img src="images/1.jpg"/>等;
5、一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值；
如<div>文字内容</div>和<input type="text"value="按钮/>。
6、网页的内容需在<html>标签中。某些时候不按标准书写代码虽然可以正常显示，但是作为职业素养，还是应该养成正规编写习惯。
html标签语法符号
尖括号：<> 包含标签名
斜 杠： / 标签的结束
空 格： 分清属性值
叹 号： ! 提示性说明
引 号：" " 包含值
等 号：= 给属性赋值
html基本标签
<html></html>
创建一个HTML文档，限定了文档的开始点和结束点，在它们之间是文档的头部和主体，告知浏览器其自身是一个HTML文档。
<head></head>
包含标题、字符格式、语言、兼容性、关键字、描述等信息、CSS。绝大多数文档头部包含的数据都不会真正作为内容显示给浏览者
<body></body>
里面包含文档的可见部分即网页的主体内容，包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)
<title></title>定义文档的标题。通常写在<head></head>中
<style type="text/css"></style>
<style>标签用于为HTML文档定义样式信息css。通常写在<head></head>中
<!-- -->注释标签用于在源代码中插入注释。注释不会显示在浏览器中。
设定网页关键字
<meta name="keywords" concent="关键词1,关键词2,关键词3/>
它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类
设定网页描述信息
<meta name="相关描述文字"/>
关键字、描述信息和标题是网页组成的关键部分，通常写在<head></head>中
html常用标签
<div></div>容器标签
定文档中的分区。可以把文档分割独立的、不同的部分(相当于一个盒子)。
<h1>-<h6> 定义标题
包括h1 h2 h3 h4 h5 h6 六个等級的标题。h1定义最大的标题。h6定文最小的标题。
<p></p>段落标签
用于控制文字段落使用
<strong></strong>文本修饰标签
用于强调文本，将文字加粗来显示。
<em></em> 文本修修饰标签
用于强调文本，文字用斜体来显示。
<small></small>文本修饰标签
用于强调文本，将文字变小来显示。
<span></span>文本修饰标签
行内样式，不修饰文字
<hr/>插入水平线（单独的标签）
<br/>换行符（单独的标签）
告诉浏览器立即停止当前的文本流，并在下一行的左边开始继续输出文本流
文本流：自上而下，自左到右的顺序
请登录后查看回复内容