Html学习

最新推荐文章于 2024-12-07 20:59:50 发布

Aaron - Wistron

最新推荐文章于 2024-12-07 20:59:50 发布

阅读量1k

点赞数 8

文章标签： html 学习前端

本文链接：https://blog.youkuaiyun.com/Aaron121314/article/details/142516061

版权

HTML（超文本标记语言） | MDN

head标签

主要放title和meta，title就是网页显示的标题，meta可以添加一些属性，可以被百度搜索什么之类的。

<html>
    <!--
        1.编码集设置
        utf-8

        2.作者信息
        name属性 author
        content属性 作者信息

        3.keywords属性
        name属性 keywords
        content属性 关键字。。。

        4.description属性
        name属性 descrpition
        content属性 描述信息

    -->
  <head>
    <meta charset="utf-8"/>
    <meta name="author" content="aaron"/>
    <meta name="keywords" content="java学习,好啊后学习"/>
    <meta name="description" content="学习,哈哈"/>
   

    <title>aa</title>
  </head>
  <body>

  </body>
</html>

标题和段落

    <h1>静夜思</h1>
    <p>床前明月光 疑是地上霜</p>
    <p>举头望明月 低头思故乡</p>

span标签

<span> HTML 元素是一个通用的行级容器，本身不具备特殊含义。它可被用于对元素进行编组，以便于添加样式（通过使用 class 或 id 属性），或共享属性值（例如 lang 属性）。该元素仅应在无其他合适语义元素时使用。<span> 与 <div> 元素非常相似，但是 <div> 是块级元素，而 <span> 是一个行级元素。

列表

无序

    <ul>
      豆浆
      油条
      豆汁
      焦圈
      </ul>

有序

    <ul>
      <li>豆浆</li>
      <li>油条</li>
      <li>豆汁</li>
      <li>焦圈</li>
      </ul>

    <ol>
      <li>沿这条路走到头</li>
      <li>右转</li>
      <li>直行穿过第一个十字路口</li>
      <li>在第三个十字路口处左转</li>
      <li>继续走 300 米，学校就在你的右手边</li>
    </ol>

超链接

    <p>
      我创建了一个指向
      <a href="https://www.mozilla.org/zh-CN/">Mozilla 主页</a>的链接。
    </p>

块级

    <a href="https://developer.mozilla.org/zh-CN/">
      <h1>MDN Web 文档</h1>
    </a>
    <p>自从 2005 年起，就开始记载包括 CSS、HTML、JavaScript 等网络技术。</p>

图片

    <a href="https://developer.mozilla.org/zh-CN/">
      <img src="mdn_logo.svg" alt="MDN Web 文档主页" />
    </a>

你可能要添加到你的链接的另一个属性是 title。这旨在包含关于链接的补充信息，例如页面包含什么样的信息或需要注意的事情。当鼠标指针悬停在链接上时，标题将作为提示信息出现。

    <p>
      我创建了一个指向<a
        href="https://www.mozilla.org/zh-CN/"
        title="了解 Mozilla 使命以及如何参与贡献的最佳站点。"
        >Mozilla 主页</a
      >的超链接。
    </p>

当你链接到要下载的资源而不是在浏览器中打开时，你可以使用 download 属性来提供一个默认的保存文件名。

    <a
    href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
    download="firefox-latest-64bit-installer.exe">
    下载最新的 Firefox 中文版 - Windows（64 位）
  </a>

文本格式进阶

描述列表

    <dl>
      <dt>培根</dt>
      <dd>整个世界的粘合剂。</dd>
      <dt>鸡蛋</dt>
      <dd>一块蛋糕的粘合剂。</dd>
      <dt>咖啡</dt>
      <dd>一种浅棕色的饮料。</dd>
      <dd>可以在清晨带来活力。</dd>
      </dl>

上标和下标

当你使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标，以确保它们的正确含义。 <sup> 和 <sub> 元素可以解决这样的问题。

    <p>
      咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。
    </p>
    <p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>

展示计算机代码

有大量的 HTML 元素可以来标记计算机代码：

<code> ：用于标记计算机通用代码。
<pre> ：用于保留空白字符（通常用于代码块）——如果文本中使用了缩进或多余的空白，浏览器将忽略它，你将不会在呈现的页面上看到它。但是，如果你将文本包含在 <pre></pre> 标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
<var> ：用于标记具体变量名。
<kbd> ：用于标记输入电脑的键盘（或其他类型）输入。
<samp> ：用于标记计算机程序的输出。

   <pre><code>const para = document.querySelector('p');

      para.onclick = function() {
        alert('噢，噢，噢，别点我了。');
      }</code></pre>
     
      <p>
        请不要使用 <code>&lt;font&gt;</code> 、
        <code>&lt;center&gt;</code> 等表象元素。
      </p>
     
      <p>在上述的 JavaScript 示例中，<var>para</var> 表示一个段落元素。</p>
     
      <p>按 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd> 选择全部内容。</p>
     
      <pre>$ <kbd>ping mozilla.org</kbd>
      <samp>PING mozilla.org (63.245.215.20): 56 data bytes
      64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

日期

<!-- 标准简单日期 -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- 只包含年份和月份-->
<time datetime="2016-01">January 2016</time>
<!-- 只包含月份和日期 -->
<time datetime="01-20">20 January</time>
<!-- 只包含时间，小时和分钟数 -->
<time datetime="19:30">19:30</time>
<!-- 还可包含秒和毫秒 -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- 日期和时间 -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- 含有时区偏移值的日期时间 -->
<time datetime="2016-01-20T19:30+01:00"
  >7.30pm, 20 January 2016 is 8.30pm in France</time
>
<!-- 提及特定周 -->
<time datetime="2016-W04">The fourth week of 2016</time>

网站布局

网页的外观多种多样，但是除了全屏视频或游戏，或艺术作品页面，或只是结构不当的页面以外，都倾向于使用类似的标准组件：

页眉

通常横跨于整个页面顶部有一个大标题和/或一个标志。这是网站的主要一般信息，通常存在于所有网页。

导航栏

指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对；还有人认为，两者独立可以提供更好的无障碍访问特性，因为屏幕阅读器可以更清晰地分辨二者。

主内容

中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。

侧边栏

一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。

页脚

为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：