常用基本元素

梦里梦外; 2022-05-27 09:36 201阅读 0赞

# 常用基本元素    #

HTML 定义了各种元素，每个元素都起着不同的作用。一时半会是记不住那么多的，不过我们可以先了解熟悉最常用的一些（HTML 5 语义化标签我们第三章再介绍），然后其余的可以查阅下面的 MDN 或 W3school 的参考手册。

*  [HTML 元素参考 | MDN][HTML _ _ MDN]
 *  [HTML 参考手册 | w3school][HTML _ _ w3school]

从上面两个参考手册，我们会发现，MDN 的叫法是元素，而 W3school 的叫法是标签，这两者都有什么区别呢？

前面我们也讲过，元素一般是由开始标签、内容和结束标签组成的。所以严格来说，单纯的`<p>`就是标签，而`<p>一个段落</p>`则是元素。不过一般标签和元素这两个都是混着叫，所以叫什么不重要，重要的你是你要理解它们的本质区别就可以了。

## 标题元素 ##

`<h1>`、 `<h2>`、 `<h3>`、 `<h4>`、 `<h5>`、 `<h6>`标签用来定义标题，其大小依次减小，`<h1>`为最大的标题，`<h6>`为最小的标题。

实例如下：

注意：标题具有明确的语义性，请根据文档结构合理使用，而不要只是用来标识字体大小。

下面让我们来创建一个博客文章标题：

<h1>H5活动宣传页通用布局技术解决方案</h1>

## 段落元素 ##

`<p>`标签定义段落，每一个`<p>`标签默认都另起一行。

实例如下：

<p>这是段落文字</p>
    <p>这是另一个段落文字，另起一行开始</p>

下面让我们来创建几个博客文章段落：

<p>一般来说，活动宣传页都是全屏的滑动，而移动端的视窗大小确实是有点零碎化，于是将内容在不同的手机上良好展示出现就显得有点挑战了。</p>
    <p>本文旨在通过对一个个疑难点进行攻克而形成一种通用解决方案。</p>

## 图片元素 ##

`<img>`标签用来在网页中嵌入图片，该标签没有结束标签。（如这种只有一个标签的元素都可以称之为“空元素（empty element）”）

`<img>`标签有两个必需的属性：`src`属性 和 `alt` 属性。其中`src`属性为图片地址，`alt`属性为如果图片加载失败显示的替换文字。

实例如下：

除了必须属性外，还可以添加控制大小的属性`width`和`height`，如下：

下面让我们来添加一个博客图片：

## 链接元素 ##

`<a>`标签定义超链接，用于网页之间的跳转（从一个网页到另一个网页），它有一个重要的属性`href`，用来指定链接的目标。

实例如下：

<a href="http://imweb.io">我是一个超链接，指向IMWeb学院</a>

如果需要新标签页打开，则要添加另一个属性`target`，如下：

<a href="http://imweb.io" target="_blank">我是一个超链接，指向IMWeb学院</a>

如果图片也需要超链接，则可以通过元素嵌套实现，如下：

下面让我们来添加一个博客文字链接：

<p>我们打算使用现有的动画库<a href="https://github.com/daneden/animate.css/">animate.css</a>来实现我们的动画效果</p>

## 列表元素 ##

列表分为无序列表及有序列表两种，其中无序列表标签为`<ul>`，有序列表标签为`<ol>`，其直接的子元素标签为`<li>`(不能是其他标签)

如我们要实现WEB三大语言的列表，因为这三大语言没有严格的顺序关系，所以采用无序列表来实现，如下：

如我们要实现把大象装进冰箱的步骤列表，有严格的顺序要求，则采用有序列表来实现，如下：

<ol>
        <li>首先把冰箱门打开</li>
        <li>然后把大象关进去</li>
        <li>最后把冰箱门关上</li>
    </ol>

下面让我们来添加一个博客的标签列表：

<ul>
        <li>CSS</li>
        <li>响应式</li>
        <li>移动端重构</li>
    </ul>

## div 元素（division） ##

`<div>`标签用来分割为独立的、不同的部分，每一个`<div>`标签默认都另起一行。

如我们要创建一个区块，包含`<h2>`和`<p>`元素：

<div>
        <h2>区块标题/h2>
        <p>区块描述文字</p>
    </div>

下面我们来添加一个博客发表的相关内容：

## span 元素 ##

`<span>`标签被用来组合文档中的行内元素。如下：

<p>前端三大语言：<span>HTML</span>、<span>CSS</span>、<span>Javascript</span></p>

下面我们来用`<span>`元素对博客发表的相关内容进一步改造：

## 换行元素 ##

``标签可插入一个简单的换行符，它是个空元素，没有结束标签，不包含任何内容。所以`</br>`或`换行</br>`都是错误的。正确的用法应该是``

``与`<p>`的区别在于，它只是简单地开始新的一行，不包含任何内容，而`<p>`标签一般是有内容的，且浏览器默认会在相邻的段落之间插入一些垂直的间距。

简单实例如下：

<p>第一行内容 
     第二行内容</p>

## 参考资料 ##

最后除了上面的 HTML 参考手册外，如果你的英文还不错的话，建议阅读下 HTML 元素的 wiki 文档：[HTML element - Wikipedia][]

[HTML _ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
[HTML _ _ w3school]: http://www.w3school.com.cn/tags/
[HTML element - Wikipedia]: https://en.wikipedia.org/wiki/HTML_element#Document_structure_elements

常用基本元素

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Velocity基本常用语法

相关 Git基本常用命令

相关 mysql 常用基本命令

相关 FFmpeg常用基本命令

相关新增其他常用元素

相关 Eclipse基本常用快捷键

相关常用基本元素

相关 FFmpeg常用基本命令

相关 Git基本常用命令

相关 html常用元素总结