Html 教程 元素

Posted thefist11

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Html 教程 元素相关的知识,希望对你有一定的参考价值。

  • < !DOCTYPE>
    声明不是 html 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。<!DOCTYPE>声明必须是 HTML 文档的第一行,位于<html>标签之前。

  • <html >
    一个 HTML 文档。

  • <head >
    定义文档的头部,它是所有头部元素的容器。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
下面这些标签可用在 head 部分:<base>, <link>, <meta>, <script>, <style>, <title>

<title>定义文档的标题,它是 head 部分中唯一必需的元素。

eg.

<html>
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
</html>
  • img图像
<img src="/images/logo.png" width="258" height="39" />
  • <a> 链接
<a href="url">链接文本</a>

eg.

<a href="https://www.runoob.com">这是一个链接使用了 href 属性</a>

不打开新的页面

<p>跳出框架?</p> 
<a href="//www.runoob.com/" target="_top">点击这里!</a> 
  • <hr>分割

eg.

<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
  • <h1> - <h6>
    六个不同的 HTML 标题:
<h1>这是标题 1</h1> 
<h2>这是标题 2</h2> 
<h3>这是标题 3</h3> 
<h4>这是标题 4</h4> 
<h5>这是标题 5</h5> 
<h6>这是标题 6</h6>
  • <p> 换行
<p>这个<br>段落<br>演示了分行的效果</p>
  • <section>
<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
  <h1>WWF's Panda symbol</h1>
  <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
  • <nav> 元素

定义导航链接的部分区域,但是,不是所有的链接都需要包含在<nav>元素中
eg.

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">javascript</a> |
<a href="/jquery/">jQuery</a>
</nav>
  • <footer> 元素

描述了文档的底部区域.,一个页脚通常包含文档的作者,著作权信息,链接的使用条款,联系信息等

注:文档中你可以使用多个<footer>元素.

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p><time pubdate datetime="2012-03-01"></time></p>
</footer>

在这里插入图片描述

  • <figure> 和 <figcaption> 元素

定独立的流内容(图像、图表、照片、代码等等)

<figure>
  <img loading="lazy" src="img_pulpit.jpg"
   alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

在这里插入图片描述

以上是关于Html 教程 元素的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段5——HTML元素结构

实用代码片段将json数据绑定到html元素 (转)

css有用的代码片段

前端开发常用js代码片段

VIM 代码片段插件 ultisnips 使用教程

前端开发中最常用的JS代码片段