认识html
<!-- 根标签 -->
<html>
<!-- 页面头部 -->
<head>
<!-- 页面标题 -->
<title>这是我的第一个网页</title>
</head>
<!-- 页面主体 -->
<body>
页面的内容
</body>
</html>
页面的基本结构
<!-- 文档类型 html5 -->
<!DOCTYPE html>
<!-- 根标签 语言英语 -->
<!-- 标签的属性，写在开始标签内， 属性名="属性值" -->
<html lang="en">
<!-- 页面头部 -->
<head>
<!-- 字符集 -->
<meta charset="utf-8">
<!-- 兼容IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 监听页面视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 页面标题 -->
<title>Document</title>
</head>
<body>
页面内容
</body>
</html>
常用标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 正常文本 -->
<!-- 标题标签 h1 - h6 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 段落标签 -->
<p>段落标签，第一段</p>
<p>第二段</p>
<!-- 水平线标签 单标签 -->
<hr>
<!-- 换行标签 br 单标签 -->
<p>今天农历进六月了，<br>天气越来越热了</p>
<!-- div标签 又称干净的块标记-->
<div>div标签1</div>
<div>div标签2</div>
<!-- span标签 又称感觉的行内标记 -->
<span>span标签1</span>
<span>span标签2</span>
<!-- 正常文本 -->
<!-- 文本格式化标签 -->
<!-- 字体加粗 b strong-->
<b>字体加粗</b>
<strong>字体加粗</strong>
<!-- 字体倾斜 i em-->
<i>字体倾斜</i>
<em>字体倾斜</em>
<!-- 字体下划线 u ins-->
<u>字体下划线</u>
<ins>字体下划线</ins>
<!-- 字体删除线 s del-->
<s>字体删除线</s>
<del>字体删除线</del>
<!-- 标签的语义化，就是指标签的含义，合适的地方给一个最为合理的标签。 -->
<!-- 1. 方便代码的阅读和维护
2. 同时让浏览器可以很好地解析，从而更好分析其中的内容
3. 使用语义化标签会具有更好地搜索引擎优化。 -->
<!-- 特殊字符 -->
<!-- 空格 -->
<!-- 半角空格： -->
<!-- 全角空格：  -->
<!-- 小于号：< less than -->
<!-- 大于号：> great than -->
<!-- 版权符：© -->
<p>长风破浪会有时， 直挂云帆济沧海</p>
<p>  长风破浪会有时，直挂云帆济沧海</p>
<p>小明身高<小张身高>小刘身高 </p>
©
<!-- 图片标签 -->
<!-- src 图片路径
1.网络链接（电脑有网）
2.绝对路径(相对于电脑磁盘的位置，发给别人之后，图片位置不同导致图片消失，避免使用绝对路径)
3.相对路径 同级./ 下级/ 上级../ (找对当前文件和目标文件之间的关系)
-->
<!-- alt 当图片丢失时的提示信息 -->
<!-- width 图片的宽 -->
<!-- height 图片的高 -->
<!-- title 鼠标悬停在图片上的提示信息 -->
网络链接 <br>
<!-- <img src="https://up.enterdesk.com/edpic_source/31/8c/55/318c5586cf3a7a757684d9567fdbee66.jpg" alt="" width="200"
title="圣诞小鳄鱼"> -->
绝对路径 <br>
<!-- <img src="C:\Users\Administrator\Desktop\大佬是怎样养成的\01-HTML\01-html\课堂代码\images\ey.jpg" alt=""> -->
相对路径 <br>
<img src="./images/ey.jpg" alt="圣诞小鳄鱼" width="200" height="400" title="点击查看大图"> 相对路径2 <br>
<!-- <img src="../作业/images/ey.jpg" alt=""> -->
<!-- 图片格式 .jpg .jpeg 普通图片 .webp 网络下载图片 .gif 动图 .png 透明图片 -->
<!-- 链接标签 -->
<!-- href 跳转页面的路径(注意和 src 区别) -->
<!-- target 控制页面跳转方式 _self 在本标签页跳转 _blank 在新标签页跳转 -->
<a href="https://www.baidu.com">百度一下，你就知道</a>
<a href="./12-图片标签.html" target="_blank">跳转到图片标签</a>
<!-- 图片链接 -->
<a href="https://www.qq.com"><img src="./images/ey.jpg" alt="" width="200"></a>
<!-- 点击查看大图场景 -->
<a href="./images/ey.jpg"><img src="./images/ey.jpg" alt="" width="200" title="点击查看大图"></a>
<!-- 锚点链接 -->
<!-- 锚点定位 1.给目标点设置id（设置锚点） 2.给对应的链接标签填写相应的id值(#id) -->
<!-- 锚点定位(在当前页面进行跳转) 和 页面跳转(两个页面之间进行跳转) 做区分 -->
</body>
</html>
icon图标及网页相关信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度一下，你就知道</title>
<!-- icon图标的引入 -->
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<!-- 网页关键词 -->
<meta name="keywords" content="模仿百度">
<!-- 网站描述 -->
<meta name="description" content="这是练习的网站，并非真正的百度">
</head>
<body>
<!-- 这是一个图片标签 -->
<img src="" alt="">
</body>
</html>
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
