文章目录
- 1、html简介
- 2、html注释
- 3、标签的属性
-
- 3.1 代码
- 3.2 测试结果
- 4、常用的标签
-
- 4.1 代码
- 4.2 测试结果
- 5、实体
-
- 5.1 代码
- 5.2 测试结果
- 6、图片引入
-
- 6.1 代码
- 6.2 测试结果
- 7、meta标签
-
- 7.1 代码
- 7.2 测试结果
- 8、内联框架
-
- 8.1 代码
- 8.2 测试结果
- 9、超链接
-
- 9.1、代码
- 9.2、测试结果
- 10、小节测试
-
- 10.1、代码
- 10.2 测试结果
1、html简介
2、html注释
<!-- 注释内容-->
举例：
<!DOCTYPE html>
<html>
<!-- head标签，标签中的内容不会直接显示在网页中，帮助浏览器解析页面 -->
<head>
<meta charset="urt-8">
<!-- 默认显示在浏览器的标题栏中，搜索引擎搜索时，会首先搜索title标签中的内容 -->
<title>标题</title>
</head>
<body>
<!-- 注释，注释中的内容不显示在页面中 -->
<h1>你好</h1>
</body>
</html>
3、标签的属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name=“value”。
3.1 代码
<!-- 属性：
可以通过属性来设置标签中的内容
写在开始标签中，属性名="属性值" -->
<h1>你好<font color="red" size="12px">，小明</font></h1>
3.2 测试结果
4、常用的标签
4.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用的标签</title>
</head>
<body>
<!-- 1、标题标签
一共有6级标签 显示效果h1最大，h6最小
六级标题中 h1最重要。仅次于标题title。搜索引擎搜索结束标题，立即查看h1
中的内容
-->
<h1>一级标题</h1>
<h2>一级标题</h1>
<h3>一级标题</h1>
<h4>一级标题</h1>
<h5>一级标题</h1>
<h6>一级标题</h1>
<!-- 2、段落标签：
内容中的一个自然段，独占一行
使用p标签 -->
<p>我是P标签 </p>
<p>我是p标签</p>
<!-- 3、换行标签 br 自结束标签 -->
<p>我要学前端，<br/>
我要走全栈。
</p>
<!-- 4、hr在页面中生成一个横线 -->
<hr>
</body>
</html>
4.2 测试结果
5、实体
5.1 代码
<!DOCTYPE html>
<htmL>
<head>
<meta charset="utf-8">
<title>实体</title>
</head>
<doby>
<!--
一些特殊字符是不能直接使用的,要使用转义字符串(实体)
浏览器自动解析实体,
实体的名字:
< <
> >
空格:
版权符号:© -->
<p>©我 要学习全栈哦</p>
<p>大于号:<</p>
<p>小于号:></p>
</doby>
</htmL>
5.2 测试结果
6、图片引入
<img src="图片地址" alt="图片不能显示展示的信息"/>
目录结构
6.1 代码
<!DOCTYPE html>
<htmL>
<head>
<meta charset="utf-8">
<title>图片</title>
</head>
<doby>
<!-- 使用img标签在一个网页中引入外部图片
img也是一个自结束标签
属性:
src:外部图片地址.相对路径,绝对路径
alt:外部图片不能显示,对图片的描述
不写alt属性,搜索引擎不会对img中的图片进行收录
width:图片宽度,px作为单位
height:图片高度,px作为单位
开发中一般使用自适应页面,不建议使用width和height
相对路径:
相对于当前资源所在目录的位置
../返回上一级目录,返回几级目录就写几个
图片的格式:
JPEG(JPG):支持图片颜色多,图片可以压缩,不支持透明.一般保存照片等颜色丰富的图片
GIF:支持的颜色少,只支持简单透明,支持动态图
PNG:支持颜色多,并且支持复杂的透明
图片使用原则:
效果不一致:使用效果好的
效果一致:使用小的
-->
<img src="image/car.jpg" alt="这是车" width="400px" height="300px">
</doby>
</htmL>
6.2 测试结果
7、meta标签
7.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>meta</title>
<!-- 使用meta可以设置网页的关键字 -->
<meta name='keywords' content="HTML5,JavaScript,Java">
<!-- 使用meta可以用来做请求的重定向 -->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com">
</head>
<body>
<h1>5秒后跳转页面</h1>
</body>
</html>
7.2 测试结果
经过5秒后自动跳转到百度首页
8、内联框架
8.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内联框架</title>
</head>
<body>
<!-- 使用内联框架可以引入一个外部的页面
属性:
src:指向一个外部页面的路径,可以用相对路径
width:宽度
height:高度
name:
在实际开发中不推荐使用,内联框架中的内容不被搜索引擎检索 -->
<h1>我是内敛框架哦,将dame2页面中的内容引入</h1>
<iframe src="dame2.html"></iframe>
</body>
</html>
8.2 测试结果
9、超链接
9.1、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<!-- 使用超链接可以从一个页面跳转到其他页面
a标签创建超链接
属性:
href:指向链接跳转的目标地址,相对路径和绝对路径都可以
target:指定打开的链接地址
_self:在当前页面打卡(默认值)
_blank:在新的窗口中打开链接
内敛框架的name属性值,链接将会在该页面中打开 -->
<a href="http://www.baidu.com">跳转到百度</a>
<a href="dame1.html" target="_blank">新页面打开</a>
<a href="dame1.html" target="jack">内联框架中打开</a>
<br><br>
<iframe src="dame2.html" name="jack" width="400px" height="300px"></iframe>
</body>
</html>
9.2、测试结果
10、小节测试
10.1、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单网页</title>
</head>
<body>
<!-- 跳转到id为bottom的元素所在的位置 -->
<center><a href="#bottom">底部</a></center>
<center><h1>我要打牢基础</h1></center>
<hr>
<center><h2>学习html</h2></center>
<center><font color="blue">
<p>郑某</p>
</font></center>
<center><p>好好学习，天天向上<br>好好学习，天天向上<br>好好学习，天天向上<br>好好学习，天天向上</p></center>
<center><img src="image/car.jpg" width="200px" height="180px"></center>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
<center>
友情链接：<a href="#">A网站</a> | <a href="#">B网站</a> | <a href="#">C网站</a><br>
<a href="#" id="bottom">顶部</a>
<!-- 发送电子邮件的超链接，点击链接，自动打开计算机中默认的邮件客户端 href:mailto:zyz@qq.com -->
<a href="mailto:zyz@qq.com">联系我们</a>
</center>
</body>
</html>
10.2 测试结果
