Web学习笔记之html基础操作_常用标签（二）_2020_03_24
接着上一篇博客继续完成常用标签学习
本节，将介绍学习：
4、盒子标签
5、图片标签
6、超链接标签
7、列表标签
二、常用标签
4、盒子标签简单了解
Html布局历史：
.
现在学习的内容是将内容放到页面上，之后的学习一定要涉及到页面布局，就是把今天学习到的标签如何放到页面合适的位置，这样技术就是布局。
.
在最初html流行表格布局类似于现在的简历模板，将整个页面看成一共表格，然后进行表格的合并，最后形成网页布局。
后来随着网络的发展，表达的形式越来越复杂，表格布局有写苍白，就有了新的布局方式，盒子布局，将整个页面看作一个盒子，在里面嵌套小盒子，通过描述盒子的位置，边框，边距进行布局。
5、图片标签
Image 图片，镜像，html当中的图片标签采用的是image的缩写 img 和上面的标签相比
我们在图片标签就要接触到标签的属性了。
src 图片地址
可以使用绝对路径
Windows下以盘符开头 D:\\
Linux下以根开头 /usr/root/
也可以使用相对路径
指的是以当前文件为参照，其他文件的位置
./当前路径 默认可以不写
../代表上一层
/ 项目的根目录
编写一个简单的图片获取代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="img/3.jpg" title="测试图片" alt="图片找不到"> <!-- 图片标签image 单标签 -->
</body>
</html>
可以看到 当中src为获取图片路径，title当鼠标放置图片上面时候会出现提示"测试图片"，alt 图片不存在的时候温馨提示。
网页展示：
可以看到效果出来了！
那么对于图片而言，还能修改图片尺寸大小
<img src="img/3.jpg" title="测试图片" alt="图片找不到" wigth="50px">
<!--
height 图片高度
weight 图片宽度
1.单独设置图片的高度或者宽度，html会自动的对图片进行等比例缩放，图片不会发生变形
2.高度和宽度的设置单位通常是像素（px），但是也可以用百分比，但是需要借助样式
-->
6、超链接标签
我们单纯文本表述，就不需要有过多的属性，比如：span,h,p,br,hr .
如果是超文本就需要属性：图片需要地址，标题，错误提示，高宽
在HTML当中a标签是超链接标签，a标签是一共双标签 超链接也是超文本，所以a标签也是需要参数：
href：超链接的地址，链接到哪里
target: 代表打开链接的方式
基本案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- <a href="https://www.baidu.com/">点击领取宝刀屠龙</a>-->
<!--超链接地址↑--> <!--超链接内容↑-->
<a href="https://www.baidu.com/">
<img src="img/2.jpg" width="200px">
<p>点击领取屠龙宝刀</p>
</a>
</body>
</html>
网页效果：
锚点操作：
用于文章的跳转，浏览新闻之类
基本案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="top">测试内容学习</h1> <!--主标题-->
<h2>目录</h2> <!--目录标题-->
<p>
<a href="#history">1、研究历史</a>
<br>
<a href="#type">2、分类</a>
</p>
<h2 id="history">研究历史</h2> <!--次级标题-->
<p>
Web研究历史测试内容，Web研究历史测试内容，Web研究历史测试内容
</p>
<h2 id="type">分类</h2> <!--次级标题-->
<p>
分类
</p>
<p><a href="#top">回到顶部</a></p>
</body>
</html>
网页效果：
因为研究历史，和分类内容并没有打操作过多，可以增加内容用于更好的测试，点击目录栏的选项可以实现跳转，点击回到顶部可以达到预期效果：
7、列表标签
包含以下三种：
①有序标签 ol
②无序标签 ul
③自定义标签 dl→dt→dd
有序列表，之所以被称为有序列表，因为前面的标识是有顺序的序列，默认使用数字，也可以通过type属性进行跳转.
Type:
a 代表小写字母
i 代表小写罗马数字
A 代表大写字母
I 代表大写的罗马数字
1 代表数字 默认
无序列表也有type属性，这里的值不必死记。
disc 实心圆点
circle 空心圆点
square 实现方块
有序列表的前面的符号只有以上几种，不可以自定义，但是可以自定义前面标识的开始字符，需要用到start属性.
案例操作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
有序标签
<ol type="a" start="2">
<li>Python</li>
<li>PHP</li>
<li>Java</li>
</ol>
无序标签
<ul type="circle">
<li>Python</li>
<li>PHP</li>
<li>Java</li>
</ul>
自定义标签
<dl>
<dt>
python
</dt>
<dd>
123456
</dd>
<dd>
abcdefg
</dd>
<dt>
linux
</dt>
<dd>
123456
</dd>
</dl>
</body>
</html>
<!-- -->
网页效果：
在下一节将详细介绍表格标签以及表单标签