Web标准网页设计之道-2
# Web标准网页设计之道 - 2
* 什么是HTML?
* HTML是用来描述网页的一种语言,它是一种超文本标记语言(Hyper
Text Markup Language),也就是说,HTML不是一种编程语言。
* 为什么称HTML为超文本标记语言?
* HTML之所以被称为超文本标记语言,是因为文本中包含了“超级链接”
点。所谓超级链接,就是一种用来指向文件在网络中的地址,通过点击
它,可以使浏览器方便地获取新的网页。
* HTML文件基本结构
* 一个完整的HTML文件基本结构分为两部分,包括头部(head)和主体
(body)两部分。
```html
<html> —————— HTML文件开始标签
<head> —————— HTML文件的头部开始标签
</head>—————— HTML文件的头部结束标签
<body> —————— HTML文件主体开始标签
</body>—————— HTML文件主体结束标签
</html>—————— HTML文件结束标签
```
* HTML的基本语法
* 一般标签:
```html
<x> 元素体 </x>
x代表标记名称。<x>和</x>就如同一组开关。
```
* 标签的属性:
```html
<x a1=”v1”,a2=”v2”,a3=”v3” ...> 元素体 </x>
其中,a1,a2,a3,...为属性名称,而v1,v2,v3,...则是其所对应的属性值。
```
* HTML的基本语法
* 空标签:大部分的标签都是成对出现的,但也有一些是单独存在的,这
些单独存在的标签称为空标签。
<x />
* 空标签的属性:
<x a1=”v1”,a2=”v2”,a3=”v3” ... />
W3C定义的新标准(XHTML1.0/HTML4.0)建议:空标签应以 / 结尾,即<x/>。
* 编辑工具-记事本
* 记事本是Windows自带的应用程序,使用简单方便,实际项目开发中也
常用于代码量较少的HTML文档的编辑或维护。
* 编辑工具-Dreamweaver
* Dreamweaver , 简 称
“DW”,中文名称 "梦
想编织者 " ,是美国
Macromedia公司开发的
集网页制作和管理网站于
一身的所见即所得网页编
辑器。
* 编辑工具-Sublime Text
* Sublime Text 是一个轻
量 级 代 码 编 辑 器
(Sublime Text 2是收
费软件,但可以无限期
试用),也是HTML先
进的文本编辑器。
* 编辑工具-HBuilder
* HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发的
编辑器。
* 浏览器- Google Chrome
* Google Chrome,是一个由Google
公司开发的网页浏览器。该浏览器是基
于其他开源软件所撰写,包括WebKit,
目标是提升稳定性、速度和安全性,并
创造出简单且有效率的使用者界面。也
是目前浏览器是市场占有率最高的浏览
器。
* 浏览器- 火狐浏览器
* Mozilla Firefox,中文俗称“火狐”(正式缩写为Fx或fx,非正式缩写为
FF),是一个自由及开放源代码网页浏览器。
* 网页基本信息-DOCTYPE声明
* DOCTYPE声明必须位于HTML文档的第一行,它为浏览器提供一项信息
(声明),即 HTML 是用什么版本编写的。
* 网页基本信息-DOCTYPE声明
* HTML文档常用的声明有三种:
1. HTML:HTML文档中采用 HTML 4.01 可以确保在未来将 HTML 轻
松升级到 XHTML。
```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
```
2. XHTML 1.0:XHTML 1.0是更严格更纯净的 HTML 版本,简单说
就是对这HTML 4.01中的标签制定了具体的制度和使用规则 。
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```
3. HTML5:HTML5是新一代标准。
```html
<!DOCTYPE html>
<!DOCTYPE>声明没有结束标签,且对大小写不敏感。
```
* 网页基本信息-\<title>标签
* 使用\<title>标签描述网页的标题。
```html
<title>腾讯首页</title>
```
* 网页基本信息-\<meta>标签
* 使用该标签描述网页具体的摘要信息,包括文档内容类型、字符编
码信息、搜索关键字、网站提供的功能和服务的详细描述等。
```html
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="Keywords" content="xxxxxx"/>
```
* \<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
* http-equiv:是名称,代表服务器相应类型
* Content-Type:是值,代表发送给服务器的是文档内容类型。
* Content:表示文档内容类型
* text/html:表示文本类型的HTML文件
* Charset:表示字符集编码
* UTF-8:表示国际通用字符编码。
* HTML标签
* 基本标签
* 标题标签
* 格式标签
* 文本标签
* 图像标签
* 链接标签
* 基本标签的使用
* HTML标签是HTML语言中最基本的单位,任何一个网页基本上都是由一个个标签构成的,是网页最重要的组成部分。
```html
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
<title>HTML基本标签</title>
</head>
<body>
内容部分
</body>
</html>
```
* 标题标签
* 标题标签表示一段文字的标题或主题,并且支持多层次的内容结构,并赋予了标题一定的外观,所有标题文字加粗显示,\<h1>字号最大,\<h6>字号最小。
```html
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
<title>HTML基本标签</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
```
* 格式标签
* 格式标签的主要用途是将HTML文件中的某个区段文字以特定格式显示,增加文件的可阅读性
```html
<br/>:强制换行。
<p>...</p>:文件段落。
<dl>...</dl>:定义样式列表。
<dt>...</dt>:定义项目对象。
<dd>...</dd>:定义项目描述。
<ul>...</ul>:无编号列表。
<ol>...</ol>:有编号列表。
<li>...</li>:列表项目。
```
* 文本标签
* 文本标签指文字和段落的修饰标签。
```html
<b>:粗体标签,和<strong>的作用相同,但<strong>偏重于强调语气。
<em>:斜体标签。
<s>:删除线标签。
<u>:下划线标签。
<font>:改变文字的大小、字体、颜色。(html5不建议使用)
```
* 记事本演示以上标签的使用。
* 图像标签
* 图像标签为\<img>:格式如下
```html
<img src=”图片地址” alt=”替换文本说明” title=”鼠标悬停图片提示文字” width=”图片宽度” height=”图片高度”>
src属性:指定存放图片的具体路径。
alt属性:表示图片无法显示时,用alt设置的文本内容显示。
title属性:可以提供额外的提示和帮助,当鼠标移至图片上方不动时显示提
示信息。
width属性:指定图片的宽度。
height属性:指定图片的高度。
```
* 链接标签
* 超链接\<a>标签在网页中极为常用。
```html
<a href=”链接地址” target=”窗口打开方式”>链接的文本或图像</a>
href:表示链接地址的路径。链接地址为“#”号时,表示空链接,即无跳
转地址但具有链接效果。
target:指定链接的打开方式。常用的取值:_blank新窗口中打开;
_parent:在上一级窗口中打开;
_self :在同一窗口打开;
_top:在浏览器的整个窗口中打开。
```
### 小结
>* HTML即超文本标签语言,是用于描述网页文档的一种标记语言。
>* HTML文件的结构主要包括头部<head>和主体<body>两部分。
>* HTML文件中的标签一般分为一般标签和空标签。
>* 常用的编写HTML的工具有:记事本、Dreamweaver、Sublime Text、
HBuilder。
>* 常用的HTML标签有:基本标签、标题标签、格式标签、文本标签、图像
标签、链接标签。