HTML网页结构化框架meta标签和语义化标签

Posted 2022-03-22 皓月盈江

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML网页结构化框架meta标签和语义化标签相关的知识，希望对你有一定的参考价值。

1.HTML网页结构化框架代码示例

<!--文档声明，声明当前网页的版本-->
<!DOCTYPE html>
<!--html的根标签（元素），网页中的所有内容都要写在根元素的里边-->
<html lang="en">
<!--head是网页头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页-->
<head>
    <!--meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题-->
    <meta charset="UTF-8">
    <!--title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容-->
    <title>大土土随笔</title>
</head>
<!--body是html的子元素，表示网页的主体，网页中的所有可见的内容都应写在body里面-->
<body>
    <!--h1网页的一级标题-->
    <h4>这是我的网站首页</h4>
</body>
</html>

用浏览器打开，效果如下：

2.HTML meta标签代码示例

myhtml2.html

<!--文档声明，声明当前网页的版本-->
<!DOCTYPE html>
<!--html的根标签（元素），网页中的所有内容都要写在根元素的里边-->
<html lang="en">
<!--head是网页头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页-->
<head>
    <!--meta标签用来设置网页的元数据，元数据不是给用户看的
        charset 指定网页的字符集，避免乱码问题
        name 指定的数据的名称
        http-equiv="refresh" 将页面重定向到另一个网站
        content 指定的数据的内容
            keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用英文,隔开
            description 用于指定网站的描述
        title标签的内容会作为搜索结果的超链接上的文字显示
    -->
    <meta charset="UTF-8">
    <meta name="keywords" content="Python,Linux,C++,mysql,镜像,工具软件,CTF,单片机,驱动源码,源代码">
    <meta name="description" content="发布Python、Linux、C++、MySQL等技术教程和自己开发的工具软件以及程序源代码！">
    <!--将页面重定向到另一个网站-->
    <meta http-equiv="refresh" content="3;url=http://www.datutusuibi.com/">
    <!--title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容-->
    <title>大土土随笔</title>
</head>
<!--body是html的子元素，表示网页的主体，网页中的所有可见的内容都应写在body里面-->
<body>
    <!--h1网页的一级标题-->
    <h4>这是我的网站首页</h4>
    <!--在新浏览器页面打开网址-->
    <a href="http://www.datutusuibi.com/" target="_blank">大土土随笔</a>
</body>
</html>

用浏览器打开，效果如下：

3.HTML 语义化标签代码示例

myhtml3.html

<!--文档声明，声明当前网页的版本-->
<!DOCTYPE html>
<!--html的根标签（元素），网页中的所有内容都要写在根元素的里边-->
<html lang="en">
<!--head是网页头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页-->
<head>
    <!--meta标签用来设置网页的元数据，元数据不是给用户看的
        charset 指定网页的字符集，避免乱码问题
        name 指定的数据的名称
        http-equiv="refresh" 将页面重定向到另一个网站
        content 指定的数据的内容
            keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用英文,隔开
            description 用于指定网站的描述
        title标签的内容会作为搜索结果的超链接上的文字显示
    -->
    <meta charset="UTF-8">
    <meta name="keywords" content="Python,Linux,C++,MySQL,镜像,工具软件,CTF,单片机,驱动源码,源代码">
    <meta name="description" content="发布Python、Linux、C++、MySQL等技术教程和自己开发的工具软件以及程序源代码！">

    <!--将页面重定向到另一个网站
    <meta http-equiv="refresh" content="3;url=http://www.datutusuibi.com/">
    -->

    <!--title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容-->
    <title>大土土随笔</title>
</head>
<!--body是html的子元素，表示网页的主体，网页中的所有可见的内容都应写在body里面-->
<body>
    <!--标题标签：
       h1~h6一共六级标题
       从h1~h6递减，h1最重要，h6最不重要
       h1在网页中的重要性仅次于title标签，一般情况下标题标签只会使用到h1~h3，h4~h6很少用。
       标题标签都是块元素
       在页面中独占一行的元素称为块元素
    -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h6>六级标题</h6>

    <br>
    <br>
    <br>

    <!--
       hgroup标签用来为标题分组，可以将一组相关的标题同时放入hgroup
    -->
    <hgroup>
        <h3>回乡偶书二首</h3>
        <h4>其一</h4>
    </hgroup>

    <h4>唐 贺知章</h4>

    <!--p标签表示页面中的一个段落，p也是一个块元素-->
    <!--
    q标签表示一个短引用
    blockquote标签表示一个长引用
    strong表示强调，重要内容
    br标签表示页面中的换行
    -->
    <p>
        少小离家老大回，<br>
        乡音无改鬓毛衰。<br>
        儿童相见不相识，<br>
        笑问客从何处来。<br>
    </p>

</body>
</html>

用浏览器打开，效果如下：

获取更多资料，请访问大土土随笔
如果本文对您有所帮助，请关注微信公众号“捷创源科技”！

以上是关于HTML网页结构化框架meta标签和语义化标签的主要内容，如果未能解决你的问题，请参考以下文章