HTML5教程

HTML基础(二)

本文主要是介绍HTML基础(二),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

这次要介绍的是块标签,行标签、行块标签还有标签的互换,先来看看思维导图:

001:块标签

来看看块标签的大致结构框架:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块标签</title>
    <style>
        div{
            width:100px;
            height:100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div>千里之行,始于足下,代码就要多练</div>
    <!-- div本身就是个区域标签,他没有语义,所以你想让他做什么就让他做什么 ,万能的工具标签-->
    <!-- <通过不指定高度,你可以发现一些块标签的特点:独占一行,默认宽度占满父级,高度为0,子级内容撑开高度 -->
    
    <!-- 标题标签 -->
    <h1>CSDN</h1>
    <!-- 大标题,一个页面只允许写一次 -->

    <h2>c1认证</h2>
    <!-- 很显然这是一个副标题 不要超过8个 -->
    <h2>c4认证</h2>
    <h2>C5认证</h2>

    <!-- 小标题 -->
    <h3>当前在学习web阶段</h3>
    <!-- h1,h2,h3是具有搜索权重的 -->

    <h4>第一小节</h4>
    <h5>第一个小节的第一个小点</h5>
    <h6>第一个小结的第一个小点的总结</h6>

    <!-- 段落标签 -->
    <p>代表一个段落</p>

    <!-- 列表 -->
    <ul>
        <li>久旱逢甘霖</li>
        <li>他乡遇故知</li>
        <li>洞房花烛夜</li>
        <li>金榜题名时</li>
    </ul>
    <!-- ul是无序列表,ol是有序列表,li一般和这两个配合使用,li一般作为子级 -->

    <ol>
        <li>久旱逢甘霖一滴</li>
        <li>他乡遇故知前妻</li>
        <li>洞房花烛夜不行</li>
        <li>金榜题名时重名</li>
    </ol>


    <!-- H5新增标签 -->
    <article>
        <nav>这里是导航栏</nav>
        <header>这里是头部信息</header>
        <aside>这里是侧边栏</aside>
        <section>区域的意思</section>
        <footer>这里是底部信息</footer>
    </article>

</body>
</html>


<!-- 语义化:
1.在不借助css样式的情况下对代码结构一目了然
2.提升页面的SEO -->

01:div

div本身就是个区域标签,它没有语义,你想让他做什么就让他做什么,可以说是个万能的工具标签,我们来看看这行代码:

<div>千里之行,始于足下,代码就要多练</div>

代码产生效果如下:

然后我们再加个style css内联样式试试:

    <style>
        div{
            width:100px;
            height:100px;
            background-color:aquamarine
        }
    </style>

加上宽度和高度限定,再加上背景颜色,我们发现产生效果如下:

如果不指定高度,你可以发现一些块标签的特点:独占一行,默认宽度占满父级,高度为0,子级内容撑开高度

02:h1~h6

如果有在网上写文章的小伙伴相信看到这个就会知道它的作用了,没错,这就是标题

h1是大标题,一个页面只能写一次,比如:

CSDN

h2是副标题,一般一个页面不要超过8个,比如:

C1学习

h3是小标题,值得注意的是,h1,h2,h3是具有搜索权重的,

我们来看看这串代码产生的效果:

    <h1>CSDN</h1>
    <!-- 大标题,一个页面只允许写一次 -->

    <h2>c1认证</h2>
    <!-- 很显然这是一个副标题 不要超过8个 -->
    <h2>c4认证</h2>
    <h2>C5认证</h2>

    <!-- 小标题 -->
    <h3>当前在学习web阶段</h3>
    <!-- h1,h2,h3是具有搜索权重的 -->

    <h4>第一小节</h4>
    <h5>第一个小节的第一个小点</h5>
    <h6>第一个小结的第一个小点的总结</h6>

03:p

p是段落标签,它代表的是一个段落

04:列表

下面要说的ul,ol,li都是属于列表,不同的是,ul是无序列表,ol是有序列表,li一般和这两个标签一起使用,下面我们看看这串代码产生的效果:

    <ul>
        <li>久旱逢甘霖</li>
        <li>他乡遇故知</li>
        <li>洞房花烛夜</li>
        <li>金榜题名时</li>
    </ul>
    <!-- ul是无序列表,ol是有序列表,li一般和这两个配合使用,li一般作为子级 -->

    <ol>
        <li>久旱逢甘霖一滴</li>
        <li>他乡遇故知前妻</li>
        <li>洞房花烛夜不行</li>
        <li>金榜题名时重名</li>
    </ol>

05: H5新增标签

article,header,aside,section,footer这些是H5新增标签,我们看看这串代码产生的效果:

    <article>
        <nav>这里是导航栏</nav>
        <header>这里是头部信息</header>
        <aside>这里是侧边栏</aside>
        <section>区域的意思</section>
        <footer>这里是底部信息</footer>
    </article>

002:行标签

行标签也可以说是内联标签

我们来看看行标签的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行标签(内联标签)</title>
    <style>
        *{
            /* 通配选择器 */
            /* 这么写会将所有的内外边距去掉 */

        }
        span{
            width:100px;
            height: 200px;
            /* margin-top: 100px;
            margin-bottom: 100px;
            margin-left:100px;
            padding-left:100px; */
            padding-top:100px;
            background-color:aquamarine
        }
    </style>
</head>
<body>
    <p>这里是对行标签的讲解</p>
    <span>选项1</span>
    <span>选项2</span>
    <span>选项3</span>
    <!-- 这里运行后我们很容易发现行标签和块标签的区别,行标签不独占一行 -->
    
    <a href="http://ac.csdn.net" target="_blank">C认证</a>
    <!-- target默认是_self -->

    <br>

    <i>倾斜</i>  <b>加粗</b>

    <br>

    <p>o<sub>2</sub></p>
    <!-- 行标签常用于p标签实现富文本 -->
    <p><span>C</span>SDN</p>

    <em>我是H5的新标签</em>
    <strong>我们具有一定的搜索权重</strong>

</body>
</html>

<!-- 
语义化:
1.再不借助css样式的情况下,对代码结构一目了然
2.提升页面的SEO -->

01:span

他是HTML的行内标签,被用来组合文档中的行内元素,它本身并不产生视觉效果,他只是提供一种途径令你可以对文档中的一部分进行引用

首先我们来写:

<body>
    <span>选项一</span>
    <span>选项二</span>
    <span>选项三</span>
</body>

从结果来看我们很快就可以发现行标签和块标签的区别,他们是不独占一行的,而是靠内容撑开宽度

这里我们来看看行标签的几个特点:

1.行标签不支持宽高,靠内容撑开宽度

2.行标签不支持上下边距

我们来写这样的代码看看:

margin-top是上边距,margin-bottom是下边距

可以看到页面并没有什么变化,再看下面这个:

有了上面的基础,我们不难想到margin-left和margin-right分别是左边距和右边距

好,我们再来看看:3.行标签不正常显示上下内边距

我们可以看到这是有效果的,这里造成了覆盖,所以成为不正常显示

4.换行被解析

这里我们看到虽然边距我们去掉了,但是还是存在白色边距,这是为什么呢

如图所示,因为这个空格的存在,当我们删去图中空格,就会神奇的发现白色间隔消失了

02:a 超链接

<a href="http://ac.csdn.net" target="_blank">C学习</a>

href指的是链接地址,target是方式

点击一下我们就可以到达链接的网页

03:i标签

具有使字体倾斜作用

04:b

使字体加粗

05:sub

实现富文本比如写氧气的分子式啊

06:em

H5的新标签

07:strong

具有一定的搜索权重

我们来看看他们的效果

    <p>这里是行标签的讲解</p>
    <span>选项一</span><span>选项二</span>
    <span>选项三</span>
    <a href="http://ac.csdn.net" target="_blank">C学习</a>
    <br>
    <i>倾斜</i>
    <b>加粗</b>
    <br>
    <!-- 行标签常用于配合p标签实现富文本 -->
    <p>0<sub>2</sub></p>
    <p>c<span>SDN</span></p>

    <em>我是H5的新标签</em>
    <strong>具有一定的搜索权重</strong>

003:行块标签

行块标签可以用来加载图片啊之类的,同时还可以设定宽度,比如我们可以看下面这个:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行块标签</title>
    <style>
        img{
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>
    <img src="img/ewn.png" alt="图片加载失败">
    <img src="https://cn.bing.com/images/search?q=%E5%9B%BE%E7%89%87&FORM=IQFRBA&id=2A67B025EDB55DFCC3EAB049289AB0CD4D0A72B5" title="baidu">
    <!-- 这里的路径我们可以使用相对路径,也可以是绝对路径,也可以是网络路径 -->
    
</body>
</html>

效果如上,这里没有放出具体内容,小伙伴们知道可以这么用就可以

004:标签的互换

最后我们来看一个标签互换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签的互换</title>
    <style>
        p{
            /* 标签的类型 */
            display:block;

        }
        span{
            display:inline;

        }
    </style>
</head>
<body>
    <p>1</p>
    <p>2</p>

    
</body>
</html>

比如这里我们使用

块标签的时候,我们想让他变成行标签的特点:

比如刚开始的时候:

我们可以看到他们独占一行:

这里我们使用display进行互换:

我们发现输出页面样式改变了,我们可以通过display来改变标签类型,这里的inline指的就是行标签,block指的是块标签,inline-block指的就是行块标签

这篇关于HTML基础(二)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!