一,细说 HTML5 之 HTML5 基础讲解

10 篇文章 0 订阅

这是一个HTML5系列,主要是零基础的宝宝们快速认识与学习HTML5.

了解 HTML

1.什么是 HTML

  1. HTML 是用来描述网页的一种语言。
  2. HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  3. HTML 不是一种编程语言,而是一种标记语言 (markup language)

注:标记语言是一套标记标签 (markup tag),HTML 使用标记标签来描述网页

2. HTML版本

版本年份
HTML1991
HTML +1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML 52012
XHTML 52013
HTML5 相关知识

1.学好 HTML5 要学好一下知识(路线图)

  1. HTML
  2. XHTML
  3. CSS
  4. CSS3
  5. JavaScript
  6. JQuery
  7. HTML5
HTML5的新特性

1.HTML5 新特性

  1. 用于绘画的 canvas 标签
  2. 用于媒介回放的 video 和 audio 元素
  3. 对于本地离线储存的更好支持
  4. 新的特殊内容元素(如:article、footer、header、nav、section)
  5. 新的表单控件(如:calendar、date、time、email、url、search)
  6. 浏览器的支持(如:Chrome、Firefox、Safari、Opera、IE9)
HTML基础讲解

1.声明:

由于 HTML 有多个不同的版本,只有完全明确使用的是哪个版本,浏览器才会显示出 HTML 页面。这就是的用处。

  1. DOCTYPE 声明了文档类型
  2. 声明有助于浏览器中正确显示网页
//HTML5:不基于 SGML,所以不需要引用 DTD。
<!DOCTYPE html>

//HTML4.01:<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

//XHTML1.0:<!DOCTYPE> 声明引用 DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.HTML 基础标签

head、body、title

<!DOCTYPE html>
<html>
<head>
<title>这里是文档标题</title>
</head>
<body>
这里是文档内容......
</body>
</html>

3.HTML 标题

<h1>...<h6>等标签进行定义
<h1> 定义最大的标题。<h6> 定义最小的标题。

<!DOCTYPE html>
<html>
<head>
<title>这里是文档标题</title>
</head>
<body>
<h1>标题 h1</h1>
<h2>标题 h2</h2>
<h3>标题 h3</h3>
<h4>标题 h4</h4>
<h5>标题 h5</h5>
<h6>标题 h6</h6>
</body>
</html>

效果:

这里写图片描述

4.HTML 段落

<p> 标签定义段落

<!DOCTYPE html>
<html>
<head>
<title>这里是文档标题</title>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>

效果:

这里写图片描述

5.HTML 链接

<a> 标签定义链接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这里是文档标题</title>
</head>
<body>
<a href="">我是一个链接。呵呵!</a>
</body>
</html>

效果:

这里写图片描述

6.HTML 图像

<img> 标签定义图像

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这里是文档标题</title>
</head>
<body>
<h3 href="">随便找了一张。呵呵!(大家可以留言猜猜分别是什么职业。。)</h3>
<img src="1.jpg"/>
</body>
</html>

效果:

这里写图片描述

HTML5的元素、属性和格式化

1.HTML5的元素

HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

开始标签元素内容结束标签
<p>This is a web page</p>
<a href="#" >This is a link</a>
<br />

HTML 元素语法

  1. HTML 元素以开始标签起始
  2. HTML 元素以结束标签终止
  3. 元素的内容是开始标签与结束标签之间的内容
  4. 某些 HTML 元素具有空内容(empty content)
  5. 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  6. 大多数 HTML 元素可拥有属性

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
HTML 文档由嵌套的 HTML 元素构成。

1.HTML5的属性

HTML 标签可以拥有属性。

  1. 属性总是以名称/值对的形式出现,比如:name=”value”。
  2. 属性总是在 HTML 元素的开始标签中规定。

常用属性:

  1. <h1>:align 对齐方式
  2. <body>:bgcolor 背景颜色
  3. <a>:target 规定在何处打开链接

通用属性:

属性 值 描述
class :规定元素的类名
id:规定元素的唯一 ID
style:规定元素的行内样式
title:规定元素的额外信息

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>例5</title>
</head>
<body bgcolor="#CCCC99">
<a href="http://blog.csdn.net/wenteryan">我的博客</a>
<h1 align="center">有事者,事竟成;破釜沉舟,百二秦关终归楚;苦心人,天不负;卧薪尝胆,三千越甲可吞吴。</h1>
</body>
</html>

这里写图片描述

1.HTML5的格式化

HTML 可定义很多供格式化输出的元素,比如粗体和斜体字。

标签描述
<b>定义粗体文本。
<big>定义大号字。
<em>定义加重语气。
<i>定义斜体字。
<small>定义小号字。
<strong>定义加重语气。
<sub>定义下标字。
<sup>定义上标字。
<ins>定义插入字。
<del>定义删除字。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>例5</title>
</head>
<body bgcolor="#CCCC99">
<h1>文本格式化标签</h1>
<b> 定义粗体文本。</b>
<big> 定义大号字。</big>
<em>  定义着重文字。</em>
<i> 定义斜体字。</i>
<small> 定义小号字。</small>
<strong>  定义加重语气。</strong>
<sub> 定义下标字。</sub>
<sup> 定义上标字。</sup>
<ins> 定义插入字。</ins>
<del> 定义删除字。</del>
</body>
</html>

效果:

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值