HTML · Golang/Python/Linux/前端

[TOC] ## 1.基本格式 ### 1.1.文档结构 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documet</title> </head> <body> </body> </html> ``` ### 1.2.文档结构解析 1. `Doctype`文档类型声明（Document Type Declaration，也称Doctype）。 ``` <!DOCTYPE html> //不区分大小写 ``` 2. `html`元素就是标签的意思。包含开始标签和结束标签。 ``` <html lang="en"> // 如果是中文则为zh-cn </html> ``` 3. `head`包含元数据内容，包括`<link>`、`<meta>`、`<noscript>`、`<script>`、`<style>`、`<title>`，这些是向浏览器提供信息。 4. `meta`用来提供关于文档的信息。`charset="utf8"`，表示告诉浏览器采用什么编码。 5. `title`设置浏览器左上角的标题。 ``` <title>标题</title> ``` 6. `body`用来包含文档内容的元素 ## 2.文本元素 | 元素名称 | 说明 | | --- | --- | | a | 超链接 | | br | 强制换行 | | wbr | 可安全换行 | | b | 标记一段文字但不强调 | | strong | 表示重要 | | i | 表示外文或科学术语 | | em | 表示强调 | | code | 表示计算机代码 | | var | 表示程序输出 | | samp | 表示变量 | | kbd | 表示用户输入 | | abbr | 表示缩写 | | cite | 表示其他作品的标题 | | del | 表示被删除的文字 | | s | 表示文字已不再确认 | | dfn | 表示术语定义 | | mark| 表示与另一段上下文有关的内容 | | q | 表示引自他处的内容 | | rp | 与ruby元素结合使用，标记括号 | | rt | 与ruby元素结合使用，标记括号 | | tuby | 表示位于表意文字上方或右方的注音符号 | | bdo | 控制文字的方向 | | small | 表示小号字体内容 | | sub | 表示下标字体 | | sup | 表示上标字体 | | time | 表示时间或日期 | | u | 标记一段文字但不强调 | | span | 通用元素，没有任何语义。一般配合 CSS 修饰。 | ## 3.超链接和路径 ### 3.1.超链接的属性 | 属性名称 | 说明 | | --- | --- | | href | 指定元素所指资源的 URL | | hreflang | 指向的链接资源所使用的语言 | | media | 说明所链接资源用于哪种设备 | | rel |说明文档与所链接资源的关系类型 | | target | 指定用以打开所链接资源的浏览环境 | | type | 说明所链接资源的 MIME 类型（比如 text/html） | #### target属性 target属性告诉浏览器希望将所链接的资源显示在哪里。 | 属性名称 | 说明 | | --- | --- | | _blank | 在新窗口或标签页中打开文档 | | _parent | 在父窗框组（frameset）中打开文档 | | _self | 在当前窗口打开文档（默认） | | _top | 在顶层窗口打开文档 | ### 3.2.相对路径和绝对路径绝对路径就是从盘符开始的完整路径。相对路径就是相对当前路径所在的路径。 ## 4.分组元素分组元素为了页面的排版需要。 | 元素名称 | 说明 | | --- | --- | | p | 表示段落 | | div | 一个没有任何语义的通用元素，和 span 是对应元素 | | blockquote | 表示引自他处的大段内容 | | pre | 表示其格式应被保留的内容 | | hr | 表示段落级别的主题转换，即水平线 | | ul,ol | 表示无序列表，有序列表 | | li | 用于 ul,ol 元素中的列表项 | |dl,dt,dd | 表示包含一系列术语和定义说明的列表。dt 在 dl 内部表示术语，一般充当标题；dd 在 dl 内部表示定义，一般是内容。 | | figure | 表示图片 | | figcaption | 表示 figure 元素的标题 | ## 5.表格元素表格的基本构成最少需要三个元素：`<table>`、`<tr>`、`<td>`，其他的一些作为可选辅助存在。 | 元素说明 | 名称 | | --- | --- | | table | 表示表格 | | thead | 表示标题行 | | tbody | 表示表格主体 | | tfoot | 表示表脚 | | tr | 表示一行单元格 | | th | 表示标题行单元格 | | td | 表示单元格 | | col | 表示一列 | | colgroup | 表示一组列 | | caption | 表示表格标题 | ## 6.文档元素文档元素的主要作用是划分各个不同的内容，让整个布局清晰明快。让整个布局元素具有语义，进一步替代 div。 | 元素说明 | 名称 | | --- | --- | | h1~h6 |表示标题 | | header | 表示首部 | | footer | 表示尾部 | | nav | 表示有意集中在一起的导航元素 | | section | 表示重要概念或主题 | | article | 表示一段独立的内容 | | address | 表示文档或 article 的联系信息 | | aside| 表示与周边内容少有牵涉的内容 | | hgroup | 将一组标题组织在一起 | | details | 生成一个区域，用户将其展开可以获得更多细节 | | summary | 用在 details 元素中，表示该元素内容的标题或说明 |