第6课:学习更多HTML元素

到现在,你有没有独立完成过一个网页?
你可以的,看看下面的例子:

<html>
<head><title>125建站网|www.125jz.com</title></head>
<body>
<h1>一级标题</h1><p>一些文字。。。</p>
<h2>二级标题</h2><p>一些文字。。。</p>
</body>
</html>

七个新HTML元素

前面学过,你可以通过用<b>和</b>把文本括起来,把文本设为粗体;类似地,你可以通过用<i>和</i>把文本括起来,把文本设为斜体。没错,这里的“i”是“斜体(italic)”的意思。

  例1:

<i>这句话应显示为斜体</i>

该例在浏览器中将显示如下: 这句话应显示为斜体 同样,你可以用small标签把文本设为小字体:

  例2:

<small>这句话应显示为小字体</small>

该例在浏览器中将显示如下:
这句话应显示为小字体

我可以同时应用多个标签吗?

你可以同时应用多个标签,只要你能避免标签交错起来

  例3: 如果你希望一段文本即是粗体又是斜体,你可以这样做:

<b><i>既是粗体又是斜体</i></b>

注意不能这样:

<b><i>既是粗体又是斜体</b></i>

二者区别在于:在前一个例子中,首先打开的标签最后关闭。这样可以避免混淆。

学习更多元素!

正如第3课中提到的,有些元素是没有尾标签(end tag)的,如<br />,它的作用是插入一个换行符。 

例4:

写一些文字<br />重起一行再写一些文字

该例在浏览器中将显示如下: 

写一些文字
重起一行再写一些文字 

注意上面的空元素<br />:它没有尾标签,并且在首标签名称的后面加了空格和斜杠。
另一个空元素是<hr />,它的作用是画一条水平线。这里的“hr”是“水平线(horizontal rule)”的意思。 

例5:

<hr />

该例在浏览器中将显示如下:


HTML中的ul、ol和li元素,这三个元素用于制作列表。ul代表“无序列表(unordered list)”。ol代表“有序列表(ordered list)”,它的作用是显示每个列表项的序号。用<li>元素把多个列表项组织为一个列表,其中的li代表“列表项(list item)。
感觉有些迷糊?那么,请看下面的例子: 

例7:

<ul>
<li>一个列表项</li>
<li>另一个列表项</li>
</ul>

该例在浏览器中将显示如下:

  • 一个列表项
  • 另一个列表项

例8:

<ol>
<li>第一个列表项</li>
<li>第二个列表项</li>
</ol>

该例在浏览器中将显示如下:

  1. 第一个列表项
  2. 第二个列表项

嗯,这一课就学这么多。再次重申,请反复实验本课所学的元素,并在制作自己的网页时使用它们。

<i>斜体</i>
<small>小字体</small>
<br /> 换行
<hr /> 水平线
<ul>无序列表</ul>
<ol>有序列表</ol>
<li>列表项</li>

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/492.html

(3)
江山如画的头像江山如画管理团队
第7课:HTML标签的属性
上一篇 2018年1月20日 下午3:05
第5课:到目前为止学到了些什么?
下一篇 2018年1月20日 下午3:26

99%的人还看了以下文章

  • 第9课:在网页中添加图像

    假如能把自己喜欢的的图像放到网页上,那就太好了。 这貌似有点难度。。。 也许是有点难度,但其实也不难,一个元素就可以搞定: 例1: <img src=”http://www.125jz.com/wp-content/uploads/2018/01/liudehua.jpg” /> 该例在浏览器中将显示如下: 你要做的只是:告诉浏览器你要插入一张图…

    2018年1月20日
    9.2K0
  • 第14课:元素的定位

    CSS定位令你可以将一个元素精确地放在页面上你所指定的地方。联合使用定位与浮动(参见第13课),你将能够创建多种高级而精确的布局。本课我们将讨论以下内容: CSS定位的原理 绝对定位 相对定位 CSS定位的原理 把浏览器窗口想象成一个坐标系统: CSS定位的原理是:你可以将任何盒子(box)放置在坐标系统的任何位置上。 假设我们要放置一个标题。通过使用盒状模…

    2020年2月25日
    6.4K0
  • 巧用边框线实现立体按钮效果(纯CSS)

    本文教你使用CSS制作立体按钮,代码简单。

    2020年2月2日
    9.4K0
  • CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果

    CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果

    box-shadow属性的基本用法 使用Box-shadow制作逼真的图片阴影效果 使用伪元素::before和::after,我们能实现非常逼真的只有图片才能实现的阴影效果。 HTML: <div class=”box11 shadow”></div> CSS: .box11 { width: 300px; height: 100p…

    2019年1月5日 网页制作
    9.6K0
  • css布局基础:定位练习1

    主要知识点: 1、5种常用定位:静态定位/相对定位/绝对定位/固定定位/吸附定位(磁铁定位) position:static/relative/absolute/fixed/sticky。 2、除静态定位外,都可以用left/top/bottom/right/z-index属性进行移动。 效果图: 效果说明:故宫文字段落设置背景色黑色透明,覆盖在图片底部。 …

    2020年4月4日
    7.9K0
  • HTML5+CSS3制作网页实例:HTML5入门

    文章最后提供HTML5+CSS3制作网页实例源码下载。 步骤1 -设计 设计师先根据构想使用PHOTOSHOP设计页面,然后开始HTML和CSS编码,从设计背景、颜色和字体,细节部分的工作内容。 步骤2 – HTML 头部html代码 <!DOCTYPE html> <html> <head> <meta…

    2019年3月7日
    17.4K0

发表回复

登录后才能评论