• 1. 探索HTML篇
  • 2. HTML 简介 HyperText Markup Language 简称为HTML HyperText: 超文本 (文本 + 图片 + 视频 + 音频 + 链接) Markup Language: 标记语言 由SGML(标准通用标记语言)发展而来 写给浏览器的语言
  • 3. 版本及历史 超文本标记语言(第一版)1993年6月(IETF制定) HTML 2.0——1995年11 月 HTML 3.0——1996年1 月 HTML 4.0——1997年 W3C: World Wide Web Consortium W3C理事会或万维网联盟 http://www.w3.org
  • 4. HTML 的基本结构HTML 网页页面头部页面主体
  • 5. HTML标签HTML元素由开始标签和结束标签组成 位于开始标签和结束标签中的文本是元素的内容。 HTML 标签有开始必须有结束。如果是没有内容的标签(空标签),用 />来结束。 标签名不区分大小写,但是在XHTML中标签名必须用小写。 标签具有属性, 属性用来表示标签的性质和特征。属性要在开始标签中指定内容元素开始标签结束标签

    关于HTML术语

  • 6. HTML 基本元素换行符 段落 标题 水平线 文本格式化 预格式文本 字体 链接 锚点 图像 特殊字符 注释
  • 7. 1. 换行符

    标签是空标签(意味着它没有结束标签,因此这是错误的:

    ) 2. 段落

    这是一个段落

    属性 说明 align 行对齐方式(left, right, center)
  • 8. 3. 标题

    标题1

    标题2

    标题3

    标题4

    标题5
    标题6
    4.水平线

    属性 说明 size 指定线的粗细(px) width 指定线的长度(px或%) align 行对齐方式(left, right, center)
  • 9. 5.文本格式化 定义粗体文本 定义斜体文本 定义删除文本 定义下划线文本 定义上标字 定义下标字
  • 10. 6.
     预格式文本
    
    
    标签可以保留文字在源代码中的格式,使得页面中显示的内容和源代码中的格式一致。
    
    
  • 11. 7.字体 这是一段文字 属性 说明 size 定义字体大小 face 定义字体 color 定义字体颜色 1,16进制的模式 #DCC123 0-9A-F 2, 单词模式 red ,blue ,green ,black 3,RGB rgb(20,100,35) 0-255
  • 12. 8. 链接 ~ 属性 说明 href 定义链接地址 title 链接提示信息 target 链接打开方式(_blank 新的空白页,_self 当前页,_top) 9. 邮件链接 ~
  • 13. 10. 锚点 锚点标签用于使用户“跳”到文档的某个部分。 ~ ~ http://www.360buy.com/help/cod.aspx
  • 14. 11.图像 “替代文字” 属性 说明 src 定义图像的url alt 定义图像的替代文本 width 设置图像的宽度 Height 设置图像的高度
  • 15. 12. 图像热区 属性 说明 shape 热区形状(rect、circle、poly、default) coords 形状的坐标值 http://www1.poco.cn/topic/food_2012/
  • 16. 怎样指定图片的地址?情形html文件位置图片位置写法同一个目录F:/html/01.htmlF:/html/01.jpg 下一层目录F:/html/01.htmlF:/html/images/01.jpg上一层目录F:/html/01.htmlF:/01.jpg同一层不同目录F:/html/01.htmlF:/images/01.jpg说明: ./ 当前目录 ../ 回到上一层目录 images/ 进入一层目录 ../images/ 回到上一层目录,然后再进入images目录
  • 17. 怎样指定链接的地址?外部链接 网易 内部链接 公司简介
  • 18. 15. HTML 特殊字符 某些字符在 HTML 中具有特殊意义,如小于号 (<) 定义 HTML 标签的开始 字符实体用于在 HTML 文档中插入特殊字符,如版权号 ,注册商标等 通常情况下,HTML会自动截去多余的空格。不管你加多少空格,都被看做一个空格。比如你在两个字之间加了10个空格,HTML会截去9个空格,只保留一个。为了在网页中增加空格,你可以使用 表示空格。
  • 19. HTML 特殊字符特殊字符字符实体大于号 (>) > 小于号 (<) < 引号 (“) " ®®© ©& 号&
  • 20. 列表列表用来在网页上组织信息,HTML能够创建三种类型的列表:无序列表、有序列表和定义列表。 1.无序列表
    • ……
    • ……
    • ……
    属性 属性值 说明 Type disc 用来设置项目前面的标记 Circle square
  • 21. 2. 有序列表 有序列表使用数字或字母系统来组织列表里包含的信息。有序列表可以使用数字(默认)、大写字母、小写字母、大写罗马数字和小写罗马数字排列项目。
    1. ……
    2. ……
    3. ……
    属性 属性值 说明 type 1、 a 、 A、i、I 用来设置项目前面的标记
  • 22. 3. 定义列表 定义列表用来组织术语和它们的定义。任何信息如果包含多个术语和相对应的解释,都可以使用定义列表进行组织。
    HTML
    html 是超文本标记语言
    XHTML
    可扩展超文本置标语言
    表现方式与超文本置标语言(HTML)类似,不过语法上更加严格
  • 23. HTML 表格表格由 标签以及一个或多个 tr、th或td 元素组成。 单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
    row 1, cell 1 row 1, cell 2
    row 2, cell 1 row 2, cell 2
  • 24. 定义表格 定义表格的行
    定义表头
    定义表格单元 属性 值 说明 width px、 % 指定表格的宽度 height px、% 表格的高度 border px 指定表格边框的宽度 cellpadding px 指定边框与内容之间的空白 cellspacing px、 % 指定单元格之间的空白 align left、 right 、 center 指定对齐方式 valign top、 middle 、 bottom 垂直排列方式 colspan 合并列单元格 rowspan 合并行单元格
  • 25. HTML 背景设置背景颜色 设置背景图片 设置页面文字颜色 颜色属性值有三种值的格式 1,英文单词,比如 red , yellow ,green … 2, 十六进制表示方式,#开头,6个十六进制的字符或数字 组合 比如:#FFFFFF,#000000,#CCCAAA,#22BCAD 十六进制: 0-9 和 a-f 3, RGB模式,红 0-255,绿 0-255,蓝 0-255 比如: RGB(120,33,234)
  • 26. HTML 表单
  • 27. HTML 表单表单是一个包含表单元素的区域。 表单能够包含 input 元素,textarea、select、fieldset、legend 和 label 元素。 表单使用标签(
    )定义。 表单用于向服务器传输数据。 表单的结构 用户名: 密 码:
    属性 说明 name 表单的名称 action 表单提交地址 method 表单数据提交的方式 (get ,post) enctype MIME类型 target 打开方式
  • 28. 标签 属性 说明 type input元素类型 name input 元素的名称 value input 元素的值 size input 元素的宽度 readonly 是否只读 maxlength 输入字符的最大长度 disabled 是否禁用
  • 29. 1.文本框 2.密码框 3.单选按钮
  • 30. 4.复选框 听音乐 看电影 玩游戏 5.按钮
  • 31. 6. 隐藏域 隐藏域用于在程序发送没有必要让用户看到特定值的时候使用。 7. 上传文件 利用这项功能时,在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。
  • 32. 属性 说明 name 元素的名称 rows 指定文本框的高度 cols 指定文本框的宽度
  • 33. 属性 说明 name 下拉列表框的名称 size 下拉列表框的显示行数 multiple 是否多选 disabled 是否禁用 selected 设置默认选中的选项 value 选项的值
  • 34. 标签 optgroup 元素用于组合选项 。 属性 说明 label 指定组合选项名称
    标签 Fieldset 标签作用是把表单中元素组合起来
  • 35.
  • 36. 练习: 制做用户注册页面,页面上应包含以下元素(如图) 使用表格布局
  • 37. HTML 框架
  • 38. HTML 框架 框架的作用就是把浏览器窗口划分成多个子窗口。 每个子窗口可以载入各自的HTML文档。
  • 39. 1.框架的整体结构 ~ ~ ~ 属性 属性值 说明 rows px , % 上下分割窗口 cols px , % 左右分割窗口 src url 指定要载入到框架的页面地址 name 指定框架名称
  • 40. 例 1:上下分割框架 例 2:左右分割框架
  • 41. 例 3:
  • 42. 2.设置框架的显示方式 属性 属性值 说明 scrolling yes、no、auto 是否显示滚动条 noresize 禁止改变框架的尺寸大小 marginwidth px 框架内左右的空白区域 marginheight px 框架内上下的空白区域 frameborder 1, 0 是否显示边框 framespacing 0 设置框架之间的距离 border 0
  • 43. 3. 属性 属性值 说明 width px , % 指定框架的宽度 height px , % 指定框架的高度 scrolling yes,no,auto 是否显示滚动条 frameborder 1, 0 是否显示边框
  • 44. Head 头信息 设置页面标题 ~ 2. 设置页面编码 utf-8 : 多国语言编码 gb2312: 中文简体编码 3. 设置页面关键字,内容介绍
  • 45. 综合练习 用表格进行布局,综合运用所学的html标签,制作一个简单的企业网站。