1.为什么要学习HTML?
- 制作精美的电商
- 门户等静态网页 制作网页中的各种交互
- 动画效果 制作网页游戏等
2.什么是HTML:
- HTML:超文本标记语言(Hyper Text Markup Language) HTML不是一种编程语言,而是一种标记语言,描述网页的语言 HTML使用标签描述网页中图片、文本、音乐、视频、超链接等
- HTML不是一种编程语言,而是一种标记语言,描述网页的语言
- HTML使用标签描述网页中图片、文本、音乐、视频、超链接等
3.开发环境及开发工具:
开发环境:windows、linux、Mac OSX
开发工具:Dreamweaver、Eclipse、FrontPage、WebStorm、HBuilder X、VSCode……
4.HTML基本标签:
4.1
HTML由<html <head> </hea <body> </body> <html>这三部分组成,网页代码的书写都是在<body> </body> 标签内完成
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
<h1>-<h6>标题标签字体依次减小,<h1>字体最大,<h6>字体最小
<hr>水平线标签
<p>…</p>段落标签
<br/>换行标签
<i>…</i>和<em>…</em>都是斜体标签
<strong>…</strong>加粗标签
<sup>…</sup>上标标签
<sub>…</sub>下标标签
-->
<h1>静夜思</h1>
<hr color=blue>
<p>床前明月光<br/>疑是地上霜</p>
<em>举头望明月</em>
<i>举头望明月</i><br />
<strong>低头思故乡</strong><br />
x<sup>2</sup>+y<sup>2</sup>=1<br />
H<sub>2</sub>SO<sub>4</sub>
</body>
</html>
运行结果:
4.2图像标签:
常见图片格式:jpg、gif、bmp、png,语法如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
src图片路径
alt替换文本
title鼠标放在图片上显示的文字
width 设置图片的宽度
-->
<img src="img/cat.jpg" id="cat" alt="这是一张可爱的喵咪图片" width="360" title="这是一张可爱的喵咪图片"/>
</body>
</html>
运行结果:
4.3超链接
4.3.1语法格式如下:
4.3.2超链接的应用:
1、页面间链接:A页到B页,网上常见链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<a href="https://www.bilibili.com" target="_blank">bilibili</a>
</body>
</html>
运行结果:
2、锚链接:跳至自身固定位置,或A页跳到B页固定位置,需锚标记
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>锚链接和功能性链接</title>
</head>
<body>
<!--
锚链接需要绑定超链接id的值,格式为#id的值
-->
<a href="#down">快速到达底部</a><br />
<!-- 如果要锚链接其它html文件,通过文件相对的路径加上#以及id的值 -->
<a href="03图像标签.html#cat" target="_blank">显示喵咪图片</a><br />
<!-- 这是功能性连接,会打开电脑上处理邮件的客户端-->
<a href="mailto:1319866945@qq.com">邮箱联系我们</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#" id="down">底部</a><br />
</body>
</html>
运行结果:
1.快速到达底部:
2.显示喵咪图片:
3、功能性链接:电子邮件、QQ、MSN等链接
5.注释和特殊符号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
今天的不开心到此为止 明天依然光芒万丈<br />
如果你的分数>80分,我就答应你一个愿望<br />
相反你的分数<80分,"周末在家你懂的嘿嘿"<br />
©2022-2066奕涵北城
</body>
</html>
运行结果:
6.W3C标准
World Wide Web Consortium,万维网联盟
规范: 标签名称,属性名称必须小写 标签必须严格嵌套,并且必须闭合,即使空元素标签也必须闭合,属性值必须用引号引起来,比如: