HTML常用标签

常用标签

标题标签：h1~h6

从样式上看是逐渐变小的，语意的重要性也是逐渐降低的。

注：h1标签非常重要，一般情况，一个html文件，只有一个h1

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

效果如下：

标题分组标签 ：hgroup标签

用来将一组相关的标题放在一起。

<hgroup>
        <h1>古诗一首</h1>
           <h3>其一</h3>
</hgroup>

段落标签：p标签

<p></p>用于表示内容的一个自然段。

<p>我是P标签</p>
<p>我是P标签</p>
<p>我是P标签</p>

p标签里内容默认情况会独占一行，段与段之间有一个间距，它是块元素。

em标签

用来告诉浏览器把其中的文本表示为强调的内容。

<em>我是em标签</em>

 strong标签

强调标签，对内容的强调，也会使文本加粗。

<strong>我是strong标签</strong>

br换行标签

可以使文本换行

<p>自畴彷着丰二，定感有太上自打话当揽别龄，不四未普皇许慧程<br>订守的杨自仆能世，松曰和处，骨汪妄夭区，的。</p>

p元素中的文本原来是在一行显示的，中间加入<br>标签后，文本会强制换行

 hr标签

在页面中生成一条水平线

<p>在救清百上死，他下。</p>
<hr>

del标签

表示一个删除的内容，会自动添加删除线。

<del>归以招今</del>

 

结构标签 

它是构建一个网页基本结构的主要元素，可分为一下几个部分：

         header 网页的头部

         main  网页主体内容

         footer  网页的底部

         nav  网页的导航部分

         aside  和主体相关的内容，侧边栏

         article  文章，宣传段落之类

         section  独立的区块，如果上面的标签都不合适，就可用

         div  没有语义  就是表示一个区块

         span  行内元素，用于在网页中包裹文字

<header>头部</header>
    <main>主体
        <nav>导航栏</nav>
        <aside>侧边栏</aside>
        <article>内容</article>
        <section>独立区块</section>
    </main>
<footer>底部</footer>

列表标签

1.有序列表

ol，li

有序的序号作为项目的符号，type 属性  可以更改序号（默认值：阿拉伯数字，1 2 3；还可改为字母表示）

<ol>
     <li>你好</li>
     <li>你好</li>
     <li>你好</li>
     <li>你好</li>
 </ol>

<ol type="A">
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
</ol>

2.无序列表

ul，li

顾名思义就是没有顺序的列表，

 type属性

              disc  实心圆  默认值

              circle  空心圆  

              square  实心方块

   <ul>
         <li>你好</li>
         <li>你好</li>
         <li>你好</li>
         <li>你好</li>
     </ul>
     <ul type="circle">
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
     </ul>

 超链接标签：a标签

 功能：

              1:从一个页面跳到另一个页面

              2:在当前页面进行跳转

 特点：是一个行内元素，但我们可以在超链接中除自身外放任何元素

 属性：

              href

                  指向的是链接跳转的目标地址

                    -属性值可以是一个外部的网站的地址   绝对路径

                    -属性值还可以是内部的地址   相对路径

                target

                    用来指定打开链接的位置

                    可选值：

                       _self ,表示在当前窗口中打开（默认值）  一般情况下在国外网站用的更多

                       _blank  在一个新的页面中打开链接      一般国内更多

<a href="需要跳转的目标地址" target="_blank"></a>

相对路径跳转规则：

            使用./  或者 ../ 来进行相对路径的选择

           ./   当前文件所在的目录  ，浏览器默认的，可以省略

            ../  跳出当前文件

<a href="../跳出当前文件后选择你所需要的文件"></a>

 

块元素和行内元素

块元素

在网页中一般通过块元素对页面进行布局  

特点：会独占一行，无论他的内容多少

举例：p h1-h6 div ul li ····

行内元素（内联元素）

一般用来包裹文字

特点：只占自身的大小，不会独占一行

举例：em strong a  span·····

注意：

           1:一般情况下，会在块元素内放行内元素,不会在行内元素内放块元素

           2:块元素里，基本什么都可以放

           3:特殊：p元素里不能放块元素