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>
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页