div标签、em标签、footer标签、figcaption标签

文献种类：专题技术文献；

               <div>标签、<em>标签、<footer>标签、<figcaption>标签

开发工具与关键技术：VS/HTML
作者：吴泽锋
撰写时间：2019年6月18日

4、<div> 定义文档中的节或区域；定义：<div> 可定义文档中的分区或节（division/section）。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。用法：<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。HTML 与 XHTML 之间的差异：在 HTML 4.01 中，div 元素的 "align" 属性不被赞成使用。在 XHTML 1.0 Strict DTD 中，div 元素的 "align" 属性不被支持。注释：<div>是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。提示：请使用 <div> 元素来组合块级元素，这样就可以使用样式对它们进行格式化。例：  <h1>News Website</h1>  <p>some text...</p>  ...<div class="news"> <h2>News headline 1</h2> <p> some text...</p>  ... </div>   ...

上面这段 HTML 模拟了新闻网站的结构。其中的每个 div 把每条新闻的标题和摘要组合在一起，
也就是说，div 为文档添加了额外的结构。同时，这些 div 属于同一类元素，
所以可以使用 class="news" 对这些 div 进行标识，这么做不仅为 div 添加了语义，
而且便于进一步使用样式对 div 进行格式化，可谓一举两得。可选择的属性：align
描述：不赞成使用。请使用样式代之。规定 div 元素中的内容的水平对齐方式。CSS 语法：<div style="text-align:center">值：描述：
left：左对齐内容。
right：右对齐内容。
center：居中对齐内容。
justify：对行进行伸展，这样每行都库有相等的长度(就像在报纸和杂志中)。例：文档中的一个部分居中对齐：<p>这是一个段落。没有规定对齐方式。</p><div align="center" style="border:1px solid red">这是 div 元素中的文本！</div><p>这是一个段落。没有规定对齐方式。</p>

5、em标签：把文本定义为强调的内容。<em></em>添加文本，显示斜体的文本效果。在文本中加入强调也需要有技巧。如果强调太多，有些重要的短语就会被漏掉；如果强调太少，就无法真正突出重要的部分。这与调味品一样，最好还是不要滥用强调。提示：如果只想使用斜体字来显示文本的话，请使用 <i> 标签。6、<footer>标签：定义文档或节的页脚。注释：Internet Explorer 8 以及更早的版本不支持 <footer>标签；footer元素表示最近的上级分区内容或分区根元素的脚注，即页脚的注释，应当含有其包含元素的信息。脚注通常包含与其所在部分相关的信息，例如编写者、指向相关文档的链接、版权数据、联系信息等；开发者可以在一个文档中使用多个 <footer> 元素。提示：<footer> 元素内的联系信息应该位于 <address> 标签中，也可以单独使用，一般放置于页面的最后。6、<figcaption> 标签：定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。可不在figure元素里面;注释：Internet Explorer 8 以及更早的版本不支持 <figcaption> 标签。例：用作文档中插图的图像，带有一个标题：<img src="~/Content/image/0.jpg" /><img src="~/Content/image/0.jpg" /><p>figcaption 标签下面的图片数量在两张以上时将会增加一定的间距</p><figcaption>唐玄奘*1</figcaption><img src="~/Content/image/0.jpg" /><figcaption>唐玄奘*2</figcaption><img src="~/Content/image/0.jpg" /><img src="~/Content/image/0.jpg" /><figcaption>唐玄奘*3</figcaption><img src="~/Content/image/0.jpg" /><img src="~/Content/image/0.jpg" /><img src="~/Content/image/0.jpg" />

借鉴于W3CSchool文档；

div标签、em标签、footer标签、figcaption标签相关推荐

html5标签详解,HTML5中figcaption标签用法详解
HTML5中figure和figcaption标签一般都是配套使用的,先了解下两者的基本定义,然后结合实例来说明两者的用法. 标签规定独立的流内容(图像.图表.照片.代码等等). figure元素的内 ...
java中标签内容居中显示_图形标签中图像上的figcaption标签的居中和对齐宽度
我花了两天时间试图解决无花果/无花果问题无济于事 . 我有一个Django应用程序,用户可以在其中提交图像,我正在使用图形和figcaption标签来显示带有附带 Headers 的图像 . 主要问题 ...
HTML figcaption 标签
实例用作文档中插图的图像,带有一个标题:: <figure> <figcaption>黄浦江上的的卢浦大桥</figcaption> <img src=&q ...
css小tips -- figcaption标签
今天看到了figcaption标签: <div class="col-md-4"><figure class="single bg">& ...
js父元素获取子元素img_css,前端_父标签div中包含一个子元素img标签，子元素div标签，为什么img要加上浮动，子元素div才会处于正常位置？，css,前端 - phpStudy...
父标签div中包含一个子元素img标签,子元素div标签,为什么img要加上浮动,子元素div才会处于正常位置? dom结构如图img加上float 子元素div显示正常. 不加float div显 ...
关于MUI框架中，“侧滑导航“之“div模式下拉菜单“的a标签（超链接）的失效问题？
关于MUI框架中,"侧滑导航"之"div模式下拉菜单"的a标签(超链接)的失效问题? 截图和讲解图片的顺序如下所示: 图1 图2 · 官方的截图图3 · 官方 ...
完美解决header,footer等HTML5标签在IE(IE6/IE7/IE8)无效的方法
完美解决header,footer等HTML5标签在IE(IE6/IE7/IE8)无效的方法参考文章: (1)完美解决header,footer等HTML5标签在IE(IE6/IE7/IE8)无效的 ...
figcaption标签css,[HTML]正确使用Figure和Figcaption标签（译）_html/css_WEB-ITnose
原文: Quick Tip: The Right Way to Use Figure & Figcaption Elements figure和 figcaption元素通常作为两个语义化的标 ...
HTML figure 标签 figcaption 标签
HTML <figure> 标签实例用作文档中插图的图像: <figure><p>黄浦江上的的卢浦大桥</p><p>拍摄者:W3Scho ...

div标签、em标签、footer标签、figcaption标签

div标签、em标签、footer标签、figcaption标签相关推荐

最新文章

热门文章