HTML元信息、语义化、链接、替换元素

微风笑雨
111 阅读5分钟

HTML<meta>标签

<meta>标签提供了HTML文档的元数据。通常用于指定网页的描述、关键词、作者、浏览器如何显示内容或重新加载页面等信息

  • 属性

    • charset 规定HTML文档的字符编码
    • content 为元数据条目提供值
    • http-equiv 编译指示指令
    • refresh重新载入当前页面或重定向。
    • name 为元数据提供名称
      • author 文档作者的名字
      • description 页面的描述，搜索引擎会把这个描述显示在搜索结果中
      • keywords 规定一个逗号分割的关键词列表
      • viewport 为视口的初始大小提供指示。仅适用于移动设备
        • width 定义视口的宽度，高度或device-width，默认值为device-width
        • height 定义视口的高度，没有浏览器使用
        • initail-scale 定义设备(高度或宽度中小的那个)和视口大小之间的缩放比例，默认为1.0
        • maximum-scale 缩放的最大值
        • minimum-scale 缩放的最小值
        • user-scaleable 是否允许用户缩放，yes 或no，默认为yes
      • robots 定义爬虫对此页面的处理行为
        • index 允许机器人索引此页面，默认
        • noindex 要求机器人不索引此页面
        • follow 允许机器人跟随此页面上的链接，默认
        • nofollow 要求机器人不跟随此页面上的链接

  • 例子

    • 日常使用viewpoint配置
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    MDN - 标准元数据名称

    常用meta标签的作用以及全面整理

语义化

根据内容的结构，选择合适的标签构建出便于开发者阅读的可维护性更高的代码结构，同时能够让机器更好的解析

区块

<header>
  • 展示介绍性信息
  • 通常包含一组介绍性或是辅助导航的元素，如标题、Logo、搜索框等
<main>
  • 呈现文档或应用的主体部分
<footer>
  • 表示一个章节的页脚
  • 通常包含该章节作者、版权数据或文档链接等信息
<nav>
  • 在当前文档提供导航链接，如菜单、目录、索引等
  • 用来放置一些热门的链接，不常用的链接通常放到footer置于底部
<article>
  • 文档、页面、应用或网站中的独立结构
  • 可独立分配的或可复用的结构，如论坛帖子、新闻文章、博客等
<section>
  • 独立部分，通常会有标题
<aside>
  • 表示和其余内容几乎无关的部分，或者说单独拆出来不会影响整体的内容
  • 通常放在侧边栏，用于展示广告，引用内容等

image-20220331132825389

分组

<figure>
  • 代表独立的内容，经常与<figcaption>配合使用
<style>
  figure {
      border: thin #c0c0c0 solid;
      display: flex;
      flex-flow: column;
      padding: 5px;
      max-width: 220px;
      margin: auto;
  }
  img {
      max-width: 220px;
      max-height: 150px;
  }
  figcaption {
      background-color: #222;
      color: #fff;
      font: italic smaller sans-serif;
      padding: 3px;
      text-align: center;
  }
</style>
<body>
  <figure>
    <img src="test.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>
</body>
<blockquote>
  • 块级引用元素，通常渲染时会有部分缩进
  • 可以将原内容出处设置到cite属性，若要展示可以使用<cite>标签
<dl>/<dt>/<dd>

  • 用于描述一组键值对

  • 通常用于元数据或术语定义

<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.
  </dd>
</dl>

文本

<cite>
  • 通常用于引用作品标题
  • 包括论文、文件、书籍、电影等的引用
<time>
  • 机器可读的时间和日期
<p>会议开始于 <time>20:00</time>.</p>
<p>今天是<time datetime="2022-04-01 08:00"></time>4月1日.</p>
<address>
  • 表示其中的HTML提供了某个人或组织的联系信息
<address>
  <a href="test@test.com">test@test.com</a><br>
  <a href="tel:+13412341234">13412341234</a>
</address>
<mark>
  • 表示为引用或符号目的而标记或突出显示的文本
<code>
  • 代码片段
<small>
  • 将字体变小，常用于免责声明、注意事项等

链接

<a>
  • 属性
    • download 提示浏览器下载URL而不是导航到目标URL，仅适用于同源URL
    • href 目标URL
    • target 指定在何处显示链接的资源
      • _self
      • _blank
      • _parent
      • _top
    • rel 目标对象到链接对象的关系
<area>
  • 与<a>标签相比，area不是文本型链接，是区域型链接
  • 需要与<img>和<map>标签配合使用
  • 属性
    • download href target rel
    • media 规定外部资源的适用条件。值必须是媒体查询
    • alt 图片加载不出时显示的文字
    • shape 形状
      • default 表示其他三种图形之外的区域
      • rect 矩形
      • circle 圆形
      • poly 多边形
    • coords 定义点击区域的坐标
      • 矩形 - x1,y1,x2,y2
      • 圆形 - x,y,r
      • 多边形 - x1,y1,x2,y2,x3,y3....
 <!-- usemap指定name或id为shapes的map ,map的name和id最好都写上-->
 <img src="shapes.png" usemap="#shapes" alt="area测试图形">
 <map name="shapes">
  <!-- rect 矩形， coords 左上角和右下角坐标-->
  <area shape="rect" coords="25,25,125,125" href="red.html" alt="Red box.">
  <!-- circle 圆形， coords 圆心和半径-->
  <area shape="circle" coords="200,75,50" href="green.html" alt="Green circle.">
 <!-- 不规则图形， coords 图形边缘路径上的各个点，依次连接成此多边形-->
  <area shape="poly" coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle."> 
 </map>

试一试

<link>

  • 规定当前文档与外部资源的关系。常用于链接样式表以及媒体查询、创建站点图标

  • 属性

    • mediat

    • href

    • rel

      • stylesheet 样式表外部资源
      • icon图标
      <link rel="stylesheet" href="style.css" type="text/css" media="screen and (min-width: 1200px)" />
<link rel="icon" href="favicon.ico" size="30*30" />

      HTML rel属性值释义大全

      MDN-链接类型

替换型元素

把文件的内容引入，替换掉自身位置的一类标签

<script>
  • 属性
    • defer 文档解析完成执行该脚本
    • async 表示浏览器是否在允许的情况下异步加载该脚本，加载完成后立即执行

具有src属性时就是替换型元素

<img>

  • 属性

    • src

    • srcset 以逗号分割的一个或多个字符串表明一系列用户代理使用的可能的图像

       <img
      src="../assets/images/favicon144.png"
      srcset="../assets/images/favicon144.png 144w, ../assets/images/favicon72.png 72w"
      sizes="(min-width: 1000px) 144px, 72px"
    />
<!-- 缩小屏幕分辨率到1000px以下时，会自动替换为72px大小的图片 -->

    • usemap 与元素相关的map标签的URL

    • alt

<picture> <video> <audio>

  • 通常包含零个或多个<source>元素提供不同类型或不同显示场景、不同设备场景的源

  • 如果没有匹配的source元素，<picture>可以显示一个<img>元素，<video>和<audio>只能显示提示文字

  • <source>

    • <picture>
  <source srcset="test1x.png" media="(max-width: 1200px)">
  <source srcset="test2x.png" media="(min-width: 1200px)">
  <img src="test.png" />
</picture>

    • <video>
	<source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <p>
    您的浏览器不支持HTML5video.
  </p>
</video>
<iframe>
  • 用于在文档中嵌套一个独立的外部文档

试一试

avatar
文章
阅读
粉丝