HTML基础
开发工具的选择
前端的开发工具有很多，现在列举几个比较常见的
HbuilderX国内开发的一款软件，使用频率非常高，后期可以使用它开发uni-appVSCode全称叫Visual Studio Code,是微软出品的一个开发工具，简单好用，跨平台。这也是目前程序员使用得非常多的一个软件Sublime Text国外开发的一款软件，现在是第3个版本，要钱！Dream Weaver简称DW，这款软件是Adobe公司的，一般UI设计师用得比较多WebStorm软件，功能强大，操作也简单，要钱！
在我们目前这个班级的学习里面，我们前期使用HBuilderX进行开发，后期会转向VSCode
创建第一个项目
前端的项目依托于文件夹的形式存在，所以我们可以直接在电脑上面创建一个文件夹以后，然后将这个文件夹拖到我们的开发工具HbuilderX里面，这样开发工具就打开了这个项目
HTML到底是什么
HTML的全称叫超文本标记语言（Hyper Text Markup Language），是一种标识性的语言。它包括一系列标签．和HTML命令
在很早很早以前，网页还不叫HTML，那个时候网页的后缀名还叫htm。因为好个时候的网页还是使用所见即所得的开发工具来生成的网页，而不是使用代码来编辑出来的网页（没有使用编程语言）
html则是使用了某一种语言（language）去开发出来的网页
通俗一讲
htm是通过工具来生成的网页（不是通过代码来写的）；而html则是通过代码编写的网页（不是通过工具来生成的）
认识网页基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 这是注释 -->
<title>第一个网页</title>
</head>
<body>
</body>
</html>
当我们新建完一个网页以后就会看到上面的代码 ，上面的代码是自动生成的，它是一个网页的基本结构，再在我们就通过这个基本结构的代码来认识一下网页
-
<!DOCTYPE html>它是一个命令，这个地方用于声明当前的文档是一个HTML5的文档DOC:全称叫document，TYPE:类型的意思 -
<html></html>这一对标签是网页的根标签，可以把网页当成是一个人 -
<head></head>这一对标可以认为是网页的头部标签 -
<body></body>这一对标签可以认为是网页的身体部分 -
<title></title>网页的标题，也就相当于人的名子 -
<meta charset="utf-8">它是一个附加的信息，其实有很多属性，charset这个属性是用于设置当前网站的字符形式，而utf-8则代表的是中文。如果没有这行代码 ，网页的中文就会出现乱码 -
<!-- -->在网页里，这是HTML语言的注释，它不会显示在页面，是一个代码说明性的东西
通过对上面的代码分析，我们已经得到了网页的基本结构
认识网页的标签
通过上面的结构代码，我们已经知道网页是由HTML标签语言来构成的。我们也发现上面的标签代码有下面的几个特点
-
标签大多数都是成双成出现的，还有部分是单个出现的
那是因为网页当中的标签是分为两种类型的
graph TD A[标签] --> b(双标签) A-->c(单标签)那些的成双成对出现的标签就是双标签，如
<html></html或<title></title>。还有一些只有开始标签，没有结束标签的它们叫单标签，如<meta>双标签
<开始标签></结束标签>单标签
<开始标签 />现在的单标签后面的斜线
/已经可以省略掉了，所以单标签也可以写成如下格式<开始标签> -
标签可以添加属性。属性是写在开始标签里在的
属性就是对当前标签的一些描述信息，它的语法格式是
属性名="属性值"。如charset="utf-8" -
标签是可以进行嵌套的，在上面的代码里面，我们可以看到
<html>嵌套了<head>与<body>标签，而<head>标签的内部又嵌入了其它标签<标签1> <标签2></标签2> <标签3> <标签4></标签4> </标签3> </标签1>标签的嵌套也是成双成对的出现的，不能交叉的嵌套
标题标签
标题标签是网页当中最常见的标签，它一共有6个等级
<h1 align="center">一号标题</h1>
<h2 align="right">二号标题</h2>
<h3 align="left">三号标题</h3>
<h4>四号标题</h4>
<h5>五号标题</h5>
<h6>六号标题</h6>
总结：
- 标题标签是从h1~h6，数值越大，字体越小
align属性是用于设置标题在这里的水平排列，它常见的属性值有三个，分别是left/center/right
字体标签
字体标签可以设置网页里面的特殊文字，它采用font标签
<font face="华文行楷" color="red" size="7">那些年的那些事</font>
总结：
font标签是一个双标签，可以对文字的大小，颜色，以及样式做调整face属性用于设置字体的样式。在上面我们设置了华文行楷color属性用于设置字体的颜色。在上面的我们设置了red红色size属性用于设置字体的大小，它的值在1~7之间，1最小，7最大
段落标签
段落标签在网页里面说明了网页文字的段落
<p align="center">第三个段落</p>
<p align="right">第四个段落</p>
总结：
- 每一个段落标签都会重启新的一行，并且段落与段落之间上下会有缝隙
align属性用于设置段落的水平排列，这一点与标题标签相似，也有left/center/right三个属性值
特殊文字样式标签
文字加粗
城南以南不再南，<b>城北以北不再美</b>
<hr>
城中从此不在挤，<strong>心里从此再无你</strong>
字体加粗可以使用两个标签，分别是
<b>标签与<strong>标签
文字倾斜
城东以东不再空，<i>城西以西不再喜</i>
<hr>
床前明月光， <em>疑是地上霜</em>
<hr>
举着望明月，<cite>低头思故乡</cite>
文字倾斜可以使用3个标签，分别是
<i>与<em>和<cite>
文字下划线
东边日出西边雨，<u>道是无情却有情</u>
<hr>
春蚕到死丝方尽，<ins>蜡炬成灰泪始干</ins>
文字下划线可以使用2个标签，分别是
<u>和<ins>
文字删除线
<strike>原价：￥998元</strike> ，现价：98元
<hr>
<del>原价：￥998元</del>，现价：98元
可以使用
<strike>与<del>标签
上标文字与下标文字
我爱<sub>北京</sub>天安门，天安门上<sup>太阳升</sup>
<hr >
x<sup>2</sup>+y<sup>2</sup> =z<sup>2</sup>
<hr>
log<sub>2</sub>10=x
总结：
- 上角标使用
<sup>- 下角标使用
<sub>
特殊文本内容
| 名称 | 代码 |
|---|---|
| 版权标志 | © |
| 商标标志 | ® |
| 度数标志 | ° |
| 小于符号 | < |
| 大于符号 | > |
| 空格符号 | |
列表标签
列表标签有三种类型 ，分别是有序列表(ordered list)，无序列表(unordered list)以及自定义列表(data list)
无序列表
无序列表就是unordered list,在标签里面使用ul来表示
<ul type="disc">
<li>周玮夫</li>
<li>卢小奥</li>
<li>李昌盛</li>
</ul>
总结：
- 列表里面的每一项使用
li来表示，指的是list itemtype属性可以设置前面元素列表的符号，它个属性值有三个
disc实心圆circle空心圆square实心矩形
有序列表
有序列表就是ordered list，使用ol标签来表示
<ol type="1">
<li>张珊</li>
<li>李四</li>
<li>王五</li>
<li>赵丽颖</li>
<li>胡哥</li>
</ol>
总结
type属性也可以设置前面的符号，它的属性值如下
1则指定以数字为顺序A以大写字母为顺序a以小写字母为顺序I大写的罗马文为顺序i小写的罗马文为顺序
自定义列表
算定义列表也叫数据列表（data list），在HTML里面使用dl来表示
<!-- data list -->
<dl>
<!-- datalist title -->
<dt>男生</dt>
<dd>胡哥</dd>
<dd>彭于晏</dd>
<dd>何润东</dd>
<dt>女生</dt>
<dd>赵丽颖</dd>
<dd>宋轶</dd>
<dd>彭妈妈</dd>
</dl>
详细内容标签
<details>
<summary>这是新标签</summary>
<p>这是一个段落</p>
<font>这是一个字体标签</font>
<h2>这是一个标题标签</h2>
</details>
<hr>
<details>
<summary>男生</summary>
<ul>
<li>胡哥</li>
<li>春哥</li>
<li>发哥</li>
</ul>
</details>
| 展开前 | 展开后 |
|---|---|
 |  |
总结：
details标签多半都与summary标签结合在一起使用details标签下面可以嵌套任何标签，summary标签就是这个details标签的标题
链接标签
链接标签指网页当中的超链接，点击以后可以跳转到新的页面，使用a标签去完成
<!-- _self在当前窗体打开 -->
<a href="http://www.baidu.com" target="_self">百度一下</a>
<hr>
<!-- _blank在新的窗体里面去打开 -->
<a href="http://www.iqiyi.com" target="_blank">爱奇异</a>
总结：
href属性用于设置链接的地址target属性用于设置网页的打开方式，其实常见的属性值如下
_self在当前的窗体打开_blank在新的窗体打开
图片标签
<img src="img/022.jpg" width="200" height="150" alt="这是女生图片"
border="10" hspace="50" vspace="100" title="这是提示信息" />
总结：
- 在网页中插入图片我们使用
img标签src属性用于设置图片的地址width/height属性用于设置图片的大小border属性用于设置图片的边框hspace全称叫horizontal space，指水平的间距vspace全称叫vertical space，指垂直的间距title提示信息alt属性，当图片不能够正常显示的时候，就会显示alt里面的提示文字，如果图片能够正常显示，则不显示alt的内容（它相当于一个备胎属性）
我们现在可以将链接标签与图片标签进行结合，做成一个图片链接
<a href="http://www.baidu.com">
<img src="img/022.jpg" alt="图片">
</a>
map标签
这一个标签与img图片标签进行结合以后会产生很好的效果
<img src="img/022.jpg" border="10" usemap="#map1" width="500" height="350">
<map id="map1" name="map1">
<!--
shape形状，rect全称rectangle矩形，coords坐标
-->
<area shape="rect" coords="0,0,200,150" href="http://www.baidu.com">
<!--
circle的坐标是圆心与半径
-->
<area shape="circle" coords="300,300,50" href="http://www.iqiyi.com" target="_blank">
<area shape="poly" coords="250,0,500,350,0,350" href="http://www.youku.com" target="_blank">
</map>
总结：
img标签通过usemap属性与map标签进行结合，使用的是map的标签的id和name属性
map标签下面有area标签，它指区域
shape属性设置区域的形状，它的形状主要有下面三种
rect全称叫rectangle矩形circle圆形poly全称叫polygon多边形
coords属性根据形状设置坐标值
href属性与target属性则和a标签保持一致
iframe标签
iframe全称叫insert frame，它可以向一个网页里面嵌入另一个网页
<iframe src="https://www.baidu.com" width="100%" height="500" frameborder="0"></iframe>
链接标签与iframe标签的第一种结合方式
<a href="https://www.iqiyi.com" target="aaa">爱奇异视频</a>
<a href="http://www.softeem.xin:8090" target="aaa">标哥的博客</a>
<hr>
<iframe name="aaa" src="https://www.baidu.com" width="100%" height="500" frameborder="0"></iframe>
当a标签的target属性设置为iframe标签的name属性的时候，这个链接在打开的时候就会在这个iframe当中去打开
第二种结合方式
这一种结合方式是使用多个页面嵌套以后，iframe里面的页面在外部打开
01.html
<h1>第一个页面</h1>
<iframe src="02.html" frameborder="1" width="100%" height="400" ></iframe>
02.html
<h2>第二个页面,它是子页面</h2>
<a href="http://www.baidu.com" target="_parent">百度一下target=_parent</a>
<iframe src="03.html" frameborder="1" width="100%" height="200"></iframe>
target="_parent"在父级页面打开链接
03.html
<h3>第三个页面，子页面</h3>
<a href="http://www.iqiyi.com" target="_top">爱奇异</a>
target="_top"在最顶层打开链接
这就是我们的ifrmae标签与a的结合，通过这种结合方式，我们主要是扩展了target属性
_self在当前的窗口过iframe里面打开链接_blank在新的窗口打开链接frameName在某一个frame里面去打开链接_parent在父级的iframe或窗口里面去打开链接_top在最顶层的窗口里面去打开链接
进度条标签
<progress></progress>
<hr>
<progress max="100" value="70"></progress>
总结：
progress在没有设置value属性值的时候，它的进度块会左右滑动max属性设置最大值，value属性设置当前值
跑马灯
<marquee bgcolor="red" direction="left" width="1200" height="300"
behavior="scroll" scrollamount="3" scrolldelay="1">
<font size="7" color="white">众志成城，抗击疫情</font>
</marquee>
总结：
marquee标签是跑马灯效果的标签bgcolor设置背景颜色width/height设置宽度与高度direction设置方法，它的属性值有left/right/up/downbehavior设置行为，有scroll/slide/alternate三种scrollamount设置每次滚动的大小scrolldelay设置每次滚动的延时
表格标签
<table border="1" width="400" cellspacing="0" cellpadding="2">
<caption>
<h2>登记信息表</h2>
</caption>
<colgroup>
<col width="80" bgcolor="green">
<col width="220">
<col width="100">
</colgroup>
<thead>
<!-- table row -->
<tr bgcolor="pink">
<!-- table head -->
<th>姓名</th>
<th>性别</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<!-- table data -->
<td>张珊</td>
<td colspan="2">女,17</td>
</tr>
<tr>
<td>李四</td>
<td rowspan="2">男</td>
<td>29</td>
</tr>
<tr>
<td>王五</td>
<td>33</td>
</tr>
<tr height="100">
<td valign="top" align="right">赵六</td>
<td valign="middle" align="center">女</td>
<td valign="bottom">14</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
总结：
- 行的标签是
tr，全称叫table rowtd代表table data表格的数据th代表表格的头部,全称叫table headcaption标签是表格的标题thead/tbody/tfoot是表格的结构标签，如果不写，浏览器会自动生成tbodycolgroup列的设置标签col代表列border属性设置表格的边框cellspacing属性用于设置单元格的间距cellpadding属性设置单元格的内间距align用于设置水平排列，常见的属性值left/center/rightvalign用于垂直排列，常见的属性值有top/middle/bottomrowspan用于设置行的合并colspan用于设置列的合并width/height属性用于设置宽度与高度
评论区