Bootstrap

HTML常用标签合集

今天来讲讲有关html的常用标签,嘎嘎有用嘎嘎好用

目录

HTML常用标签

一、首先来讲第一种:标题标签 h1~h6

二、第二种:段落标签 p

三、第三种:hgroup标签

四、第四种:强调标签 em strong

五、第五种:引用标签 q blockquote

六、第六种:换行标签 br

七、第七种:hr标签

八、第八种:del标签

九、第九种:center标签

十、第十种:div标签

十一、第十一种:span标签

常用的布局标签

常用的图片标签

行内元素和块元素


HTML常用标签

一、首先来讲第一种:标题标签 h1~h6

   <h1>一级标题</h1>
   <h2>二级标题</h2> 
   <h3>三级标题</h3>
   <h4>四级标题</h4>
   <h5>五级标题</h5>
   <h6>六级标题</h6>

    标题标签的默认样式是自动加粗的;字体大小一级标题最大,六级最小;标题与标题之间有较大的间距 独占一行。

    标题标签代表着一个标题,一级标题的语义最重,六级标题的语义最轻。

    标题标签是块元素。

    标题标签的作用是帮助推广部门进行推广优化的,其重要性仅次于title标签。一般而言一个页面只有一个h1标签。

二、第二种:段落标签 p

<p>段落标签</p>

    段落标签的默认样式是行与行之间有较大间距并独占一行。它代表着一个自然段。

    段落标签也是块元素。

三、第三种:hgroup标签

   <hgroup>
       <h1>登高</h1>
       <h2>杜甫</h2>
   </hgroup>

     hgroup标签主要作用是用来为标题分组,可以将一组相关的标题放到hgroup里面。

四、第四种:强调标签 em strong

    你们真<em>帅</em>
    你们真<strong>帅</strong>

     em和strong标签都表示强调,但是它们还是有一定的差别的

  1. 第一em标签的样式是斜体,而strong标签的样式是加粗
  2. 第二em标签是强调语义的,而strong标签是强调内容的

     em标签和strong标签都是行内元素。

五、第五种:引用标签 q blockquote

    老子曰
    <blockquote>孔子说的不对</blockquote>
    孔子曰
    <q>老子才不对</q><br>

    q标签和blockquote标签都是引用,不同的是q标签是短引,用而blockquote标签是长引用会换行的。

六、第六种:换行标签 br

    点点关注<br>
    谢谢你们<br>
    萨瓦迪卡<br>
    外比八不<br>

    br标签的作用是,强制换行,它是一个自结束标签。

七、第七种:hr标签

    <hr>

    hr标签就是给页面加一个分割线。

八、第八种:del标签

     原价 <del>19999</del>
     现价 999

    这个del标签就是删除标签,就很常见了,什么不要998,不要997现价只有99!等等的广告,还有淘宝上啊、京东上啊,都有这个标签的存在。

九、第九种:center标签

     <center> <hgroup>
        <h1>登高</h1>
        <h2>杜甫</h2>
    </hgroup></center>

    center标签的作用就是剧中,把文字啊图片啊啥的全部居中到页面中间,这可以让页面更美观。

十、第十种:div标签

    <div>
        用来布局
    </div>

    div标签是用来布局的,并没有语义,只是一个区块。

    div标签是块元素

十一、第十一种:span标签

    <span>
        包裹文字
    </span>

    span标签,没有语义,一般用来包裹文字,让文字更好被选中。

常用的布局标签

    header   网页的头部

    main     网页的主体部分(一般只有一个)

    footer   网页的底部

    nav      网页的导航

    aside    和主题相关的内容

    article  文章之类的

    section  独立的块区,上面的标签都不合适,就用这个

    div      块元素

常用的图片标签

一般来说我们都是使用img标签来引入图片,img标签有四个属性

1.src属性     引入图片路径   通过./或者../开头

        ./   若引用的图片在同一个目录下

        ../  若引用图片不在同一个目录(../到上一级目录,可叠加../../)

2.alt属性     对图片的描述,对图片引用不成功的时候显示文字

        也会帮助浏览器做一些收录功能

3. width属性   设置图片的宽度

        属性值里直接写数值或者带单位

4.height属性  设置图片的高度

        属性值里直接写数值或者带单位

注意:一般情况 width和height只设置一个,另一个让浏览器按比例缩放。

行内元素和块元素

    想必大家都看到文章中有很多行内元素和块元素被标记出来了吧,是不是不太清楚是什么,没关系现在我就来给大家说一说

    块元素(block element) 常用来布局

         特点:

         1.块元素会独占一行,从上往下依次排列

         2.块元素的宽度是父元素的100%(body是父元素,页面边小随之变小)

         3.块元素的高度默认是被内容撑开的

        常用块元素:div h1-h6 p header footer nav......

    行内元素(inline element)

         特点

         1.不会独占一行,它是自左向右排列,一行排满再换行

         2.行内元素的宽和高,默认是被内容撑开的

        常用行内元素:span em strong a i ......

    行内块元素

         特点

         1.兼具块元素和行内元素特点

         2.不会独占一行,可自定义宽高

    注意:

     1.块元素里什么都能放,可以是块元素,行内元素,行内块元素

     2.行内元素里一般只放行内元素,如:文字,不能放块元素

     3.特殊的块元素p标签它里面一般只放文字或者图片,不能放块元素

     4.特殊的行内元素a标签,它里面什么都能放,可以块元素,行内元素,行内块元素,除了a标签它自己不能放进去。

咳咳,今天的内容就到此为止了,明天依旧努力学习啊!

;