HTML常用基本标签

2022-03-07 495 阅读4分钟

基本结构标签

<html></html>html标签
- 页面中最大的标签，也称为根标签
<head></head>文档头部
- 注意在head标签中必须要设置title标签
<title></title>网页标题
<body></body>文档主体
- 包含文档的所有内容，页面内容基本都是放到body里的
包含关系
- html包含head和body，head和body并列，head包含title

<html>
    <head> <title></title> </head>
    <body></body>
</html>

标题标签

<h1></h1> - <h6></h6>
效果：使用h1
h1标题
独占一行，且文字会变粗变大
作为标题使用，大小和重要性从1-6递减
可以使用多个同级标签

段落标签`<p></p>`

就算打多个空格也只会显示一个空格
不会显示回车换行
效果
一个段落

换行标签`<br/>`（或`<br>`）

单标签
只是另起一行，与上一行不会有间距，跟段落不一样
效果：我要换行
我被换下来了

定义水平线`<hr/>`（或`<hr>`）

效果

标签属性语法

标签可以有多个属性，但必须写在标签名的后面
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
属性采取键值对key = "value"的格式

超链接标签`<a></a>`

作用：从一个页面跳转到另一个页面
语法：<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
- href属性，必须属性，用于指定链接目标的URL地址
- target属性，用于指定链接页面的打开方式，其中_self为在自身跳转（默认值），_blank为在新窗口中打开
链接分类
- 外部链接
  - 写网址
- 内部链接
  - 直接写页面html文件名即可
- 空链接
  - 用#代替地址
- 下载链接
  - 若在同一文件夹则直接写文件名
- 网页元素链接
  - 文本、图像、表格、音频、视频等都可以添加超链接
  - 例如图像链接<a href="#"><img src="img.jpg"/></a>
- 锚点链接
  - 快速定位到页面中的某个位置
  - 步骤
    1. 在href属性中，设置属性名为#名字的形式，如<a href="#two">第2集</a>
    2. 找到目标位置的标签，在里面添加一个id属性=刚才的名字，如：<h3 id="two">第2集</h3>

图像标签`<img/>`

单标签
语法<img src = "图像URL"/>
- src是必须属性
可选属性（在src后加空格再敲进去即可，书写格式与src相同）
- alt替换文本，图像显示不出来的时候用什么文字替换
- title提示文本，鼠标放到图片上时显示的文字
- width设置图像宽度，单位为像素px
- height设定图像高度，一般只改宽度或只改高度，改动时另一个属性等比例缩放

编程基础知识：相对路径与绝对路径

以图片和html文件举例
相对路径：图片相对于html文件的位置（使用较多）
- 同一级路径
  - 直接写文件名
- 下一级路径/
  - 例如<img src = "images/img.jpg" />
- 上一级路径../
  - 例如<img src = "../img.jpg" />
- 同级不同文件夹
  - 例如<img src = "../images/img.jpg" />
绝对路径
- 符号\
- 图片在电脑中的位置（很少使用），每个人电脑不同，可能显示不出来
- 图片在网络中的位置

盒子标签`<div></div>`和`<span></span>`

没有语义，只是用来装内容（图片、文字等）的盒子
<div></div>是大盒子，一个独占一行
<span></span>是小盒子，多个可以在同一行显示

文本修饰标签

加粗<strong></strong>或<b></b>，效果：加粗
- 推荐使用<strong></strong>，语义更强烈
倾斜<em>或<i>，效果：倾斜
- 推荐使用<em></em>，语义更强烈
删除线<del></del>或<s></s>，效果：~~删除线~~
- 推荐使用<del></del>，语义更强烈
下划线<ins></ins>或<u></u>，效果：下划线
- 推荐使用<ins></ins>，语义更强烈

`src`和`href`属性的比较（重要）

相同点
- src和href都用于引入外部资源，如图片、CSS文件、HTML文件、js文件或其他web页面等
不同点
- 第一：src用于替代这个元素，而href用于建立这个元素与外部资源之间的关系
  - href（读音[ˈhaɪ.ɹef]）全名是 Hypertext reference，表示超文本引用，用在link和a等元素上，是在当前元素和引用资源之间建立联系
  - src表示引用资源，替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分
- 第二：src会阻塞解析，href不会阻塞解析
  - <script src="js.js"></script>当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载、编译、执行完毕，图片和框架等元素也是如此，类似于将该元素所指向的资源嵌套入当前标签内，这也是为什么要把js放在底部而不是头部的原因
  - <link href="common.css" rel="stylesheet"/>当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import