HTML5

一.HTML简介

Hyper Text Markup Language(超文本标记语言)
超文本包括:文字、图片、音频、视频、动画等

二.HTML发展史

1993-6发布超文本标记语言
.......................
2000-1-26发布XHTML1.0
.......................
2013-5-6发布HTML5

三.HTML5优势

1.世界知名浏览器厂商对HTML5的支持
2.市场的需求
3.跨平台
四.W3C
World Wide Web Consortium(万维网联盟)
成立于1994年,Web技术领域最权威和具影响力的国际中立性技术标准机构
http://www.w3.org/
http://www.chinaw3c.org/

W3C标准包括
结构化标准语言(XHTML 、XML)
表现标准语言(CSS)
行为标准(DOM、ECMAScript )

五.网页基本结构

<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
我的第一个网页
</body>
</html>

六.网页元素的构成
<!DOCTYPE html> 代表声明当前文件为HTML文件
title 代表网页头部显示的文本信息
<meta charset="UTF-8" /> 指定字符编码:常用的有GB2312:中文简体编码 Big5:繁体中文 ISO-885901:纯英文编码 UTF-8:国际通用编码
推荐使用UTF-8,如果不指定默认为ISO-885901

七.网页基本标签
1.标题标签 <h1></h1>.....<h6></h6> 其中h1最大,h6最小
2.段落标签 <p></p> 段落文字前后换行
3.换行标签 <br/> 自闭合
4.水平线标签 <hr/>
5.加粗 <strong></strong>
6.斜体 <em></em>
7.特殊符号
7.1 空格 &nbsp;
7.2 小于号 &lt;
7.3 大于号 &gt;
7.4 双引号 &quot;
7.5 版权符号 &copy;
8.图像标签
<img src="图像路径" alt="图像显示不出来显示的文字" title="鼠标悬浮到图像展示的文字" width="宽度px" height="高度px"/>

9.超链接
普通超链接<a href="指定链接地址">点击</a>
功能性连接:<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>
锚链接:点击文字跳转指定位置<a href="#a1">跳转锚链接a1位置</a> <a name="a1">a1</a>

 

 

<!DOCTYPE html> <!--DOCTYPE代表声明当前文件为HTML文件-->
<html>
<head lang="en"> <!-- lang="en" 代表当前页面是英文的-->
<meta charset="UTF-8"> <!-- meta 便于浏览器解析 GB2312:中文简体编码 Big5:繁体中文 ISO-885901:纯英文编码 UTF-8:国际通用编码-->
<title>WebStorm创建的第一个HTML文件</title>
</head>
<body>
<!--标题标签:h1-h6-->
<h1>日期</h1>
<h2>日期</h2>
<h6>日期</h6>
<!--段落标签-->
2018年10月25日
<p>2018年10月25日11:03:34</p>
<!--换行标签-->
2018年10月25日11:05:52<br/>

2018年10月25日11:06:29
<!--水平线标签-->
<hr/>
<!--加粗和斜体-->
加粗字体
<strong>加粗字体</strong>
<em>斜体字体</em>
<strong><em>加粗斜体</em></strong>

<hr/>
<!--特殊符号-->
王洪涛&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;没有脑细胞<br/>

a&lt;b<br/>

c&gt;a<br/>

&quot;abc&quot;<br/>

&copy;S1304版权所有
<hr/>

<!--图像标签-->
<img src="../image/TIM图片20171102111331.png" alt="图像损坏" title="悬浮展示文字" width="100px" height="100px"/>
<hr/>
<!--超链接-->
<a href="SecondHtml.html" target="_blank"><img src="../image/TIM图片20171102111331.png" alt="图像损坏" title="悬浮展示文字" width="100px" height="100px"/></a>

<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>

<a href="#a1">跳转锚链接a1位置</a>
<a href="SecondHtml.html/#second">B页面位置</a>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<a name="a1">a1</a>

</body>
</html>

 

 

 

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
通过点击a标签跳转过来的页面
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<a name="second">Second锚链接定位</a>
</body>
</html>


 

转载于:https://www.cnblogs.com/wws553/p/9850023.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值