01-HTML引入

旧城等待， 2021-11-12 00:02 282阅读 0赞

参考: 张鹏 平面设计

# 一, 该教程涉及的内容 #

1, 设计  
①PS网页效果图设计  
②Flash网页动画设计  
2, 制作  
① html, xhtml, div+css  
② javascript, jQuery

# 二, 网站设计师职位 #

1, 网站美工  
2, 网站编辑  
3, 网页设计师  
4, 网页制作  
5, 网页前端工程师  
6, flash动画设计师

# 三, html介绍 #

1, 计算机高手  
黑客  
2, 最好的学习html的方法  
参考 别人网站的源代码  
3, 制作一个html网页  
①html文件是用浏览器打开的  
②01-helloWorld.html

# 四, html简介 #

## 1, 什么是HTML ##

① Hyper Text Mark-up language, 超文本标记语言  
② 标记: 描述网页内容的一些特定符号.  
③ HTML不是编程语言, 而是一种描述性的标记语言  
④ 用于描述网页中的内容显示方式,如文字以什么颜色和大小显示

## 2, 用什么来 编写/创建 HTML ##

① 文本编辑器(如 notepad, EditPlus, gVim)  
② IDE(如 Dreamweaver)  
③ 由web服务器上的动态网页程序生成

## 3, 裸奔 ##

只有内容, 没有样式.  
即没有html标记

## 4, 注意 ##

源代码中的效果 不等于 浏览器中的效果

## 5, 历史 ##

html4.01 -> xhtml1.0 (主流) -> html5  
①html5  
=> <!DOCTYPE html>  
=> http://hao.360.cn/  
②xhtml1.0  
=>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...>  
=> http://www.xinhuanet.com/

## 6, 在xhtml中, 规定: ##

① 所有html标记都小写  
② 所有标记都需要关闭

## 7, 参考手册 ##

w3cschool -> HTML -> 参考手册

## 8, html元素, html标记, html标签 ##

都是一个东西

# 五, 单双标记 #

1, 双标记-<标记符>内容</标记符>  
① 分类:双标记,单标记.标记通常成对出现  
② 开始标记, 结束标记(包含"/")  
③ 通过浏览器解析标记符,把标记符对应的功能表达出来  
2, 单标记-<标记符/>  
① 分类: 无属性值, 有属性值  
② 有属性,如: <hr width="50%" align="left"/>  
③ 无属性,如: <br/>

# 六, HTML文档结构 #

## 1, 骨架, 由四对标记构成 ##

(1) 格式  
<html>  
<head>  
<title> 标题 </title>  
</head>  
<body>  
正文  
</body>  
</html>  
(2) 说明  
①<html></html>  
标识网页文件的开始和结束,所有的html标记都要放在这对标记中  
②<head></head>  
标识网页文件的头部信息,如标题, 搜索引擎的关键字  
网页文件做出来了, 还得要宣传推广, 百度搜索网页主要就是通过头部信息的  
A. <title>  
B. <meta name="keywors" ...>  
C. <meta name="description" ...>  
③<title></title>  
标识网页文件的标题  
④<body></body>  
标识网页文件的主体部分

## 2, meta标记 ##

① meta标记用于定义文件信息,对网页文件进行说明,便于搜索引擎查找.  
② 位于 <head></head>之间  
③ <meta name="keywords" content="value1, value2, ..."/>  
④ <meta name="description" content="value" />  
⑤ <meta name="author" content="作者名" />  
⑥ 字符集  
<meta http-equiv="content-type" content="text/html;charset=GBK" />  
GBK : 适合汉字特别多的网站, 如新闻网站, 1个汉字占2个字节, UTF-8 1个汉字占3个字节  
UTF-8: 国际编码, 汉字少的网站, 如视频网站-优酷网  
⑦ 定时跳转  
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com" />  
注意:  
http-equiv 针对HTTP协议的

# 七, body详解 #

## 1, template.html ##

使用 EditPlus 编写 网页文件  
① 复制一行  
Ctrl + J, 类似于 Eclipse中的 Ctrl + Alt + ↓  
② 用浏览器打开  
Ctrl + B  
③ 自定义模板  
工具->配置用户工具->模板->载入...自定义模板

## 2, 注释 ##

格式:  
  
说明:  
① 浏览器能读到, 但不显示  
② 提供可读性, 用于维护

## 3, <body>的属性 ##

###  (1) 背景属性 ###

① bgcolor  
背景颜色  
② background  
背景图片  
注意:背景图片会覆盖背景颜色

###  (2) 文字颜色 ###

text

###  (3) 边距  ###

默认情况下, 网页内容与浏览器边框之间是有距离的.  
① leftmargin  
左边距  
② rightmargin  
右边距  
③ topmargin  
上边距  
④ bottommargin  
下边距  
注意: 设置左边距为0, 则右边距默认也为0