网站建设教程[学习HTML] 05. 文字标签 h1~h6, p 与 span

接下去正式进入了<body>的部分啰!也就是网页页面文章正文的部分。

  用brackets打开档案

  a.一次开起一个文件夹

  最先,大家先来了解一下怎样用Brackets开起一个文件夹,我们可以从侧面点一下GettingStarted后按OpenFolder…打开以前创建好的文件夹。

网站建设教程[学习HTML] 05. 文字标签 h1~h6, p 与 span-梦幻科技

或是是按上面的File→OpenFolder开起一个文件夹,一般一个新项目会出现除开HTML之外,还会继续有CSS、JavaScript、照片等档案,因此 一次一般开起全部新项目会较为非常容易实际操作。

网站建设教程[学习HTML] 05. 文字标签 h1~h6, p 与 span-梦幻科技

点一下大家的新项目文件夹后按住Open。

网站建设教程[学习HTML] 05. 文字标签 h1~h6, p 与 span-梦幻科技

b.一次开起一个档案

  假如只有一个档案得话,按住File→Open点一下单一档案,

网站建设教程[学习HTML] 05. 文字标签 h1~h6, p 与 span-梦幻科技

比如文件夹的index.html,点一下后按住Open键, 

网站建设教程[学习HTML] 05. 文字标签 h1~h6, p 与 span-梦幻科技


那样就可以把以前创建好的index.html档给开起了! 

网站建设教程[学习HTML] 05. 文字标签 h1~h6, p 与 span-梦幻科技

文本标识H1~H6

  接下去大家看来一下文本标识H1~H6的使用方法,那什么是H1~H6呢?简易而言你能先想预设好的字体大小,H1是较大,H6是最少,一般H1代表题目,H2代表小标题,针对一些百度搜索引擎而言,一个网页页面里最好是仅用一个H1,由于H1是最大等级的题目,而H2、H3..代表等级较低的题目。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的新HTML專案</title>
    </head>
    <body>
        <h1>Test </h1>
        <h2>Test </h2>
        <h3>Test </h3>
        <h4>Test </h4>
        <h5>Test </h5>
        <h6>Test </h6>
    </body>
</html>

  輸出結果:

网站建设教程[学习HTML] 05. 文字标签 h1~h6, p 与 span-梦幻科技

  你能发觉说浏览器会帮你预设好字体样式的尺寸。假如你今日用的是其他framework(比如bootstrap),它很有可能显示信息的便是不一样的字级。而H1~H6的文字大小是能够 被改动的,因而,针对引擎搜索而言,H1~H6的实际意义相比文字大小更胜于等级,那么你很有可能会想,假如那样我是不是把每一个题目都设置成H1就好了呢?那样的方法很有可能会让google觉得是故意的,而有一些处罚体制(给你的搜索引擎排名降低或是更可怜的是寻找不上)。因此 ,最好是的方法便是一个网页页面只有一个H1,也不必过多的H2或H3以防权重值被分散化。

  文本标识p与span

  p是指paragraph,也就是段落的意思,span较为好像一个行内元素,那这两个有什么区别呢?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的新HTML專案</title>
    </head>
    <body>
        <h1>Test </h1>
        <h2>Test </h2>
        <h3>Test </h3>
        <h4>Test </h4>
        <h5>Test </h5>
        <h6>Test </h6>
        <p> Test </p>
        <span> Test </span>
    </body>
</html>

輸出結果:

网站建设教程[学习HTML] 05. 文字标签 h1~h6, p 与 span-梦幻科技

乍一看之像仿佛没什么转变,这两个有什么区别呢?如果我们再各自将<p><span>多打一遍,並用Test2來显示看看:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的新HTML專案</title>
    </head>
    <body>
        <h1>Test </h1>
        <h2>Test </h2>
        <h3>Test </h3>
        <h4>Test </h4>
        <h5>Test </h5>
        <h6>Test </h6>
        <p> Test </p><p> Test2 </p>
        <span> Test </span><span> Test2 </span>
    </body>
</html>

輸出結果:

网站建设教程[学习HTML] 05. 文字标签 h1~h6, p 与 span-梦幻科技

你會发现<p>被隔成了兩行,但是<span>还是只有一行,因为<p>的特性是block,就是一個区块,而<span>是一個inline(行內元素)。

利用CSS变更预设值

  假如你讨厌HTML标识里边的预设值,例如刚H1~H6的尺寸字体样式,或者<p><span>是运行内存块或行内元素这些,大家都能够 通过CSS去更改,换句话说HTML较为像一个框架,写成基础的构造,而CSS较为像一个装修,给你的內容在排版设计层面访问起來更为舒服或具备特点。

  提升CSS方式 是在HTML第一个标识后边按住空格符,并输入style=“欲改动的款式”,例如大家想把H1变的超大型,我们可以写style=“font-size:100px;”,font-size是CSS预设的语法,代表文字大小,一般word的一切正常阅读文章字体样式约12px-16px,大家来试瞧瞧吧:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的新HTML專案</title>
    </head>
    <body>
        <h1 style="font-size: 100px;">Test </h1>
        <h2>Test </h2>
        <h3>Test </h3>
        <h4>Test </h4>
        <h5>Test </h5>
        <h6>Test </h6>
        <p> Test </p>
        <span> Test </span>
    </body>
</html>


輸出結果:

网站建设教程[学习HTML] 05. 文字标签 h1~h6, p 与 span-梦幻科技

H1的确被大家改的超大型。那假如强制性让H1、H2改成一样的size呢?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的新HTML專案</title>
    </head>
    <body>
        <h1 style="font-size: 100px;">Test </h1>
        <h2 style="font-size: 100px;">Test </h2>
        <h3>Test </h3>
        <h4>Test </h4>
        <h5>Test </h5>
        <h6>Test </h6>
        <p> Test </p>
        <span> Test </span>
    </body>
</html>

輸出結果: 

网站建设教程[学习HTML] 05. 文字标签 h1~h6, p 与 span-梦幻科技

答案是能够 的,此刻你也就会发觉H1~H6预设的尺寸都能够被调节了。

再來是<p><span>,我們也可以用另一個CSS改它的block(区块元素)或inline(行元素),我們可以用display這個预设语法,而<p>的预设是block,<span>的预设是inline,那我們利用语法<span style="display: block;"> span</span>將<span>改成block,為了区别方便,我們设兩個<span>以便查看效果:
 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的新HTML專案</title>
    </head>
    <body>
        <h1 style="font-size: 100px;">Test </h1>
        <h2 style="font-size: 100px;">Test </h2>
        <h3>Test </h3>
        <h4>Test </h4>
        <h5>Test </h5>
        <h6>Test </h6>
        <p> Test sdasdas</p>
        <span style="display: block;"> span</span>
        <span style="display: block;"> span2</span>
    </body>
</html>

输出結果: 

网站建设教程[学习HTML] 05. 文字标签 h1~h6, p 与 span-梦幻科技

<span>的预设行內元素(inline)经过CSS的調整變成了区块(block)元素。<p>也可以利用<p style="display: inline;">p inline</p>改成inline,為了区別方便,我們同样设两个<p>以便查看效果:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的新HTML專案</title>
    </head>
    <body>
        <h1 style="font-size: 100px;">Test </h1>
        <h2 style="font-size: 100px;">Test </h2>
        <h3>Test </h3>
        <h4>Test </h4>
        <h5>Test </h5>
        <h6>Test </h6>
        <p> Test sdasdas</p>
        <span style="display: block;"> span</span>
        <span style="display: block;"> span2</span>
        <p style="display: inline;">p inline</p>
        <p style="display: inline;">p inline</p>
    </body>
</html>

输出結果:  

网站建设教程[学习HTML] 05. 文字标签 h1~h6, p 与 span-梦幻科技

<p>也可以变成inline了!从这儿我们可以了解我们可以利用CSS语法更改html的预设设置,换句话说有时不一定见到某一标识,就觉得一定是某类特性,这种全是能够 被更改的。

联系我们

13751415268

853408942

:853408942@qq.com

:9:30-22:30

QR code