《网页设计与制作》课件-第二章 HTML基础_第1页
《网页设计与制作》课件-第二章 HTML基础_第2页
《网页设计与制作》课件-第二章 HTML基础_第3页
《网页设计与制作》课件-第二章 HTML基础_第4页
《网页设计与制作》课件-第二章 HTML基础_第5页
已阅读5页，还剩65页未读， 继续免费阅读

下载本文档

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

文档简介

第二章HTML基础本章知识点HTML简介HTML标签、元素、属性HTML基本结构HTML常用标签（听写标签名称）HTML实体一、HTML简介超文本标记语言（HypertextMarkupLanguage）用于描述网页文档的一种标记语言特点：没有逻辑结构网页文档即超文本文档，常用后缀是.html或.htm只要有浏览器就能运行超文本文档网页的HTML源代码可以在浏览器中直接查看超文本文档本质上是文本文档的一种超文本编辑器：文本编辑工具（记事本）可视化编辑工具（DW）一、HTML简介HTML的版本HTML1.0（1993年发布，最初）HTML4.01（1999年发布，正在使用）HTML5（2014.10.29万维网联盟泪流满面地宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布。）一、HTML简介编写简单的HTML文档新建文本文档进行重命名打开文件，输入代码，保存使用浏览器打开文件二、HTML标签和HTML元素HTML标签HTML标签被<和>符号包围HTML标签可分为非空标签和空标签非空标签是成对出现的，开始标签表示为<标签名>，结束标签表示为</标签名>空标签不需成对出现，建议在结尾使用斜杠，如：<br/>HTML标签对大小写不敏感每个标签都具有一定的语义和作用二、HTML标签和HTML元素HTML元素是指包括开始标签、标签中的内容、结束标签一起组成的部分如：<title>我的第一个网页</title>二、HTML标签和HTML元素HTML文档、元素、标签的关系HTML文档是由HTML元素构成HTML元素是通过使用HTML标签进行定义这是一份html文档这是一个html标签这是一个html元素三、HTML属性HTML标签拥有属性，属性为HTML元素提供附加信息属性总是定义在开始标签中同一个HTML标签中可以拥有多个不同的属性不同的HTML标签拥有的属性部分相同，部分不同属性总是以名称/值对的形式出现，并且属性值用引号包含HTML的属性名称、属性值对大小写不敏感三、HTML属性练习：属性测试请把你的网页背景颜色设置为yellow，文本颜色设置为blue四、HTML常用标签学习HTML语言就是学习HTML标签从两方面学习HTML标签掌握常用的HTML标签及其常用属性使用参考手册（）四、HTML常用标签HTML文档基本结构<html>文档根元素，表示自身是一个HTML文档<head>定义文档头部，包含所有头部元素；通过浏览器可见的只有标题，其他头部信息不可见<body>定义网页主体，放置所有可见信息，网页大部分标签都放置其内四、HTML常用标签HTML文档基本结构<body>块级元素：在body元素内出现，如果显示效果独占一行的HTML元素行内元素（内联元素）：与块级元素的显示效果相反HTML中的注释<!--注释内容-->四、HTML常用标签头部标签Head元素区域内出现的标签用于定义文档的各种属性和信息Head元素内可以使用的标签有6个：<title><base><meta><link><script><style>四、HTML常用标签<title>标签非空标签，用来定义文档的标题，是head元素中唯一必需的标签<head><!--设置网页标题-->

<title>title_头部标签_HTML常用标签</title></head>四、HTML常用标签<base>标签空标签，用于指定网页中的超链接的基准地址，以改变网页中所有使用相对地址的URL的基准地址例如：<basehref=""target="_blank"/>若网页中有<ahref="index.html"/>这样的超链接，它不会再像没有使用<base>标签那样表示当前网页相同目录下的index.html，而是指向了/index.html页面四、HTML常用标签<meta>标签空标签，可提供有关页面的元信息，如文档编码、关键字、文档描述等四、HTML常用标签例：<head>

<!--设置网页的内容类型为"text/html"，编码类型为"utf-8"-->

<metahttp-equiv=“Content-Type”content=“text/html;charset=utf-8”/>

<!--设置网页的关键字，多个关键字用英文状态下的逗号隔开-->

<metaname="keywords"content="head,头部标签,HTML常用标签"/>

<!--设置网页的描述，文字不宜太多，一般在70个字符以内-->

<metaname="description"content="这是一个介绍HTML常用标签中的头部标签的网页"/>

<!--设置网页的作者信息-->

<metaname=“author”content=“李欢,22410578@"/></head>四、HTML常用标签<meta>标签网页刷新设置<head>

<!--设置网页重定向，打开该网页5秒钟后，将自动跳转到myPage.html-->

<metahttp-equiv="Refresh"content="5;url=myPage.html"/></head>四、HTML常用标签其他头部标签<link>、<script>、<style>标签的应用<head>

<!--设置网页的外链样式表，学习CSS时再细讲-->

<linkrel="stylesheet"type="text/css"href="CSS/my.css"/><!--设置网页的内嵌样式表，学习CSS时再细讲-->

<styletype="text/css"> /*这里写CSS代码，以后会学*/ </style><!--设置网页的Javascript脚本，学习Javascript时再细讲-->

<scripttype="text/javascript"> /*这里写Javascript，以后会学*/ </script></head>四、HTML常用标签其他头部标签网页收藏夹小图标设置<head><title>收藏夹小图标_头部标签_HTML常用标签</title> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<!--设置浏览器收藏夹小图标（favicon.ico），有些浏览器在本地看不见，Firefox是可以的--><linkrel="icon"href="favicon.ico"type="image/x-icon"/> <linkrel="shortcuticon"href="favicon.ico"type="image/x-icon"/></head>头部标签的应用四、HTML常用标签四、HTML常用标签字体标签用来控制文字颜色、大小、形状的标签现在使用较少，主要通过CSS来进行文字控制<h1>到<h6>标题<font>字体<strong>强调<b>加粗均为非空标签

<i>斜体<u>加下划线<s>加中横线<sup>文本上标<sub>文本下标四、HTML常用标签字体标签标题标签<html><body> <h1>我是标题一</h1><h2>我是标题二</h2><h3>我是标题三</h3><h4>我是标题四</h4><h5>我是标题五</h5><h6>我是标题六</h6></body></html>慎用！四、HTML常用标签字体标签font标签<html><body> <!--设置文字大小为7（最大为7，最小为-7）-->

<fontsize="7">两只老虎</font><!--设置文字颜色为红色-->

<fontcolor="#FF0000">两只老虎</font><!--设置文字字体为“楷体”-->

<fontface="楷体">真奇怪</font><!--设置综合设置文字-->

<fontsize="7"color="#FF0000"face="幼圆">一只没有尾巴</font></body></html>扩展知识：颜色的表示四、HTML常用标签字体标签字形控制标签<html><body> <b>加粗显示</b><i>斜体显示</i><u>下划线显示</u><s>中横线显示</s>

这里是<sup>上标</sup>

这里是<sub>下标</sub></body></html>四、HTML常用标签布局标签指用来控制网页布局、排版的标签，包括段落、换行、文字范围、对齐等<p>段落<br>换行<div>层（块级元素）<span>层（行内元素）<center>水平居中<pre>预定义文本格式<hr>水平分割线除<br><hr>外，其余均为非空标签四、HTML常用标签布局标签段落、换行<html><body> <p>

这几天心里颇不宁静。 今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。

</p><p>

沿着荷塘，是一条曲折的小煤屑路。<br/>

这是一条幽僻的路；白天也少人走，夜晚更加寂寞。

</p></body></html>四、HTML常用标签布局标签块<html><body> <p>

这几天心里颇不宁静。 今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。

</p><div> <span>路上</span>

只我一个人，背着手踱着。

</div><div>

曲曲折折的荷塘上面，弥望的是田田的叶子。

<center>叶子出水很高，像亭亭的舞女的裙。</center></div></body></html>四、HTML常用标签布局标签预格式化<html><body> <p>

轻轻的我走了，正如我轻轻的来；我轻轻的招手，作别西天的云彩。

</p><p> <pre>

那河畔的金柳，是夕阳中的新娘；波光里的艳影，在我的心头荡漾。

</pre></p></body></html>四、HTML常用标签布局标签水平分割线<html><body> <hrsize="5"/><hrsize="10"color="#FF0000"/><hrsize="15"color="#00FF00"width="600"/><hrsize="20"color="#0000FF"width="600"align="left"/></body></html>字体标签布局标签的应用四、HTML常用标签课堂练习四、HTML常用标签四、HTML常用标签列表标签用来列举信息，列表标签有三类：有序列表、无序列表、定义列表<ul>无序列表<ol>有序列表<dl>定义列表均为非空标签<li>列表项目（只能用于有序和无序列表）<dt>定义列表中的项目<dd>对定义列表中项目的解释四、HTML常用标签列表标签无序列表<html><body><h4>Disc项目符号列表：</h4><ultype="disc"><li>苹果</li><li>香蕉</li></ul><h4>Circle项目符号列表：</h4><ultype="circle"><li>苹果</li><li>香蕉</li></ul><h4>Square项目符号列表：</h4><ultype="square"><li>苹果</li><li>香蕉</li></ul></body></html>四、HTML常用标签列表标签无序列表<html><body><h4>数字列表：</h4> <ol><li>苹果</li></ol> <h4>字母列表：</h4> <oltype="A"><li>香蕉</li></ol> <h4>小写字母列表：</h4> <oltype="a"><li>苹果</li></ol> <h4>罗马字母列表：</h4> <oltype="I"><li>香蕉</li></ol> <h4>小写罗马字母列表：</h4> <oltype="i"><li>苹果</li></ol></body></html>四、HTML常用标签列表标签无序列表<html><body><dl> <dt>词语：神马都是浮云</dt> <dd>解释：神马都是浮云，网络流行语，什么都是浮云的谐音，意思是什么都不值得一提，有抱怨感叹之意。</dd></dl> <dl> <dt>词语：犀利哥</dt> <dd>解释：犀利哥，是指的一位街头乞丐，因为他放荡不羁、不伦不类的感觉以及那原始版的“混搭”潮流，给人们潮流视觉眼前一亮，被网友开始追捧。</dd></dl></body></html>课堂练习四、HTML常用标签四、HTML常用标签图像标签是网页中最常用的标签，图像标签只有一个<img>空标签，行内元素<img>标签用于向网页中嵌入一副图像<img>标签创建的是被引用图像的占位空间四、HTML常用标签图像标签<img>标签<html><body><imgsrc="Images/01.gif"/><imgsrc="Images/01.gif"title="美女，脚下！"/><imgsrc="Images/01.jpg"alt="图片地址有误！"/><imgsrc="Images/01.gif"width="400"height="270"/><imgsrc="Images/01.gif"border="10"/></body></html>四、HTML常用标签图像标签<img>标签<html><body><imgsrc="Images/05.jpg"align="left"width="75"height="110"border="1"/><p>

罗贯中（约1330年—1400年），元末明初小说家，名本，字贯中，号湖海散人，籍贯山西太原府，一说山西省祁县；钱塘（今浙江杭州）或庐陵（今江西吉安）人。元末明初著名小说家、戏曲家，是中国章回小说的鼻祖。

</p></body></html>四、HTML常用标签图像标签的实际应用四、HTML常用标签超链接标签用于页面与页面或页面内部的链接，就只有一个<a>标签<a>非空标签，行内元素href属性，链接的目标URLname或id属性，设置锚名称Target属性，设置在何处打开链接的文档超链接具有默认的外观和动作响应，外观表现为：未被访问的链接带有下划线而且是蓝色的已被访问的链接带有下划线而且是紫色的活动链接（鼠标点击下去但没松开的时候）带有下划线而且是红色的四、HTML常用标签超链接标签<a>标签<html><body> <ahref="">百度一下</a><br/> <ahref=""target="_blank">百度一下</a><br/> <ahref=“02_04_07_02.html”>相对路径链接示例</a><br/> <ahref="02_04_07_02.html"target="_blank">相对路径链接示例</a><br/> <ahref="mailto:admin@"target="_blank">发送邮件</a></body></html>四、HTML常用标签超链接标签<a>标签页面内链接（见书上示例）路径是资源在计算机中具体位置的描述绝对路径：包含盘符或主机名的完整地址，分为本地绝对路径和网络绝对路径相对路径：以引用文件的网页所在位置为参考基础四、HTML常用标签超链接标签的实际应用四、HTML常用标签课堂练习四、HTML常用标签表格标签表格用于展示二维数据，由<table>标签来定义表格由若干行组成，行由<tr>来定义行被分为若干单元格，由<th>或<td>来定义<th>包含表头信息<td>包含数据在实际应用中，表格会有一个标题（caption），表格内容由表头（thead）、主体（tbody）、脚注（tfoot）组成四、HTML常用标签表格标签<table>标签非空标签，块级元素。常用属性align：设置表格相对周围元素的对齐方式bgcolor：设置表格的背景颜色border：设置表格边框的宽度cellpadding：设置单元格边框与其内容之间的空白cellspacing：设置单元格之间的空白四、HTML常用标签表格标签<thead><tfoot><tbody>非空标签。表头、页脚、主体。如果使用，就必须3个标签结合使用，且出现的次序必须是thead、tfoot、tbody。四、HTML常用标签表格标签<td>、<th>常用属性align、valignbgcolorwidth、heightcolspan：单元格可以横跨的列数rowspan：单元格可以横跨的行数四、HTML常用标签表格标签的应用四、HTML常用标签表格标签的练习四、HTML常用标签表单标签表单是网页收集用户数据的重要工具，各项用户操作都离不开表单，如：注册、登录、上传、下载、在线购物等实例：/mysojump/newselecttemplete.aspx四、HTML常用标签表单标签从代码角度来说，表单分为表单结构和表单元素表单结构<form>表单<fieldset>表单分组<legend>分组标题<lable>表单标注四、HTML常用标签表单标签表单元素<input>定义大部分表单元素，由type属性值决定<select>定义下拉列表、列表菜单<option>为<select>标签的选项，位于<select>标签内<optgroup>为<select>标签的组合选项，位于<select>标签内<textarea>定义多行的文本输入控件注意事项所有的表单元素都应该放在form元素内表单的格式控制可以借助表单结构标签，也可以使用表格四、HTML常用标签表单标签的练习四、HTML常用标签多媒体标签在网页中除了文本、图片之外，还可以添加音频、视频、动画在HTML中可以使用的多媒体标签有<bgsound>设置网页的背景音乐，仅IE浏览器支持<embed>用于在网页中嵌入多媒体<object>用于以对象的方式插入多媒体多媒体标签中的重要属性src该属性的值是多媒体的路径四、HTML常用标签框架标签有时需要将多个网页嵌入一个浏览器窗口，可以使用框架框架有两类框架集：可含多个框架，代表新的窗口的组合，不能置于body元素内浮动框架：可以嵌入body元素内使用四、HTML常用标签框架标签相关标签<frameset>定义框架集<frame>定义框架集中某个框架，位于<frameset>内部<noframe>为不支持框架的浏览器显示文本，位于<frameset>内部<iframe>浮动框架四、HTML常用标签框架标签的练习四、HTML常用标签其他标签<marquee>滚动标签滚动标签的使用<html><body> <marqueedirection="left"scrolldelay="10

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

温馨提示

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

最新文档

评论

0/150

提交评论