李南江的前端课程知识点（三）HTML标签的学习

head标签

HTML 头部元素包含关于文档的概要信息，也被称为元信息（meta-information）。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

H标签、P标签、Hr标签

H系列标签一共有6个，用来表示标题语义。从h1到h6。独占一行，超过6就无效。
注意：在企业开发中，一定要慎用H系列的标签，特别是H1标签，在企业开发中一般情况下一个界面中只能出现一个H1标签（和SEO有关）。
P标签：段落。独占一行。
Hr标签：在浏览器中显示一条分割线、横线。独占一行。

一个程序员应该尽可能多的使用快捷键，少使用鼠标进行操作

如何在webstorm中同时给多个标签写入内容，即让光标同时选择很多行：
按住alt，点击鼠标左键，往下拉，然后输入内容即可。

如何在webstorm中快速的复制光标所在的行快捷键：Ctrl +d。
如何在webStorm中快速的删除光标所在的行快捷键：Ctrl+x。
给一段内容添加标签快捷键：Ctrl+Alt+t，然后按enter进行编辑标签。
在设置中的常规中可以设置webStorm的自动换行。
注释快捷键：Ctrl+/

HTML注释


方便程序员之间的沟通。

img标签

属性：width、height、src、title、alt
height（高度）与width（宽度）属性用于设置图像的高度与宽度。属性值默认单位为像素。
只指定宽高的其中一个，照片就会自动进行整体的缩放，等比的进行缩放。同时设置宽高会让图片变形。
title：当鼠标悬停在图片上显示的内容。
alt：当图片无法加载的时候显示的内容。
img标签不会独占一行。

br标签

在HTML换行，一个br就代表换一个行。
多个br标签可以连续使用，使用了多少个br标签就会换多少行。
注意：由于HTML的作用就是用来给文本添加语义，而br标签的语义是不另起个段落换行，而在企业开发中一般情况下需要换行都是因为需要另起一个段落，所以在企业开发中很少使用br标签。
即如果一段内容没有描述完用br进行换行，如果描述完了可以采用其他的方式进行换行。

路径问题

给src属性赋值有两种方式：
1、相对路径赋值：
相对路径就是每次都从.html文件所在的文件夹开始查找，我们称之为相对路径。
1.1：同级
同级就是图片和.html文件在同一个文件夹里面，src='01.png'。
含义：在.html所在文件夹中查找名为01.png的图片。
1.2：下级
下级就是存储图片的文件夹和.html文件在同一个文件夹中。src='img/01.png'。
含义：在.html文件所在的文件夹中找到名称为img的文件夹，然后再在img文件夹中找到名为01.png的图片。
1.3：上级
上级就是存储图片的位置和存储代码的文件夹在同一个文件夹中。src='../01.png'。
含义：在.html文件所在文件夹中找到这个文件夹的上一级文件夹，然后再在上一级文件夹中找到01.png这个图片。
其中../表示从当前的位置找到上一级文件夹。
注意：在企业开发中，我们一般使用的是相对路径的写法，在相对路径的3种写法中，最常用的是下级文件夹的写法。
2、绝对路径赋值：
绝对路径就是每次都从指定的盘符开始查找。
在企业开发中一般很少使用，可移植性不好。
注意：
1、路径中不要出现中文，否则可能会出现未知问题。
2、如果是相对路径，那么不能进行跨盘符进行访问数据。
以后企业开发中，路径一般使用反斜杠/，不要使用正斜杠\。
因为将来我们开发的程序可能会部署到其他操作系统的服务器上，而在其他操作系统中的路径都是反斜杠/，所以如果我们写正斜杠会比较容易出现问题。

a标签

a标签就是用来控制页面与页面之间跳转的。
当移动到超链接上面的时候，鼠标会变成一个小手的形状。

如果通过a标签的href属性指定一个URL地址，那么必须在地址前面加上http://或者https://.不加的话会出现页面找不到的错误。

a标签的href属性除了可以指定一个网络地址之外，还可以指定一个本地地址。
a标签的target属性用于控制页面如何跳转，取_self表示在当前页面、当前选项卡进行打开（默认）不会打开新的页面，_blank表示在新的页面进行打开，新建页面进行跳转。
a标签的title属性用于当鼠标悬停在超链接的时候的内容提示。

base标签

base标签就是专门用来统一的指定当前网页中所有的超链接需要如何打开。base标签必须写在head标签中。
什么是假链接：点击之后不会跳转的链接我们称之为假链接。在企业开发中，其他页面还没有写出来的时候使用。
假链接的格式：
1、#——会自动回到网页的顶部（可以用来实现返回顶部的功能）
2、javascript:——不会自动回到网页的顶部，还是在原来点击的位置。
超链接实现锚点：

1、给目标位置的标签添加一个id属性，然后指定一个独一无二的值
2、告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少。
格式：

注意点：通过我们的a标签跳转到指定的位置，是没有过渡动画的，是直接一下子就跳转到指定位置。

跳转到指定页面的指定位置。

列表标签

列表标签的分类：
1、有序列表：（最少）
2、无序列表：（最多）unorder list
ul标签是用来给一堆数据添加列表语义的，而不是用来给他们添加小圆点的。
无序列表应用场景：
新闻列表、商品列表、导航条。。。
一般在ul标签中只放li标签，但是在li标签中可以放复杂的标签。一般在li标签中放入其他的标签来使页面更加的复杂和丰富。
webStrom写列表的快捷键：
ul>li*4然后按tab键就可以快速自动生成一个无序列表标签。
3、定义列表：（其次）

<dl><dt></dt><dd></dd><dt></dt><dd></dd>
</dl>

dt是英文definition title的缩写，即dt是用来定义列表中的标题，dd是definition description的缩写，即dd是用来定义标题对应的描述的。
定义列表应用场景：
1、做网站尾部的相关信息
2、做图文混排
一个dt可以没有对应的dd，也可以有多个对应的dd，但是无论有多个或者没有dd都不推荐使用，推荐使用一个dt对应一个dd.

做一件事情，先要分析，再开始做

表格

1、宽度和高度属性
可以给table和td标签使用
table的高度和宽度是设置整个表格的宽高。
td的高度和宽度是设置的当前单元格的高度和宽度，不会影响整个表格的宽度和高度。
2、水平对齐和垂直对齐的属性
水平对齐可以给table标签和tr标签和td标签使用

垂直对齐只能给tr标签和td标签使用
3、外边距和内边距的属性
只能给table标签使用
外边距cellspacing就是单元格和单元格之间的距离。默认情况下是2px.
内边距cellpadding就是单元格和文字之间的间隙。
以上内容了解，一般通过CSS来控制样式。