cover

写在前面

随着前端学习的深入,逐渐发现自己的前端基础还不是特别的扎实,记录一下 html 的相关知识,免得每次都得上网查找。总体而言,这算不上新手指南,更好的是作为 html 使用的参考资料。

html 框架知识

基本框架

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="my-css-file.css" />
    <script src="my-js-file.js" defer></script>
    <title>标题</title>
  </head>
  <body>
    <p>页面</p>
  </body>
</html>

页面在浏览器加载后它的内容不会在浏览器中显示,它的作用是保存页面的一些元数据

<title>用于显示网页的标题, 与正文中的标题区分</title>

指定文档的字符编码

<meta charset="utf-8" />

提供作者与简述, 可显示在搜索引擎结果中

<meta name="author" content="Chris Mills" />
<meta
  name="description"
  content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications." />

图标, 可以直接在网页根目录下放 favicon.ico 文件, 也可以在 head 引入(可以使用其他类型图片)

<link rel="icon" href="favicon.ico" type="image/x-icon" />

<link
  rel="icon"
  href="https://developer.mozilla.org/static/img/favicon32.png" />

使用 css 与 js:

<link rel="stylesheet" href="my-css-file.css" />
<script src="my-js-file.js" defer></script>

html 布局元素

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>二次元俱乐部</title>
    <link href="https://fonts.googleapis.com/css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>

  <body>
    <header> <!-- 本站所有网页的统一主标题 -->
      <h1>聆听电子天籁之音</h1>
    </header>

    <nav> <!-- 本站统一的导航栏 -->
      <ul>
        <li><a href="#">主页</a></li>
        <!-- 共 n 个导航栏项目,省略…… -->
      </ul>

      <form> <!-- 搜索栏是站点内导航的一个非线性的方式。 -->
        <input type="search" name="q" placeholder="要搜索的内容">
        <input type="submit" value="搜索">
      </form>
    </nav>

    <main> <!-- 网页主体内容 -->
      <article>
        <!-- 此处包含一个 article(一篇文章),内容略…… -->
      </article>

      <aside> <!-- 侧边栏在主内容右侧 -->
        <h2>相关链接</h2>
        <ul>
          <li><a href="#">这是一个超链接</a></li>
          <!-- 侧边栏有 n 个超链接,略略略…… -->
        </ul>
      </aside>
    </main>

    <footer> <!-- 本站所有网页的统一页脚 -->
      <p>© 2050 某某保留所有权利</p>
    </footer>
  </body>
</html>
  • <main>  存放每个页面独有的内容。每个页面上只能用一次  <main>,且直接位于  <body>  中。最好不要把它嵌套进其他元素。
  • <article>  包围的内容即一篇文章,与页面其他部分无关(比如一篇博文)。
  • <section>  与  <article>  类似,但  <section>  更适用于组织页面使其按功能(比如迷你地图、一组文章标题和摘要)分块。一般的最佳用法是:以  标题  作为开头;也可以把一篇  <article>  分成若干部分并分别置于不同的  <section>  中,也可以把一个区段  <section>  分成若干部分并分别置于不同的  <article>  中,取决于上下文。
  • <aside>  包含一些间接信息(术语条目、作者简介、相关链接,等等)。
  • <header>  是简介形式的内容。如果它是  <body>  的子元素,那么就是网站的全局页眉。如果它是  <article>  或<section>  的子元素,那么它是这些部分特有的页眉(此  <header>  非彼  标题)。
  • <nav>  包含页面主导航功能。其中不应包含二级链接等内容。
  • <footer>  包含了页面的页脚部分。

块级元素和内联元素 block and inline block

块级元素在页面中以块的形式展现。一个块级元素出现在它前面的内容之后的新行上。任何跟在块级元素后面的内容也会出现在新的行上。

常用的块级元素有:

<div>        定义文档中的分区或节
<p>        定义段落
<h1><h2><h3><h4><h5><h6>        标题元素
<dl>        定义列表
<dt>        定义列表中的项目
<form>        创建表单元素
<hr>        水平线
<li>        定义列表项目
<ol>        有序列表
<ul>        无序列表
<table>        定义表格
<td>        表格中的标准单元格
<tr>        表格中的行
<tfoot>        表格中的页脚
<th>        定义表头单元格
<thead>        定义表格的表头

注意此处的逻辑, 是块级元素出现在新行, 而非后一个元素出现在新行, 这个和\n 还是不一样的

内联元素通常出现在块级元素中并环绕文档内容的一小部分,而不是一整个段落或者一组内容。内联元素不会导致文本换行。

常用的内联元素有:

<a>        可定义锚以及超链接
<span>        组合文档中的行内元素
<textarea>        多行文本输入控件
<img>        向网页中嵌入一张图像
<input>        输入框
<label>        为input进行标记/标注
<strong>        语气更强的强调内容
<abbr>        表示一个缩写形式
<acronym>        表示只取title中首字母的缩写形式
<b>        字体加粗
<big> <small>       大号字体加粗
<br>        换行
<code>        定义计算机代码文本
<em>        定义为强调的内容
<i>        斜体文本效果
<q>        定义短的引用
<s>    表示不准确不相关,却不应当给予删除的内容
<sub>        定义下标文本
<sup>        定义上标文本

默认而言元素的类型与 CSS 显示类型相关, 但改变 CSS 显示类型并不会改变元素的分类
但是直接理解为盒模型中的默认显示类型更加容易理解,

其中介绍两种最常用的无语义元素

span

一种无语义的块内元素, 可以很方便的应用各种 css 与 Js 效果

<span style="font-size: 32px; margin: 21px 0; display: block;">一个伪装的标题</span>

div

一种无语义的块元素, 可以很方便的作为页面布局的工具

但是需要注意, 特别是 div, 常常被明显的滥用, 这不利于代码的编写与障碍人群对内容的理解, 尽可能采用有语义测元素

文本处理

列表 ul/ol

ul 代表无序清单, ol 代表有序清单, 其中的项目由 li 包裹, li 和 ul/ol 都是块级元素, 你可以在块内进一步增加布局, 理论上你也可以在 li 中进一步嵌套列表, 比如下面这个例子:

<ul>
    <li>
        <h1>标题</h1>
        <p>内容</p>
    </li>
</ul>

重点强调

通常, 诸如粗体斜体等都可以通过<span>与 CSS 样式实现, 但是 html 提供了一些文本意义上的内容帮助快速的完成重点强调工作:

  • <em> 一种斜体的强调
  • <strong> 一种加粗的强调
  • <i>  被用来传达传统上用斜体表达的意义:外国文字,分类名称,技术术语,一种思想……
  • <b>  被用来传达传统上用粗体表达的意义:关键字,产品名称,引导句……
  • <u>  被用来传达传统上用下划线表达的意义:专有名词,拼写错误……

链接 a

最基础的链接格式只需要包含 href, 你也可以声明 title:

<a href="https://www.mozilla.org/zh-CN/"
   title="了解 Mozilla 使命以及如何参与贡献的最佳站点。">Mozilla 主页</a>

当你想要让一个元素转化为超链接时, 需要让<a>包裹其他元素, 特别是在使用<img>的时候:

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

当指向的是需要下载的资源时, 可以通过 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>

可以通过 target 属性选择链接打开的方式

  • _self:当前页面加载。(默认)
  • _blank:通常在新标签页打开,但用户可以通过配置选择在新窗口打开
<a href="https://www.example.com/video-stream/" target="_blank">
    观看视频(将在新标签页中播放)
  </a>

统一资源定位符(URL)与路径(path)

  • 指向当前目录
<p>
  要联系某位工作人员,请访问我们的<a href="contacts.html">联系人页面</a>。
</p>

在没有指定特定的 URL 的情况下,大多数 web 服务器会默认访问加载  index.html  这类页面

  • 指向子目录
<p>请访问我的<a href="projects/index.html">项目主页</a>。</p>
  • 指向上级目录
<p>点击打开<a href="../pdfs/project-brief.pdf">项目简介</a>。</p>
  • 文档片段(文档内位置)
    要指向文档内位置, 需要先给目标元素分配 id, 后通过#id 访问
<p>
  要提供意见和建议,请将信件邮寄至
  <a href="contacts.html#Mailing_address">我们的地址</a>。
</p>

以上给出的都是相对 URL, 如果需要使用绝对路径则需要补充域名https://www.example.com/projects/index.html

图片 img

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton">

如果想要为图片添加说明文字, 使用语义容器<figure><figcaption>是更好的选择

<figure>
  <img src="https://raw.githubusercontent.com/mdn/dinosaur_small.jpg"
      alt="一只恐龙头部和躯干的骨架,它有一个巨大的头,长着锋利的牙齿。"
      width="400"
      height="341">
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

音视频 video, audio

一个典型的 video 是这样的:

<video src="rabbit320.webm" controls>
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
  • controls 使得使用者可以控制视频的播放
  • video 标签内的内容称为后备内容, 在 video 标签不兼容的时候显示

video 还有一些实用的属性

  • width  和  height
    你可以用属性控制视频的尺寸,也可以用  CSS  来控制视频尺寸。无论使用哪种方式,视频都会保持它原始的长宽比 — 也叫做纵横比。如果你设置的尺寸没有保持视频原始长宽比,那么视频边框将会拉伸,而未被视频内容填充的部分,将会显示默认的背景颜色。

  • autoplay
    这个属性会使音频和视频内容立即播放,即使页面的其他部分还没有加载完全。建议不要应用这个属性在你的网站上,因为用户们会比较反感自动播放的媒体文件。

  • loop
    这个属性可以让音频或者视频文件循环播放。同样不建议使用,除非有必要。

  • muted
    这个属性会导致媒体播放时,默认关闭声音。

  • poster
    这个属性指向了一个图像的 URL,这个图像会在视频播放前显示。通常用于粗略的预览或者广告。

  • preload
    这个属性被用来缓冲较大的文件,有 3 个值可选:

    • "none" :不缓冲
    • "auto" :页面加载后缓存媒体文件
    • "metadata" :仅缓冲文件的元数据

Iframe

<iframe src="//player.bilibili.com/player.html?aid=19390801&bvid=BV1bW411n7fY&cid=31621681&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
  • sandbox
    该属性需要在已经支持其他  <iframe>  功能(例如 IE 10 及更高版本)但稍微更现代的浏览器上才能工作,该属性可以提高安全性设置;我们将在下一节中更加详细地谈到。

始终使用  sandbox  属性来保证安全!

表格 td/tr

参考

web 入门 - 学习 Web 开发 | MDN (mozilla.org)

如果你有一些意见或建议, 欢迎评论! 你的意见对我很重要.
如果觉得有帮助的话, 麻烦点一点仓库的 star,感激不尽~