《HTML5+CSS3响应式Web开发》课件-2HTML5基础_第1页
《HTML5+CSS3响应式Web开发》课件-2HTML5基础_第2页
《HTML5+CSS3响应式Web开发》课件-2HTML5基础_第3页
《HTML5+CSS3响应式Web开发》课件-2HTML5基础_第4页
《HTML5+CSS3响应式Web开发》课件-2HTML5基础_第5页
已阅读5页,还剩29页未读 继续免费阅读

下载本文档

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

文档简介

了解HTML5简介掌握HTML5文档结构掌握HTML5的基本标签HTML5简介HTML5简介

代码被解析呈现效果什么是HTML5HTML5是Hyper

Text

Markup

Language5(超文本标签语言)的缩写,是最新的HTML标准。HTML5简介1993年HTML1.02014年HTML51995年HTML2.01996年HTML3.21999年HTML4.0.12001年XHTML1.11997年HTML4.02000年XHTML1.0HTML5的发展史HTML5简介HTML5的优势解决了跨浏览器的问题

新增多个新特性(语义化标签、多媒体标签、canvas元素、本地存储等)

HTML5简介HTML5的优势用户优先原则

化繁为简的优势

HTML5文档结构HTML5文档结构HTML5文档结构<!DOCTYPEhtml><html><headlang="en"><metacharset="utf-8"/><title>网页标题</title></head><body>

网页内容</body></html>HTML5文档结构<!DOCTYPE>文档类型声明<!doctypehtml><html>标签<html>标签也称为根标签,用于告知浏览器其自身是一个HTML文档。<html></html>是双标签HTML5文档中的DOCTYPE声明非常简单,代码如下:<head>标签HTML5文档结构<head>标签称为头部标签,用于定义HTML文档的头部信息。<title>用于定义HTML页面的标题,即给网页取一个名字,是双标签。<head>标签HTML5文档结构<head>标签称为头部标签,用于定义HTML文档的头部信息。<meta/>用于定义页面的,可重复出现在<head>标签中,是单标签。<head>标签HTML5文档结构<head>标签称为头部标签,用于定义HTML文档的头部信息。<link/>可引用外部文件,一个页面允许使用多个<link>标签引用多个外部文件,是单标签。<head>标签HTML5文档结构<head>标签称为头部标签,用于定义HTML文档的头部信息。<style>用于为HTML文档定义样式信息,是双标签。HTML5文档结构<body>标签<body>标签也称为主体标签,用于定义HTML文档所要显示的内容。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标签内。HTML5文档结构创建第一个HTML5页面<!DOCTYPEhtml><html><headlang="en"><metacharset="utf-8"/><title>我的第一个网页</title></head><body>

我们开始HTML5</body></html>运行结果HTML5基本标签HTML5基本标签文本控制标签标题标签HTML提供了6个等级的标题,即<h1>~<h6><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>运行结果HTML5基本标签文本控制标签段落标签<p></p><html> <head> <metacharset="utf-8"> <title></title> </head> <body> <p>这是第一段</p> <p>这是第二段</p> </body></html>运行结果HTML5基本标签文本控制标签换行标签<br/><body> <h1>换行标签</h1> <p>换行标签可以在任意一个

你想换行<br>的位置进行换行</p> <p>这是第二段</p></body>运行结果文本控制标签HTML5基本标签水平线标签<hr/><p>第一个水平线标签与段落标签在一行</p><hr/><p>第二个水平线标签另起一行</p><hr/><p>第三个水平线标签没有斜线</p><hr><p>效果是一样的!</p>运行结果文本控制标签HTML5基本标签文本格式化标签文本控制标签HTML5基本标签标签显示效果<strong></strong>文字以粗体方式显示<<em></em>文字以斜体方式显示<del></del>文字以加删除线方式显示<<ins></ins>文字以加下划线方式显示<small></small>定义小号字体,标签包含的文本比周围小一号,下限1号文本<big></big>定义大号字体,标签包含的文字比周围大一号,上限7号文本<sub></sub>定义下标文本,以当前文本流中字符高度一半显示,但是与文本流中字符字体字号一致<sup></sup>定义上标文本,以当前文本流中字符高度一半显示,但是与文本流中字符字体字号一致文本控制标签HTML5基本标签HTML5基本标签图像标签<imgsrc=“url”alt=“text”title=“text”width=“x”height=“y“border=”0”/>语法:图像地址图像的替代文字鼠标悬停提示文字图像宽度图像高度边框宽度HTML5基本标签图像标签示例:<imgsrc=“校徽.jpg”alt=“校徽”align=“left”height=“268”width=“267“title=”学校校徽”border=“0”>运行结果:HTML5基本标签超链接标签HTML5基本标签超链接标签语法:<ahref=“url"target="目标窗口位置">链接文本或图像</a>链接路径链接在哪个窗口打开常用值:_self、_blankHTML5基本标签超链接标签超链接的应用文字超链接:在文字上建立超链接;

图像超链接:在图像上建立超链接;

电子邮件超链接:使用超链接打开邮件,如:<ahref=“mailto:1234567@”></a>。

HTML5基本标签超链接标签超链接的应用空链接:以链接的形式显示,但无具体指向,如:<ahref=“#”></a>;

锚点链接:页面太长时使用,提高信息检索速度。第一步创建命名锚记,语法:<aname=”锚点名称”></a>第二步链接到命名锚记,语法:<ahref=”#锚点名称”>内容</a>

HTML5基本标签div和span标签div标签块容器标签可实现网页的规划和布局大多数HTML

温馨提示

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

评论

0/150

提交评论