代码笔记网页公开课_第1页
代码笔记网页公开课_第2页
代码笔记网页公开课_第3页
代码笔记网页公开课_第4页
代码笔记网页公开课_第5页
已阅读5页，还剩41页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

北京传智播客教育网页技术html讲师：孙书华

邮箱：网页技术html学习内容HTML的基本结构标题标签段落标签列表标签(无序)超链接(概念/内部/外部)路径(相对/绝对)图像标签、图像格式div标签和span标签Flash和视频播放实体符号网页技术html学习目标掌握HTML的基本概念、HTML文件的编写方法掌握标题字标签、段落标签、无序列表、有序列表及定义列表掌握超链接的基本知识、内部链接、外部链接掌握图像的基本格式、插入图像的方法、图像的超链接及映射相对路径和绝对路径掌握DIV标签和SPAN标签网页技术html介绍随着计算机网络的迅速发展，利用Internet上的网站、和精美的网页来吸引浏览者的目光，不再是一个孤立的问题，它成为了大家共同关注的目标。《html》课程涉及到的内容有网页架设、网页编辑、多媒体元素插入、层叠样式表的使用、表单元素的添加、表格的绘制等多方面的知识，具有很强的先进性；它是计算机应用、电子商务、计算机网络、计算机软件等专业的一门基础课程。网页技术html什么是htmlHTML(HyperTextMarkupLanguage，中文通常称作超文本标记语言)是一种文本类解释执行的标记语言，它是Internet上用于编写网页的主要语言。相信同学们都有过上网冲浪的经历，打开浏览器并在地址栏中输入一个网站的地址，就会展示出相应的网页内容了。网页中可以包含很多种类型的内容作为网页的元素，其中最基本的网页元素是文字，此外还包括静态的图形和动画，以及声音和视频等其他形式的多媒体文件。所有我们所看到的网页内容，都是通过HTML来展现的。本章将从HTML的基本知识开始，力图深人浅出地向学生介绍什么是HTML，以及如何运用HTML来设计网页。网页技术htmlhtml与浏览器的关系html代码可以被写在”记事本”里边，由浏览器解释执行，是“宿主”关系网页技术htmlhtml与生活常识1:html是文档的一种(.html,.pdf,.doc,.红头文件)网页技术htmlhtml是什么不是什么HTML不是一种编程语言，而是一种标记语言(markuplanguage)HTML使用标记标签来描述网页网页技术htmlhtml漂亮网站赏析网页技术htmlhtml漂亮网站赏析网页技术htmlhtml漂亮网站赏析网页技术htmlhtml语法规则元素标签title、html、head、body、img等等单标签</>双标签<><>html组成网页技术htmlhtml文档结构<html>HTML文件开始 <head> ............ </head> <body> ......... </body></html>HTML文件结束网页技术html一个简单的html文档<html><head><title>我的第一个网页</title></head><body>

这是我制作的第一个网页!虽然简单，但是一个很好的开始！

</body></html>网页技术htmlhtml三种文档结构 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"""> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//EN""">网页技术html常见meta说明在网页的<head></head>标志对之间，我们经常见到这样一些代码：<metaname="keywords"content="puter"/>用来标记搜索引擎在搜索你的页面时所取出的关键词<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>用来标记你的页面的解码方式<metaname="Description"content="Thisisanschool"/>用来标记网页描述内容，搜索引擎在搜索页面时可以取出该内容网页技术html标题标签<h1></h1><h2></h2>…<h6></h6><h1>我是一级标题！</h1><h2>我是二级标题！！</h2><h3>我是三级标题！！！</h3><h4>我是四级标题！！！！</h4><h5>我是五级标题！！！！！</h5><h6>我是六级标题！！！！！！</h6>网页技术html段落标签<p></p>（全拼：paragraph）无段落内容<br/>无段落内容<br/>无段落内容<br/>无段落内容<br/>无段落内容<br/>无段落内容<br/><p>我是段落内容我是段落内容我是段落内容我是段落内容我是段落内容我是段落内容我是段落内容我是段落内容我是段落内容我是段落内容我是段落内容我是段落内容我是段落内容</p><p>我是段落内容我是段落内容我是段落内容我是段落内容我是段落内容我是段落内容我是段落内容我是段落内容我是段落内容我是段落内容我是段落内容我是段落内容我是段落内容</p>网页技术html水平线的标签<hr/>换行标签<br/>换行<br/>换行<br/>换行<br/>水平线<hr/>水平线<hr/>水平线<hr/>网页技术html段落和水平标签案例展示css学习完毕可以达到右边效果网页技术html列表标签列表是一种非常有用的数据排列方式，它以列表的形式来显示数据。HTML列表分无序列表、有序列表和定义列表。默认情况下，无序列表的项目符号是ul，而通过list-style属性可以调整无序列表的项目符号，避免列表符号的单调。无序列表<ul> <li>刘邦</li> <li>项羽</li> <li>项伯</li></ul>网页技术html超链接的概念网页技术html超链接标签<a>a标签的属性hrefnametarget例如：<ahref=“”target=“_blank”name=“sina”>单击我可以跳转到sina网站</a>网页技术html超链接--内部链接所谓内部链接，指的是在同一个网站的内部，不同的HTML页面之间的链接关系。target_self在当前页面中打开链接；_blank，在一个全新的空白窗口中打开链接网页技术html超链接--外部链接链接到外部网站<ahref="http://........">…</a>链接到email<ahref=“mailto:邮件地址”>…</a>链接到下载文件<ahref="文件地址">…</a>网页技术html图片标签<img>该标签属性 src

图像地址source alt

图片由于其他原因丢失提示信息 title

鼠标滑过图片提示信息引入图片例子<imgsrc=“3d.jpg”alt=“”title=“”/><imgsrc=“file:///d:/picture/3d.jpg”alt=“”title=“”/><imgsrc=“”alt=“”title=“”/>网页技术html图片基本格式PNG(PortableNetworfGraphics)的原名称为"可移植性网络图像"。PNG能够提供长度比GIF小30％的无损压缩图像文件。它同时提供24位和48位真彩色图像支持以及其他诸多技术性支持。GIF图像格式：在压缩过程中，图像的像素资料不会被丢失，然而丢失的却是图像的色彩。GIF格式最多只能储存256色，所以通常用来显示简单图形及字体。因此GIF通常适用于卡通、图形、logo、带有透明区域的图形、动画等。JPEG图像格式：利用一种失真式的图像压缩方式将图像压缩在很小的储存空间中，其压缩比率通常在10:1～40:1之间。这样可以使图像占用较小的空间，所以很适合应用在网页的图像中。JPEG格式的图像主要压缩的是高频信息，对色彩的信息保留较好，因此也普遍应用于需要连续色调的图像中。网页技术html什么是绝对路径大家都知道，在我们平时使用计算机时，要找到需要的文件就必须知道文件的位置，而表示文件的位置的方式就是路径，例如只要看到这个路径：c:/website/img/photo.jpg我们就知道photo.jpg文件是在c盘的website目录下的img子目录中。类似于这样完整的描述文件位置的路径就是绝对路径。例如：<imgsrc=“file:///c:/website/img/photo.jpg”alt=“图片展示”/><imgsrc=""alt=""title=""/>网页技术html相对路径所谓相对路径，顾名思义就是自己相对与目标位置例如：<imgsrc=“./photo.gif”/>相对路径： ./当前目录 ../上级目录 ../../上两级目录 /跟目录坐地日行三万里是什么意思呢？网页技术html上标标签、下标标签上标<sup> 9*9=81 9<sup>2</sup>=81下标<sub> 硫酸分子式H2SO4 H<sub>2</sub>SO<sub>4</sub>网页技术htmldiv和span标签<div>简单而言是一个区块容器标签，即<div></div>之间相当于一个容器，可以容纳段落、标题、表格、图片乃至章节、摘要和备注等各种HTML元素。可以把<div></div>中的内容视为一个独立的对象，用于以后学习的CSS的控制。声明时只需要对<div>进行相应的控制，其中各种标签元素都会随之改变。<div>是一个通用的块级元素，它包围的元素会自动换行。用它可以容纳各种元素，从而方便排版。网页技术htmldiv和span标签<span>该标签是一个行内元素(inlineelements)，在它的前后不会换行。该标签可以包含于<div>标签中，成为它的子元素，而反过来则不成立，即<span>标签不能包含<div>标签。网页技术html<div>和<span>标签案例<p>div标签不同行：</p><div><imgsrc="cup.gif"></div><div><imgsrc="cup.gif“></div><div><imgsrc="cup.gif“></div><p>span标签同一行：</p><span><imgsrc="cup.gif“></span><span><imgsrc="cup.gif“></span><span><imgsrc="cup.gif“></span>网页技术html符号实体一句话理解符号实体? 答:符号实体就是用"外号"表示一个字符为什么要用符号实体? 一些字符在HTML中拥有特殊的含义，比如小于号(<>空格)用于定义HTML标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在HTML源码中插入符号实体。常见的符号实体空格<>&©®

<>&©®网页技术html符号实体应用之处更多的符号实体请参考手册xhtml_reference.chm网页技术html多媒体引入flash<objecttype="application/x-shockwave-flash"data="88.swf"width="400"height="300"><paramname="movie"value="88.swf"/></object>用于IE用于火狐网页技术html多媒体引入wmv<objectclassid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6"width="400"height="300"> <paramname="autoStart"value="false"/> <paramname="URL"value="di.wmv"/> <embedautostart="0"src="di.wmv"type="video/x-ms-wmv"width="400"height="300"controls="ImageWindow"console="cons"></embed></object>用于火狐用于IE代码文件的绝对路径不要有中文网页技术htmlhtml发展历史网页技术html网页技术htmlw3c简介(了解)W3C是英文WorldWideWebConsortium的缩写，中文意思是W3C理事

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论