学习目标：
掌握各种html常用标签
学习内容：
1.标题标签<h1></h1>
共有h1-h6六级标题，标题文字加黑字号加大一个标题占一行，1-6从重到轻字号变小。
代码：
<!DOCTYPE html>
<html lang='zh-cn'>
<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>标题标签</h1>
<h2>一共六级1-6</h2>
<h3>文字加粗占一行</h3>
<h4>1-6 大到小</h4>
<h5>重要重到轻</h5>
<h6>最后一个</h6>
--putong
</body>
</html>2.段落<p1></p1>标签、换行<br>标签
段落<p1></p1>标签使文本成段落出现。
换行<br>标签强制换行，是单标签。
代码：
<!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>沙丁鱼</h1>
<br>沙丁鱼（Sardine）是硬骨鱼纲鲱形目鲱科沙丁鱼属、小沙丁鱼属和拟沙丁鱼属及鲱科某些食用鱼类的统称。也指制成油浸鱼罐头的普通鲱（Clupea harengus）以及其它小型的鲱或鲱状鱼。</p>
<h4>体型</h4>
<p>沙丁鱼在香港被人们称沙甸鱼，又称萨丁鱼、鳁和鰯。小者长二寸，大者尺许，下颚较上颚略长，齿不显，背苍腹白，肉美，多用来制为罐头食品。
</p>
<h4>分布</h4>
<p>最初在意大利萨丁尼亚捕获而得名，古希腊文称其“sardonios”意即“来自萨丁尼亚岛”。分布于南北纬度6～20度的等温带海洋区域中。</p>
<h4>用作</h4>
<p>沙丁鱼主要用作食用，但鱼肉亦可制为动物饲料。沙丁鱼油的用途包括制造油漆、颜料和油毡，在欧洲还用来制造人造奶油。同时是世界重要的海洋经济鱼类。</p>
<h4>数量</h4>
<p>沙丁鱼为群居鱼类，聚集时，沙丁鱼的数量可达3亿只</p>
<p>作者：fs<br>
2021-7-16</p>
</body>
</html>3.文本格式化标签
用来格式化文本，即对文本进行加粗、倾斜等。
| 标签 | 语义 | 说明 |
| <strong></strong>与<b></b> | 加粗 | 推荐使用前者标签，语义更强烈 |
| <em></em>与<i></i> | 倾斜 | 同上 |
| <del></del>与<s></s> | 删除线 | 同上 |
| <ins></ins>与<u></u> | 下划线 | 同上 |
代码：
<!DOCTYPE html>
<html lang="zh-cn">
<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>
我是<strong>strong加粗</strong>的文字啊<br>
我是<b>b加粗</b>的文字啊<br>
我是<em>em倾斜的</em>文字<br>
我是<i>i倾斜的</i>文字<br>
我是<del>del删除线</del><br>
我是<s>s删除线</s><br>
我是<ins>ins下划线</ins><br>
我是<u>u下划线</u><br>
</body>
</html>4.<div>和<span>标签
<div>和<span>是没有语义的，他们像盒子，用来装饰内容
div 为 division 的缩写，表示分割分区。span 意为跨度、跨距。
特点：
1.<div>标签用来布局，但是现在一行只能放一个<div>。大盒子
2.<span>标签用来布局，一行上可以多个<span>。小盒子
代码：
<!DOCTYPE html>
<html lang="zh-cn">
<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>
<div>我是一个div标签，单独占一行</div>
<div>我是一个div标签，单独占一行</div>
<span>百度</span>
<span>新浪</span>
<span>搜孤</span>
</body>
</html>5.图像<img>标签
标签属性如下
| 属性 | 属性值 | 说明 |
| src | 图片路径 | 必须属性 |
| alt | 文本 | 图像不能显示的替换文本，如：无法显示图片 |
| title | 文本 | 提示文本，鼠标在图像上时显示的文字 |
| width | 像素px | 设置图像宽度 |
| height | px | 设置高度 |
| border | px | 边框粗细 |
<!DOCTYPE html>
<html lang="zh-cn">
<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>
<h4>图像标签的使用：</h4>
<img src="我不管.jpg">
<h4>alt无法显示时的替换：</h4>
<img src="我不d.jpg" alt="无法显示">
<h4>title提示文本：</h4>
<img src="我不管.jpg" alt="无法显示" title="我不管！！">
<h4>wigth宽、height高：</h4>
<img src="我不管.jpg" alt="无法显示" title="我不管！！"
width="250" height="400" >
<h4>只设置weith或height图片等比例缩放</h4>
<img src="我不管.jpg" alt="无法显示" title="我不管！！"
width="250" >
<img src="我不管.jpg" alt="无法显示" title="我不管！！"
height="300" >
<h4>border设定边框粗细//一般CSS设定：</h4>
<img src="我不管.jpg" alt="无法显示" title="我不管！！"
width="250" border="15px" >
<h4>下一级路径：</h4>
<img src="images/我不管.jpg" alt="">
<h4>上一级：</h4>
<img src="../我不管.jpg" alt="">
<h4>本地绝对路径：</h4>
<img src="C:\Users\86134\Desktop\java实训\HTML5\2\images\我不管.jpg" alt="">
<h4>网上绝对路径：</h4>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="无法显示" title="百度图片">
</body>
</html>注意：
1. 标签<img src=" " alt=" " >必须写的属性是 src 为图片的路径以及文件名带（拓展名）。
2.width 与 height 一般不同时设置，可能会改变原本比例，只设置其中一个可以等比例缩放。
3. 一般不在这里使用 border 属性，后续在CSS设置边框等。
4. 注意本地图片与网上图片、相对路径和绝对路径。
6.超链接
1.认识链接标签：
超链接在网页和网站中很重要，网页的跳转、网页内部的移动都离不开它。
标签 <a href=" " target=" " >这里写要点击的东西如百度</a>
a 为单词 anchor 的缩写，意为锚 。
href 属性为网页地址，外部的写网址，内部的即本地的写路径（注意绝对路径与相对路径类似图片路径）。
target 属性为打开此网页的方式，不设置 target 则默认为不打开新的窗口即："_self" ,在新窗口中打开设置为 "_blank" 。
2.链接分类：
1. 外部链接:例如< a href= http://www.baidu.com">百度</a>.
2. 内部链接:网站内部页面之间的相互链接直接链接内部页面名称即可,例如< a href=*indexhtml">首页</8>.
3. 空链接:如果当时没有确定链接目标时, <ahref="#">首页</a> .
4. 下载链接:如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
5. 网页元素链接:在网页中的各种网页元素,如文本.图像，表格、音频、视频等都可以添加超链接.
6.锚点链接：在标题标签或段落标签设置 id 属性，如<p1 id="1"></p1>、<h4 id="1"></h4>后，把链接 href 属性设为"#1"再点击链接即跳到本页面相对位置，方便查阅。
代码：
<!DOCTYPE html>
<html lang="zh-cn">
<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>
<p id="0">
1.<a href="#1">外部链接</a><br>
2.<a href="#2">弹窗方式</a><br>
3.<a href="#3">内部链接</a><br>
4. <a href="#4">空连接</a><br>
5. <a href="#5">下载链接</a><br>
6. <a href="#6">元素链接</a><br>
7. <a href="#7">锚点链接</a><br>
</p>
<h4 id="1" >1.外部链接，默认打开方式为当前窗口_self：</h4>
<a href="http://www.baidu.com">百度</a>
<h4 id="2">2.新窗口打开方式target：</h4>
<a href="http://www.itcast.cn" target="_blank">传智播客</a>
<h4 id="3" >3.内部链接</h4>
<a href="jianjie.html">公司简介</a>
<h4 id="4">4.空链接</h4>
<a href="#">公司简介</a>
<h4 id="5">5.下载链接：链接的是文件或压缩包</h4>
<a href="我不管.rar">下载文件</a>
<a href="#0">返回顶部</a>
<h4 id="6">6.网页元素链接</h4>
<a href="http://www.baidu.com"><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" title="百度！"></a><br>
<a href="http://www.baidu.com"><img src="我不管.jpg" alt="无法显示"width='100' title="百度"></a>
<h4 id=7>7.锚点链接</h4>
<p><strong><ins>哈哈哈小傻牛</ins></strong></p>
<a href="#0">返回顶部</a><br>
哈<br>
哈<br>
哈<br>
哈<br>
哈<br>
哈<br>
哈<br>
哈<br>
哈<br>
哈<br>
哈<br>
哈<br>
哈<br>
哈<br>
</body>
</html>
学习时间：
2021/7/16
学习产出:
1.csnd博客一篇
2.html教学视频P13-P26
ps：
每天一个小技巧：使用Google浏览器时想要在新窗口中打开可以单击鼠标中键，没错点就是滚轮
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
