CSS+HTML(二)------HTML标签(二)

上一篇简单的介绍了一下HTML的语法结构,基本的使用方法。今天就总结一下HTML中的众多标签。

1.<body></body>:"body" for body(个人认为如果能记住标签英文字母所代表的单词的中文意思更有助于我们记忆与使用)顾名思义,是网页的主体,在网页上所要展现的内容都要放在body中。

<body>
    <h1>了不起的盖茨比</h1>
    <p>1922年的春天,一个想要成名名叫<em>尼克•卡拉威</em>(托比•马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的<span>美国梦</span>,他搬入纽约附近一海湾居住。</p>

    <p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为<strong>"爵士乐时代"</strong>吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>

2.<p></p>标签:"p" for paragraph就是段落的意思当你要为网页内容分段时,你可以将一段的内容包裹在其中。如上图,文字将被分成两段。

3.<hx><hx>标签:"h" for highlight表示页面中需要强调的部分,被它包裹的内容,都会被加粗显示,因此可以用作一段文章的标题;而"x"表示"强调的等级",x的值越高,强调的等级则越低。代码如下:

<body>
       <h1>h1标题</h1>
       <h2>h2标题</h2>
       <h3>h3标题</h3>
       <h4>h4标题</h4>
       <h5>h5标题</h5>
       <h6>h6标题</h6>
</body>

效果如下:(可以发现不仅起到了强调作用,<hx>标签还”自觉“地将标题另起一行。这也是它跟下面一个强调标签的不同之处了。)

4.<strong></strong>,<em></em>标签:"strong" for strong,"em" for emphasis两者都可以表示强调(与<hx>的区别在于<strong>,<em>不会另起一行),不过也是有所区别的。最直观的区别就是二者的强调形式,<strong>是加粗强调,<em>是斜体强调。查了一下网上的资料,发现<strong>和<emphasis>还有在语义上的区别:

  1. The em element represents stress emphasis of its contents. The placement of emphasis changes the meaning of the sentence.
  2. The strong element represents strong importance for its contents. Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.

大概的意思是说,em表示的是内容上的强调,被em所包裹的内容会改变句意;而strong用于强调内容的重要性,并不改变句子的意思。你理解了吗?反正我是没怎么理解,以后在实践中慢慢体会吧!还有据说strong是可以叠加的,但我试了一下,感觉没啥区别嘛!

代码如下:

<body>
   <p><em>em的表现形式是斜体。</em></p>

   <p><strong>strong的表现形式是加粗。</strong></p>

   <p><strong><strong>strong可以叠加吗?</strong></strong></p>
</body>

效果如下:

5.<span></span>标签:span for "span"(?),表示为行内的元素设置独立的样式,也就是可以将某些内容设置成与其他不同的样式。

代码如下:

<style>
span{
    color:red;
    font-size:20px;
}
</style>

</head>
<body>
   <p><span>应用了span的样式!</span></p>
   <p>没有使用span的样式</p>

</body>

注意:span要写在<style>中。

效果如下:

其实我发现,如果你把span换成一个自定义的标签如<m></m>也是可以起到相同的效果。

HTML的标签还有很多,所以很有整理总结的必要,但是一口吃不成一个胖子,每篇更新5个,加深印象与理解!

时间: 2024-08-14 03:15:52

CSS+HTML(二)------HTML标签(二)的相关文章

Bootstrap&lt;基础二十&gt; 标签

Bootstrap 标签.标签可用于计数.提示或页面上其他的标记显示.使用 class .label 来显示标签,如下面的实例所示: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 标签</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <s

css学习归纳总结(二) 转

原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTML分隔符,而元素则是由一对开始结束标签构成的,用来包含某一些内容 子选择器和后代选择器的区别: 后代选择器的写法就是把外层的标记写在前面,内层的标记写在后面,之间用空格分隔. 子选择器只对直接后代有影响的选择器,而对“孙子后代”以及多层后代不产生作用. 注意:在IE6中,只支持后代选择器,不支持子选择器 链接

〇二——body内标签之交互输入标签二

我们在上一章讲了一些要通过后台程序实现交互的标签,下面我们看一看一些不通过后台实现交互的标签. 一.a标签 a标签主要实现超链接的功能 1.跳转效果 这个效果比较简单,直接在属性里添加一个网址,然后可以做成链接效果 <a href="http://www.baidu.com"target='_blank'>百度</a> 其中的target='_blank'意思是在新窗口内打开链接.targe还有其他的属性,但是这个是用的比较多的. 2.锚效果 有些比较好的博客,

css+div网页设计(二)--布局与定位

在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子模型的范围包括 margin.border.padding.content. 需要指出的一点是,在ie中与firefox中盒子模型表示略有不同: IE 盒子模型的 content 部分包含了 border 和 pading. 而firefox中的盒子模型的content部分不包含border和pad

MATLAB二维绘图(二)向图中添加标题,坐标轴,图标和文字信息

MATLAB二维绘图(二)向图中添加标题,坐标轴,图标和文字信息 1.添加标题.图例.x轴信息和y轴信息,示例: %% 添加标题 clear; clc; close all; x = 0:0.1:2*pi; y1 = sin(x); y2 = exp(-x); plot(x, y1, '--*', x, y2, ':o'); xlabel('t = 0 to 2\pi'); % 添加x轴信息 ylabel('values of sin(t) and e^{-x}') % 添加y轴信息 e^{-x

html+css学习笔记 2[标签]

img标签/a标签 <img src="图片地址" alt="图片名"/>  图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用:     a标签: 链接/下载/锚点 href地址等于标签id     target 链接打开方式     blank  新窗口     self     当前窗口     <base target="_blank"/> 定义页面链接默认打开方式   常见标签 div        

CSS和Java script 标签style属性对照表

CSS和Java script 标签对照表 盒子标签和属性对照 CSS语法 (不区分大小写) Java script 语法 (区分大小写) border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-style borderBottomStyle border-bottom-width borderBottomWidth border-color borderColor

使用css全面美化input标签

做网站时经常有这样那样的需要,要美化input ,于是CSS的美化必不可少.和程序人生的站长交流,他发给我这个. 下面是CSS样式 Js代码   input { border:1px solid #B3D6EF; background:#ffffff; } input { star : expression( onmouseover=function(){this.style.backgroundColor="#D5E9F6"}, onmouseout=function(){this.

算法导论第十二章__二叉搜索数

package I第12章__二叉搜索树; //普通二叉树 public class BinaryTree<T> { // -----------------------数据结构--------------------------------- private int height = 0; private Node<T> rootNode; class Node<T> { T t; int key; Node left; Node right; public Node

PHP生成二维码二种方法和实例

PHP生成二维码的两个方法和实例,分别使用Google API和PHP二维码生成类库PHP QR Code实现. 之前介绍过通过使用jQuery插件来生成二维码,今天分享下如何使用PHP生成二维码,以及如何生成中间带LOGO图像的二维码.利用Google API生成二维码Google提供了较为完善的二维码生成接口,调用API接口很简单,以下是调用代码: $urlToEncode="http://www.jbxue.com"; generateQRfromGoogle($urlToEnc