HTML标签

常用标签

标题标签

• 在HTML中，一共有六级标题标签
• h1~h6
• 在显示效果上h1最大、h6最小，但是文字的大小我们并不关心
• 使用HTML标签时，关系的是标签的语义，我们使用的标签都是语义化标签
• 六级标题中，h1最重要，表示一个网页中的主要内容。h2~h6重要性依次降低
• 对于搜索引擎来说，h1的重要性仅次于title，搜索引擎检索完title，会立即查看h1中的内容
• h1非常重要，他会影响到页面在搜索引擎中的排名，页面一般只写一个h1，否则会被认定为垃圾网站不被搜索
• 一般页面中标题标签只使用h1 h2 h3，其他的基本不使用

<h1>这是h1标签</h1>
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>

段落标签

• 用于表示内容中的一个自然段
• 使用p标签表示一个段落
• p标签中的文字，默认会独占一行，并且段与段之间会有一个间距

<p>这是段落标签</p>

换行标签

• 在HTML中，字符之间再多的空格，浏览器也会当成一个空格解析
• 换行也会当成一个空格解析
• 使用br标签表示一个换行，br是一个自结束标签

悯农
<br/>
锄禾日当午，汗滴禾下土。
<br/>
谁之盘中餐，粒粒皆辛苦。

分割线标签

• hr标签是自结束标签
• 可在在页面中生成一条水平分割线

巴拉巴拉
<hr/>
ps：巴拉巴拉

实体

• HTML中，一些如<>中特色字符是不能直接使用
• 需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称为实体
• 实体语法
  • &实体的名字
• 浏览器解析到实体时，会自动将实体转换为其对应的字符
• 常用实体
  • 小于号 <
    • &lt;
  • 大于号 >
    • &gt;
  • 空格
    • &nbsp;
  • 版权符号©
    • &copy;
• 详情查看w3school离线手册

a<b
<br/>
a&gt;c
<br/>
&copy;空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格

图片标签

• 使用img标签来向网页中引入一个外部图片
• img标签也是一个自结束标签
• 属性
  • src
    • 设置一个外部图片的路径
  • alt
    • 用来设置图片的描述
    • 在图片不能显示时显示描述
    • 搜索引擎通过alt来识别不同的图片
    • 如果不写alt属性，则搜索引擎不会对img中的图片进行收录
  • width
    • 设置图片的宽度，一般使用px作为单位
  • height
    • 设置图片的高度，一般使用px作为单位
  • 宽度和高度只设置其中一个，另一个也会等比例调整大小，一般开发中除了自适应的页面，不建议设置width和height属性，而是让美工修改图片。
• 相对路径
  • src属性配置的是图片的路径，目前我们所要使用的路径全都是相对路径
  • 相对于当前资源所在目录的位置
  • ./是当前目录
  • …/是返回上级文件夹
• 图片格式
  • JPG
    • 支持颜色比较多，图片可以压缩，但是不支持透明
    • 一般用来保存照片等颜色丰富的图片
  • GIF
    • 支持的颜色少，只支持简单的透明，支持动态图
    • 图片颜色单一或者是动态图用gif
  • PNG
    • 支持的颜色多，并且支持复杂的透明
    • 用来显示颜色复杂的透明的图片
  • WEBP
    • 谷歌新推出的用来表示网页中图片的一种格式
    • 具备其他格式图片的所有优点
    • 文件还特别小
    • 但是兼容性不好
  • base64
    • 字符流图片
    • 通过base64转换为字符
    • 一般都是一些需要和网页一起加载的图片才会使用base64
  • 图片的使用原则
    • 效果不一致，使用效果好的
    • 效果一致，使用小的

<!--引入本地图片-->
<img src="imgs/8.jpg" alt="壁纸" width="455px"/>
<!--引用外部图片-->
<img src="https://img2.baidu.com/it/u=3724265679,1678217865&fm=26&fmt=auto&gp=0.jpg" alt="iu" height="256px"/>

meta标签

• charset
  • 设置字符集

<meta charset="UTF-8">

• keywords
  • 设置网页的关键字

<meta name="keywords" content="HTML5,JavaScript,前端，Java">

• description（描述）
  • 指定网页的描述

<meta name="description" content="发布h5、js等前端相关信息">

• 搜索引擎在检索页面时，会同时检索页面的关键词和描述，但是这两个值不会影响页面在搜索引擎中的排名
• refresh（刷新）
  • 请求重定向

<!--请求重定向，5秒后打开某网址-->
<meta http-equiv="refresh" content="5;url=https://www.baidu.com">

• 详情查看w3school离线手册

布局标签

• header
  • 网页头部

<header></header>

• main
  • 网页的主体部分
  • 一个页面中只能有一个main

<main></main>

• footer
  • 表示网页的底部

<footer></footer>

• nav
  • 网页中的导航

<nav></nav>

• aside（在旁边）
  • 和主体相关的其他内容（侧边栏）

<aside></aside>

• article
  • 独立的文章

<article></article>

• section
  • 独立的区块

<section></section>

• div
  • 没有语义，一个块
  • 目前主要的布局元素
  • 可以代替上边的所有

<div></div>

居中标签

• center标签中的内容，会默认在页面中居中显示
• 已过时，一般用css实现

<center>
    <p>居中显示</p>
</center>