HTML入门详解

2019-11-06 06:57:04

字体：大中小

来源：转载

供稿：网友

使用Dreamweaver CS6来创建一个HTML5页面。具体步骤如下：

(1)打开Dreamweaver CS6，选择菜单栏中的“文件”→“新建”命令，弹出“新建文档”对话框，如图1-2所示。在“页面类型”列表中选择“HTML”选项，并在右下角的“文档类型”下拉菜单中选择“HTML5”。

(2)点击“创建”按钮，将会新建一个HTML5默认文档。切换到“代码”视图，这时在文档窗口中会出现Dreamweaver自带的代码。

(3)修改HTML5文档标题，将代码<title>与<title>标记中的“无标题文档”，修改为“第一个网页”。然后，在<body></body>标记之间添加一段文本“这是我的第一个HTML5页面哦”。

<!doctype html><html><head><meta charset="utf-8"><title>第一个网页</title></head><body>       这是王小二的第一个HTML5页面哦！</body></html>(4)在菜单栏中选择【文件】→【保存】选项，其快捷键为Ctrl+S。接着，在弹出来的“另存为”对话框中选择文件的保存地址并输入文件名即可保存文件
(5)在谷歌浏览器中运行example01.html
此时，浏览器窗口中将显示一段文本，第一个简单的HTML5页面创建完成。
自带源代码分析：
自带的源代码构成了HTML5文档的基本格式，其中主要包括<!DOCTYPE>文档类型声明、<html>根标记、<head>头部标记、<body>主体标记，具体介绍如下：
<!DOCTYPE>标记
<!DOCTYPE>标记标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML或XHTML标准规范，HTML5文档中的DOCTYPE声明非常简单，代码如下：
<!doctype html>
只有在开头处使用<!DOCTYPE>声明，浏览器才能将该网页作为有效的HTML文档，并按指定的文档类型进行解析。使用HTML5的DOCTYPE声明，会触发浏览器以标准兼容模式来显示页面。
<html>标记
<html>标记位于<!doctype>标记之后，也称为根标记，用于告知浏览器其自身是一个HTML文档，<html>标记标志着HTML文档的开始，</html>标记标志着HTML文档的结束，在它们之间的是文档的头部和主体内容。
<head>标记
<head>标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在<html>标记之后，主要用来封装其他位于文档头部的标记，例如<title>、<meta>、<link>及<style>等，用来描述文档的标题、作者以及和其他文档的关系等。
一个HTML文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
<body>标记
<body>标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内，<body>标记中的信息才是最终展示给用户看的。
一个HTML文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>头部标记之后，与<head>标记是并列关系。
举例：
<!doctype html><html><head><meta charset="utf-8"><title>计算机与信息技术学院</title></head><body>       <h2>计算机与信息技术学院欢迎你！</h2>       <p>更新时间：2017年03月05日  来源：信阳</p>       <hr />       <p>计算机与信息技术学院有四个专业，包括软件工程，计算机与科学技术，物联网工程，信息管理与信息系统。</p></body></html>
进一步：
<!doctype html><html><head><meta charset="utf-8"><title>计算机与信息技术学院</title></head><body>       <h2 align = "center">计算机与信息技术学院欢迎你！</h2>       <p align = "center">更新时间：2017年03月05日  来源：信阳</p>       <hr size = "2"  color = "#CCCCCC"/>       <p>计算机与信息技术学院有<strong>四个专业</strong>，包括软件工程，计算机与科学技术，物联网工程，信息管理与信息系统。</p></body></html>将标题标记<h2>的align属性设置为center，使标题文本居中对齐，代码中同样使用align属性使段落文本居中对齐。另外，代码使用水平线标记的size和color属性设置水平线为特定的粗细和颜色。
如图对比：