HTML基础教程-优快云博客

一、自结束标签和注释

HTML中的注释，注释中的内容会被浏览器所忽略，不会在网页中直接显示，但是可以在源码中查看注释，注释用来对代码进行解释说明的。

<!-- -->

开发中一定要养成良好的编写注释的习惯，注释要求简单明了。

注释还可以将一些不希望显示的内容隐藏。

注释不能嵌套

标签一般成对出现，但是也存在一些自结束标签
比如：

<img>
<img />
<input>
<input />

二、标签的属性

属性，在标签中（开始标签或自结束标签）还可以设置属性
属性是一个名值对（x=y）
属性用来设置标签中的内容如何显示
属性和标签名或其他属性应该使用空格隔开
属性不能瞎写，应该根据文档中的规定来编写，
有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号引起来。（单引号、双引号都可）
例：

<h1>这是我的<font color="red" size='3'>第三个</font>网页！</h1>

三、文档声明

迭代
网页的版本：HTML4、XHTML2.0、HTML5……
文档声明（doctype）：
文档声明用来高速浏览器当前网页的版本
html5的文档声明

<!doctype html>

注：大小写无限制

四、字符编码

可以通过meta标签来设置网页的字符集，避免乱码问题

<meta charset="utf-8">

五、实体

在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格
在html中有些时候，我们不能直接书写一些特殊符号
比如：多个连续的空格，比如字母两侧的大于和小于号
如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）
实体的语法：
&实体的名字：
&nbsp；空格
&gt；大于号
&lt；小于号
&copy；版权符号

六、meta标签

<!-- meta主要用于设置网页中的一些源数据，元数据不是给用户看
            charset 指定网页的字符集
            name    指定的数据的名称
            content 指定的数据的内容

                keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用，隔开
                    <meta name="keywords" content="">
                    <meta name="keywords" content="">

                description 用于指定网站的描述
                    <meta name="description" content="">
                    网站的描述会显示在搜索引擎的的搜索的结果中

                title 标签的内容会作为搜索结构的超链接上的文字显示
        -->
        <meta name="keywords" content="HTML5,前端，CSS3">
        <meta name="keywords" content="这是一个非常不错的网站">
        <!--
            <meta http-equiv="refresh" content="3;url=https//www.mozilla.org">
            3秒后，将页面重定向到另一个网站
        -->

七、语义化标签（1）

<!--
        在网页中HTML专门用来负责网页的结构
            所以在使用html标签时，应该关注的是标签的语义，而不是它的样式

            标题标签：
                h1~h6 一共有六级标题
                从h1~h6重要性递减，h1最重要，h6最不重要
                h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1
                一般情况下标题标签只会使用到h1~h3，h4~h6很少用

                标题标签都是块元素

            在页面中独占一行的元素称为块元素（block element）
    -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

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

    <!--
        p标签表示页面中的一个段落

        p也是一个块元素
    -->
    <p>在p标签中的内容就表示一个段落</p>
    <p>在p标签中的内容就表示一个段落</p>


    <!--
        em标签用于表示语音语调的加重

        在页面中不会独占一行的元素称为行内元素(inline element)
    -->
    <p>今天天气真不错！</p>
    
    <!--
        strong表示强调，重要内容！
    -->
    <p>你今天必须要<strong>完成作业！</strong></p>

    鲁迅说：
    <!-- q 表示一个短引用 -->
    <blockquote>
        这句话我是从来没有说过的！
    </blockquote>

    <!-- blockquote 表示一个长引用 -->
    子曰：<q>学而时习之，不亦说乎</q>

    <!--br标签表示换行-->
    <br>

    今天天气真不错

八、块和行内

 <!--
        块元素（block element）
            -在网页中一般通过块元素来对页面进行布局
        行内元素（inline element）
            -行内元素主要用来包裹文字

            -一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
            -块元素中基本上什么都能放
            -p元素中不能放任何的块元素
        
            浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
                比如：
                    标签写在了根元素的外部
                    p元素中嵌套了块元素
                    根元素中出现了除head和body以外的子元素
                    ……
    -->

九、语义化标签（二）

<!--
        布局标签（结构化语义标签）
    -->

    <!--
        header  表示网页的头部
        main    表示网页的主体部分（一个页面中只会有一个main）
        footer  表示网页的底部
        nav 表示网页中的导航
        aside 和主体相关的其他内容（侧边栏）
        article 表示一个独立的文章
        section 表示一个独立的区块，上边的标签都不能表示时使用section

        div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
        span 行内元素，没有任何的语义，一般用于在网页中选中文字
    -->

十、列表

<!--
        列表（list）
            1、铅笔
            2、尺子
            3、橡皮

        在html中也可以创建列表，html列表一共有三种：
            1、有序列表
            2、无序列表
            3、定义列表

        有序列表，使用ol标签来创建有序列表
            使用li表示列表项

        无序列表，使用ul标签来创建无序列表
            使用li表示列表项

        定义列表，使用dl标签来创建一个定义列表
            使用dt来表示定义的内容
            使用dd来对内容进行解释说明

        列表之间可以互相嵌套
    -->

    <ul>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ul>

    <ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ol>

    <dl>
        <dt>结构</dt>
        <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，那里是段落</dd>
        <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，那里是段落</dd>
        <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，那里是段落</dd>
    </dl>

十一、超链接简介

<!--
        超链接可以让我们从一个页面跳转到其他页面，
        或者是当前页面的其他位置

        使用 a 标签来定义超链接
            属性：
                href 指定跳转的目标路径
                    - 值可以是一个外部网站的地址
                    - 也可以写一个内部页面的地址

        超链接也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素
    -->

    <a href="http://www.baidu.com">超链接</a>
    <br><br>
    <!-- <a href="http://www.baidu123.com">超链接</a>-->
    <a href="列表.html">超链接2</a>

十二、相对路径

<!--
        当我们需要跳转到一个服务器内部的页面时，一般我们都会使用相对路径
            相对路径都会使用.或者..开头
                ./
                ../
            ./可以省略不写，如果不写./也不写../则就相当于写了./

            ./ 表示当前文件所在的目录

            ../ 表示当前文件所在目录的上一级目录
    -->

十三、超链接的其他用法

 <!--
        target属性，用来指定超链接打开的位置
            可选值：
                _self 默认值 在当前页面中打开超链接
                _blank 在一个新的页面打开超链接
    -->
    <a href="列表.html" target="_blank">超链接</a>

    <br><br>
    <a href="#bottom">去底部</a>

    <br><br>
    <a href="#p3">去第三个自然段</a>

    <br><br>


    <p>文章1984年出生于陕西省西安市。上高三的时候，文章被保送到四川师范大学艺术学院学习影视表演，但是他并未进入这个学校，而是决心去北京学习。在填写大学志愿之前，文章专门去北京考察了中国两大艺术院校—北京电影学院和中央戏剧学院。回到西安之后，文章不顾父母阻拦，将大学志愿从一本到专科总共八个志愿全部填成中央戏剧学院。2002年文章被中央戏剧学院表演系录取。</p>
    <p>文章1984年出生于陕西省西安市。上高三的时候，文章被保送到四川师范大学艺术学院学习影视表演，但是他并未进入这个学校，而是决心去北京学习。在填写大学志愿之前，文章专门去北京考察了中国两大艺术院校—北京电影学院和中央戏剧学院。回到西安之后，文章不顾父母阻拦，将大学志愿从一本到专科总共八个志愿全部填成中央戏剧学院。2002年文章被中央戏剧学院表演系录取。</p>
    <p id="p3">文章1984年出生于陕西省西安市。上高三的时候，文章被保送到四川师范大学艺术学院学习影视表演，但是他并未进入这个学校，而是决心去北京学习。在填写大学志愿之前，文章专门去北京考察了中国两大艺术院校—北京电影学院和中央戏剧学院。回到西安之后，文章不顾父母阻拦，将大学志愿从一本到专科总共八个志愿全部填成中央戏剧学院。2002年文章被中央戏剧学院表演系录取。</p>
    <p>文章1984年出生于陕西省西安市。上高三的时候，文章被保送到四川师范大学艺术学院学习影视表演，但是他并未进入这个学校，而是决心去北京学习。在填写大学志愿之前，文章专门去北京考察了中国两大艺术院校—北京电影学院和中央戏剧学院。回到西安之后，文章不顾父母阻拦，将大学志愿从一本到专科总共八个志愿全部填成中央戏剧学院。2002年文章被中央戏剧学院表演系录取。</p>
    <p>文章1984年出生于陕西省西安市。上高三的时候，文章被保送到四川师范大学艺术学院学习影视表演，但是他并未进入这个学校，而是决心去北京学习。在填写大学志愿之前，文章专门去北京考察了中国两大艺术院校—北京电影学院和中央戏剧学院。回到西安之后，文章不顾父母阻拦，将大学志愿从一本到专科总共八个志愿全部填成中央戏剧学院。2002年文章被中央戏剧学院表演系录取。</p>
    <p>文章1984年出生于陕西省西安市。上高三的时候，文章被保送到四川师范大学艺术学院学习影视表演，但是他并未进入这个学校，而是决心去北京学习。在填写大学志愿之前，文章专门去北京考察了中国两大艺术院校—北京电影学院和中央戏剧学院。回到西安之后，文章不顾父母阻拦，将大学志愿从一本到专科总共八个志愿全部填成中央戏剧学院。2002年文章被中央戏剧学院表演系录取。</p>
    <p>文章1984年出生于陕西省西安市。上高三的时候，文章被保送到四川师范大学艺术学院学习影视表演，但是他并未进入这个学校，而是决心去北京学习。在填写大学志愿之前，文章专门去北京考察了中国两大艺术院校—北京电影学院和中央戏剧学院。回到西安之后，文章不顾父母阻拦，将大学志愿从一本到专科总共八个志愿全部填成中央戏剧学院。2002年文章被中央戏剧学院表演系录取。</p>
    <p>文章1984年出生于陕西省西安市。上高三的时候，文章被保送到四川师范大学艺术学院学习影视表演，但是他并未进入这个学校，而是决心去北京学习。在填写大学志愿之前，文章专门去北京考察了中国两大艺术院校—北京电影学院和中央戏剧学院。回到西安之后，文章不顾父母阻拦，将大学志愿从一本到专科总共八个志愿全部填成中央戏剧学院。2002年文章被中央戏剧学院表演系录取。</p>
    
    <!--在开发中可以将#作为一个超链接的路径的占位符使用-->
    <a href="#">这是一个新的超链接</a>
    
    <br><br>
    
    <!--可以使用javascript:;来作为href的属性，此时点击这个超链接什么也不会发生-->
    <a href="javascript:;">这是一个新的超链接</a>
    <br><br>

    <!--
        可以直接将超链接的href属性设置为#，这样点击超链接以后
            页面不会发生跳转，而是转到当前页面的顶部的位置

        可以跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值

        id属性（唯一，不重复的）
            -每一个标签都可以添加一个id属性
            -id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性
    -->
    <a id="bottom" href="#">回到顶部</a>

十四、图片标签

<!--
        图片标签用于向当前页面中引入一个外部图片
        使用img标签来引入外部图片，img标签是一个自结束标签
        img这种元素属于替换元素（介于块和行内元素之间，具有两种元素的特点）
        属性：
            src 属性指定的是外部图片的路径（路径规则和超链接是一样的）

            alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
                搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录

            width 图片的宽度（单位是像素）
            height 图片的高度
                -宽度和高度中如果只修改了一个，则另一个会等比例缩放

            注意：
                一般在pc端，不建议修改图片的大小，需要多大的图片就裁多大
                但是在移动端，经常需要对图片进行缩放（大图缩小）
                
        图片的格式：
            jpeg(jpg)
                -支持的颜色比较丰富，不支持透明效果，不支持东突
                -一般用来显示照片
            gif
                -支持的颜色比较少，支持简单透明，支持动图
                -颜色单一的图片，动图
            png
                -支持的颜色丰富，支持复杂透明，不支持动图
                -颜色丰富，复杂透明图片（专为网页而生）
            webp
                -这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
                -它具备其他图片格式的所有优点，而且文件还特别的小
                -缺点：兼容性不好

            base64
                -将图片使用base64进行编码，这样可以将图片转换为字符，通过字符的形式来引入图片
                -一般都是一些需要和网页一起加载的图片才会使用base64

            效果一样，用小的
            效果不一样，用效果好的
    -->

    <img src="./img/1.gif" alt="松鼠">

十五、内联框架

<!--

        内联框架，用于向当前页面中引入一个其他页面
            src指定要引入的网页的路径
            frameborder 指定内联框架的边框，0-不显示，1-显示

        搜索引擎不会检索内联框架里的内容，对SEO并没有什么好处
    -->
    <iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

十六、音视频

<!--
        audio 标签用来向页面中引入一个外部的音频文件
            音视频文件引入时，默认情况下不允许用户自己控制播放停止
        
        属性：    
            controls 是否允许用户控制播放
            autoplay 音频文件是否自动播放
                -如果设置了autoplay 则音乐在打开页面时会自动播放
                    但是目前来讲大部分浏览器都不会自动对音乐进行播放
            loop 音乐是否自动播放
    -->
    <audio src="" controls autoplay loop></audio>

    <!--
        除了通过src来指定外部文件的路径以外，还可以通过soure来指定文件
            主要用来解决浏览器的兼容性问题
                -浏览器会选择从上到下的第一个支持的格式的source    
                -当浏览器不支持所有的source文件时，则会显示上面的文字 
    -->
    <audio controls>
        对不起，您的浏览器不支持播放音频！请升级浏览器！
        <source src="./source/audio.mp3">
        <source src="./source/audio.ogg">
    </audio>
    
    <!-- IE8及以下支持音视频的标签，自动播放，必须指定type，和高宽 -->
    <embed src="./source/audio.ogg" type="audio/mp3" width="" height="">

    <!--
        使用video标签来向网页中引入一个视频
            -使用方式和audio基本上是一样的
    -->
    <video controls>
        <source src="./source/flower.webm">
        <source src="./source/flower.mp4">
        <embed src="./source/flower.mp4" type="video/mp4">
    </video>