由于好久没有写web了，今天把html所有的元素给过了一遍，并做下记录。
根元素
<html></html>文档元数据
<base href="img/img/" > 设置URL地址
<head></head> 规定文档相关的配置信息（元数据）
<link> HTML外部资源链接元素./设置CSS_link/设置web_icon/..参看mdn
<meta> 元素表示那些不能由其它HTML元相关元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元数据信息.
<style><style> 媒体查询/
<title></title>
分区根元素
<body></body> document.body/很多事件内容分区
<address></address> 提供了某个人或某个组织（等等）的联系信息。嵌套子元素需要注意
<article></article> 文章
<aside></aside>
<footer></footer>
<header></header>
<h1~6><h1~6>
<main></main> IE不支持
<nav></nanv> 导航栏目
<section></section> 表示一个独立的部分
文本内容
<blockquote></blockquote> 块级引用 通常会带有缩进
<cite></cite> 引用.到元数据具体的地址.
<dl> definition list
<dt></dt> definition
<dd></dd>
</dl>
<figure>标签经常是在主文中引用的图片，插图，表格，代码段等等.当这部分转移到附录中或者其他页面时不会影响到主体。
<figcaption></figcaption> # 具体描述
</figure>
<div></div> # divison 无语义.文档区分元素
<hr></hr> #水平分割线
<ul> # unordered lists
<li></li> #list
</ul>
<ol> # order lists
<li></li> # list
<ol>
<p></p> # paragraph
<pre></pre> # 预定义.不丢失文本排序格式.内联文本语义
<a link=""> </a>
- a标签中不可嵌套a.根据对称的逻辑原理，如果 <a> 标记作为父元素，不能具有交互内容，则相同的 <a> 内容不能具有 <a> 标记作为其父元素
- 无障碍建议:"#" 或 "javascript:void(0)" 来创造一个能阻止页面刷新的伪按钮的方式被滥用。也会向辅助技术（如屏幕阅读器）传达不正确的语义.建议使用<button></button>代替
- 如何使用button代替
<abbr title="Cascading Style Sheets">CSS</abbr> # 缩写,title显示详细信息
<b></b> 吸引用户,加重显示.(不推荐使用)
<bdi></bdi> 双向隔离元素. 部分浏览器不支持该标签,不建议使用
<bdo></bdo> 双向覆盖元素.
- <bdo dir="rtl">1234</bdo> right_to-left 中文古书的写法
- <bdo dir="ltr">1234</bdo> left_to_right
<br> 在文本中生成一个换行(回车)符号
- 但不要用<br>来增加文本间隔
<code></code> 显示一段代码
<data><data> 部分浏览器不支持,不推荐使用
<dfn></dfn> 表示术语的一个定义,不推荐使用.
<em></em> 需要强调的文本
<i></i>
- 用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示.
- 该元素只在没有更适合的语义元素表示时使用。例如：
- 使用 <em> 表示强调或重读。
- 使用 <strong> 表示重要性。
- 使用 <mark> 表示相关性。
- 使用 <cite> 标记著作名，如一本书、剧本或是一首歌。
- 使用 <dfn> 标记术语的定义实例。
<kbd>Ctrl</kbd> + <kbd>S</kbd>
- 键盘输入元素,以浏览器的默认monospace字体显示文本.显示文本样式与cmd类似
<mark></mark> 突出部分文本显示
<q></q> 行内引用较短文本
<rb></rb> <rb>是文字,<rt>是注音
<ruby>
<rb>漢</rb>
<rt>han</rt>
<rb>字</rb>
<rt>han</rt>
</ruby>
<s></s> 用删除线表示不再相关的事情. 不推荐使用
<samp></samp> 语义化标签,用于表示计算机的输出
<small><small> 使得字体变小一号.可用于版权或者法律文本
<span></span> span标签上短语内的通用行内容器,没有语义.
<strong></strong> 表示此标签的文本十分重要,一般用粗体进行显示
<sub></sub> 与主要文本进行相比,更低更小.
- <p>The chemical formula of water: H<sub>2</sub>O</p>
<sup></sup> 与<sub></sub>相同.不同的是sup更高点.
<u></u> underline 下划线
<var></var> 定义变量.但是不知道在什么场景下使用它.
<wbr></wbr> 对中文没效果.. 图片和对媒体
<area></area>
- 仅在map下可用..定义一个热点区域,可关联一个超链接
<audio></audio> 音频
<img></img> 图片
<track></track>
- 处理字幕
<video><video> 视频
内嵌内容
<iframe></iframe> 嵌入另一个html文件
<object></object> 嵌入一个对象
<param></param>标签为包含它的<object>标签提供参数。
<picture></picture>
- html5新元素,响应式处理图片
<picture>
<source srcset="/media/examples/surfer-240-200.jpg"
media="(min-width: 800px)">
<img src="/media/examples/painted-hand-298-332.jpg" />
</picture>
<source><source>
- 为 <picture>, <audio> 或者 <video> 元素指定多个媒体资源。这是一个空元素脚本
<canvas></canvas> # 画布
<noscript></noscript> # js未被支持时,会执行noscript的替代内容.
- <noscript>执行脚本未被执行,会执行这个里面的内容(HTML)</noscript>
<script></script> 嵌入脚本# 编辑标识 元素中内容表示从文档中删除的内容
元素中内容表示添加的内容
表格内容
<table></table> # 创建一个二维表
<caption></caption> # 文章标题
<tr></tr>创建一行
<th></th>创建一格头标题
<td></td>创建一格
<thead></thead>表格头部
<tbody></tbody>表格身子
<tfoot></tfoot>表格底部
<colgroup></colgroup> 对表格全部应用样式
<col> 第一列.这样修改样式是十分快捷的# 代码示例
<table>
<caption>helloworld</caption>
<colgroup >
<col style="background:pink;width: 200px;">
<col style="background:red;width: 200px;">
</colgroup>
<thead>
<tr>
<th>table_head_one</th>
<th>table_head_two</th>
</tr>
</thead>
<tbody>
<tr>
<td>one_one</td>
<td>one_one</td>
</tr>
<tr>
<td>two_one</td>
<td>two_two</td>
</tr>
</tbody>
<tfoot style="border: 2px solid #000000;">
<tr>
<td>three_one</td>
<td>three_one</td>
</tr>
<tr>
<td>three_one</td>
<td>three_two</td>
</tr>
</tfoot>
</table>表单元素
<from></from> 囊含交互组件,向服务器提交信息
<input> 提交信息
<datalist></datalist> 包含一组option可选值
<label></label> 关联控件
<meter><metter> 百分比流动图
<option></option> 为输入输入选项
<optgroup></optgroup> 为<option>分类
<textarea></textarea> 多行输入文本控件
<select></select> 提供一个选项控件
<fieldset> 对控件进行分组美化
<legend>注册</legend> 父元素fieldset的标题
</fieldset>
<button></button> 实现一个按钮
<output><output> 输出计算结果
<progress></progress> 显示进度,与meter类似
4589
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
