Web前端自学记录（一）（Html基础知识）

一.Html 基础知识

1.编辑器

    直接在搜索引擎搜索软件进入官网下载自己电脑对应的版本即可

    根据自身习惯，下载适合自己的编辑器，新手推荐使用VS Code，我现在使用的也是这个。VS Code安装好后可以直接在软件内下载中

    文插件

    在VS code中创建一个新html文件后，在第一行输入 !（叹号）后按Tab或Enter键可直生成基础代码

    在任意处点击Ctrl+“/”键可直接生成对应部分的注释标签

2.实体

         在网页中编写多个空格默认分析为一个空格

         在html中有些时候，不能直接书写一个特殊符号，比如 空格、大于小于号

         如果我们需要在网页中书写这些特殊符号，则需要使用html的实体

         实体的语法

         &实体名字;

              空格

             >大于号

             <小于号

             ©版权符号

3.meta

 mata主要设置网页中的一些元数据，元数据不是给用户看的

         charset 指定网页字符集

         name 指定数据的名称

         content 指定数据的内容

         description 用于网站的描述，会显示在搜索引擎的搜索结果中

         title 标签的内容会作为搜索结果的超链接显示

         keywords 表示网站的关键字，可以同时指定多个关键字，用,隔开

         <meta http-equiv="refresh" content="3;url=http://www.baidu.com">三秒后跳转网页

         <meta name="keywords" content="HTML5,前端,CSS3">

4.语义化标签

        标题标签：h1-h6一共有6级标题，重要性递减，一般用h1-h3

        块元素（block element）

        在网页中一般通过块元素进行布局

        行内元素（inline element）

        行内元素主要用来包裹文字

        一般情况下会在块元素中放行内元素， p元素中不能放任何的块元素

        浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正

        p标签表示页面中的一个段落，p也是一个块元素

        hgroup标签用来为标题分组，可以将一组相关的标题放入到group

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

        strong标签表示强调，重要内容

        blockquote表示一个长引用

        q表示一个短引用

        br标签表示页面中的换行

        布局标签（结构化语义标签）

        header 表示网页的头部

        main 表示网页的主体部分（一个页面中只有一个main）

        footer 表示网页的底部

        navi 表示网页中的导航

        aside 和主体相关的其他内容（侧边栏）

        article 表示独立的文章

        section 表示一个独立的区块

        div没有语义，就用来表示一个区块

        span 行内元素，没有语义，一般用于在网页中选中文字

5.列表

       列表（list）

        html中分三种

        1.有序列表（ul）

            使用li表示列表项

        2.无序列表(ol)

            使用li表示列表项

        3.定义列表(dl)

            使用dt来表示定义的内容

            使用dd来对内容解释说明

        列表之间可以互相嵌套

6.超链接

        超链接可以让我们从一个页面跳转到其他页面

            或者当前页面的其他位置

            使用 a 标签定义超链接

            href 指定跳转的目标路径

            值可以时一个外部网站的地址，也可以写一个内部页面的地址

            <a href="http://www.baidu.com" target="_blank">超链接</a>

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

           targer属性用来指定链接打开的位置

        可选值

            _self 默认值，在当前页面打开超链接

            _blank 在新页面中打开超链接

            可以使用javascript:;作为超链接的href属性的值，点击不会发生任何变化

7.图片标签

            图片标签用于向当前页面中引入一个外部图片

            使用img标签引用外部图片，img是一个自结束标签

            img是一种替换元素，介于块元素和行内元素之间，具有两种元素的特点

            src属性指定外部图片路径

            路径规则和超链接相同

            alt 对图片的描述，描述默认情况下不会显示，某些浏览器会在图片无法加载时显示

            搜索引擎会根据alt中的内容识别图片，如果不写alt属性，则不会被搜索引擎所收录

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

            注意：

                一般情况下，PC端不建议修改图片大小，需要多大的图片就裁多大

                移动端经常对图片进行缩放，主要是大图进行缩小

            

图片格式：

            jpeg（jpg）

                支持的颜色比较丰富，不支持透明效果，不支持动图

                一般用来显示照片

            gif

                支持的颜色比较少，支持简单透明，支持动图

                颜色单一的图片、动图

            png

                支持颜色丰富，支持复杂透明，不支持动图

                颜色丰富，复杂透明的图片，专为网页而生的

            webp

                谷歌公司新推出的专门用来表示网页的图片的一种格式

                具备了其他格式图片的所有优点，而且文件特别小

                缺点：兼容性不好

            base64

                将图片使用base64进行编码，这样我们可以将图片转换为字符，通过字符的形式来引入图片

                一般都是需要和网页一起加载的图片，才会使用base64

            使用规则：

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

8.内联框架

            内联框架，向当前页面中引入一个其他页面

            src指定要引入的网页的路径

            frameborder指定内联框架的边框

            <iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

9.音视频

           <audio>

            标签用来向页面引入一个外部的音频文件

            音视频文件引入是默认情况下不允许用户控制播放停止

            属性：

            controls 是否允许用户控制播放

            autoplay 音频文件是否自动播放

            如果设置了autoplay，则音乐在打开页面时会自动播放，但目前大部分浏览器不会对音乐自动播放

            loop 音乐是否循环播放

            <video>

            使用video标签引用视频文件

            使用方式和audio基本一样

            除了通过src指定文件路径，还可以通过source来指定文件路径，source可以指定多个文件

            <source src="">

            <embed src="" type="audio/mp3">这种方法也可以引入音视频

 

后续学习会继续更新！