2. 大前端
  3. HTML中标签元素三种不同类型

HTML中标签元素三种不同类型 HTML

shuke 2017-7-3 2196

HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

常用的块状元素：<div> <p> <h1>.....<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>

常用的行内元素：<a> <span> <br> <i> <em> <strong> <label> <q> <cite> <code> <var>

常用的行内块状元素：<img> <input>


块级元素特点：display:block;

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。


行内元素特点：display:inline;

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。


行内块状元素的特点：display:inline-block;

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。


最新回复 (2)
全部楼主
  • shuke 2017-7-3
    2 楼 
    一、标签分类
1、文档标签(10 个)：<html>、<head>、<body>、<title>、<meta>、<base>、
<style>、<link>、<script>、<noscript>
2、框架标签(4 个)：<frame>、<frameset>、<iframe>、<noframes>
3、布局标签(2 个)：<div> <span>
4、表格标签(10 个)：<table>、<thead>、<tbody>、<tfoot>、<tr>、<td>、<th>、
<col>、<colgroup>、<caption>
5、表单标签(10 个)：<form>、<input>、<textarea>、<button>、<select>、
<optgroup>、<option>、<label>、<fieldset>、<legend>
6、列表标签(6 个)：<ul>、<ol>、<li>、<dl>、<dt>、<dd>
7、链接标签(1 个)：<a>
8、多媒体标签(5 个)：<img>、<map>、<area>、<object>、<param>
9、文章标签：<h1> - <h6> 、<p>、<br>、<bdo>、<pre>、<acronym>、
<abbr>、<blockquote>、<q>、<ins>、<del>、<address>
10、字体样式标签：<tt>、<i>、<b>、<big>、<small>、<em>、<strong>、<dfn>、
<code>、<samp>、<kbd>、<var>、<cite>、<sup>、<sub>
11、特殊标签(4 个)：<!DOCTYPE>、<!-- -->、<hr />,<br />

    # 块元素(block element) HTML标签分类明细

        * address - 地址

        * blockquote - 块引用

        * center - 举中对齐块

        * dir - 目录列表

        * div - 常用块级容易，也是css layout的主要标签

        * dl - 定义列表

        * fieldset - form控制组

        * form - 交互表单 （只能用来容纳其它块元素）

        * h1 - 大标题

        * h2 - 副标题

        * h3 - 3级标题

        * h4 - 4级标题

        * h5 - 5级标题

        * h6 - 6级标题

        * hr - 水平分隔线

        * menu - 菜单列表

        * noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容

        * noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）

        * ol - 排序表单

        * p - 段落

        * pre - 格式化文本

        * table - 表格

        * ul - 非排序列表

    # 内联元素(inline element) HTML标签分类明细

        * a - 锚点

        * abbr - 缩写

        * acronym - 首字

        * b - 粗体(不推荐)

        * bdo - bidi override

        * big - 大字体

        * br - 换行

        * cite - 引用

        * code - 计算机代码(在引用源码的时候需要)

        * dfn - 定义字段

        * em - 强调

        * font - 字体设定(不推荐)

        * i - 斜体

        * img - 图片

        * input - 输入框

        * kbd - 定义键盘文本

        * label - 表格标签

        * q - 短引用

        * s - 中划线(不推荐)

        * samp - 定义范例计算机代码

        * select - 项目选择

        * small - 小字体文本

        * span - 常用内联容器，定义文本内区块

        * strike - 中划线

        * strong - 粗体强调

        * sub - 下标

        * sup - 上标

        * textarea - 多行文本输入框

        * tt - 电传文本

        * u - 下划线

        * var - 定义变量

    # 可变元素  HTML标签分类明细

        * applet - java applet

        * button - 按钮

        * del - 删除文本

        * iframe - inline frame

        * ins - 插入的文本

        * map - 图片区块(map)

        * object - object对象

        * script - 客户端脚本


  • shuke 2017-7-3
    3 楼


    用于网页布局的一般都用div元素，但语义化并不好。HTML5引入了大量新的块级元素来帮助提升网页的语义，使页面具有逻辑性的结构、容易维护，并且对数据挖掘服务更加友好

    定义

    区块型元素是用来定义区块内容范围的元素，重要特征是区块级内容会 在 文档大纲中产生级别，实际上仅包括<article>、<aside>、<nav>、<section>四个元素。但块级元素元素的范围就大得多，指的是display为block以及类似于block特征的元素，如标题型元素等

    区块级元素

    <section>

    文档中的章节或区块，区块级通用元素

    [<section>与<div>的区别]

    如果标签只用来作为CSS和Javascript的钩子，则使用<div>标签

    <article>

    用来定义独立的文档、页面、应用甚至站点。标准是判断其内容是否可以单独发布或重用

    [注意]对于<article>和<section>来说，是必须要加上标题的

    <aside>

    不直接相关内容的侧边栏，<aside>里面的内容与它所关联的内容相互独立，谁缺了谁都不影响各自文本含义的理解。如一篇文章的广告、相关背景和引述内容等

    [注意]关于<aside>的误用是将sidebar的内容全部改成<aside>

    <nav>

    含有导航链接的区块。页面的主导航里有时含有相关链接或重复链接，但如果是不相关或冗余的，并对主导航不是至关重要的链接，那么一般不需要放在nav元素里

    其他块级元素

    <header>

    头部，用于将介绍内容和区块的辅助导航分组到一起，所以它有可能包含区块的标题元素以及其他的介绍内容(目录、logo等)

    <footer>

    尾部，包含跟区块或页面整体相关的内容，比如作者、版权信息、联系地址以及其他少量信息

    <hgroup>

    hgroup元素可以将一组标题元素放在一起，HTML5大纲算法只会处理其中排名最高的，h1元素封装标题，h2元素封装副标题

    <address>

    用于提供相近文章或这个页面作者的直接联系信息(e-mail地址、电话号码等)，而不是用于邮寄地址或类似的不是最直接能够联系到作者的方式的信息

    [注意]在除了article和body之外的区块元素中使用address元素是不合适的，一个section元素不能含有一个address元素

    案例说明

    想找一个规范使用html5新标签的网站不是很容易，国内大多数网站由于各种各样的原因，依然还是div布局，最终，案例选择使用苹果官网

    延伸：HTML5很有意思的标签 

返回
发新帖
shuke
主题数
263 		帖子数
79 		注册排名
1
作者最近主题：