HTML笔记

一、实体

        在html中，不能直接书写一些特殊符号

        例：多个连续的空格，字母两侧的大于号和小于号

         如要使用特殊符号，则需使用html中的实体（转义字符）

                实体的语法：&实体名字;

二、meta标签         

         meta标签主要用于设置网络中的一些元数据，元数据不是给用户看的，是给浏览器或者爬虫软件看的

            常用属性：

                charset：指定网页的字符集

                name：指定数据的名称

                content：指定数据的内容

         meta的作用：

                1. 设置网页的编码（字符集）

                2. 设置网页的关键字（keywords）

                3. 设置网页的描述信息

                4. 对网页进行重定向

                5. （移动端）用meta标签设置移动端的视口大小

三、标题标签       

        标题标签：

                    从h1 ~ h6 一共有六级标题

                    从h1 ~ h6 重要性依次递减，h1最重要，h6最不重要

                    h1 在网页中的重要性仅次于 title标签，一般情况下一个页面只有一个h1

                    一般情况下标题标签只会使用到h1 ~ h3，很少使用h4 ~ h6

        标题标签为块级元素(block element)，独占一行

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

四、行和块

        块元素(block element)

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

        行内元素(inline element)

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

        一般会在块元素中放行内元素，而不会在行内元素中放块元素

        块元素中基本什么都能放

        p元素中不能放任何块元素

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

五、布局标签 

        header 表示网页的头部

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

        footer 表示网页的底部

        nav 表示网页中的导航

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

        article 表示一个独立的文章

        section 表示一个独立的区块（以上标签都不能表示时使用section）

        div 没有语义，仅用来表示一个区块，div是主要的布局元素

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

六、列表（list）

        在html中，列表一共有三种：

                1. 有序列表

                2. 无序列表

                3. 定义列表

       

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

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

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

         列表之间可以互相嵌套

七、超链接

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

        使用 a 标签来定义超链接               

        超链接是一个行内元素

        a 标签中可以嵌套除他自身以外的任何元素

        

        属性：

                href 指定跳转的目标路径

                        - 可以是一个外部网站的地址

                        - 也可以是内部网页的地址

                        - #bottom 去往底部

                        - #id属性 去往id属性所在位置

                        - # 回到顶部（※在开发中，#可以作为超链接的路径的占位符使用）

                        - javascript: ; 作为超链接的路径占位符使用，点击超链接不会发生什么

                target 指定超链接打开的位置

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

                        _blank 在一个新的页面打开超链接

八、图片标签

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

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

        img 元素属于替换元素（介于行内元素与块级元素之间，具有两种元素的特点）

        属性：

            src 属性指定的是外部图片的路径（路径规则与超链接规则相同）

            alt 属性是对图片的描述（默认情况下不会显示）

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

        width 图片的宽度

        height 图片的高度

            如果高度和宽度只修改了一个，则另一个会等比缩放

        注意：

            一般在pc端，不建议修改图片大小，需要多大就裁取多大

            但是在移动端，经常需要对图片进行缩放（大图缩小）

       

        图片的格式：

            jpeg（jpg）

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

                - 一般用来显示照片

            gif

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

                - 颜色单一图片，动图

            png

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

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

            webp

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

                - 它具备其他图片格式的所有优点，而且文件更小

                - 缺点：兼容性不好

           

            base64

                - 将图片使用base64编码，可以将图片转换为字符，通过字符的形式来引入图片

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

            图片效果一样，用内存小的

            图片效果不一样，用效果好的

九、相对路径

        当我们需要跳转到一个服务器内部的页面时，一般使用相对路径       

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

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

十、音视频播放

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

                音视频文件引入时，默认不允许用户自己播放停止

       

        属性：

            controls 是否允许用户自己控制播放

            autoplay 音频文件是否自动播放

            loop 音乐是否循环播放

        

使用 video 标签来向网页中引入一个视频文件

            - 使用方式基本和audio相同