常用基本元素

6人阅读 评论(0) 收藏 举报
分类:

常用基本元素

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

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

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

标题元素

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

实例如下:

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

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

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

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

段落元素

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

实例如下:

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

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

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

图片元素

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

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

实例如下:

<img src="//placehold.it/300" alt="我是图片加载失败后显示的文字">

除了必须属性外,还可以添加控制大小的属性widthheight,如下:

<img src="//placehold.it/300" alt="我是图片加载失败后显示的文字" width="150" height="150">

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

<img src="imweb-logo.png" alt="IMWeb 学院">

链接元素

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

实例如下:

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

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

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

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

<a href="http://imweb.io" target="_blank">
    <img src="imweb-logo.png" alt="IMWeb 学院">
</a>

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

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

列表元素

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

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

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>

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

<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>

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

<div>
    <p>作者:xxx</p>
    <p>发布时间:xx-xx-xx</p>
    <p>浏览量:xxxx</p>
</div>

span 元素

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

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

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

<div>
    <p><span>作者:</span><span>xxx</span></p>
    <p><span>发布时间:</span><span>xx-xx-xx</span></p>
    <p><span>浏览量:</span><span>xxxx</span></p>
</div>

换行元素

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

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

简单实例如下:

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

参考资料

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

查看评论

TensorFlow入门基本教程

随着人工智能的复兴,特别是阿法狗在围棋界轻松碾压所有人类棋手时,我们在惊奇它的神奇,它的高智慧,更好奇它的来源,以及它的实现原理,以及它的实际运行过程,那么你需要学习这个课程。这样的事件标志着一个新时代--人工智能时代的到来,在这样背景之下,人人都应该了解一些人工智能的基本知识,以及它的实现方式,以便把它应用到自己的工作领域里,让自己的工作更加出色,更加适应时代的发展。
  • 2017年03月08日 10:14

表单的一些基本元素

form元素:定义HTML表单,其中常用的属性有:                Action 定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。通常,表单会被提交到 web 服...
  • cao19931104
  • cao19931104
  • 2016-09-10 21:21:50
  • 413

html常用元素之表格元素

html常用元素之表格元素及其属性
  • yin_991
  • yin_991
  • 2017-10-25 19:24:25
  • 464

HTML基础教程 网页设计与编程

  • 2010年08月28日 16:13
  • 220KB
  • 下载

Java语言的基本元素

首先我们编写一个简单的程序
  • zhubo19889
  • zhubo19889
  • 2014-04-29 22:39:01
  • 790

【Web】了解Web.xml的配置

web.xml是web项目启动时首先被容器读取的配置文件,根据其中的配置创建实例并完成参数初始化等以保证项目能够正确启动运行.web.xml中配置的项目主要有这么几种,我对各个元素的作用了解如下: ...
  • zhuanzhe117
  • zhuanzhe117
  • 2015-04-27 18:00:18
  • 1898

Struts2访问web元素(包括:request,session,application和HttpServletRequest,HttpServletSession, HttpServletContext)的4种方法

说明:1.常用的是第二中方法取到,Map类型的request,session,application的引用2.request,session,application是jsp的内置对象,HttpServ...
  • centre10
  • centre10
  • 2010-11-04 21:29:00
  • 4053

html 常用基本元素

html 开发 文本文档.html html> body> p>Hello Worldp> body> html> 中文乱码问题 使用GB2312或UTF-8 ...
  • LIZHONGPING00
  • LIZHONGPING00
  • 2017-04-06 19:27:37
  • 317

第一章 信息安全的基本元素

1.1 信息与网络安全       Internet的设计初衷是开放的,没有考虑更多的安全问题。当前Internet用户面临的一个问题就是,如何在授权用户的同时,保护敏感信息。 1.1.1 安全是什么...
  • robur
  • robur
  • 2008-02-07 16:19:00
  • 2622

Java初级之4基本元素

1 空白分隔符  空格、Tab键、换行符 2 关键字 是不能用于变量名、类名、对象名、方法名等。 访问控制 private protected public 类,方法和变量修饰符 abstract ...
  • pingfandelanyangyang
  • pingfandelanyangyang
  • 2016-08-07 22:52:40
  • 474
    个人资料
    持之以恒
    等级:
    访问量: 9849
    积分: 545
    排名: 10万+
    博客专栏
    最新评论