写在前面
随着前端学习的深入,逐渐发现自己的前端基础还不是特别的扎实,记录一下 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>
head
页面在浏览器加载后它的内容不会在浏览器中显示,它的作用是保存页面的一些元数据。
<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>
allowfullscreen
如果设置,<iframe>
则可以通过全屏 API 设置为全屏模式(稍微超出本文的范围)。frameborder
如果设置为 1,则会告诉浏览器在此框架和其他框架之间绘制边框,这是默认行为。0 删除边框。不推荐这样设置,因为在 CSS 中可以更好地实现相同的效果。border
: none;
[
src
](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe#attr-src
该属性与<video>
/ 元素表示文档中的图像。<img>
一样包含指向要嵌入文档的 URL 路径。
sandbox
该属性需要在已经支持其他<iframe>
功能(例如 IE 10 及更高版本)但稍微更现代的浏览器上才能工作,该属性可以提高安全性设置;我们将在下一节中更加详细地谈到。
始终使用
sandbox
属性来保证安全!
表格 td/tr
参考
web 入门 - 学习 Web 开发 | MDN (mozilla.org)
如果你有一些意见或建议, 欢迎评论! 你的意见对我很重要.
如果觉得有帮助的话, 麻烦点一点仓库的 star,感激不尽~