HTML学习记录

HTML的一些基础知识。

介绍

html全称为：超文本标记语言 (Hyper Text Markup Language, HTML)，是用于建立网页的标准标记语言，由成双成对的标签组合而成。

html 基本结构

<!DOCTYPE html>
<html>
  <head lang="语言">
   <meta charset="UTF-8"><!-- 设置编码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 设置设备缩放比例 -->
    <link rel="shortcut icon" href="url..." ><!-- 网页图标（logo） -->
    <title>网页标题</title>
  </head>
  <body>
  ...Content...
  HTML5新增语义元素
  <header>...</header>
  <nav>...</nav>
  <section>...</section>
  <article>...</article>
  <aside>...</aside>
  <footer>...</footer>
  </body>
</html>

常用代码与标签

常用标签

自己找吧懒得写了嘻嘻

粗体和斜体

一般我们粗体和斜体使用的都是<b>和<i>，但是如果是强调作用的话，我们一般推荐使用<strong>和<em>，他们更有利于SEO。

实体符号

HTML语义元素 & 媒体元素

语义元素	描述
`<header>`	定义文档或节的页眉
`<nav>`	定义文档内的导航连结
`<article>`	定义文档内的文章
`<section>`	定义文档中的节
`<aside>`	定义页面内容之外的内容
`<footer>`	定义文档或节的页脚
`<main>`	定义文档的主内容
`<mark>`	定义重要或强调的内容
`<bdi>`	定义与其他文本不同的文本方向
`<details>`	定义用户可查看或隐藏的额外细节
`<summary>`	定义 `<details>` 元素的可见标题
`<dialog>`	定义对话方块或窗口
`<figure>`	定义自包含内容，如图示、图表、照片、代码清单等
`<figcaption>`	定义 `<figure>` 元素的标题
`<menuitem>`	定义使用者能够从弹出功能表的命令/功能表项目
`<meter>`	定义已知范围（尺度）内的标量测量
`<progress>`	定义任务进度
`<rp>`	定义在不支持 ruby 注释的浏览器中显示什么
`<rt>`	定义关于字符的解释/发音（用于东亚字体）
`<ruby>`	定义 ruby 注释（用于东亚字体）
`<time>`	定义日期/时间
`<wbr>`	定义可能的折行（line-break）
媒体元素	描述
`<audio>`	定义声音或音乐内容
`<embed>`	定义外部应用程序的容器（比如外挂程序、SVG等），单标签。ps：使用SVG图片时，可能会失焦，若要设置点击事件可设置css[pointer-events: none;]，然后给其父元素设置click。
`<source>`	定义 `<video>` 和 `<audio>` 的来源
`<track>`	定义 `<video>` 和 `<audio>` 的轨道
`<video>`	定义视频或影片内容

HTML5 新特性

HTML5 新增了语义元素、新增一些Input类型、表单元素与表单属性

HTML5 Web Workers

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。Web Workers 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 Web Workers 在后台运行。（相当于实现多线程并发）

HTML5 SSE

Server-Sent 事件指的是网页自动获取来自服务器的更新。以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

HTML5 离线Web应用（应用程序缓存）

HTML5 newAPI

Canvas
Drop & Drag Event
Touch Event
Geolocation
WebSocket
Video & Audio
Local Storage & Session Storage
Cache
Notification

补充

html使用SVG的另一种方式Object

1
2
3

<object type="image/svg xml" data="./test.svg" style="...">
    <param name="src" value="./test.svg" >
</object>

关于html头部语言

zh-CN其实已经算弃用了
简体中文页面：html lang = zh-cmn-Hans
繁体中文页面：html lang = zh-cmn-Hant
英语页面：html lang = en

还有需要加地区代码的情况(一般比较少，除非为了强调不同地区汉语使用差异。)比如：

<p lang="zh-cmn-Hans">
  <b lang="zh-cmn-Hans-CN">菠萝</b>
  <b lang="zh-cmn-Hant-TW">梨</b>
  其实是同一种水果。
  只是大陆和台湾称谓不同，且新马一带的称谓也是不同的，称之为黄梨。
  <b lang="zh-cmn-Hans-SG">黄梨</b>。
</p>

当然，由于历史原因，有时候不得不继续使用zh-CN。比如中文维基百科，沿用了传统的zh-CN/zh-HK/zh-SG/zh-TW（按照标准应该使用 zh-cmn-Hans-CN、zh-cmn-Hant-HK、zh-cmn-Hans-SG、zh-cmn-Hant-TW）。这时候，合理的软件行为，是将 zh-CN 等转化为 zh-cmn-Hans（即转化为最常见的误用所对应的实际标准写法）。
实际上，各相关标准，也存在一定的滞后，见仁见智咯。