01-HTML引入

最新推荐文章于 2022-11-19 17:21:05 发布

forwardNow

最新推荐文章于 2022-11-19 17:21:05 发布

阅读量1k

点赞数

分类专栏：设计文章标签： HTML

本文链接：https://blog.csdn.net/wuqinfei_cs/article/details/9860747

版权

设计专栏收录该内容

18 篇文章 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

同理设置上边距

<html>
    <head>
        <title>网页标题</title>
        <meta name="keywords" content="html文件, 模板"/>
        <meta name="description" content="这是一个template" />
        <meta http-equiv="content-type" content="text/html;charset=GBK"/>
    </head>
    <body bgcolor="gray" 
          background="http://down.tutu001.com/d/file/20111223/93841023cde9e0bd0f8dc437f0_560.jpg"
          text="white"
          leftmargin="0"
          rightmargin="0"
          topmargin="0"
          bottommargin="0">
        轻松学习 html. ------------------------------------------------------------------------------------------------------------------------------
        
    </body>
</html>