• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • html 元素

    HTML 表示 HyperText Markup Language:

    • HyperText(超文本) 表示使用HTTP协议。
    • Markup(标记) 表示代码使用关键字注解。
    • Language(语言) 表示遵循约定的语法,开发人员能编写,而计算机也能解释。

    HTML元素

    标记语言的基本规则是使用符号来规定内容边界,即内容从哪里开始到哪里结束。

    回顾一下这个HTML代码:

    <p>Hello World</p>

    Hello World

    角括号(angle brackets)<>之间的是 HTML 标签(tags)

    每个标签都有其特定的含义,这里p代表 段落(paragraph).

    标签通常是成对出现:

    • 开始标签<p>定义段落的 起始
    • 关闭标签</p>定义段落的 结束

    关闭标签比开始标签多一个 斜杠(slash)/

    开始标签和关闭标签之间的部分构成了一个 HTML 元素(element)

    在浏览器中打开时,结果如上面Result中所示,我们注意到HTML标签并不会被显示,它们只是用来告诉浏览器该如何解释那段内容。

    创建第一个HTML文件

    打开你的文本编辑器(如Sublime Text 3),新建文件,拷贝/粘贴如下内容,并保存为1.html文件:

    <p>This is my first webpage!</p>

    用你的浏览器打开这个文件,你会看到:

    This is my first webpage!

    属性(Attributes)

    属性是为元素绑定的额外信息。属性被添加在HTML的开始标签中,因此它们也不会被浏览器所显示。

    例如,href属性用来定义一个链接(link)元素(使用 a 标签)的目标地址:

    <a href="https://www.lanmper.cn">学编程</a>
    学编程

    有16个通用属性,可用于任意的HTML元素。所有这些属性都是可选的(optional)

    有些元素拥有 强制性 (required)属性。比如,添加图片时,需要指明图片的来源,使用src(source) 属性:

    <img src="//wow.techbrood.com/assets/basket.png" alt="图片说明">

    上面的alt属性是为了用于图片地址不可用时显示的说明性文字。

    注释(Comments)

    和其他语言一样,写好注释是一个良好的编程习惯,用于提高代码可读性,便于维护。注释会被浏览器忽略。

    注释开始于<!--结束于-->

    <!-- 第一段HTML代码注释 -->
    <p>Hello World!</p>

    Hello World!

    自关闭(Self-enclosing)元素

    有些元素如图片(img)、换行符(br)、输入框(input)只有开始标签,被称之为自关闭的元素:

    <br> <!-- line-break -->
    <img src="https://www.lanmper.cn" alt="Description"> <!-- image -->
    <input type="text"> <!-- text input -->

    由于没有关闭标签,自关闭元素不能包含其他元素。

    块级元素和内联元素

    HTML(超文本标记语言)中元素大多数都是“块级”元素或行内元素。块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。块级元素只能出现在 <body> 元素内。

    块级元素与行内元素有几个关键区别:

    • 格式
      默认情况下,块级元素会新起一行。
    • 内容模型
      一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更“大型”的结构。

    HTML 标准中块级元素和行内元素的区别至高出现在 4.01 标准中。在 HTML5,这种区别被一个更复杂的内容类别代替。

    “块级”类别大致相当于 HTML5 中的流内容类别,而“行内”类别相当于 HTML5 中的措辞内容类别

    除了这两个还有其他类别。

    以下是 HTML 中所有的块级元素列表(虽然”块级“在新的 HTML5 元素中没有明确定义)
    <address>联系方式信息
    <article>HTML5文章内容
    <aside>HTML5伴随内容
    <audio>HTML5音频播放
    <blockquote>块引用
    <canvas>HTML5绘制图形
    <dd>定义列表中定义条目描述
    <div>文档分区
    <dl>定义列表
    <fieldset>表单元素分组
    <figcaption>HTML5图文信息组标题
    <figure>HTML5图文信息组 在 figure 块里是第一个或最后一个同时 HTML Figcaption 元素是可选的;如果没有该元素,这个父节点的图片只是会没有说明/标题
    <figcaption>)
    <footer>HTML5区段尾或页尾
    <form>表单
    <h3>,<h4>,<h5>,<h6>标题级别 1-6.
    <header>HTML5区段头或页头
    <hgroup>HTML5标题组
    <hr>水平分割线
    <noscript>不支持脚本或禁用脚本时显示的内容
    <ol>有序列表
    <output>HTML5表单输出
    <p>
    <pre>预格式化文本
    <section>HTML5一个页面区段
    <table>表格
    <tfoot>表脚注
    <ul>无序列表
    <video>HTML5视频

    内联元素,比如:

    HTML (超文本标记语言) 元素大多数都是行内元素或块级元素。一个行内元素只占据它对应标签的边框所包含的空间。

    行内元素与块级元素对比:

    • 格式
      默认情况下,行内元素不会以新行开始,而块级元素会新起一行。
    • 内容
      一般情况下,行内元素只能包含数据和其他行内元素。
    • 下面的元素都是行内元素:
      • b, big, i, small, tt
      • abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
      • a, bdo, br, img, map, object, q, script, span, sub, sup
      • button, input, label, select, textarea
      • 链接(或叫锚点)(links / anchors)<a>强调词(emphasised words)<em>着重词(important words)<strong>短引用(short quotes)<q>缩写(abbreviations)<abbr>引用(cite)<cite>斜体(italic)<i>1
      • 图片(image)<img>输入框(input box)<input>选择框(select box)<select>间隔(span)<span>输入标签(label)<label>

    元素用来结构化文档的主体部分,把文档分解成条理分明的块。 所以块元素一般是其他元素的容器,可容纳内联元素和其他块元素,块元素有独立的空间,排斥其他元素与其位于同一行,可设置宽度(width)、高度(height)和内外边距(padding/margin)属性。

    内联元素用来构建局部的差异化文本,没有独立的空间,依附于其他块级元素存在,宽高和内外边距属性无效。

    <p>你在<a href="https://www.lanmper.cn;>学编程</a>搜索过H5动画吗?</p>

    所有块级元素都有开始和关闭标签,可以包含其他块元素和内联元素。

    自关闭元素只能是内联元素,因为其语法结构决定了不能包含其他HTML元素;但内联元素不一定是自关闭的。

    类别拥有开始和关闭标签自关闭
    块元素<p></p>
    <ul></ul>
    <ol></ol>
    不可能
    内联元素<a></a>
    <strong></strong>
    <em></em>
    <input>
    <br>
    <img>

    块和内联元素转换

    如有必要,可以转换块和内联元素,通过设置元素的显示样式(display属性值)。
    块状元素转化为内联元素:css设置display:inline ;
    内联元素转化为块状元素:css设置display:block ;
    关于样式表(CSS)的使用,后续章节会详细讲解。

    其它类型的HTML元素

    除了块元素和内联外,还有一些其他类型的HTML元素,常用的有:

    • 列表项<li>表格<table>表格行<tr>表格单元<td>

    HTML 元素关系

    HTML文档就像一个 族谱,元素之间的关系有父亲(parents),兄弟姐妹(siblings),子女(children),祖先(ancestors)和后代(descendants)。

    通过这样的层级和嵌套关系把元素彼此关联组织在一起,形成完整的体系。

    嵌套(Nesting)

    我们使用下面的代码来说明:

    <p>
      我们认为学习不只是掌握知识点,更重要的是要沉淀为<strong>理解力</strong>,为此需要:<q>"知其然,知其所以然。"</q>.
    </p>

    我们认为学习不只是掌握知识点,更重要的是要沉淀为理解力,为此需要:"知其然,知其所以然。".

    本例中:

    • <strong>元素赋予“理解力”更多重要性
    • <q>标记一段引用

    <strong>被显示为 粗体(bold)浏览器的默认行为

    本例中:

    • <p><strong><q> 元素
    • <strong><q><p> 元素
    • <strong><q>兄弟 元素

    顺序(Order)

    元素嵌套关系开始标签关闭标签 的顺序所确定。

    子元素被包含在父元素的标签对之间,开始标签要晚于父元素,而关闭标签必须早于父元素。下面的代码是违反规则的。

    <!-- 无效代码 -->
    <p>
      这段代码无效,因为 "strong" 标签的关闭<strong>顺序不正确。
    </p></strong>
    <!-- 有效代码 -->
    <p>
      这段代码有效,因为 "strong" 标签的关闭<strong>顺序</strong>不正确。</p>
    

    深度(Depth)

    嵌套允许有多个层级,下面是一个有更深元素层级的代码示例:

    上述例子中:

    • <article>是所有其他元素的 祖先(ancestor)
    • <h1>,<p>,<strong><q>元素都是<article>后代(descendants)
    • <h1>and 2个<p>元素是 兄弟(siblings)
    • <p>是其包含的<strong><q>子元素的 父亲
    • <article><strong><q>父亲父亲

    块和内联元素的嵌套

    元素可以包含内联元素,但是内联元素只能包含其他内联元素。1

    <!-- 无效代码! -->
    <strong>
      <p>你不应该把p元素放在 "strong" 标签中。</p>
    </strong>

    写文章要条理清楚,写HTML文档也一样,良好的文档结构有助于用户和搜索引擎更好的理解页面内容。