版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
项目三掌握HTML5基础认识HTML及其常用的编辑工具学会使用HTML常用标签学会使用新增的HTML5标签学习目标Contents目录任务1初识HTML任务2HTML的编辑工具任务3HTML的常用标签任务4HTML5的新增标签的使用1.1HTML特殊字符1.2任务1初识HTMLHTML文档基本格式、标记及其属性1.1.1HTML基本格式1.1.1HTML基本格式HTML文档的基本格式其中主要包括<!doctype>文档类型声明,<html>根标记、<head>头部标记、<body>主体标记。1.1.2HTML标签双标签格式：<标签名></标签名>例如：<p>这是一个段落</p>2单标签
格式：<标签名/>如：<br/>1注释标签格式：<!--注释内容-->3任务1认识网页与网站1.2HTML特殊字符
字符实体表1.2.1特殊字符描述实体名称实体编号特殊字符描述实体名称实体编号空格
¥人民币/日元¥¥<
小于号<<€欧元€€>
大于号>>§小节§§&和号&&©版权©©"引号""®注册商标®®'撇号'(IE不支持)'™商标™™￠分¢¢×乘号××£镑££÷除号÷÷2.1SublimeText2.2任务2HTML常用编辑器VSCode2.3Dreamweaver任务1认识网页与网站2.1VSCode2.2SublimeText2.3DreameweaverCC2017技能拓展1.从官网下载安装VSCode或者Sublimetext,并安装。2.启动VSCode或者Sublimetext或者DreamweaverCC2017制作一个龙抬头介绍网页，效果图如下图所示，并对以上内容进行综合总结。3.1超链接3.2任务3HTML常用标签文本格式3.3图像表格3.43.1.1段落格式P与br1标题标记符h1-h62水平线标记符<hr>3属性功能值实例align对齐方式Center、left、right,默认是居中对齐<hralign=”left”>noshade阴影样式Noshade(省略，表示有阴影)<hrnoshade>size高度（厚度）pixels<hrsize=”50”>width长度Pixels、%<hrwidth="50%">或<hr
width="1000">3.1.1段落格式-示例效果3.1.2文本格式文本格式化1标签功能标签功能<b>定义粗体文本<sub>定义下标字<em>定义着重文字<sup>定义上标字<i>定义斜体字<ins>定义插入字<small>定义小号字<del>定义删除字<strong>定义加重语气<u>下划线3.1.2文本格式“计算机输出”标签2标签功能<code>表示计算机源代码或者其他机器可以阅读的文本内容。<kbd>定义键盘码。<samp>定义计算机代码样本。<tt>定义打字机代码。<var>定义变量。<pre>定义预格式文本。3.1.3列表格式有序列表1<ol><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li></ol>3.1.3列表格式无序列表2<ul><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li></ul>3.1.3列表格式自定义列表3<dl><dt>水果类</dt><dd>车厘子</dd><dd>橙子</dd><dt>蔬菜类</dt><dd>萝卜</dd><dd>青菜</dd></dl>3.2超链接链接语法4绝对路径2相对路径3网页链接路径1空链接5锚点链接63.3图像图像的宽度和高度2示例3图像的插入13.4表格表格标签2表格示例3表格的插入1表格在网页中除了有合理显示文本数据的内容以外，更重要的是还有布局网页的功能。表格的插入1表格由<table>标签来定义。
<table>行：<tr>单元格<td>表格标签2标签功能标签功能<table>定义表格<thead>定义表格的页眉<caption>定义表格标题<tbody>定义表格的主体<th>定义表格的表头<tfoot>定义表格的页脚<tr>定义表格的行<col>定义用于表格列的属性<td>定义表格单元格<colgroup>定义表格列的组属性名属性值功能alignleft、center、right、justify、char规定表格相对周围元素的对齐方式。（不推荐使用，用样式代替）bgcolor颜色名字或颜色二进制代码规定表格的背景颜色。（不推荐使用，用样式代替）border1或者其他值，默认是""规定表格单元是否拥有边框，默认为""，表示没有边框cellpadding像素值规定单元边沿与其内容之间的空白，默认1像素cellspacing像素值规定单元格之间的空白，默认为2像素。width像素值或百分比规定表格的宽度。framevoid、above、below、hsides、lhs、rhs、vsides、box、border规定外侧边框的哪个部分是可见的。rulesnone、groups、rows、cols、all规定内侧边框的哪个部分是可见的。summarytext规定表格的摘要。border-collapsecollapse设置表格的边框是否被折叠成一个单一的边框或隔开表格标签属性2表格frame属性2frame属性值
功能void（默认值）无边框above显示上部的外侧边框。below显示下部的外侧边框。hsides显示上部和下部的外侧边框。vsides显示左右两边的外侧边框。lhs显示左边的外侧边框。rhs显示右边的外侧边框。box在所有四个边上显示外侧边框。border在所有边上显示外侧边框。表格中<tr>标签属性值设置2属性值功能alignright、left、center、justify、char定义表格行的内容对齐方式bgcolor颜色名字或颜色二进制代码设置表格行的背景颜色（一般不使用，用样式取而代之）charcharacter规定根据哪个字符来进行文本对齐charoffnumber规定第一个对齐字符的偏移量valigntop、middle、bottom、baseline规定表格行中内容的垂直对齐方式表格中<td>标签属性值设置2属性值描述alignleft、right、center、justify、char规定单元格内容的水平对齐方式nowspannowrap规定单元格中内容是否自动换行（不赞成使用，一般使用样式取而代之）rowspannumber规定单元格横跨的行数colspannumber规定单元格横跨的列数3.5表单Input元素2基本语法1示例3表单是用户和后台交互的重要纽带，我们常见的注册、登录、问卷调查等都离不开表单。基本语法1<formaction="URL"name=""method="get|post"enctype="MIME"target"">input元素……</form>表单的几个基本属性name:给表单命名。action:表单中的数据将会提交到该地址进行处理。method:数据提交到后台使用哪种HTTP提交的方式。提交方式有两种，post和getencytype:（encodetype）就是编码类型的意思。3.5.2input元素密码域password2普通按钮button3文本框text1单选按钮radio4复选按钮checkbox5提交按钮submit6重置按钮reset7图像按钮image8文件域file9菜单和列表select10其它新增的元素12文本域textarea11<inputtype=“”name="控件名称"……>Input元素的语法格式
例如：<inputtype="text"name="user"maxlength="30">
例如：<inputtype="password"name="psw"maxlength="30">
例如：<inputtype="button"value="选好了">表单综合案例—用户注册表单综合案例一般制作方法：1.插入表单2.在表单中插入表格3.根据表单元素，调整或合并表格的单元格4.在表格相应单元格中插入input元素5.设置input元素属性3.6HTML块级元素和内联元素内联元素2块级元素1<div>标签3<span>标签4块元素和内联元素相互转换51.块元素每个块元素都会独自占据一行或多行。块元素可以设置宽度、高度、对齐等属性。特点常用于网页布局和网页结构的搭建。作用常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li><p>、<nav>、<aside>、<header>、<footer>、<section>、<article>、<ul>、<address>、<form>、<tabe>等等。常见的块元素块元素块级元素11.元素的类型不会独自占据一行。不可以设置宽度、高度、对齐等属性特点用于控制页面中文本的样式。作用常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等常见的内联元素内联元素内联元素（行内元素）2知识储备特殊行内元素注意：在行内元素中有几个特殊的标签。例如，<img/>标签和<input/>标签。这些特殊的行内元素可以设置宽度、高度和对齐属性，因此它们也被称为行内块元素。内联元素（行内元素）2<div>标签<div>标签属于块元素，在网页布局方面发挥着重要的作用，使用<div>我们可以定义页面的各个部分，通过与CSS相结合可以实现各种各样的效果。<div>标签3<span>标签<span>标签属于行内元素，在<span>与</span>之间只能包含文本和各种行内标签。<span>标签没有固定的表现形式，通常可配合class属性使用。当我们对<span>标签应用样式时，该标签才会产生视觉上的变化。在搭建HTML结构时，块元素能够嵌套行内元素，但行内元素不能嵌套块元素。<span>标签4块元素和内联元素相互转换5块元素和行内元素相互转换网页元素是由多个块元素和行内元素构成的盒子排列而成的。可以用display属性转换块元素和行元素的类型。
display属性常用的属性值及含义如下。(1)display:inline;转换为行内元素。(2)display:block;转换为块状元素。(3)display:inline-block;转换为行内块状元素。(4)display:none:元素被隐藏。7综合实例：读书网站网页设计2网站规划1网页制作34.1HTML5分组元素4.2任务4HTML5新增标签的使用结构元素标签4.3HTML5交互元素HTML5中新增了几个结构元素（section元素、article元素、nav元素、aside元素、header元素和footer元素），这些元素的作用与块元素非常相似，通过运用这些结构元素，可以让网页的整体结构更加直观和明确、更加具有语义化和更具有现代风格。
4.1HTML5结构元素header元素为页面或页面中某一个区块的页眉，通常是一些引导和导航信息。Header元素通常来放置整个页面或页面内的一个内容区块的标题，它可以包含页面标题、logo图片，搜索表单等。1、header元素
4.1HTML5结构元素语法格式：<header><h1>标题</h1>……</header>1、header元素例如
4.1HTML5结构元素nav元素定义页面的导航链接部分区域，引用nav元素可以让页面元素的语义更加明确。在一个HTML页面中可以包含多个nav元素，但并不是所有的链接都需要包含在nav元素中。通常nav元素用于以下几种场合：传统的导航条；侧边栏导航；内页导航；翻页导航。2、nav元素
4.1HTML5结构元素例如，常见的首页、上一页、下一页、尾页链接。<nav><ahref="#">首页</a><ahref="#">上一页</a><ahref="#">下一页</a><ahref="#">尾页</a></nav>学院网站传统导航条也可以用nav元素。2、nav元素
4.1HTML5结构元素3、
section元素section元素用于对网站或应用程序中页面的内容进行分块，表示一段专题性的内容，一般会带有标题。Section元素通常用于文章的章节、页眉、页脚或文档中的其他部分。
4.1HTML5结构元素3、
section元素section元素用于对网站或应用程序中页面的内容进行分块，表示一段专题性的内容，一般会带有标题。Section元素通常用于文章的章节、页眉、页脚或文档中的其他部分。
4.1HTML5结构元素3、section元素使用需注意以下3点：不要使用section元素设置样式作为设置样式的页面容器，那是div的工作。如果article元素、aside元素、nav元素更适合我们使用条件，那么我们就不要使用section元素。不要为没有标题的内容去使用section元素。没有标题的内容区块不要使用section元素。温馨提示
4.1HTML5结构元素4、article元素article元素定义独立的内容。该元素定义的内容必须是有意义的且必须是独立于文档的其余部分。它可是论坛帖子，博客文章，新闻内容，或者是用户的评论，亦或者其它任何独立的内容等。一个article元素通常有它自己的标题，有时还有它自己页脚。
4.1HTML5结构元素544、article元素在HTML5中，article元素可以嵌套使用。article元素可以包含多个section元素，section元素也可以包含多个article元素。article元素可以看成是一种特殊类型的section元素，它比section元素更强调独立性。即section元素侧重分段或分块，而article侧重独立性。如果一块内容相对来说比较独立的、完整
，应该使用article元素，如果你想将一块内容分成几段，应该使用section元素。
4.1HTML5结构元素aside元素通常用来表示当前页面的附属信息部分，它的内容跟这个页面的其它内容的关联性不强，或者是没有关联，单独存在。它可以包含我们当前页面或者主题内容相关的一些引用，如侧边栏、广告、目录、索引、Web应用、链接、当前页内容简介等，有别与我们主要内容。
4.1HTML5结构元素5、aside元素56aside元素主要使用方法有两种：（1）被包含在article元素中作为主要内容的附属信息部分。比如与我们当前文章有关的参考资料、名词解释等等。（2）第二种用法是在article元素之外使用的，作为页面或者站点全局的附属信息。比如侧边栏、广告、友情链接等。
4.1HTML5结构元素5、aside元素footer元素用于定义页面或区域的页脚，可以为网站的版权信息、作者、日期及联系信息。一个页面中可以包含多个footer元素，也可以在section元素或article元素中使用footer元素。6、
footer元素
4.1HTML5结构元素58footer元素header元素article元素nav元素aside元素section元素
4.1HTML5结构元素分组元素用于对页面元素进行分组。我们熟悉的div、p、ol、ul都是分组元素标记。本节学习3个新增的分组元素，分别是figure元素、figcaption元素和hgroup元素。
4.2HTML5分组元素figure元素用来定义一块独立内容，该内容如果被删除也不会对周围的内容有影响。它可以用来表示图片、图表、音频、视频，代码等。figcaption元素用于为figure元素组添加标题，figcaption只能作为figure元素的子元素，一个figure元素内最多允许使用一个figcaption元素，该元素应该放在figure元素的第一个或者最后一个子元素的位置。1、
figure元素和figcaption元素
4.2HTML5分组元素hgroup元素用于对网页或区段（section）的标题进行组合。它常与h1~h6元素组合使用。通常，将hgroup元素放在header元素中。612、hgroup元素
4.2HTML5分组元素62hgroup元素figure元素figcaption元素
4.2HTML5分组元素63HTML5里增加了页面交互元素，提高页面的交互体验。这一部分非常的重要，并且和JS控制的效果不同。本节将详细介绍这些元素。
4
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论