本文旨在将用简短的三讲, 尽可能地覆盖HTML所有知识点及细节。
HTML第一讲
一、WEB基础概念
- WWW:World Wide Web 万维网
- WWW系统的组成部分:WWW服务器,浏览器(WWW客户端),HTML文件和网络。
- WWW运行的三个概念:
- URL:Uniform Resource Locator 统一资源定位器, 本质就是找资源的一种路径。
- HTTP:Hypertext Transfer Protocol 超文本传输协议
- HTML:Hypertext Markup Language 超文本标记语言
二、HTML简介
- 超文本含义:旨在创建一个全球化的大文档,文档的各个部分分布在不同的服务器中。
- 超文本标记语言:强调“语言”,有了超文本的概念,总不能没有实现超文本的工具。 这种语言是由浏览器解释执行,是一种标记语言。
- 编写工具:Editplus、Notepad++、Dreamweaver(但注意这些工具都不是必须的!)
- 执行工具:浏览器
三、HTML语法格式
-
标记的语法格式
<标记名称 属性=“属性值” 属性=“属性值”…> …… </标记名称>
- 标记是有属性的, 属性之间用空格隔开,有了属性标记才能变得丰富多彩。
- 标记可以嵌套使用,但一定要注意顺序。
- 标记的类型
- 单标记:只有开始标记,如<br/>、 <hr/>、<img/>等, 这三个单标签是主要的。
- 双标记: 具有开始标记和结束标记。
如<table> </table>
- 属性
- 功能:可以对标记进行简单的样式设置,比如颜色,显示的位置,字号等等。
- 文件命名的格式
- 文件扩展名尽量以.htm或者.html结束。
- 文件名中尽可能由字母、数字、下划线组成。
- 文件名中不要包含特殊符号,尽量不要用中文。
四、HTML文档
- 文档读到<html>就知道这是一段用超文本标记语言写的一段代码,如果写错该标记,那么你所写的文本原原本本就会输出到浏览器中。
- 换句话说HTML将所有的除了文字本身以外的各种样式(空格,换行,字体,图片等等)都用同化为HTML中的标签,所以你要想键盘打个空格、回车、tab,想让它在浏览器显示出来是不可能的。在<html>中的html的标签才能是被浏览器识别出来。
- HTML不区分大小写,是一种弱语言类型。
五、页面头部标记
- 头标记就是用来设置上面圈住的内容的。
- <title>标记是用来设置第一个圈的
- <meta>标记用来设置剩下两个;meta是元的意思。
属性:
属性 | 中文释义 | 描述 | 属性值 | |
---|---|---|---|---|
http-equiv | equiv是当量,等量的意思 | 设置http的消息头 | content-type:显示字符集设定。 refresh刷新并跳转 | |
name | 名字 | 设置页面的描述信息 | keywords:设置关键字,就是第二个圈 description:网站内容,就是第三个圈 | |
content | 内容 | 我的观点是有的属性需要更精确的描述 | … |
<html>
<head>
<title>网页字符集设计示例</title>
<meta http-equiv = “Content-Type” content = “text/html; charset=gb18030”>
</head>
<body>
中文乱码示例
</body>
</html>
<html>
<head>
<title>页面自动刷新设置示例</title>
<meta http-equiv = “refresh” content = “3;url=http://www.sina.com.cn”>
<meta http-equiv = “Content-Type” content=“text/html; charset=gb18030”>
</head>
<body>
页面每隔3
</body>
</html>
<html>
<head>
<title>网页制作三剑客Dreamweaver、Flash、Firework综合实例教程</title>
<meta name = “keywords” content ="网页制作三剑客Dreamweaver、Flash、Fireworks综合实例教程,计算机类">
</head>
<body>
</body>
</html>
- <style>用来嵌入CSS样式
五、body属性总结
属性 | 功能 | 案例 |
---|---|---|
background | 设置背景图片 | <body background=“apple.JPG”> |
link | 设置网页文字未访问时的颜色 | <body link=“black” alink=“green” vlink=“gray”> |
alink | 设置网页文字正在访问时的颜色 | 同上 |
vlink | 设置网页文字已被访问时的颜色 | 同上 |
bgcolor | 设置页面的背景颜色 | <body bgcolor=“blue” text=“black”> |
text | 设置网页的文字颜色 | 同上 |
[left][right][top][bottom]margin | 设置外边距 | <body leftmargin=“120” topmargin=“20” rightmargin=“120” bottommargin=“20”> |
本文参考:《Web前端开发技术》