零点起飞学HTMLCSS之HTML基础.pptx

第2章HTML基础 在上一节我们已经了解了HTML是制作网站的最基础的语言 因此要制作好一个网站 就要详细的了解HTML 我们在畅游网络时 通过浏览器看到的网页就是由HTML语言编写的 HTML是一种建立网页文件的语言 通过标记式的指令Tag将文字 图片 声音 视频等连接并显示出来 因此对于网站设计师来说 要想做好一个网站 掌握HTML标记语言是最基本的要求 2 1HTML页面结构 HTML页面结构是HTML最基本的内容 一个完整的页面包括四个部分 元素 头部元素 主体元素 标题元素 下面我们来详细讲解这些内容 2 1 1元素 元素是HTML文档中必须使用的元素 用来标识网页的整体内容 所有的文档内容都要写在元素里 它表示该网页是以超文本标识语言 HTML 编写的 元素语法结构如下所示 文档内容 2 1 2头部元素 元素也是HTML文档中必须使用的元素 是网页的头部标签 其作用是定义页面头部的信息 元素语法结构如下所示 头部内容 2 1 3主体元素 主体元素为网页的正文标签 用来定义页面所有显示的内容 页面的信息主要通过页面主体元素来传递 写在标签里的内容都会被浏览器显示出来 标签里包括许多内容 以后要讲的标签里 很多都是写在里面的 元素语法结构如下所示 页面主体 2 1 4标题元素 标题元素写在标签里面 用来定义页面的标题 我们已经知道在标签里的内容不被正文所显示 因此标签里的内容是显示在浏览器窗口的标题栏里的 元素语法结构如下所示 页面标题 2 2元信息标签 元信息标签是一个辅助性标签 可以对整个页面进行综合性的设置 位于HTML文档头部标签和标题标签之间 提供的信息是用户看不见的 meta标签的用处很多 通常用来为搜索引擎定义页面主体 还可以用于设置页面 使其可以根据定义的时间间隔刷新页面等 这些作用主要通过meta的两种属性来表示 name和http equiv 2 2 1页面描述信息name name属性是用来描述网页 以便于搜索引擎机器人查找 分类 这其中最重要的是description 搜索引擎网站简介 和keywords 分类关键字 所以应该给每页加一个meta值 语法结构如下所示 2 2 1页面描述信息name 可以为Generator KEYWords Description Author Robots 使用不同的属性值 对应的contect的双引号里填写的内容不同 下面来介绍上述的这几个属性值 2 2 1页面描述信息name name Generator 用来说明网页里生成工具 如MicrosoftFrontPage4 0 等 相应的contect里填写网页所生成的工具 语法结构如下所示 2 2 1页面描述信息name name Keywords 是向搜索引擎机器人说明网页的关键词 相应的contect里填写网页想被搜索到的其他关键字 语法结构如下所示 2 2 1页面描述信息name name Description 用来告诉搜索引擎网页的主要内容 相应的contect里填写网页所要表达的主要内容 不宜太长 语法形式如下所示 2 2 1页面描述信息name name Author 用来告诉搜索引擎网页制作的作者 相应的contect里填写网页作者的名字 语法形式如下所示 2 2 1页面描述信息name ame Robots 用来定义网页的检索情况和网页上的连接查询情况 语法形式如下所示 其中 contect 里面可以替换多个属性值来设定不同的检索和查询情况 2 2 1页面描述信息name 下面为contect 里面的多个属性值的说明 all 文件将被检索 且页面上的链接可以被查询 none 文件将不被检索 且页面上的链接不可以被查询 index 文件将被检索 follow 页面上的链接可以被查询 noindex 文件将不被检索 但页面上的链接可以被查询 nofollow 文件将不被检索 页面上的链接可以被查询 2 2 2HTTP标题信息http equiv http equiv和HTTP的头部协议类似 它反馈给浏览器一些有用的信息 来帮助页面正确和精确的显示页面内容 是网页里必不可少的标签属性 它和name一样 都是写在meta后面 语法结构如下所示 2 2 2HTTP标题信息http equiv http equiv Refresh 是用来定时让网页在指定的时间内 跳转到指定的页面 2 2 2HTTP标题信息http equiv http equiv Expires 是用来指定网页在缓存中的过期时间 一旦过期则必须到服务器上重新调用 需要注意的是到期时间必须使用GMT时间格式 设定的时间写在contect里面 代码如下 2 2 2HTTP标题信息http equiv http equiv Pragma 是用来设定禁止浏览器从本地机的缓存中调阅页面内容 设定后浏览者将无法脱机使用该页面内容 contect no cache 是固定的属性值 在这里不用再做其它设置 代码如下 2 2 2HTTP标题信息http equiv http equiv set cookie 是用来设定如果网页过期 存盘缓存 也称cookie 将被删除 需要注意的是contect里面也是必须使用GMT时间格式 设定的时间写在contect里面 代码如下 2 2 2HTTP标题信息http equiv http equiv Window target 是用来设定显示窗口的 强制页面在当前窗口以独立页面显示 Content top 里 还可以有 blank self parent属性值 通过不同的设置来设定页面在当前窗口的哪个位置出现 代码如下 2 3段落排版标签 在网页中的内容是由段落组合而成的 要想使网页中的文字和图片等变得整齐美观 可以使用段落排版标签来进行排版 段落排版标签主要有段落标签和换行标签 2 3 1段落标签 标签为段落标签 用于在文字 表格 图片之间留一空白行或将内容包含在和之间构成一个段落 标签是双标签 有起始标签和结束标签 语法结构如下所示 内容 2 3 2换行标签 标签是换行标签 如果希望另起一行书写文字而又不希望另起一个自然段的时候 就可以使用换行标签 标签是个单标签 需要加上一个 来关闭 2 4水平分割线 称为水平分割线 当页面内容比较繁琐时 使用它在段与段之间插入一条水平分割线来使页面显得层次分明 即美观又便于阅读 本节我们将详细讲解如何设置水平分割线 2 4 1插入水平分隔线 标签是用来插入水平分隔线的 标签是标签 它没有闭合标签 所以需要加上一个 来关闭 和换行标签的使用方法一样 2 4 2设置水平分割线粗细 设置水平分割线的粗细可以使用size属性 在不写size属性值的情况下 默认为2px size属性写在标签里面 中间用一个英文的空格隔开 2 4 3设置水平分隔线长度 设置水平分割线的长度可以使用width属性 在不写width属性值的情况下 默认为100 即水平分割线效果会一直延长到网页的两边 width属性同样写在标签里面 中间用一个英文的空格隔开 2 4 4设置水平分割线显示位置 设置水平分割线的显示位置可以使用aligh属性 在不写aligh属性值的情况下 默认为居中 align属性写在标签里面 中间用一个英文的空格隔开 align属性有三个值 分别是 left 居左 center 居中 right 居右 2 4 5设置水平分割线颜色 设置水平分割线的颜色可以使用color属性 在不写color属性值的情况下 边框默认为浅灰色 ACA899 color属性写在标签里面 中间用一个英文的空格隔开 2 4 6取消水平分割线阴影 取消水平分割线的阴影可以使用noshade属性 noshade没有属性值 使用它就说明要取消水平分割线阴影 在默认情况下 水平线是有阴影的 noshade属性写在标签里面 中间用一个英文的空格隔开 2 5注释标签 HTML语言中有专门的注释标签 可以在源码中插入注释 注释内容不会显示在浏览器中 使用标签是一个很好的习惯 有时候代码多了 我们就会忘记之前写过的代码的含义 有了注释我们就可以很方便的对代码进行阅读和维护 所以要养成使用标签的良好习惯 注释标签语法结构如下 2 6设置网站背景色 如果想改变网站背景色 可以使用bgcolor属性来设置 它的取值可以是十六进制颜色代码 bgcolor属性用于对页面整体颜色进行控制 从而达到改变背景色的目的 2 7结束标签 在前面已经提到过任何标签都要加结束标签的 起始标签和结束标签必须是一起的 虽然有些标签不加关闭标签也是可以使用的 但是建议要有写关闭标签的良好习惯 2 8本章小结 本章主要讲解HTML基础 详细讲解了HTML的页面结构和它的一些基本标签 本章重点和难点在于读者要熟悉各个标签的具体用法 通过本章的学习 大家可以对HTML基础有比较深的了解和掌握 这一章对于初学者来说是很重要的 它是编写网站的基础