01-HTML引入

参考: 张鹏 平面设计

一, 该教程涉及的内容

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

          同理设置上边距  

01-HTML引入_第1张图片

<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>



        

你可能感兴趣的:(html)