HTML01-05

HTML(Hyper Text Markup Language)-超文本标记语言

01-05

W3C标准包括（http://www.chinaw3c.org）

结构化标准语言（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/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
&gt;&nbsp;->&nbsp;大于符号
<br/>
&lt;&nbsp;->&nbsp;小于符号
<br/>
&copy;版权符号
<br/>
<!--
特殊符号记忆方式
& ；
-->

</body>
</html>

图像标签

常见的图像格式：JPG;GIF;PNG;BMP...

<!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>

posted on 2022-04-11 22:40 Cafune-Ding 阅读(33) 评论(0) 收藏举报