网页设计与制作基础（HTML5+CSS3）课件 第2章 HTML5基础_第1页
网页设计与制作基础（HTML5+CSS3）课件 第2章 HTML5基础_第2页
网页设计与制作基础（HTML5+CSS3）课件 第2章 HTML5基础_第3页
网页设计与制作基础（HTML5+CSS3）课件 第2章 HTML5基础_第4页
网页设计与制作基础（HTML5+CSS3）课件 第2章 HTML5基础_第5页
已阅读5页，还剩20页未读， 继续免费阅读

下载本文档

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

文档简介

第2章HTML5基础目录HTML文档基本组成01常用的HTML标签02HTML5新增元素032.1.html文档结构HTML标记：<html></html>，标明是一个HTML文档。首部标记：<head></head>，提供与网页相关的信息，比如网页标题等等。正文标记：<body></body>，里面包含文档主要内容，例如文本、图象、动画、超链接等。<head>标记<head>元素用于定义文档的头部，它是所有头部元素的容器。这些头部元素包含元信息、样式表定义及引用外部样式表、脚本语言定义等，具体主要包含以下几部分：title：定义文档标题，它的内容将在浏览器的标题栏出现。meta:可提供有关页面的元信息(meta-information)，比如针对搜索引擎和更新频度的描述和关键词。例如<matacharset=”utf-8”>声明此页面使用”utf-8”字符编码格式，支持中文显示。例如＜metaname=“viewport”content=“width=device-width,initial-scale=1,maximum-scale=1“＞声明页面宽度和设备宽度一致，缩放比例为1，保证了移动端的页面在不同的手机上以同样的大小来显示。<head>标记style:定义文档的样式，也可以用link链接外部样式表。例如标签<styletype="text/css"link="st1.css"></style>将样式表文件st1.css导入文档中。Script:定义脚本语言。既可以包含脚本语言，也可以通过src属性指向外部脚本。base:定义页面中的所有链接的基准URL。2.2HTML标签2.2.1HTML结构标记<html></html>:html文档标记<head></head>:html头部标记<body></body>:html主体部分标记2.2.1HTML内容标签<p></p>:段落标记。用于分段，段落之间有固定的间距。<span></span>:用来组合文档中的行内元素,以便通过样式来格式化它们。<br/>:换行标记，此标记为单标记。<hr/>:水平线标记，一般用于分隔内容。<table></table>:表格,包含行<tr>和列<td>。<h1></h1>:小标题标记。在html中，小标题样式除了h1，还有h2,h3,h4,h5,h6共6种小标题样式。<ahref=””></a>:超链接，表示对文字设置超链接，<ahref=“”>浙江师范大学</a>，<div></div>：层布局。<img/>：图片，例如<imgsrc=“img/p1.jpg”/><ul><li></li><ul>无序列表，用于将相关内容以条目的方式呈现，使内容看起来更加简洁明了。<ul><li>富强、民主、文明、和谐</li><li>自由、平等、公正、法治</li><li>爱国、敬业、诚信、友善</li></ul><ul><li>的列表默认为项目符号列表<ol><li></li></ol>有序列表，<ol><li>的列表默认为为数字列表，<ol><li>富强、民主、文明、和谐</li><li>自由、平等、公正、法治</li><li>爱国、敬业、诚信、友善</li></ol>

2.2.1HTML内容标签<form></form>：表单,主要包含以下元素：<input>元素，根据不同的type属性，<input>元素又可以分为：<inputtype="text">

定义供文本输入的单行输入字段；<inputtype="password">

定义密码字段；<inputtype="radio">定义单选按钮；<inputtype="checkbox">定义复选框；<inputtype="submit">

定义提交表单数据至表单处理程序的按钮；<inputtype="button”>

定义按钮；<select>元素（下拉列表）<selectname="pc"><optionvalue="联想">联想笔记本</option><optionvalue="惠普">惠普笔记本</option><optionvalue="神州">神州笔记本</option><optionvalue="方正">方正笔记本</option></select>2.2.1HTML内容标签2.2.2HTML字符格式标记<b></b>:标识强调文本，以加粗显示。<i></i>:标识引用文本，以斜体显示。<big></big>:标识放大文本，以放大效果显示。<small></small>:标识缩小文本，以缩小效果显示。<cite></cite>：标识引用文本，以引用效果显示。<blink></blink>:标识闪烁文本，以闪烁效果显示（IE不支持）。<sup></sup>:标识上标文本，以上标效果显示。<sub></sub>:标识下标文本，以下标效果显示。HTML5引入了多个新的语义元素用来更加细致地描述页面及文档结构。他们用于明确web页面的不同部分，<header>:为<article>元素定义文章“头部”信息。<nav>:“导航条”。<section>:分块。<article>:页面上独立、完整的一篇文章。<aside>:用于定义当前页面或当前文章的附属信息。<figcaption>:用于定义"图片区域"的标题。<figure>:可包含一个或多个<img>元素所代表的图片。<footer>:“脚注”部分。2.3HTML5语义元素使用语义元素设置个人博客语义元素应用例子2.4HTML5功能元素2.4.1hgroup元素hgroup元素用于将多个标题组成一个标题组，通常它与h1~h6元素使用。hgroup元素一般放在header元素中，要注意的是，<hgroup>标签只是对标题进行组合，而对标题的样式没有影响。2.4.2<video>视频以下HTML代码会显示一段嵌入网页的ogg、mp4或webm格式的视频：<videowidth="320"height="240"controls="controls">

<sourcesrc="m1.mp4"type="video/mp4"/>

<sourcesrc="m1.ogg"type="video/ogg"/>

<sourcesrc="m1.webm"type="video/webm"/></video><source>为媒介元素（比如<video>和<audio>）定义资源出处，允许用户设置可替换的视频文件供浏览器选择。也可以使用<embed>标签在HTML页面中嵌入多媒体元素。例如执行下面的代码将在页面上播放flash文件m1.swf。2.4.3audio音频<audio>标签定义声音，比如音乐或其他音频流。下面的代码实现播放一段音乐，如果浏览器不支持audio，则会提示“您的浏览器不支持audio标签”。<audiosrc="someaudio.wav">您的浏览器不支持audio标签。</audio>2.4.4embed元素embed元素用于插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等。例如：<embedsrc="run.wav"/>2.4.5mark元素mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素主要功能是在文本中高亮显示某些字符，以引起用户注意。例如下面的例子：<body><h3>优秀团队领导者的<mark>素质</mark></h3>

<p>一个优秀的团队领导者，必须具有<mark>过硬</mark>的技术与<mark>务实</mark>的专业精神。

</p>2.4.6<time>标记time标签定义公历的时间（24小时制）或日期，时间和时区偏移是可选的。time标签的属性有两个，pubdate和datetime，pubdate属性指示time标签中的日期/时间是文档的发布日期，datetime属性是规定日期/时间的。例如：<p>我们在每天早上<time>7:30</time>开始晨读。</p><p>我在<timedatetime="2025-01-01">元旦</time>有一天假期。</p>2.4.7dialog元素dialog元素用于定义对话窗或窗口，例如<dialogopen>对话窗口</dialog>。open属性用以控制元素的显示，如果不添加，元素不会显示。它会绝对定位于页面中，层级在其他元素之上，并且居中，其宽高也会根据内容自适应。例如下面的代码，显示的效果如图2-13所示：<dialogopen><h2>欢迎光临！</h2></dialog>2.4.8bdi元素bdi元素用于定义文本的方向，使其脱离其周围文本的方向设置。可用于阿拉伯语或希伯来语之类的语言,或者在浏览器动态插入某些文本而又不知道文本方向的情况下有用。2.4.9figcaption标签<figcapiton>标签定义figure元素的标题，"figcaption"元素应该被置于"figure"元素的第一个或最后一个子元素的位置。例如下面的html代码中，为图片zsd.jpg设置了标题。<figure>

<figcaption>浙师大秋日美景</figcaption>

<imgsrc="zsd.jpg"

width="350"height="234"/></figure>canvas元素用于在网页上绘制图形。canvas元素本身没有行为，只提供一块画布，但它会把绘图的API展现给客户端Javascript，由JavaScript将图形绘制在画布上。下面的代码定义了一个canvas元素。<canvasid="myCanvas"width="200"height="100"></canvas>2.4.10canvas画布接下来使用javascript来画图，其代码如下：<scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);</script>上面的例子中首先使用变量c来获得前面定义的画布对象，getContext("2d")对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。接下来设置画笔颜色为红色，fillRect(0,0,150,75)，是从左上角(0,0)开始，在画布上绘制150x75的矩形。如图2-15所示：2.4.10canvas画布<progress>标签定义运行中的进度（进程）,可以使用<progress>标签来显示javascript中耗费时间的函数的进度。<progress>表示任务完成的进度，背景为灰色，完成的部分填充为蓝色条（不同的浏览器显示效果不一样）。例如以下代码中，value值表示当前的进度为25，总的大小为100，

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

温馨提示

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

最新文档

评论

0/150

提交评论