HTML基础-基础标签

开发工具(工欲善其事必先利其器)

为了让大家更快的融入到编程的世界中, 不被繁琐的英语单词所困扰, 不用每天编写很多没有意义的重复代码, 提升大家的开发效率今后采用 最高级的开发工具 来编写网页。

常见的前端开发工具

  • 记事本：提示功能较差。
  • editplus / nodepad++：提示功能较差。
  • Dreamwaver：更偏向设计。
  • Sublime：轻量级, 自带功能不太全, 但是插件十分丰富。
  • WebStorm：重量级, 自带功能全面。

  • 其它 ide(zend studio、netbean 等)
  • 为了让大家更快的融入到编程的世界中, 不被繁琐的英语单词所困扰, 统一采用 最牛逼最高级 的高发工具 WebStorm 来编写后续的文章。

下载软件

WebStorm 的安装和使用

首先解压安装包，如果是通过我如上的方式进行安装的话就是去官网下载，我这里没有给出压缩包的下载地址，自行去官网或者参考我上方给出的地址自行去安装

破解软件(工作之后一定要用正版)

汉化软件, 右键桌面的 WebStorm 软件然后打开软件的所在位置，进入之后如下图

设置模版

创建文件

WebStorm 的常见快捷键

  • 如何在 WebStorm 中利用快捷键创建一个新的 .html的文件呢，同时按下键盘上的 Ctrl + Alt + Insert。
  • 如何在 WebStorm 中让光标移动到当前行的末尾呢，按下键盘上的 End 键即可。
  • 如何在 WebStorm 中让光标移动到当前行的最前面呢，按下键盘上的 Home 键即可。
  • 如何在 WebStorm 中让光标在多行中闪烁呢, 按住键盘上的 Alt 键不放, 然后再按住鼠标的左键不放, 然后再拖动鼠标即可。
  • 如何在 WebStorm 中快速的复制光标所在的那一行，按下键盘上的 Ctrl + D。
  • 如何在 WebStorm 中快速的删除光标所在的那一行，按下键盘上的 Ctrl + X。
  • 如何在 WebStorm 中让标签包裹一段内容, 也就是自动在一段内容前后加上标签，按下键盘上的 Ctrl + Alt + T, 然后按下回车, 然后输入对应的标签即可。

基础标签

H 系列标签(Header1 - Header6)

  • 作用：用于给文本添加标题语义。
  • 使用格式：<h1>xxxxxx</h1>

注意点：

  • H 标签是用来给文本添加标题语义的, 而不是用来修改文本的样式的。
  • H 标签一共有6个, 从H1 - H6, 最多就只能到 6, 超过 6 则无效。
  • 被 H 系列标签包裹的内容会独占一行。
  • 在 H 系列的标签中, H1 最大, H6 最小，文本的含义最大和最小，不是字体样式之间的最大最小。
  • 在企业开发中, 一定要慎用 H 系列的标签, 特别是 H1 标签，在企业开发中一般情况下一个界面中只能出现一个 H1 标签(和 SEO 有关)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H系列标签</title>
</head>
<body>
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
<h7>我是标题7</h7>
我是普通文本
</body>
</html>

然后浏览器中的效果如下图所示

P 标签(Paragraph)

  • 作用：告诉浏览器哪些文字是一个段落。
  • 使用格式：<p>xxxxxxxx</p>

注意点:

  • 在浏览器中会单独占一行。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>P标签</title>
</head>
<body>

<p>我是一段文本</p>
我是一段普通文本

</body>
</html>

然后浏览器中的效果如下图所示

Hr 标签(Horizontal Rule)

  • 作用：在浏览器上显示一条分割线。
  • 使用格式：<hr />

注意点：

  • 在浏览器中会单独占一行。

通过我的观察发现 Hr 标签可以写 / 也可以不写 /, 如果不写 / 那么就是按照 HTML 的规范来编写, 如果写上 / 那么就是按照 XHTML 的规范来编写, 但是在HTML5 中, 由于 HTML5 兼容 HTML 和 XHTML 所以写不写都可以，那么以后我们在做前端开发时到底写还是不写呢？按照高级开发工具的提示来写即可。

由于 Hr 标签是用来修改样式的, 所以不推荐使用, 今后开发中添加水平线一般都使用 CSS 盒子来做。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hr标签</title>
</head>
<body>

<hr>
<hr/>

</body>
</html>

然后浏览器中的效果如下图所示

HTML 注释(Annotation)

什么是注释

  • 注释是在所有计算机语言中都非常重要的一个概念，从字面上看，就是注解、解释的意思。
  • 注释可以用来解释某一段程序或者某一行代码是什么意思，方便交接或程序员之间的交流。

为什么要使用注释

  • 适当的注释，能够让我们的程序更加可读，所以用中文提示自己，这里的程序是干什么的。

注释的使用格式

<!--被注释的内容-->

注意点：

  • 被注释的内容不会在浏览器中显示, 注释是写给我们自己看的。
  • 注释不能嵌套使用，例如如下示例这样是不能的。
<!--<!--被注释的内容-->-->

注释快捷键：ctrl + /，第一下按是生成注释，第二下按是去除

img 标签(image)

  • 作用：在网页上插入一张图片。
  • 使用格式：<img src="">

标签的属性

  • 写在标签中 K = "V" 这种格式的文本我们称之为标签的属性。
属性名称 作用
src(source) 告诉浏览器需要 插入 的图片路径, 以便于浏览器到该路径下找到需要插入的图片
alt(alternate) 规定图像的替代文本, 只有 在 src 指定的路径下 找不到图片, 才会显示 alt 指定的文本
title 悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示)
height 设置图片显示的高度
width 设置图片显示的宽度

注意点：

  • img 标签添加的图片默认不是占一整行空间。
  • 如果想让图片等比拉伸, 只写高度或者宽度即可，系统会自动计算另一个属性的值。

br 标签(Break)

  • 作用：让内容换行。
  • 使用格式：<br/>

注意点：

  • br 的意思是不另起一个段落进行换行, 而网页中 99.99% 需要换行时都是因为另起了一个段落, 所以应该用 p 标签来做。

相对路径和绝对路径

图片路径分为两种, 一种是绝对路径, 一种是相对路径, 我们 重点学习相对路径, 因为在企业级开发中没有人使用绝对路径。

绝对路径

从电脑的具体盘符开始寻找我们需要的资源

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对路径</title>
</head>
<body>
<img src="F:\bntang\girl.png">
</body>
</html>

以上代码表示在 F 盘下查找 bntang 文件夹, 然后在 bntang 文件夹下查找 girl.png 的图片

相对路径

一个文件相对于另外一个文件的位置寻找我们需要的资源

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对路径</title>
</head>
<body>
<img src="bntang\girl.png">
</body>
</html>

假设 html 文件和 girl.png 都在 bntang 文件夹下, 以上代码表示在 bntang 文件夹下查找 girl.png 图片

为什么没人使用绝对路径

  • 可以移植性太差。.

什么是可移植性

  • 可以简单的理解为把写的代码拷贝到另外一台电脑上是否能够正常运行。

为什么绝对路径可移植性差

  • 假如我编写的 html 文件放在我电脑的 F:/bntang 目录下, html 文件中用到的图片放在 F:/bntang/images 目录下, 我给 src 指定的绝对路为F:/bntang/images/girl.png, 那么将来我将 整个 bntang 文件夹拷贝给你, 如果你将 bntang 文件夹放在非 F 盘下, 那么将无法显示图片。
  • 例如你存放在 C 盘根目录, 那么图片的绝对路径会变为 C:/bntang/images/girl.png, 而 src 会去 F 盘找, 所以不会显示。
  • 你只有将 bntang 文件夹存放在 F 盘根目录下时图片才会正常运行, 这就叫做可移植性不好。

为什么相对路径可移植性好

  • 同上, 如果 src 指定的路径为 images/girl.png, 那么无论你拷贝到那个盘, 哪个文件夹, 系统都 只会在当前文件夹中的 images 下去查找图片, 不会受到盘符和存储位置的影响, 只要保证页面和图片位置的相对关系不变就不会影响到图片的显示。

相对路径的几种查找方式

同级

  • 直接编写, 例如：girl.png
  • 加上./ 编写, 例如 ./girl.png
  • ./ 代表当前目录, ./girl.png 代表在当前目录下查找。

下级

  • 直接编写, 例如 abc/girl.png
  • 加上 ./ 编写, 例如 ./abc/girl.png
  • 相对当前目录, 有几个文件夹, 就在后面依次补全几个文件夹名称即可, 例如 abc/bbb/ccc/ddd/girl.png或 ./abc/bbb/ccc/ddd/girl.png

上级

  • ../ 代表访问上级目录。
  • 假设 a 文件夹下面有 b 文件夹, 图片存放在 a 文件夹中, html 文件存放在b文件夹中, 那么路径为 ../girl.png
  • 因为 html 文件在 b 文件夹中, 所以路径是相对于 b 文件夹的, 所以 ../ 代表访问 b 文件夹的上一级目录, b 文件夹的上一级目录是 a 文件夹, 所以 ../girl.png 就代表在 a 文件夹中查找 girl.png

注意事项：

  • 相对路径不会出现这种格式 aaa/../bbb/girl.png
  • 虽然可以显示, 但是企业开发中千万不要这么写。

a 标签(anchor)

  • 使用格式：<a href="https://www.cnblogs.com/BNTang">BNTang博客</a>
  • 作用：用于从一个页面链接到另一个页面。

注意事项：

  • 在 a 标签之间一定要写上文字, 如果没有, 那么在页面上找不到这个标签。
  • a 标签也叫做 超级链接 或 超链接。

a 标签的属性

属性名称 作用
href(hypertext reference) 指定跳转的目标地址
target 告诉浏览器是否保留原始界面, _blank 保留, _self 不保留
title 悬停文本(介绍这个链接, 只有在鼠标移动到超链接上时才会显示)

base 标签和 a 标签结合使用

  • 如果每个 a 标签都想在新页面中打开, 那么逐个设置 a 标签的 target 属性比较麻烦, 这时我们可以使用 base 和 a 标签结合的方式，一次性的设置所有 a 标签都在新页面中打开
  • 使用格式：<base target="_blank" />

注意事项：

  • base 标签必须嵌套在 head 标签里面。
  • 如果标签上指定了 target, base 中也指定了 target, 那么会按照标签上指定的来执行。

a 标签的其它用法

假链接(本质是跳转到当前页面)

  • 使用格式：<a href="#">BNTang博客</a>
  • 使用格式：<a href="javascript:">BNTang博客</a>

跳转到 当前 页面的 指定位置 (锚点链接)

  • 使用格式：<a href="#location">跳转到指定位置</a>
  • 在页面的指定位置给任意标签添加一个 id 属性。
  • 例如：<p id="location">这个是目标</p>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签基本使用</title>
</head>
<body>
<a href="#location">跳转到指定位置</a>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p id="location">这个是目标</p>
</body>
</html>

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

  • 使用格式：<a href="01-锚点链接.html#location">跳转到指定位置</a>
  • 只需要在 01-锚点链接.html 页面添加一个 id 位置即可。

下载(极力不推荐使用)

  • 例如：<a href="girl.zip">下载福利资源<a/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下载</title>
</head>
<body>
<a href="girl.zip">下载福利资源</a>
</body>
</html>
posted @ 2021-02-11 12:44  BNTang  阅读(129)  评论(0)  编辑  收藏  举报