《HTML+CSS+JavaScript网页设计教程》课件-2. 第二章 HTML语言（一）_第1页
《HTML+CSS+JavaScript网页设计教程》课件-2. 第二章 HTML语言（一）_第2页
《HTML+CSS+JavaScript网页设计教程》课件-2. 第二章 HTML语言（一）_第3页
《HTML+CSS+JavaScript网页设计教程》课件-2. 第二章 HTML语言（一）_第4页
《HTML+CSS+JavaScript网页设计教程》课件-2. 第二章 HTML语言（一）_第5页
已阅读5页，还剩27页未读， 继续免费阅读

下载本文档

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

文档简介

目录CONTENTS第一章网页设计综述第二章HTML语言第三章CSS第四章JavaScript第五章网页设计综合案例02第二章HTML语言HTML指的是超文本标签语言（HyperTextMarkupLanguage，简称HTML）是一种用于创建网页（Web页面）的标签式语言，HTML使用标签来描述网页，可以用于构建Web站点中的网页，网页中包含了HTML标签及文本内容。HTML被用来对网页的内容（文字、图片等）进行结构化处理，由浏览器来解释执行。2.1HTML基本语法2.2HTML文档基本结构2.3HTML文档头部相关标签2.4段落与文本格式化2.5列表2.6超链接目录2.7图像与多媒体2.8表单2.9表格2.10框架2.11HTML

5结构元素2.1HTML基本语法HTML是一种标签式语言，通过使用各种不同的标签来定义网页元素。HTML标签是由尖括号包围的关键词，例如<html>。HTML标签通常分为单标签和双标签。HTML标签对大小写不敏感，对于浏览器来说，<html>、<HTML>和<Html>都是同一个标签。2.1.1双标签HTML标签通常是成对出现的，双标签由开始标签和结束标签两部分组成，必须成对使用，基本格式为：<标签名>内容</标签名>

例如：<p>这是一段文字</p>

标签可以成对嵌套，但是不能交叉使用。

例如，我们可以在<h3>标签中嵌套一个<i>标签：

<h3><i>在h3标签中正确嵌套i标签</i></h3>

但这样交叉嵌套是错误的：

<h3><i>在h3标签中正确嵌套i标签</h3></i>

2.1.2单标签单标签是指可以单独使用即可表达明确意思的标签，不需要成对出现的。单标签的基本格式为： <标签名/>或<标签名>按照XHTML1.0规范要求，单标签也需要加上结束标志，即要使用<标签名/>这样的格式。常用的HTML单标签有：换行标签<br/>、水平分割线标签<hr/>等。2.1.3属性大多数的HTML标签都具有属性，通过设定属性值，可以让标签在浏览器中有不同的表现形式。HTML标签属性的基本语法是：<标签名称属性名1=“属性值1”属性名2=“属性值2”……属性名n=“属性值n”>

例如：<palign=“center”>这是一段居中对齐效果的段落</p>

<hrsize="5"color="red"width="75%"/>2.1.4注释作为一个合格的Web前端开发工程师，需要养成良好的变成习惯，如在网页文件中添加一定的注释，以提高代码的可读性和可维护性。网页文件中所添加的注释，在浏览器中显示的时候，会被忽略掉。在HTML代码中有两种添加注释的方法：1.使用<!--和-->标签基本语法格式为：<!--注释信息-->注意，左尖括号、感叹号和两个横线（<!--）之间不能有空格等符号。（-->）是注释结束符号。2.使用<comment>标签<comment>是一个双标签，其基本语法格式为：<comment>注释信息</comment>开始标签<comment>和结束标签</comment>之间的是注释内容。2.2HTML文档基本结构一个完整的HTML文档，是由头部head和主体body两部分组成。HTML文档以<html>标签开始，以</html>标签结束。所有的HTML代码都位于这两个标签之间。

图2-2HTML文档结构图图2-2HTML文档结构图<!DOCTYPE>标签位于文档的最前面，用于向浏览器说明当前文档使用的是那种HTML规范，有助于浏览器能够正确的显示网页。图2-2中的HTML代码使用的是HTML4.0规范。最新的HTML5规范，将该标签简化为：<!DOCTYPEhtml>。注意，doctype声明是不区分大小写的。<html>标签用于告诉浏览器，这是一个Web文档，要按照HTML语言规范对文档内容进行解释。<head>……</head>是HTML的头部标签，用于定义网页的标题、元标签、引入的外部样式表、脚本文件等信息。一个HTML文档只能有一对<head>标签。<body>……</body>标签之间的内容就是用HTML标签来定义的在网页中要显示的文字、图片等信息。只有<body>……</body>之间的内容才会在浏览器中显示出来。2.3HTML文档头部相关标签HTML文档的头部标签<head>主要包含页面的标题标签、元信息标签、引入外部的样式表、脚本文件等标签，<head>标签所包含的信息一般不会显示在网页上。2.3.1页面标题标签<title></title><title>标签用于定义HTML文档的标题，<title>标签之间的内容将显示在浏览器窗口的标题栏中，其基本的语法格式为：<title>网页标题内容</title>（录屏）2.3.2元信息标签<meta><meta>标签用于提供网页的元信息，这些信息不会显示在网页上，但是对于浏览器来说是可读的，用于设置网页的搜索关键字、网页的编码格式等。<meta>标签有两个属性：http-equiv和name。http-equiv属性：模拟http协议文件头信息，当信息从服务器传到客户端时，告诉浏览器如何正确显示网页内容。该属性一般与content属性配合使用，content属性用于指定信息的详细参数。name属性：用于设置网页的搜索关键字、版权信息、网页作者等。具体的内容由content属性来设置。<metaname=""content=""/>，name属性用于描述网页，它是名称/值对中的名称，主要取值为author、description、keywords、robots、viewport等，name属性所描述的具体内容，由content属性设置。<metahttp-equiv=""content=""/>，http-equiv属性提供HTTP协议的响应头，用于给浏览器提供一些响应信息，它是名称/值对中的名称。http-equiv属性的值所描述的具体内容，通过content属性来设置。

1.name属性的设置（1）定义网页关键词<metaname="keywords"content="HTML,CSS,PHP,JavaScript"/>，该<meta>语句告诉搜索引擎，该网页的关键词是HTML、CSS、PHP和JavaScript。（2）定义网页的基本描述<metaname="description"content="这是一个学习网页设计的网站"/>，该<meta>语句用于说明网站的主要内容是什么。（3）定义网页作者<metaname="author"content="Aaron"/>，该<meta>语句用于说明该网页的作者为Aaron。2.http-equiv属性的设置（1）页面重定向和刷新<metahttp-equiv="refresh"content="时间;url=URL地址"/>，该<meta>语句用于定义当前网页多长时间刷新或者重定向到制定的URL地址。content内的数字代表时间（秒），即多少时间后刷新。如果指定了url，则经过设定时间后，会重定向到指定网页URL所指向的地址。（2）设置网页编码<metahttp-equiv="content-type"content="text/html;charset=网页编码"/>,该<meta>语句告诉浏览器，这是一个html文件，需要用UTF-8的编码格式进行解释。（要注意网页源文件的编码格式也要采用UTF-8进行编码）。通常将网页的编码设置为UTF-8会有更好的兼容性，对中文显示的支持也比较好。在HTML5中，设置当前网页的字符编码为UTF-8，可以简化为如下的<meta>语句：<metacharset="UTF-8">2.3.3其他标签在<head>标签之间，还可以使用<link>标签将外部的层叠样式表（CSS）文件引入到当前网页中，或者使用<script>标签将外部的JavaScript代码引入到当前网页文件中。这两个标签的具体使用方法，我们会在第3章CSS和第4章JavaScript进行详细讲解。2.4段落与文本格式化要设置网页中文字的字体、颜色、字号等内容，或者对网页中的文字进行分段等，需要用到<p>、<font>等文字分段和文本格式化相关的HTML标签。2.4.1<font>标签<font>标签用于设定网页中文本的字体、字体大小、字体颜色等属性。该标签在HTML5规范中不推荐使用，其基本的语法格式为：<fontface="字体名称"size="字体大小"color="字体颜色">文本内容</font>1.face属性：设定位于<font></font>之间文本的字体名称。字体名称可以是多个，用“,”分隔开字体名称即可。浏览器使用时，从左向右依次选择。2.size属性：设定位于<font></font>之间文本的字体大小。取值为1至7，数字越大，字体也会变得更大。3.color属性：设定于<font></font>之间文本的字体颜色。可以使用两种颜色表示方法，一种是使用颜色的英文名称，另一种是使用#后面跟6位分别表示红、绿、蓝三种颜色的16进制数字组合成的颜色。例如#ff0000表示的是红色，#00ff00表示的是绿色，#0000ff表示的是蓝色。

2.4.2样式标签

样式标签用于告诉浏览器应该以何种格式显示文字，例如把文字显示为加粗、加下划线等显示效果。常用的样式标签如下表所示：

序号标签效果

<b>加粗显示的文字</b>加粗

<i>斜体显示的文字</i>斜体

<u>文字下面有下划线</u>下划线

<del>文字中间有删除线</del>删除线

<sup>上标显示的文字</sup>上标

<sub>下标显示的文字</sub>下标

<small>字体变小</small>变小字号

<big>字体变大</big>变大字号

<tt>打字机字体</tt>打字机字体

<abr>表示缩写</abr>缩写

<address>地址</address>地址

<cite>引用</cite>引用（斜体）

<code>固定宽度字体</code>固定宽度显示的计算机代码

<strong>强调显示的文本</strong>黑体强调文字表2-1常用的物理样式标签2.4.3段落标签<p><p>标签在网页中用来开始一个新的段落，用于对网页中的文字进行分段，浏览器会自动在<p>标签的前后添加一些空白，这些空白的大小可以使用样式表进行控制。<p>标签的基本语法为：<palign=="left|center|right|justify">段落的正文内容</p>align属性用于设置<p>标签之间文字的对齐方式：（1）left:左对齐（2）center：居中（3）right：右对齐（4）justify：两端对齐2.4.4换行<br>标签网页内容在浏览器中的显示形式，都是由各种标签来设置的。所以，即使在网页源文件中使用回车符对文字内容进行了换行，实际在浏览器中显示的时候，文字内容仍然会在同一行中。如果要强制让显示的内容产生换行的效果，就需要用到<br/>标签，这是一个单标签。2.4.5水平分割线<hr>标签<hr>标签也是一个单标签，用于在网页中显示出一条水平的分割线，这条分割线的颜色、粗细和长度都可以通过设置该标签的相关属性来实现。该标签的基本语法格式为：<hrwidth=""size=""color=""align="left|center|right"/>width属性：用于设置水平线的宽度，可以使用像素或者百分比的方式。size属性：以像素(px)为单位设置水平线的高度。color属性：设置水平线的颜色align属性：设置水平线的对齐方式2.4.6内容居中标签<center><center></center>标签之中的内容，不管是文字、图片或者其他对象，在浏览器中都会居中显示。2.4.7预格式化标签<pre>设计网页的时候，如果需要保留文字中的空格、换行或者缩进的效果，就可以将该段文字放在<pre></pre>标签之间。<pre>标签会把一段文字在网页源文件中的编辑效果原样展示在浏览器中，所以在做诗歌内容的网页时，可以使用该标签。如果不使用<pre>标签，即使在网页源文件中的文本内容有空格、换行，将来在浏览器中显示的时候，空格和换行也会被过滤掉。2.4.8标题标签<h1>~<h6><h1>-<h6>标签可定义不同大小的标题，其中<h1>定义的标题最大。<h6>定义的标题最小。在实际的网页设计中，一般不使用标题标签来设定显示内容字体的大小，通常使用样式表来实现。2.4.9<div>和<span>标签<div>和<span>标签并没有特别的意义，在设计网页时，通常用作其他网页元素或者文字的容器，可以使用CSS样式灵活的定义他们的位置，或者使用JavaScript来动态修改其中的内容。

1.<div>标签

DIV（division）是分区或者分节的意思。<div>标签是一个块级标签，该标签中的内容会独占一段。其基本语法是：

<divid=“”class=“”style=“”>div中的其他网页元素</div>

和其他HTML标签一样，也可以为<div>标签指定其id、class和style属性，<div>标签的这几个属性通常用于设置其样式来用。

<div>标签中不仅可以包含文字、图像、音视频等HTML元素，也可以包含<div>，这样就形成了图层之间的嵌套，以实现复杂的网页布局设计。2.<span>标签

<span>标签是行内标签（行内元素），<span></span>标签中的的内容不会单独占用一行，也就是说<span>标签的前后不会自动换行。通常用<span>标签来作为动态显示的内容，例如在用户注册界面中的文本框后面的提示文字。

<span>标签的基本语法是：

<spanid=""class=""style=""></span>

设计网页时，我们可以把一个<span>标签的display样式设置为：none，实现隐藏，在需要显示的时候，再把它的样式的display属性设置为：inline，即可实现动态显示<span></span>标签之间内容的效果。

2.5列表使用HTML提供的列表标签可以将网页中的信息进行合理的布局，通过有序或者无序的方式显示出来。HTML中提供了多种列表标签，比较常用的有无序列表、有序列表和自定义列表。在实际的网页设计工作中，通常把列表和样式表结合起来，实现更为美观的显示效果。2.5.1无序列表标签<ul><ul>标签通过在相关信息的前面加上“圆点”等与次序无关的符号来展示信息。该标签的语法格式为：<ultype="disc|circle|square"> <li>列表项</li> <li>列表项</li>

……</ul><ul>标签的type属性有三种取值：1.disk：实心圆形2.circle：空心圆形3.square：实心正方形2.5.2有序列表标签<ol><ol>标签通过在相关信息的前面加上“数字”等与次序有关的符号来展示信息。该标签的语法格式为：<oltype="1|A|a|I|i"start=""> <li>列表项</li> <li>列表项</li>

……</ol>type属性的取值："1|A|a|I|i"，分别表示列表项前面的序号按照数字、大写英文字母、小写英文字母、大写罗马字母、小写罗马字母的方式来显示。start属性定义有序列表的起始编号。例如，将type属性设置为“a”，start属性设置为“3”，则第一个列表项前面的变化将显示为小写字母“C”2.5.3自定义列表<dl>设计网页时，除了可以使用样式表与<ul>、<ol>标签进行网页布局之外，还可以使用<dl>标签来定义一个描述列表，例如在做一个程序功能模块发布网页时，就可以使用<dl>标签。<dl>标签要与<dt>和<dd>标签一起使用，<dt>标签用于定义项目，<dd>标签用于描述项目。基本的语法格式为：<dl>

<dt>项目1名称</dt>

<dd>项目1的说明</dd>

<dt>项目2名称</dt>

<dd>项目2的说明</dd>

<dd>项目2的说明</dd>

</dl>2.6超链接HTML语言使用超链接与网络上的其他资源建立连接关系，大多数的网页自身包含有超链接指向其他相关的资源，超链接可以是一个字，一个词，或者一组词，也可以是一幅图像或者是其他可以下载的资源。通过超链接，把有用的相关资源组织在一起的集合，就形成了所谓的“万维网”。在浏览器中浏览网页时，当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手，点击这个超链接，就可以跳转到我们感兴趣的资源。2.6.1超链接标签<a>通过使用<a>标签在HTML中创建链接，具体链接的资源目标，通过<a>标签的href（HypertextRefrence，超文本引用）属性来指定。有两种使用<a>标签的方式：1.通过使用href属性-创建指向另一个文档的链接2.通过使用name属性-创建文档内的书签在所有浏览器中，链接的默认外观如下：1.未被访问的链接带有下划线而且是蓝色的2.已被访问的链接带有下划线而且是紫色的3.活动链接带有下划线而且是红色的<a>标签的基本语法格式为：<ahref="超链接目标的URL地址"name="锚点的名称"title="链接所指向目标的提示信息"target="_blank|_self|_top|_parent|framename">超链接显示内容</a>

<a>标签几个属性的含义是：1.href属性：使用URL地址定义链接所指向的目标资源。关于使用URL地址表示资源的详细方式可以参阅1.5.3URL的相关内容。2.name属性：定义文档内链接的锚点（anchor）名称3.title属性：提供关于链接目标的额外信息4.target属性：定义点击超链接打开目标窗口的方式。该属性的取值为：（1）_blank：在一个新的空白窗口中打开超链接（2）_self：在当前框架（或当前窗口）中打开超链接（默认方式）（3）_top：在顶层框架中打开超链接（4）_parent：在窗口主体（或当前框架）的上一层打开超链接（5）framename：在指定的名字的框架中打开超链接2.6.2路径的表示方法在万维

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

温馨提示

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

最新文档

评论

0/150

提交评论