• 前端html标签:块级元素,行内元素,空元素


    前端是一个很容易入门,但却很难走进去的一个行业。看似简单,但一旦深入,就“不可自拔”。说到,前端,肯定少不了要认识他的组成元素,那这就涉及到块级元素,行内元素以及一些空元素。

    html标签

    html标签定义:
    是由一对尖括号包裹的单词构成,例如: <html>.
    标签不区分大小写<html> 和 <HTML>, 推荐使用小写.
    标签分为两部分: 开始标签<html> 和 结束标签</html>, 两个标签之间的部分我们叫做标签体.
    有些标签功能比较简单,使用一个标签即可,这种标签叫做自闭和标签,例如: <br/><hr/><input/><img/>
    标签可以嵌套,例如:<a><b><b/><a/>;但是不能交叉嵌套,例如:<a><b><a/><b/>

    块级元素

    总是在新行上开始;
    高度,行高以及外边距和内边距都可控制;
    宽度缺省是它的容器的100%,除非设定一个宽度。
    它可以容纳内联元素和其他块元素

    块级元素分类(双标签,eg:<div></div>):
    <h1>,<h2>,<h3>,<h4>,<h5>,<h6> 定义 HTML 标题。
    <div> 定义文档中的节。
    <p> 定义段落。
    <ul>  定义无序列表。
    <ol>  定义有序列表。
    <li>  定义列表的项目。
    <dl>  自定义定义列表。
    <dt>  自定义定义列表中的项目。
    <dd>  自定义定义列表中项目的描述。
    <table> 定义表格。
    <thead> 定义表格中的表头内容。
    <tbody> 定义表格中的主体内容。
    <tfoot> 定义表格中的表注内容(脚注)。
    <th>  定义表格中的表头单元格。
    <tr>  定义表格中的行。
    <td>  定义表格中的单元。
    <pre> 定义预格式文本。
    <address> 定义地址。
    <article> 定义文章。
    <aside> 定义页面内容之外的内容。
    <audio> 定义声音内容。
    <video> 定义视频。
    <blockquote>  定义长的引用。
    <canvas>  定义图形。
    <caption> 定义表格标题。
    <details> 定义元素的细节。
    <fieldset>  定义围绕表单中元素的边框。
    <figcaption>  定义 figure 元素的标题。
    <figure>  定义媒介内容的分组,以及它们的标题。
    <footer>  定义 section 或 page 的页脚。
    <form>  定义供用户输入的 HTML 表单。
    <header>  定义 section 或 page 的页眉。
    <nav> 定义导航链接。
    <noframes>  定义针对不支持框架的用户的替代内容。
    <noscript>  定义针对不支持客户端脚本的用户的替代内容。
    <legend>  定义 fieldset 元素的标题。
    <menu>  定义命令的列表或菜单。
    <meter> 定义预定义范围内的度量。
    <output>  定义输出的一些类型。
    <section> 定义 section。

    行内元素

    和其他元素都在一行上;
    高,行高及外边距和内边距不可改变;
    宽度就是它的文字或图片的宽度,不可改变;
    内联元素只能容纳文本或者其他内联元素;

    设置宽度width 无效。
    设置高度height 无效,可以通过line-height来设置。
    设置margin 只有左右margin有效,上下无效。
    设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。

    <a> 定义锚。
    <abbr>  定义缩写。
    <span>  定义文档中的节。
    <strong>  定义强调文本。
    <i> 定义斜体字。
    <acronym> 定义只取首字母的缩写。
    <b> 定义粗体字。
    <button>  定义按钮 (push button)。
    <sub> 定义下标文本。
    <sup> 定义上标文本。
    <textarea>  定义多行的文本输入控件。
    <em>  定义强调文本。
    <bdo> 定义文字方向。
    <big> 定义大号文本。
    <cite>  定义引用(citation)。
    <code>  定义计算机代码文本。
    <command> 定义命令按钮。
    <dfn> 定义定义项目。
    <del> 定义被删除文本。
    <embed> 定义外部交互内容或插件。
    <kbd> 定义键盘文本。
    <label> 定义 input 元素的标注。
    <map> 定义图像映射。
    <mark>  定义有记号的文本。
    <objec> 定义内嵌对象。
    <progress>  定义任何类型的任务的进度。
    <q> 定义短的引用。
    <samp>  定义计算机代码样本。
    <select>  定义选择列表(下拉列表)。
    <small> 定义小号文本。
    <tt>  定义打字机文本。
    <var> 定义文本的变量部分。

    空标签

    没有闭合标签的标签被称作为空标签。
    在我们使用的标签中,有的具有闭合标签。例如<td>标签,它有闭合标签</td>。但是也有一部分标签没有闭合标签,例如<br />标签,这一类标签我们称之为空标签。

    <input />  用于为基于Web的表单创建交互式控件,以便接受来自用户的数据。
    <img /> 代表文档中的一个图像。
    <isindex /> 使浏览器显示一个对话框,提示用户输入单行文本。
    <hr/>  定义水平线。
    <br>  定义简单的折行。
    <area /> 在图片上定义一个热点区域
    <base /> 指定用于一个文档中包含的所有相对URL的基本URL。
    <basefont /> 用来设置文档的默认字体大小。(目前已废弃 )
    <bgsound /> IE浏览器中设置网页背景音乐的元素。
    <col /> 定义表格中的列,并用于定义所有公共单元格上的公共语义。它通常位于`<colgroup>`元素内。
    <embed /> 用于表示一个外部应用或交互式内容的集合点,换句话说,就是一个插件。 
    <frame /> ,它定义了一个特定区域,另一个 HTML 文档可以在里面展示。(已废弃)
    <link /> 指定了外部资源与当前文档的关系. 这个元素的使用方法包括为导航定义关系框架.这个元素经常用来链接css文件。
    <meta /> 元素表示那些不能由其它HTML元相关元素 (<base>, <link>, <script>, <style><title>) 之一表示的任何元数据信息.
    <param />  定义了 <object>的参数
    <plaintext /> 将起始标签后面的任何东西渲染为纯文本,不会解释为 HTML。它没有闭合标签,因为任何后面的东西都会看做纯文本。(已废弃)
    <spacer /> 它可以向页面插入间隔。它由 Netscape 设计,用于实现单像素布局图像的相同效果,Web 设计师用它来向页面添加空白,而不需要实际使用图片。(已废弃)

    资源搜索网站大全 https://www.renrenfan.com.cn

    Html模板

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Fanstyle</title>
        <!-- 设置 viewport -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- IE -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 兼容国产浏览器的高速模式 -->
        <meta name="renderer" content="webkit">
        <meta name="Author" content="孟繁胜游" />
        <meta name="Keywords" content="" />
        <meta name="Description" content="" />
        <link rel="stylesheet" type="text/css" href="">
        <style type="text/css">
          
        </style>
    </head>
    <body>
    <script type="text/JavaScript" src=""></script>
    <script type="text/JavaScript">
      
    </script>
    </body>
    </html>
  • 相关阅读:
    [原创]如何在Windows下安装Bugfree2.0.0.1
    [原创]网站性能优化利器之一"google page speed"
    [原创]下一代Web 应用程序安全性测试工具HP WebInspect简介
    [原创]微软软件项目管理Team Foundation Server之测试人员
    [原创]Yeepay网站安全测试漏洞之跨站脚本注入
    [原创]软件测试过程改进的内容和注意事项
    [原创]快钱99bill网站安全性测试漏洞之“跨站式脚本注入”
    马化腾内部讲座:让产品自己召唤人
    [转贴]可用性测试
    [原创]浅谈缺陷分析的意义和方法
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/14035350.html
Copyright © 2020-2023  润新知