美文网首页
html+css初识(第二节)

html+css初识(第二节)

作者: freeflys | 来源:发表于2018-05-22 08:19 被阅读0次

本小节主要用来了解各种HTML标签,知道各种标签的含义。
下面通过一小段代码来了解各种标签的含义:

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html;  charset=utf-8">
  <title>了不起的盖茨比</title>
  <style>
   span{
          color:blue;
    }
  </style>
  </head>
  <body>
    <h1>了不起的盖茨比</h1>
    <p>1922年的春天,一个想要成名名叫<em>尼克•卡拉威</em>(托比•马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的<span>美国梦</span>,他搬入纽约附近一海湾居住。</p>  
    <p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为<strong>"爵士乐时代"</strong>吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
    <p>暗淡轻黄体性柔,<br/>情疏迹远只香留。<br/>何须浅碧深红色,<br/>自是花中第一流。</p>  <!-- <br>换行标签-->
    <p>&nbsp;&nbsp;&nbsp;&nbsp;哈哈哈哈哈哈哈哈</p>   <!-- &nbsp;  空格表示方法-->
  </body>
</html>

运用效果:


example1.png

①<body>标签,网页上显示的内容都要放在此标签内。
②<p>段落标签,上文中用了两次段落标签,可以看到此文被分成了两段,段前段后留有空白。
③<hx>标题标签,x为1-6,分为6级,<h1>是最高级,字号最大,常用来显示网页的标题,<h6>字号最小,上文中的标题就用到了<h1>标题标签。
④<strong>、<em>强调标签,目的都是为了突出显示,但区别是<strong>标签是粗体显示,<em>标签斜体显示,效果见上文运行效果。
⑤<span>标签是没有语义的,它的作用就是为了设置单独的样式用的。上文将美国梦三个字添加<span>标签,设置了颜色为蓝色。
⑥<q>、<blockquote>标签,文本引用标签,两者区别在于前者是短文本引用,后者是长文本引用,当引用诗人的一句诗,或者名言警句时可以使用<q>标签,如果想引用一收拾可以使用<blockquote>标签,而且两个标签引用是不需要添加引号,自动添加。
⑦换行标签分行显示文本,使用换行标签是因为在HTML中是忽略空格跟回车的,你输入再多的空格也显示不出来,所以想要换行就要使用换行标签,同样空格表示方式在上文中均有使用,详情见注释。
⑧<address>标签,用来给网页加入地址信息,例:<address>文档编写:北京市西城区德外大街10号</address> 标签内的内容在网页上斜体显示,可更改。
⑨<code>标签,在展示时,如果需要引用一行代码,可以使用此标签。但如果想在文段中插入多行代码时,就需要用<pre>标签了。例:

<pre>  <!--多行引用-->
var message="欢迎";
for(var i=1;i<=10;i++)
{
    alert(message);
}
</pre>
<code>代码语言</code> <!--单行引用-->

这样一些HTML最基本的标签我们就了解认识了,后面我们将接触更深入的标签。

相关文章

  • html+css初识(第二节)

    本小节主要用来了解各种HTML标签,知道各种标签的含义。下面通过一小段代码来了解各种标签的含义: 运用效果: ① ...

  • 初识HTML+CSS

    1-1代码初体验,制作我的第一个网页 1-2Html和CSS的关系 1-3认识html标签 1-4 标签的语法 1...

  • 【6Day】Joshua—初识html+css学习笔记(3)

    标签,短文本引用,初识HTML+CSS教程-慕课网 目录 标签,短文本引用 标签,长文本引用(大段文本)使用 标签...

  • HTML学习

    1 HTML介绍 注:本文参考慕课网的(初识HTML+CSS)网络课程,仅学习,无商业用途 1.1 web前端基础...

  • 慕课 初识html+css

    第一章 html介绍 1-4 标签的语法 标签由英文尖括号<和>括起来,如 就是一个标签。 html中的标签一般都...

  • 【2Day】Joshua—初识html+css学习笔记(2)

    语义化,让你的网页更好的被搜索引擎理解,初识HTML+CSS教程-慕课网 目录 认识head标签了解HTML的代码...

  • html+css+javascript

    2019/09/01 学习内容(半年前的记录QAQ)复习了慕课网<初识HTML+CSS>的第一章和第二章基本的标签...

  • 大前端完整学习路线(上篇)

    【HTML+CSS】: HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScri...

  • 第二节 初识scratch

    scratch界面 点击scratch的图标,我们会进入如下界面,我们可以点击左上方的地球仪图标切换语言,找到简体...

  • js初识第二节

    通过js给div元素设置样式 原生js的select的onchange事件来改变p元素文本的color 全选和反选...

网友评论

      本文标题:html+css初识(第二节)

      本文链接:https://www.haomeiwen.com/subject/vawfjftx.html