简介
HTML (Hypertext Mark Language)，一种标记语言，使文章结构转化为逻辑块，达到功能的组合。
学习笔记
- HTML标签不区分大小写
- 元素的主要部分包含L: 开始标签（Opening tag），内容（Content），结束标签（Closing tag) PS：空元素只有一个标签
- 两种元素类别：块级元素和内联元素
- 元素也可以拥有属性（Attribute），属性包含：
- 一个空格在元素名称和属性之间，多个属性间必须由空格隔开
- 属性名称，后面跟着一个等于号
- 属性值，后面由一对引号引起来
- 一些属性：
href: 声明超链接的web地址title: 属性为超链接声明额外的信息，比如你将链接至的那个页面。当鼠标悬停在超链接上面时，这部分信息将以工具提示的形式显示。target: 指定链接如何呈现出来。 - 布尔属性：只能有一个值，一般与属性名称相同
- 最短的有效文档声明：
<!doctype html>
HTML头部
<head>元素里的内容，内容不在浏览器内显示，保存页面的一些元数据- 元数据
<meta>元素，描述数据的数据
<meta> 元素
- name 属性：指定
<meta>元素的类型；说明该元素包含了什么类型的信息 - content 类型：指定实际的元数据内容
页面添加网页图标
- 使用 .ico / .gif / .png 等格式保存
在 HTML 中应用 CSS 和 Javascript
<link>元素添加 CSS,<script>元素添加 Javascript，一般都放于头部<link>元素有两个属性： rel="stylesheet" 表明这是文档的样式表，href 包含了样式表文件的路径<script>元素包含 src 属性来指向需要加载的 Javascript 文件路径，同时最好加上 defer 来告诉浏览器在解析完成 HTML 后再加载 Javascript，确保在加载脚本前浏览器已经解析了所有的HTML内容。<script>元素看起来像空元素，其实需要结束标记，还可以选择将脚本直接放入<script>元素中
文本处理基础
- 标题：
<h1>~<h6>段落：<p> - 无序标记：
<ul> <li></li> </ul>有序标记：<ol> <li></li> </ol>可嵌套 - 默认斜体：
<em> </em>粗体：<strong> </strong>默认下划线：<mark> </mark>
超链接
- 将内容包含在
<a>元素内，并给它一个网址的<href>属性来创造一个基本链接 - 任何块级元素都可以作为链接
- 使用
<img>元素来引用图片，<title>添加链接补充信息
统一资源定位符(Uniform Resource Locator, URL) 和 路径(path)
- 统一资源定位符是一个定义了在网络上的位置的一个文本字符串, URL 使用路径查找文件
- 若指向当前文件的同一个目录，只需要指定文件名
- 若指向子目录，只需先进入项目目录路径，如-projects/index.html-
- 若指向上级目录，则使用
..进行返回上一个目录级，如-../pdfs/project-brief.pdf-
创建一个导航菜单
- 当你链接到要下载的资源而不是在浏览器中打开时，你可以使用
download属性来提供一个默认的保存文件名 - 当点击一个链接或按钮时，可能会开启新的邮件的发送而不是连接到一个资源或页面。这种场景可以使用
<a>元素和mailto: URL 协议实现
文本处理技巧
- 描述列表
<dl>
<dt>对象</dt>
<dd>描述1</dd>
<dd>描述2</dd>
...
</dl>
引用
- 块引用：如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用
<blockquote>元素包裹起来表示，并且在cite属性里用 URL 来指向引用的资源 - 行内引用：使用
<q>元素 - 略缩语：使用
<abbr>元素 加title=属性,如<abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr> - 联系方式：使用
<address>元素 - 上标和下标：分别是
<sup>和<sub>
标记代码
-
<code>：标记计算机通用代码 -
<pre>：用于保留空白字符，通常用于代码块 -
<var>: 用于标记变量名 -
<kbd>: 用于标记输入 -
<samp>: 用于标记输出 -
<time>元素加datetime属性标记时间和日期
文档与网站架构
- 文档的基本组成部分：页眉(
<header>)、导航栏(<nav>)、主内容(<main>包含各种子段<article>、<section>、<div>)、侧边栏(<aside>，常嵌套在<main>中)、页脚（<footer>）
布局元素细节
<main>存放每个页面独有的内容。每个页面上只能用一次<main>，且直接位于<body>中。最好不要把它嵌套进其他元素。<article>包围的内容即一篇文章，与页面其他部分无关（比如一篇博文）。<section>与<article>类似，但<section>更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以 标题 作为开头；也可以把一篇<article>分成若干部分并分别置于不同的<section>中，也可以把一个区段<section>分成若干部分并分别置于不同的<article>中，取决于上下文。<aside>包含一些间接信息（术语条目、作者简介、相关链接，等等）。<header>是简介形式的内容。如果它是<body>的子元素，那么就是网站的全局页眉。如果p它是<article>或<section>的子元素，那么它是这些部分特有的页眉<nav>包含页面主导航功能。其中不应包含二级链接等内容。<footer>包含了页面的页脚部分。
无语义元素
<span>是一个内联（inline）的无语义元素，<div>是一个块级无语义元素，配合<class>属性提供一些标签使元素易于查询
多媒体与嵌入
图片
- `
- 设置
<alt="" />当图片无法显示的时候对图片进行文字描述 width="" heigh=""设置图片的宽度和高度title=""设置图片标题- 用 HTML5 的
<figure>元素 +<figcaption>描述图片
视频和音频
<video>元素，加入src属性和控制播放器controls- 设置
type使视频属性能够播放 loop:设置循环muted:默认静音poster:安置广告preload:设置缓冲加载- 音频
<audio>元素与视频基本类似
嵌入
<iframe>设置嵌入其他 Web
allowfullscreen设置克通过全屏API设置为全屏模式frameboder1/0:是否在框架之间绘制边框- *sandbox属性
<embed>和<object>
- 用来嵌入多种类型的外部内容的通用嵌入工具
| ||
添加矢量图形
SVG
- SVG 是用于描述矢量图像的 XML 语言
- 1.可用
<img>快速引用 SVG 2.也可直接在 HTML 中内联 3.可用<iframe>嵌入 SVG 文档
HTML 表格
<table>元素创建表格- 最小的内容容器使单元格，通过
<td>（table data）元素创建，单元格会自动在同一排内对齐 <tr>(table row) 元素是一个表格行<th>(table header) 元素创建表格标题colspan和rowspan属性分别设置表格的宽度和高度- 利用
<colgroup>和<col>元素，设定<span>值来对特定列进行直接编辑
高级特性
<caption>增加标题<thead><tbody><tfoot>分别标记表头、表体和表尾- 如果你使用了
<col>/<colgroup>元素，那么<thead>元素就需要放在它们的下面。 scope属性添加在<th>告诉屏幕阅读器是所在行的表头还是列的表头