HTML(Hyper Text Markup Language)-超文本标记语言
01-05
结构化标准语言(HTML,XML)
表现标准语言(CSS)
行为标准(DOM,EMAScript)
HTML基本结构
//<body>、</body>等成对的标签,分别叫开放标签和闭合标签,单独呈现的标签(空元素),如<hr/>;意为用/来关闭空元素
//HTML注释写法:<!--DOCTYPE:告诉浏览器我们使用什么规范 --> 快捷键ctrl+/
网页基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>琥珀色黄昏像糖在很美的远方</p>
<p>你的脸没有化妆我却疯狂爱上</p>
<p>思念跟影子在傍晚一起被拉长</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
琥珀色黄昏像糖在很美的远方<br/>
你的脸没有化妆我却疯狂爱上<br/>
思念跟影子在傍晚一起被拉长<br/>
<!--字体样式标签-->
<!--粗体,斜体-->
<h1>字体样式标签</h1>
粗体:<strong> I LOVE YOU </strong>
斜体:<em> I LOVE YOU </em>
<br/>
<!--注释和特殊符号-->
空 格:
<br/>
空 格
<br/>
> -> 大于符号
<br/>
< -> 小于符号
<br/>
©版权符号
<br/>
<!--
特殊符号记忆方式
& ;
-->
</body>
</html>
图像标签
常见的图像格式:JPG;GIF;PNG;BMP...
![text]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像学习标签</title>
</head>
<body>
<!--image学习
src:图片地址
相对地址,绝对地址
../ --上一级目录
alt: 图片名字必填
-->
<img src="../resource/image/1.jpg" alt="萨乐芬妮" title="悬停文字" width="400" height="300" >
</body>
</html>
链接标签
文本超链接
图像超链接
<!--使用name作为标记-->
<a name="top">顶部</a>
<!--a标签
href: 必填,表示要跳转到那个页面
target:表示窗口在哪里打开
_blank 在新标签中打开
_self 在自己的网页中打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面</a>
<a href="http://www.baidu.com">点击我跳转到百度</a>
<br/>
<a href="1.我的第一个网页.html">
<img src="../resource/image/1.jpg" alt="萨乐芬妮" title="悬停文字" width="400" height="300">
</a>
<br/>
<a href="1.我的第一个网页.html">
<img src="../resource/image/1.jpg" alt="萨乐芬妮" title="悬停文字" width="400" height="300">
</a>
<br/>
<a href="1.我的第一个网页.html">
<img src="../resource/image/1.jpg" alt="萨乐芬妮" title="悬停文字" width="400" height="300">
</a>
<br/>
<a href="1.我的第一个网页.html">
<img src="../resource/image/1.jpg" alt="萨乐芬妮" title="悬停文字" width="400" height="300">
</a>
<br/>
<a href="1.我的第一个网页.html">
<img src="../resource/image/1.jpg" alt="萨乐芬妮" title="悬停文字" width="400" height="300">
</a>
<br/>
<a href="1.我的第一个网页.html">
<img src="../resource/image/1.jpg" alt="萨乐芬妮" title="悬停文字" width="400" height="300">
</a>
<br/>
<a name="down">底部</a>
<!--锚标签
1.需要一个锚和标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>
<a href="#down">底部</a>
<!--功能性链接
邮件链接:mailto
QQ链接
-->
<a href="mailto:2681701217@qq.com">点击联系我</a>
<a href="_black" href="http://wpa.qq.com/msgrd?v=3&uin=2681701217&size=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:2681701217" alt="hello" title="hello">
</a>