1.2 HTML基础知识（一）

最新推荐文章于 2024-07-25 11:26:35 发布

dxt_snow

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量256

点赞数

分类专栏： HTML&CSS 文章标签： html meta hgroup

本文链接：https://blog.csdn.net/qq_37665301/article/details/107165247

版权

HTML&CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.2 HTML基础知识（一）

实体与meta标签

meta标签的使用。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
    <!--
        meta主要用于设置网页中的一些元数据，元数据不是给用户看的
            charset:指定网页中的字符集
            name:指定的数据的名称
            content:指定的数据的内容
    -->
       <meta name="keywords" content="html,实体,meta标签"> 
    <!--
        keywords:表示此元数据指定了网页的关键字
        content:关键字的内容是什么
    -->
        <meta name="description" content="这是一个网站">
    <!--
        description:用于指定网站的描述，描述会显示在搜索引擎的搜索结果中
    -->
        <meta http-equiv="refresh" content="3;url=http://www.baidu.com">
    <!--
        http-equiv:重定向
        content="3;url=http://www.baidu.com" ：三秒后跳到http://www.baidu.com
    -->
        <title>实体与meta标签</title>
    <!--
        title标签中的内容会作为搜索引擎中搜索结果的超链接上的文字显示
    -->
    </head>
    <body>
    <!--
        在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格
        在HTML中，有些时候不能直接书写特殊符号
            比如：多个连续空格、字母两侧的大于和小于号
        需要使用时，可以使用html中的实体（转义字符）
        语法：&+实体的名字+;
            空格：&nbsp;
            大于号：&gt;
            小于号：&lt;
            版权符号：&copy;
    -->
        <p>
            快要&nbsp;高考了&nbsp;啊。</br>
            a&gt;b</br>
            b&lt;c</br>
            &copy;</br>
        </p>
    </body>
</html>

语义化标签一

使用html标签时，应该关注的是标签的语义，而不是它的样式。

<!doctype html>
<html lang="en">
    <!--
        lang="en":表示网页语言是英语（可翻译）
    -->
    <head>
        <meta charset="utf-8">
        <title>语义化标签</title>
    </head>
    <body>
        <!--
            在网页中html专门负责网页的结构
                所以使用html标签时，应该关注的是标签的语义，而不是它的样式
                比如h1标签中的内容不一定比h2中的大，因为CSS处理样式
            标题标签：
                h1 -> h6 一共有六级标题
                从h1->h6重要性递减，h1最重要，h6最不重要
                h1在网页中的重要性仅次于title标签，一般一个页面中只有一个h1
                一般情况下标题标签只使用h1->h3, 其余很少使用
                标题标签是块元素。

            在页面中独占一行的元素称为块元素(block element)
        -->
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h6>六级标题</h6>
        <!--
            hgroup标签用来为标题分组，可以将一组 相关 的标题同时放入到hgroup中
        -->
        <hgroup>
            <h1>回乡偶书二首</h1>
            <h2>其一</h2>
        </hgroup>
        
        <!--
            p标签表示页面中的一个段落(关注语义)
            p标签也是块元素
        -->
        <p>在p标签中的内容就是一个段落</p>
        <!--
            em标签表示语音语调的加重

            在页面中不会独占一行的元素称为行内元素。(inline element)
        -->
        <p>你长得<em>真</em>漂亮！</p>
        <!--
            strong表示强调，重要内容
        -->
        <p>你明天<strong>不要迟到</strong></p>
        <!--blockquote 表示一个长引用，会独占一行-->
        鲁迅说：
        <blockquote>
            我家门前有两棵树
        </blockquote>
        <!-- q 表示一个短引用，不会独占一行-->
        子曰
        <q>有朋自远方来</q>
        <!--
            br标签表示换行
        -->
        <br>
        <br>
        你好
    </body>
</html>

块元素与行内元素

p标签属于块元素，且p中不能放任何块元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>块元素与行内元素</title>
    </head>
    <body>
    <!--
        块元素(block element)
            - 在网页中一般通过块元素来对页面进行布局
        行内元素(inline element)
            - 行内元素主要用来包裹元素

        一般情况下会在块元素中使用行内元素，而不会在行内元素中使用块元素
        块元素中基本上无限制
        p标签属于块元素，且p中不能放任何块元素

        浏览器在解析网页时，会自动对网页中不符合规范的内容进行纠正：
            比如：
                标签写在了根元素的外部
                p标签中嵌套了块元素
                根元素中出现了除head和body以外的子元素
        不会对源码进行纠正，而是在加载内存时进行纠正
    -->
        <p>
            <h1>p内嵌套h1是错误的</h1>
        </p>
    <!--
        上述p内嵌套h1标签，在内存加载时会改为:
        <p></p>
        <h1>p内嵌套h1是错误的</h1>
        <p></p>
    -->
    </body>
</html>

布局标签

分割网页。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>布局标签</title>
    </head>
    <body>
    <!--
        布局标签（结构化语义标签）
    -->

    <!--
        header: 表示网页的头部
        main: 网页的主体部分（一个页面中只会有一个main）
        footer: 网页的底部（例如版权声明、作者等）

        header和footer也可以表示网页中某一部分的头部和底部
    -->
        <header>网站的头部、顶部</header>
        <main>网页的主体部分</main>
        <footer>我是网页的底部</footer>
    <!--
        nav: 表示网页中的导航（一般网页中上端的导航栏）
        aside: 表示侧边栏（和主体相关又不属于主体）
        article: 表示一个独立的文章
        section: 表示一个独立的区块
    -->
        <nav>我是导航呀</nav>
        <aside>我在侧边呀</aside>
        <article>鲁迅曾说：...</article>
        <section>独立的区块</section>

    <!--
        现流行主要使用的布局标签：div
        div：没有语义，用来表示一个独立的区块
        span: 行内元素，没有任何语义，一般用于在网页中选中文字
    -->
        <div>我最重要</div>
        <span>俺也一样</span>
    <!--
        不用CSS装饰，所有布局标签的显示效果一样。
    -->
    </body>
</html>

dxt_snow

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
1.2 HTML基础知识（一）

1.2 HTML基础知识实体与meta标签语义化标签一实体与meta标签      meta标签的使用。<!doctype html><html> <head> <meta charset="utf-8"> <!-- meta主要用于设置网页中的一些元数据，元数据不是给用户看的 charset:指定网页中的字符集
复制链接

扫一扫

专栏目录