HTML
什么是HTML
Hyper Text Markup Language(超文本标记语言)
HTML5的优势
- 世界知名浏览器厂商对HTML5的支持
- 微软
- 苹果
- Opera
- Mozilla
- 市场需求
- 跨平台
W3C标准
- W3C
- World Wide Web Consortium(万维网联盟)
- 成立于1994年,Web技术领域最权威和最具影响力的国际中立性技术标准机构
- http://www.w3.org/
- http://www.chinaw3c.org/
- W3c标准包括
- 结构化标准语言(HTML、XML)
- 表现标准语言(CSS)
- 行为标准(DOM、ECMAScript)
一个网页
<!-- DOCTYPE:告诉浏览器使用的规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部-->
<head>
<!-- meta描述性标签,他用来描述网站的一些信息-->
<!-- meta一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="关键字">
<meta name="description" content="内容描述">
<!-- title网页标题-->
<title>一个网页</title>
</head>
<!-- body标签代表网页主体-->
<body>
</body>
</html>
标签
基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!-- 标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>阿珍爱上了阿强</h5>
<!-- 段落标签-->
<p>阿珍爱上了阿强</p>
<p>在一个有星星的夜晚</p>
<p>飞机从头顶飞过</p>
<p>流星也划破那夜空</p>
<p>虽然说人生并没有什么意义</p>
<p>但是爱情确实让生活更加美丽</p>
<p>阿珍爱上了阿强</p>
<p>在一个有星星的夜晚</p>
<p>飞机从头顶飞过</p>
<p>流星也划破那夜空</p>
<p>虽然说人生并没有什么意义</p>
<p>但是爱情确实让生活更加美丽</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
阿珍爱上了阿强 <br/>
在一个有星星的夜晚 <br/>
飞机从头顶飞过<br/>
流星也划破那夜空<br/>
虽然说人生并没有什么意义<br/>
但是爱情确实让生活更加美丽<br/>
阿珍爱上了阿强<br/>
在一个有星星的夜晚<br/>
飞机从头顶飞过<br/>
流星也划破那夜空<br/>
虽然说人生并没有什么意义<br/>
但是爱情确实让生活更加美丽<br/>
<!--粗体,斜体-->
<h1>字体样式标签</h1>
<strong>粗体</strong>
<br/>
<em>斜体</em>
<br/>
<!--特殊符号-->
空 格:一 二 三
<br/>
>大于号
<br/>
<小于号
<br/>
©版权符号
</body>
</html>
图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--img学习
src:图片地址
相对地址(推荐使用),绝对地址
../ 返回上一级目录
alt: 当图片加载失败时 显示alt的值
title: 悬停时,显示title的值
-->
<img src="../resource/image/tx.jpg" alt="图片标签" title="美女" >
<a href="链接标签.html#down" target="_blank">跳转</a>
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!--a标签
href:必填,表示要跳转到的网页
target: 表示窗口在哪里打开
_blank : 在新页面中打开
_self : 在自己的网页中打开
-->
<h1 id="top">顶部</h1>
<a href="一个网页.html" >点击跳转到第一个网页</a>
<br/>
<a href="基本标签.html" target="_self">点击跳转到基本标签网页</a>
<br/>
<a href="http://www.baidu.com">点击跳转到百度</a>
<br/>
<!--功能性标签
邮件链接:mailto:
QQ链接
-->
<a href="mailto:934947443@qq.com">点击联系我</a>
<br/>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="你好" title="你好"/>
</a>
<br>
<a href="图像标签.html" target="_blank"> <img src="../resource/image/tx.jpg" alt="图片"></a>
<br/>
<a href="图像标签.html" target="_blank"> <img src="../resource/image/tx.jpg" alt="图片"></a>
<br/>
<a href="图像标签.html" target="_blank"> <img src="../resource/image/tx.jpg" alt="图片"></a>
<br/>
<a href="图像标签.html" target="_blank"> <img src="../resource/image/tx.jpg" alt="图片"></a>
<br/>
<a href="图像标签.html" target="_blank"> <img src="../resource/image/tx.jpg" alt="图片"></a>
<br/>
<!--锚链接
1.需要一个锚标记
2.跳转到标记点 #
-->
<a href="#top" name="down">回到顶部</a>
</body>
</html>