读书想法故事

html快速成长(2)-常用标签

2021-06-29  本文已影响0人  你的胡霸霸

常用的标签其实也很简单, 平时我们百度,或者查找w3cSchool都要详细的用法, 这里只是简单的列举几个

注意:块元素和内联元素

      div就是一个块元素

        所谓的块元素就是会独占一行的的元素,无论他的内容有多少

          他都会独占一整行。

        p h1 h2 h3 ...

        div这个标签没有任何语义,就是一个纯粹的块元素,

          并且不会为它里边的元素设置任何的默认样式,

        div元素主要用来对页面进行布局的

      span是一个内联元素(行内元素)

        所谓的行内元素,指的是只占自身大小的元素,不会占用一行

        常见的内联元素:

          a img iframe span

        span没有任何的语义,span标签专门用来选中文字,

        然后为文字来设置样式 

      块元素主要用来做页面中的布局,内联元素主要用来选中文本设置样式,

        一般情况下只使用块元素去包含内联元素,而不会使用内联元素去包含一个块元素

        a元素可以包含任意元素,除了他本身

        p元素不可以包含任何块元素

1. h1,标题标签

2. <a/>标签 , 可以跳转到外部的连接地址(网址), 也可以跳转到本地的文件网页(当前项目某文件路径), 也可以在当前网页跳到指定的位置(其实是根据选择器跳转)

3. <p></p>段落标签, 在网页上直接写空格或者分行是不起效果的,必须通过标签或者css样式进行决定, 所以这个时候的p标签就很重要了

4.<text></text>文本标签, 区别于p,这个是文字的 

5.<span></span>空标签, 可以用在段落, 文字等标签内部,进行样式设置

6.<img>图片标签,显示本地或者网络图片,其中图片显示样式可以具体去百度

使用img标签来向网页中引入一个外部图片,

        img标签也是一个自结束标签

      属性:

        src:设置一个外部图片的路径

        alt:可以用来设置在图片不能显示时,对图片的描述

            搜索引擎可以通过alt属性来识别不同的图片

            如果不写alt属性,则搜索引擎不会对img中的图片进行收录

        width:可以用来修改图片的宽度,一般使用px作为单位

        height  :可以用来修改图片的高度,一般使用px作为单位

        宽度和高度两个属性如果指设置一个,另一个也会同时等比例调整大小

          如果两个值同时指定则按照你指定的值来设置

        一般开发中除了自适应的页面,不建议设置width和height

其中图片的后缀代表的图片也不一样

图片的格式

        JPEG(JPG)

          - JPEG图片支持的颜色比较多,图片可以压缩,但是不支持透明

          - 一般使用JPEG来保存照片等颜色丰富的图片

        GIF

          - GIF支持的颜色少,只支持简单的透明,支持动态图

          - 图片颜色单一或者是动态图时可以使用gif

        PNG

          - PNG支持的颜色多,并且支持复杂的透明

          - 可以用来显示颜色复杂的透明的图片

      图片的使用原则:

        效果不一致,使用效果好的

        效果一致,使用小的

7.<form></form>表单标签

8.列表标签

      列表就相当于去超市购物时的那个购物清单,

        在HTML也可以创建列表,在网页中一共有三种列表:

          1.无序列表

          2.有序列表

          3.定义列表

      无序列表

        - 使用ul标签来创建一个无序列表

        - 使用li在ul中创建一个一个的列表项,

          一个li就是一个列表项

      通过type属性可以修改无序列表的项目符号

        可选值:

          disc,默认值,实心的圆点

          square,实心的方块

          circle,空心的圆

      注意:默认的项目符号我们一般都不使用!!

        如果需要设置项目符号,则可以采用为li设置背景图片的方式来设置

      ul和li都是块元素

有序列表和无序列表类似,只不过它使用ol来代替ul

      有序列表使用有序的序号作为项目符号

      type属性,可以指定序号的类型

        可选值:1,默认值,使用阿拉伯数字

            a/A 采用小写或大写字母作为序号

            i/I 采用小写或大写的罗马数字作为序号

      ol也是块元素

列表之间都是可以互相嵌套,可以在无序列表中放个有序列表

        也可以在有序列表中放一个无序列表

9.<hr/>标签

10.<br/> 换行

11.特殊额符号需要特出打出来

在HTML中,一些如< >这种特殊字符是不能直接使用,

        需要使用一些特殊的符号来表示这些特殊字符,这些特殊符号我们称为实体(转义字符串)

        浏览器解析到实体时,会自动将实体转换为其对应的字符

        实体的语法:

        &实体的名字;

          <  &lt;

          >  &gt;

          空格  &nbsp;

          版权符号 &copy;

12.其他文本标签

      em和strong

      - 这两个标签都表示一个强调的内容,

        em主要表示语气上的强调,em在浏览器中默认使用斜体显示

        strong表示强调的内容,比em更强烈,默认使用粗体显示

    <p>

      今天天气<em>真不错</em>!

    </p>

    <p>

      <strong>

        注意:如果你不认真上课,你就找不到好工作!

      </strong>

    </p>

      i标签中的内容会以斜体显示

      b标签中的内容会以加粗显示

      h5规范中规定,对于不需要着重的内容而是单纯的加粗或者是斜体,

        就可以使用b和i标签

    <p>

      <i>我是i标签中的内容</i>

      <b>我是b标签中的内容</b>

    </p>

      small标签中的内容会比他的父元素中的文字要小一些

        在h5中使用small标签来表示一些细则一类的内容

        比如:合同中小字,网站的版权声明都可以放到small

    <p>

      我是p标签中的内容<small>我是small标签中的内容</small>

    </p>

      网页中所有的加书名号的内容都可以使用cite标签,表示参考的内容,

        比如:书名 歌名 话剧名 电影名 。。。

    <p>

      <cite>《论语》</cite>是最喜欢的一般的书

    </p>

      q标签表示一个短的引用(行内引用)

        q标签引用的内容,浏览器会默认加上引号

      blockquote标签表示一个长引用(块级引用)

    <p>

      子曰:<q>学而时习之不亦说乎!</q>

    </p>

    <div>

      子曰:

      <blockquote>

        有朋自远方来,乐呵乐呵!

      </blockquote>

    </div>

      使用sup标签来设置一个上标

    <p>2<sup>2</sup></p>

    <p>赵薇<sup><a href="#">[1]</a></sup></p>

      sub标签用来表示一个下标

    <p>H<sub>2</sub>O</p>

      使用del标签来表示一个删除的内容

        del标签中的内容,会自动添加删除线

    <p>

      <del>17.75</del> <br />

      15.54 <br />

    </p>

      ins表示一个插入的内容

        ins中的的内容,会自动添加下划线

    <p>

      我们的老师真<ins>好啊</ins>!

    </p>

      需要页面中直接编写一些代码

      pre是一个预格式标签,会将代码中的格式保存,不会忽略多个空格

      code专门用来表示代码

      我们一般结合使用pre和code来表示一段代码

    <pre>

      <code>

        window.onload = function(){

          alert("Hello World");

        };

      </code>

    </pre>

上一篇下一篇

猜你喜欢

热点阅读