-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[html] 第2天 html的元素有哪些(包含H5)? #4
Comments
块级元素:
行内元素
去除的元素
为什么H5新元素都不记得?因为平常没有去使用! |
行内元素
块级元素
H5新增
|
行内元素:
块元素
H5新增元素
|
title caption table下的标题标签 |
BTW,语义化的标签有利于爬虫,seo,也对网站的accessible开发,比如ARIA很有帮助! |
行内元素:
块级元素
|
H5: canvas定义图形;audio定义声音 aside定义页面之外的内容 command定义命令按钮 nav定义导航链接 |
|
块级元素:
行内元素:
|
行内元素:span b i input button video radio a |
行内元素:
块级元素:
|
https://codepen.io/9lk/pen/oKgQjY
|
区块元素: 内联元素: h5元素: |
块元素: |
textarea 不是块级 |
div textarea table tbody tr td ul ol li dl dt dd h1-h6 |
pre code   canvas svg audio video |
行内元素: |
@hishuling 严格来说 tr 不能算是块级元素,因为在标准里是这么说的:
同样,按照标准的说法,块级别的元素的display属性只有'block', 'list-item', 和'table' |
块级元素: |
块状: |
块级元素: |
常用块级元素:
常用行内元素:
|
// 表单类 // 布局结构类(以下基本属于块级元素) // 媒体相关(以下基本属于内联元素) // h5语义化标签 // 功能类标签 // 其他不常用的标签 |
行内
块级
..记不全。。。 |
html |
块级元素: |
刚接触没多久,自己用HTML标签都是按照这套路来布局的,下面列举这些应该都是块级元素吧?
|
h1-h6 p ul li ol dl dt dd form table tbody tr th label a span img input textarea header footer main nav button section div br i strong |
Html 结构: body / head / header / footer / nav / main / section / aside |
|
块级元素 行内 |
span 行内 |
行内元素一个行内元素只占据它对应标签的边框所包含的空间 特点1.总是和相邻的行内元素在同一行上 常用:<a href="">通过它的 href属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL的超链接</a>
<select name="" id="">表示一个提供选项菜单的控件</select>
<span>短语内容的通用行内容器</span>
<strong>表示文本十分重要</strong>
<img src="" alt="" />将一份图像嵌入文档
<input type="text" />为基于Web的表单创建交互式控件,以便接受来自用户的数据
<label for="">表示用户界面中某个元素的说明</label>
<textarea name="" id="" cols="30" rows="10">表示一个多行纯文本编辑控件</textarea>
<button>表示一个可点击的按钮</button>
<br />在文本中生成一个换行(回车)符号
<script>"用于嵌入或引用可执行脚本"</script>
<b>用于吸引读者的注意到该元素的内容上(如果没有另加特别强调)</b>
<i>用于表现因某些原因需要区分普通文本的一系列文本</i>
<em>标记出需要用户着重阅读的内容</em>
<small>
使文本的字体变小一号
html5被重新定义为表示边注释和附属细则,包括版权和法律文本
</small>
<sub>定义了一个文本区域,比主要文本更低更小</sub>
<sup>定义了一个文本区域,比主要文本更高更小</sup> 其它:<abbr title="">用于代表缩写,并且可以通过可选的 title 属性提供完整的描述</abbr>
<cite>表示一个作品的引用,且必须包含作品的标题</cite>
<code>呈现一段计算机代码</code>
<dfn>标记了被定义的术语</dfn>
<kbd>用于表示用户输入,它将产生一个行内元素,以浏览器的默认monospace字体显示</kbd>
<samp>用于标识计算机程序输出,通常使用浏览器缺省的 monotype 字体(例如 LucidaConsole)</samp>
<var>表示数学表达式或编程上下文中的变量名称</var>
<bdo dir="">改写了文本的方向性, 使文本以不同的方向渲染呈现出来</bdo>
<map name="">与 area 标签一起使用来定义一个图像映射(一个可点击的链接区域)</map>
<object data="" type="">表示引入一个外部资源</object>
<q>表示一个封闭的并且是短的行内引用的文本</q> 已废弃:<big>使字体加大一号,最大不超过浏览器的最大字体</big>
<tt>产生一个内联元素,使用浏览器内置的 monotype 字体展示</tt>
<acronym title="">
允许作者明确地声明一个字符序列,,它们构成一个单词的首字母缩写或简略语
该元素已从HTML5中移除,不应再被使用。Web开发者应使用 <abbr> 元素.
</acronym> 块级元素块级元素占据其父元素(容器)的整个水平空间,垂直空间等于其内容高度 特点1.总是另起一行 常用:<div>一个通用型的流内容容器,在不使用CSS的情况下,其对内容或布局没有任何影响</div>
<p>表示文本的一个段落</p>
<form action="">表示文档中的一个区域,此区域包含交互控件,用于向 Web 服务器提交信息</form>
<table>表示表格数据 — 即通过二维数据表表示的信息</table>
<tfoot>定义了一组表格中各列的汇总行</tfoot>
<h1>–<h6>呈现了六个不同的级别的标题
<hr>表示段落级元素之间的主题转换
<ol>表示有序列表,通常渲染为一个带编号的列表</ol>
<ul>表示一个内可含多个元素的无序列表或项目符号列表</ul>
<dl>一个包含术语定义以及描述的列表,通常用于展示词汇表或者元数据 (键-值对列表)</dl>
<dt>用于在一个定义列表中声明一个术语</dt>
<dd>用来指明一个描述列表 dl 元素中一个术语的描述</dd>
<header>用于展示介绍性内容,通常包含一组介绍性的或是辅助导航的实用元素</header>
<section>表示一个包含在HTML文档中的独立部分</section>
<article>表示文档、页面、应用或网站中的独立结构</article>
<aside>表示一个和其余页面内容几乎无关的部分,其通常表现为侧边栏或者标注框</aside>
<footer>表示最近一个章节内容或者根节点(sectioning root)元素的页脚</footer>
<audio src="">用于在文档中嵌入音频内容</audio>
<video src="">用于在HTML或者XHTML文档中嵌入媒体播放器,用于支持文档内的视频播放</video>
<pre>表示预定义格式文本</pre>
<canvas>可被用来通过JavaScript(Canvas API 或 WebGL API)绘制图形及图形动画</canvas>
<blockquote>代表其中的文字是引用内容</blockquote> 其它:<address>表示其中的 HTML 提供了某个人或某个组织(等等)的联系信息</address>
<fieldset>用于对表单中的控制元素进行分组(也包括 label 元素)</fieldset>
<figure>代表一段独立的内容, 经常与说明(caption)figcaption 配合使用</figure>
<figcaption>与其相关联的图片的说明/标题,用于描述其父节点 figure 元素里的其他数据</figcaption>
<hgroup>代表文档章节所属的多级别的目录,它将多个<h1>至<h6>的子元素组装到一起</hgroup>
<noscript>定义脚本未被执行时的替代内容</noscript>
<output name="">表示计算或用户操作的结果</output> 行内块元素行内块元素综合了块元素和行内元素的不同特点 特点1.和相邻行内元素在同一行,但是之间会有空白缝隙 <img src="" alt="" />将一份图像嵌入文档
<input type="text" />为基于Web的表单创建交互式控件,以便接受来自用户的数据
<button>表示一个可点击的按钮</button>
<textarea name="" id="" cols="30" rows="10">表示一个多行纯文本编辑控件</textarea>
<select name="" id="">表示一个提供选项菜单的控件</select>
<td>定义了一个包含数据的表格单元格</td> 空元素一个空元素可能是 HTML,SVG,或者 MathML 里的一个不能存在子节点(例如内嵌的元素或者元素内的文本)的element 常用:<br />在文本中生成一个换行(回车)符号
<hr>表示段落级元素之间的主题转换
<img src="" alt="" />将一份图像嵌入文档
<input type="text" />为基于Web的表单创建交互式控件,以便接受来自用户的数据
<link rel="stylesheet" href="">规定了当前文档与外部资源的关系
<meta>表示那些不能由其它 HTML 元相关元素((base、link, script、style 或 title)之一表示的任何元数据信息 其它:<area shape="" coords="" href="" alt="">在图片上定义一个热点区域,可以关联一个超链接,仅在 map 元素内部使用
<base href=""> 指定用于一个文档中包含的所有相对 URL 的根 URL
<colgroup span="">用来定义表中的一组列表,存在span属性时为空元素
<col> 定义表格中的列,并用于定义所有公共单元格上的公共语义,它通常位于 colgroup 元素内
<embed src="" type="">将外部内容嵌入文档中的指定位置
<param name="" value="">为 object 元素定义参数
<source>为 picture, audio 或者 video 元素指定多个媒体资源
<track>被当作媒体元素audio和video的子元素来使用。它允许指定时序文本字幕(或者基于时间的数据),例如自动处理字幕
<wbr>一个文本中的位置,其中浏览器可以选择来换行,虽然它的换行规则可能不会在这里换行 已废弃:<keygen>为了方便生成密钥材料和提交作为 HTML form 的一部分的公钥.这种机制被用于设计基于 Web 的证书管理系统 |
header、footer、section、nav、article、menu、h1-h6、em、i、strong |
① 行内元素 |
行内元素:span a b img input button |
块级元素:
行内元素:
|
块级元素
行内元素
|
/================自己想到的======================= |
|
行内元素 块元素 行内块元素 |
行内元素 |
行内元素 块级元素 |
块级元素: |
行内元素 span、img 、input... |
行内元素: figcaption 标签定义figure元素的标题。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。 mark 主要用来在视觉上像用户呈现哪些需要突出的文字。标签的一个比较典型的应用就是在搜索结果中像用户高亮显示搜索关键词 meter 标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量范围,既可以在元素的文本中,也可以在min/max属性中定义 output 标签定义不同类型的输出,比如脚本的输出 progress 标签运行中的进程。可以使用标签来显示JavaScript中耗费时间的函数的进程 time 标签定义日期或时间或者两者 keygen 标签用于对网页或区段的标题进行组合 command 标签定义命令按钮,比如单选按钮、复选框或按钮 |
块: 行内: 脑中立马浮现的就是些常用的 |
#块级元素 #行内元素 #行内块元素 |
块级元素: |
块级元素: |
[html] 第2天 html的元素有哪些(包含H5)?区分出行内元素、块级元素、空元素并在后面简要标注下作用。如:
行内元素:
br - 换行
...
先不要百度,看看自己能写出多少。
The text was updated successfully, but these errors were encountered: