HTML保姆级学习笔记一

说在前面：借此平台记录和分享自己学习前端的笔记和自己的拙见，本身也还在学习中，分享的内容中难免会出现某些错误，非常希望得到大家的指正，也很期待和大家讨论，共同进步。

HTML的学习侧重点在于四个部分，常用标签、表格、列表、表单。虽然我分了四个部分来讲述，但内容仍旧是标签。

一、浏览器

在学习HTML之前还是要对浏览器有一个常识性的了解，关于我对互联网和浏览器的认识将会专门写文来阐述。

浏览器是通过浏览器内核（即渲染引擎）将代码解析渲染成为相对应的网页呈现。

二、Web标准三结构

为了让不同浏览器实现同样的效果而制定的Web标准，而这个三结构的划分也实现了三层分离。

结构化标准语言（结构）:HTML、XML 用以对页面元素和内容进行描述和编辑。

表现标准化语言（表现）：css 对页面元素外观和位置等页面样式进行编辑。

行为标准（行为）：JavaScript 网页模型的定义与页面交互

Ps:1、在这三部分中最为重要的是结构也就是HTML。

     2、关于Web标准三结构某些公司的面试可能会被问及。

     3、这里其实也涉及到了不同浏览器的兼容问题，大多数时候考虑的是IE浏览器的兼容问题。值得高兴的是，移动端是不需要考虑兼容性问题的。

三、HTML概述

1、HTML（Hyper Text Markup Language）超文本标记语言，通过HTML标签对网页组成（文字、图片、视频、音频、链接等）进行描述。所以所谓网页就是HTML文件（文档）。

2、语法规范

      （1）标签组成:

        双标签<标签名>内容</标签名>、

        单标签<标签名>（在h5中单标签不必再加“/”）

      （2）标签的关系：仅有嵌套（父子）关系和并列（兄弟）关系

      （3）标签的属性：<标签名 属性名1='属性值1' 属性名2='属性值2'>内容</标签名>

                Ps:1、属性写在开始标签内

                      2、属性名和标签名之间用空格隔开

                      3、可有多个属性，属性间用空格隔开，属性之间无顺序之分

四、常用标签

此部分只会写一些常用的标签，标签不是要全部记，需要用到的时候在查询就可以。我会在单标签后注明其为单标签。

1、排版标签

      标题标签：h（1-6）级别递减，独占一行

      段落标签：p 独占一行

      换行标签（单）：br 强制换行

      水平线标签（单）：hr 

    Ps:段落标签和换行标签的区别，参考文章中段落与行之间的区别。

2、文本格式化标签

      加粗：b    strong

      下划线： u   ins

       倾斜： i   em

       删除线： s   del

    Ps:更推荐使用标红的标签，有突出强调的意味，对SEO有益。

3、媒体标签

在编程的过程中，媒体元素最好设置一个文件夹专门放置不同的媒体元素。

      （1）图片标签img（单）

        <img src='目标路径' alt='替换文本（图裂时显示的文字）' title='鼠标悬停时的提示文本 ' >

        Ps:1、路径：绝对路径：从盘符开始找文件所在地。（快跑别用）

                              相对路径：从当前文件出发开始找文件所在地，上一级（../xxx）、同一级 （./xxx）、下一级（./上一级/xxx）

              2、设置高度用height、设置宽度用width。两者一起设置会导致图片变形，一般只设置一个属性，另一个等比缩放。

      （2）音频标签audio（Ogg、MP3、Wav）

              <audio src='目标路径' controls autoplay loop>内容</audio>

             Ps: controls为控制条、autoplay为自动播放、loop为循环播放。这三个属性由于属性名和属性值相同所以可以直接写。

      （3）视频标签video（Ogg、MP4、Webm）

              <video src='目标路径' controls autoplay muted loop poster ='imgurl'>内容</video>

              Ps: 1、controls autoplay loop同上，poster为加载等待画面图片。

                     2、由于Google禁用autoplay，采用“autoplay+muted静音播放”解决该问题。

4、链接标签a

      <a href='链接地址' target='打开方式' >内容</a>

      Ps:1、href：外部链接：“http//”开头的地址、内部链接：目标网页路径./xxx或../xxx、空链接：#

             2、target：_self（默认）当前窗口打开，会覆盖到原网页、_blank新窗口，保留原网页

             3、a标签里不能再嵌套a标签

             4、在一个网页中有很多的a标签，要统一改target值有一个简便的方法base标签（单），<base target='_blank'>，此用法来源于网易。      

5、链接标签的扩展

    （1）锚链接：可以实现在网页中跳转至任何位置

              需要一个锚标记<a name='xxx'></a>

              跳转到标记<a href='#xxx'></a>（只需要这两行代码的'xxx'相同即可）

      （2）iframe内联框架：用于在本页面内引入外部的媒体资源或网页资源

            <iframe src='' name='xxx'></iframe>

              <a href='跳转的网址' target ='xxx'></a>（只需要这两行代码的'xxx'相同即可,适配即设置width或height）

标签：Ps,网页,标签,xxx,笔记,HTML,浏览器,保姆
来源： https://blog.csdn.net/qq_46465531/article/details/120450368