网页设计 HTML 5.0(绝对入门经典)
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• block
14 中国矿业大学 网络中心
HTML 4.01
§2.3.2 简单内联元素
内联(inline)元素不会创建新的段落，即该类元素直接显示 在段落内
空白区域被收缩（多个空白区域只显示一个）
字体改变
黑体(B), 斜体 (I), 电传打字字体 (TT) FONT: 指定使用的字体 强调 (EM), STRONG, CODE, KBD等 下标 (SUB) , 上标 (SUP)
15
中国矿业大学 网络中心
HTML 4.01
§2.3.2 简单内联元素
Font： <font face=“宋体” color=“red” size=“6”>
大小：±1, ±2, ±3, ±4, ±5, ±6, 7 颜色：red = #FF0000
下划线与删除线
下划线(underline)：u 删除线(strikethrough)：s或strike
属性对 元素名
标签
<body bgcolor=white>
引号括起来的属性值
<body bgcolor=“white”>
3 中国矿业大学 网络中心
HTML 4.01
§2.2 HTML基本语法
标签不区分大小写
布尔属性的属性值不是必须的
结束标签
名称前加/ 没有属性
大小写敏感的属性值 布尔属性
<body bgcolor=“white”> <input type="checkbox" name=“chkFirst" value=“1" checked> </body>
© ®
常用HTML字符实体 常用HTML字符实体 HTML
19
中国矿业大学 网络中心
HTML 4.01
§2.3.3 字符实体
空格
空格是最常用的HTML字符实体 通常情况下HTML会自动截短文本中的空格：在HTML文本中 使用Space键输入10个空格，显示时会自动去除其中的9个。 此时应该使用字符实体 键入空白。
常用HTML元素 常用HTML元素 HTML
6 中国矿业大学 网络中心
述
HTML 4.01
§2.2 HTML基本语法
HTML文档的扩展名为.html或.htm HTML文档必需使用<html>元素作为根元素(root element) 根元素包含所在文档中的所有其它元素 <head>元素中包含浏览器需要用到的信息
Web Design Foundations
网页设计基础
网络中心： 网络中心：王大阜 Tel:13505208874 Mail:wdf@
HTML 4.01
Chapter 2 HTML 4.01
1 2 3 4
HTML文档 文档 HTML基本语法 基本语法 HTML 元素与实体 HTML4.01网页制作实例 网页制作实例
结束标签
4 中国矿业大学 网络中心
HTML 4.01
§2.2 HTML基本语法
成对的标签（开始标签、结束标签）和它们之间包含的数 据被称为元素 元素(element)。 元素
包含在元素的开始和结束标签之间的信息称为内容 内容 (content) 。 有些元素不需要结束标签，这些元素被称为空元素 空元素 (empty element)。 内容
1
中国矿业大学 网络中心H来自ML 4.01§2.2 HTML基本语法
网页也称HTML文档 文档(HTML documents)是包含被称为标 文档 标 签(tags)的文本文档。 HTML标签包括：
文档结构标签 文本标签 (粗体 斜体等) 粗体、 粗体 链接标签 表单标签（允许用户输入的控件：单选框、复选框等） 图像标签 多媒体标签 表格标签
换行<br>
如何实现既是斜体，又是粗体等等效果？
16 中国矿业大学 网络中心
§2.3.2 简单内联元素
17
中国矿业大学 网络中心
HTML 4.01
§2.3.3 字符实体
字符实体(Character Entities) [转义字符 转义字符] 字符实体 转义字符 有些字符在HTML里有特别的含义，比如小于号<就表示 HTML标签的开始，这个小于号是不显示在我们最终看到 的网页里的。 为了显示类似于小于号<的字符，需要使用字符实体 (character entity) 字符实体有三部分组成：①连接符 (&)，②实体(Entity)名 称或者是#加上实体(Entity)编号, ③分号 (;). 比如，要显示小于号，就可以写<或者<。 < or <
13 中国矿业大学 网络中心
HTML 4.01
复习
<html>
<head>
• title • meta
– http-equiv – name
<body>
• inline
– 简单内联元素
» b, i, tt, font, em, strong, code, kbd, sub, sup
– ······
22 中国矿业大学 网络中心
HTML 4.01
§2.3.4 链接
name 属性 name属性用于创建命名锚链。使用命名锚链，可以创建 直接跳转到某页面的特定位置，这样浏览者不需使用滚动 条直接就可以找到需要的信息。 命名锚链的语法如下：
<a name=“label”>Text to be displayed</a>
HTML 4.01
§2.2 HTML基本语法
最简的HTML文档对应的树
Content goes here
Test Document
title body
head
html
10 中国矿业大学 网络中心
HTML 4.01
§2.3 HTML元素与实体
HEAD: 文档的相关信息
TITLE (非必需的): 显示在标题栏中 META: 关于文档其它信息的设置
12
中国矿业大学 网络中心
HTML 4.01
§2.3.1 HTML头信息
<Head>标准格式 <!-– This site is designed by XXX, 2007 --> <META HTTP-EQUIV=“Content-Type” CONTENT=“text/html;charset=gb2312”> <META name=“author” content=“master@”> <META NAME=“DESCRIPTION” CONTENT=“xxxxxx”> <META NAME=“keywords” CONTENT=“xxxx,xxx,xx”> <LINK href=“style/style.css” rel=“stylesheet” type=“text/css”> <TITLE>XxXxXxXxXxXxXx</TITLE>
标签使用一对尖括号（<>）包含起来，分为开始标签和结 束标签，个别除外(hr、br) HTML是一种纯文本标记语言，可用文本编辑器编写，也 可用可视化工具Dreamweaver
2 中国矿业大学 网络中心
HTML 4.01
§2.2 HTML基本语法
开始标签 ::= <元素名 属性对*> 属性对 ::= 属性名 = 属性值 元素名 ::= 字母和数字序列，以字母开始 属性名 ::=字母和数字序列，以字母开始 属性值 ::= 字符和数字序列，通常使用引号括起来
8
中国矿业大学 网络中心
HTML 4.01
§2.2 HTML基本语法
最简合法HTML文档： <html> <head> <title>Test Document</title> </head> <body> <!– Content goes here --> </body> </html>
9
中国矿业大学 网络中心
注意：到label位置的超级链接语法是： 注意 <a href=“#label”>label section</a>
23 中国矿业大学 网络中心
HTML 4.01
<a href=“”>China University of Mining & Technology</a>
target 属性 属性:
<a href=“” target=“_blank” >China University of Mining & Technology</a>
创建链接的语法： <a href=“url”>Text to be displayed</a>
21 中国矿业大学 网络中心
HTML 4.01
§2.3.4 链接
<a>标签用于创建锚链，href属性指出要链接到的文档的 地址，而<a>开始和结束标签之间的文本被显示为一个超 级链接。
href 属性 属性:
在字符实体中，实体名称比实体编号更容易记忆，但是， 并不是所有的浏览器都支持最新的实体名称,而在几乎所 有的浏览器中都支持实体编号。
注意：字符实体区分大小写。
20
中国矿业大学 网络中心
HTML 4.01
§2.3.4 链接
HTML使用超级链接(hyperlink)连接到Web上的其它文档。 anchor标签 标签 HTML使用 <a> (anchor) 标签创建到另一个文档的链接。 链接可以指向Web上的任何资源：HTML页面、图片、声 音文件，视频等
18 中国矿业大学 网络中心
HTML 4.01
§2.3.3 字符实体
显示结果 空格 < > & “ 小于 大于 连接符 双引号 版权所有 注册商标
说明
实体名称 < > & " © ®
实体编号   < > & " © ®
元素
<p> data </p>
空元素
<br>
5 中国矿业大学 网络中心
HTML 4.01
§2.2 HTML基本语法
HTML 元素 <b></b> <body></body> <br> <center> <head></head> <hn></hn> <hr> <html></html> <i></i> <img src=“…”> <p></p> <u></u> 描 用黑体格式化包含的文本 包含HTML文档的主体部分 文档的主体部分 包含 插入一个换行符 使段落中的文本中间对齐 HTML文档头信息（整个文档的信息） 文档头信息（整个文档的信息） 文档头信息 表示不同级别的标题，n取值范围是 6] 取值范围是[1, 表示不同级别的标题， 取值范围是 水平线 HTML文档必需的开始和结束标记 文档必需的开始和结束标记 用斜体格式化包含的文本 插入一个图片 使用段落格式化包含的文本 用下划线格式化包含的文本
7
中国矿业大学 网络中心
HTML 4.01
§2.2 HTML基本语法
<head>元素必需包含<title>元素 <head>元素以及包含在<head>中的元素被称为文档头 文档头 (document head) <body>元素以及包含在<body>元素中的文本、元素被称 为文档主体 文档主体(document body) 文档主体 Web浏览器加载或格式化一个HTML文档的过程称为解析 解析 (parsing)或渲染 渲染(rendering) 渲染
• <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> • <meta http-equiv="Refresh" content=“n;url=http://yourlink">
name：声明属性名称
• • • • • <meta name="Generator" content=“frontpage 2000"> <meta name=“KeyWords” content=“体育, 篮球"> <meta name=“Description” content=“这是张三的站点"> <meta name=“Author” content=“张三"> <meta name="Robots" content= "all|none">
BODY: 文档的可视部分
两类:
• 块结构(block structure)
– 相当于段落的元素
• 短语结构(phrase structure) [inline内联]
– 相当于块中的单词、字符或短语
11
中国矿业大学 网络中心
HTML 4.01
§2.3.1 HTML头信息
meta对文档信息的设置
http-equiv：HTTP头信息设置