前端开发学习笔记(1) – HTML5基础

MDN文档-HTML:

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。

“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。

HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML 标记包含一些特殊“元素”如 <head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video> 等等等等。

HTML 元素通过“标签”（tag）将文本从文档中引出，标签由在“<”和“>”中包裹的元素名组成，HTML 标签里的元素名不区分大小写。也就是说，它们可以用大写，小写或混合形式书写。例如，<title> 标签可以写成 <Title>，<TITLE> 或以任何其他方式。

HTML5 基本结构

<!DOCTYPE html>
<html>

<head>
    <!-- (这是注释) -->
    <!-- head 元素 规定文档相关的配置信息（元数据) -->
    <!-- 包括文档的标题，引用的文档样式和脚本等 -->
    <title>文档标题</title>
</head>

<body>
    <!-- body 元素表示文档的内容 -->
</body>

</html>

常用标签

`<title></title>`

HTML <title> 元素定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略

`<h1></h1>`: HTML 区域标题元素(heading)

HTML <h1>-<h6> 标题(Heading)元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。

注意事项:

不要为了减小标题的字体而使用低级别的标题，而是使用 CSS font-size 属性
避免跳过某级标题：始终要从 <h1> 开始，接下来依次使用 <h2> 等等

`<p></p>`: 段落(paragraph)

HTML <p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p> 是块级元素

`<img>`: 图片(image)

HTML <img> 元素将一份图像嵌入文档。

示例:

<img src="logo.jpg" alt="The HTML5 logo">

常用属性:

src 属性是必须的，它包含了你想嵌入的图片的文件路径。
alt 属性(非强制性)包含一条对图像的文本描述——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。当网络错误、内容被屏蔽或链接过期时无法加载图像，普通浏览器也会在页面上显示alt属性中的备用文本。

还有很多其他属性，可以实现各种不同的目的：

Referrer/CORS 控制，保证安全与隐私
使用 width、height 和 intrinsicsize 设置原始分辨率
使用 sizes 和 srcset 设置响应式图像

详见 MDN文档-图像嵌入元素

`<a></a>`: 锚元素(anchor)

HTML <a> 元素（或称锚元素）可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。

示例:

<a href="https://example.com">Example Website</a>

效果: Example Website

常用属性:

href: 包含超链接指向的 URL 或 URL 片段 (URL 片段是以 # 开头的标识符, 如使用 href="#top" 返回页面顶部)
target: 该属性指定在何处显示链接的资源
- _self: 当前页面加载
- _blank: 新窗口打开
- _parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文，此选项的行为方式与 _self 相同
- _top: IHTML4中：加载的响应成完整的，原来的窗口，取消所有其它frame。 HTML5中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self
download: 此属性指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件
rel: 该属性指定了目标对象到链接对象的关系，详见 MDN文档-链接类型

`<br>`: 换行(break)

HTML <br> 元素在文本中生成一个换行（回车）符号。

浏览器只会在块级元素间生成换行符，而文本中通常的换行符会被无视，这时就需要使用<br>来实现换行。

`<strong></strong>`

Strong 元素表示文本十分重要，一般用粗体显示。

e.g. “Warning! This is very dangerous.“)

`<em></em>`: 着重元素(emphasis)

HTML 着重元素 (<em>) 标记出需要用户着重阅读的内容，<em>元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。<em>元素通常以斜体显示。

与<strong>不同，<em>通常影响句子的语义，如 (“I love carrots” vs. “I love carrots“)

常用字符实体(Entity)

HTML 中的预留字符必须被替换为字符实体。(如 <, &, “)

字符	实体	说明
(空格)	` `	解析为空格
&	`&`	解析为实体或字符引用的开头
<	`<`	解析为 tag 的开头
>	`>`	解析为 tag 的结尾
“	`"`	解析为 attribute 的值的开头和结尾

字符实体的官方列表