你的位置:首页 > 网页设计

[网页设计]HTML(一):初探HTML


1.HTML简介

  • HyperText Markup Language 简称为HTML
    • 超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。
  • HyperText:超文本(文本+图片+视频+音频+链接)
    • 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。
  • Markup Language:标记语言
    • 标记语言,是一种将文本以及文本相关的其他信息结合起来,展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息(包括文本的结构和表示信息等)与原来的文本结合在一起,但是使用标记进行标识。
  • 由SGML(标准通用标记语言)发展而来
    • 标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言;通用标言为语法置标提供了异常强大的工具,同时具有极好的扩展性,因此在数据分类和索引中非常有用;是所有电子文档标记语言的起源,早在万维网发明之前“通用标言”就已存在。
  • 写给浏览器的语言

2.HTML基本结构

  • <html>
    • 定义整个HTML文件的内容;所有HTML标签都应该放到这里面。
  • <head>
    • 定义HTML文件的头部,它是所有头部元素的容器。在head标签中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
  • <title>
    • title元素仅可在head元素内使用。位于title开闭标签之内的文本都会在浏览器的标题栏和 Microsoft Windows 的任务栏上显示。对于 Web 页,“Internet Explorer”会被自动追加到标题后。而在 HTML 应用程序(HTA)中,仅会显示指定的标题。
  • <body>
    • body 元素是定义文档的主体。body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)。

3.HTML标签元素

  

  • HTML元素由开始标签和结束标签组成。

  • 位于开始标签和结束标签中的文本是元素的内容。

  • HTML 标签有开始必须有结束。如果是没有内容的标签(空标签),用 />来结束。
  • 标签名推荐用小写。

  • 标签具有属性, 属性用来表示标签的性质和特征。属性要在开始标签中指定。

4.如何定义一个合格的HTML页面

  1. HTML5文档声明 <!DOCTYPE HTML>    说明:位于 <html> 标签之前,不区分大小写。告知浏览器该文档遵循HTML规范。

  2. 设置页面标题     <title> ~ </title>

  3. 设置页面编码 <meta charset= "utf-8" />     说明: utf-8 多国语言编码 gb2312 中文简体编码

  4. 设置页面关键字,内容介绍   <meta name="keywords" content="关键字1,关键字2,…" />     <meta name="description" content="内容介绍" />

5.HTML常用元素

  1. 换行符  <br />
  2. 段落  <p></p>  属性:align   值:left、center、right。
  3. 标题  <h1></h1>~<h6></h6>
  4. 文本格式化  

    <b>定义粗体文本</b>  <i> 定义斜体文本 </i>   <del>定义删除文本</del>   <sup>定义上标字</sup>   <sub>定义下标字</sub>

  5. 链接  <a href="URL" title="" target=""></a>  

    href 定义链接地址     title 链接提示信息     target 链接打开方式(_blank 新的空白页,_self 当前页,_top)

  6. 图像  <img src="URL" width="100" height="100" alt="替代文字" />

    src 定义图像的url     alt 定义图像的替代文本     width 设置图像的宽度     height 设置图像的高度  

  7. 图像热区

    <img src="URL" usemap="# map 名称" /> <map name="map 名称"> <area shape="形状" coords="坐标值" href="URL" /> </map>

    shape 热区形状(rect、circle、poly ) coords 形状的坐标值