html思维导图

标题标签
   
    标题标签 h1-h5，字体从大到小。对应英文语义headline。使用注意：标题里的文字要xian想水平居中或者垂直居中得用text-align和line-height来做，内外边距不行，因为标题有自己的默认样式，给其设置内外边距。

段落标签
    段落标签 p 对应英文paragraph。需要注意的是段落标签有自己的默认的内外边距和文字样式，可能会对后续布局有影响。

 超链接标签a
    超链接标签a。页面内跳转是在href属性中写#＋对应跳转位置的标签Id值，页面外跳转的话直接对应的地址将可以了。还有一个基本属性target。值分别为self和blank。前者是以自身作为页面打开，后者是以一个新的空白页面打开
    头部标签head，是作为一个头部的容器标签，一般放置的是以下标签
        <title>：定义了文档的标题
        <base> 定义了页面链接标签的默认链接地址（设置相对路径）
        <link> 定义了一个文档和外部资源之间的关系。常用来导入外部资源
            有两个属性，rel,href。分别导入资源的文件类型，例如CSS的文件类型就是stylesheet样式表。href表示导入资源的路径。
        <meta> 定义了HTML文档中的元数据(一般用来设置字符集)
        <script> 定义了客户端的脚本文件
        <style> 定义了HTML文档的样式文件

 图像标签img
    图像标签img,基本属性是src,alt,width,height。src表示的是图片的源路径，alt表示当图片无法正常显示的替代文本，width给图片指定高和宽。
        提示：指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。
        VScode编辑器的图片相对路径是HTML页面所在的当前文件夹。而背景图片的相对路径是当前所在的HTML页面，要区分开来。

表格标签
    表格table,tr(包含th和td，其中th，使用了th的话字体会设置为粗体居中，和td是并列关系，而th是用来表示表头)，表格有三个基本属性，border,cell-padding,cell-spacing，align。分别是表格的边框，单元格内边距，单元格与单元格之间的距离，表格在页面中的位置。一般单元格与单元格的距离cell-spacing设置为0，单元格有两个基本属性，跨列colspan,跨行rowspan。
        英文意思：tr:tableRow,th:tableHeader,td:tableData
        表格的理解：表格如果不给固定顶的宽，他就会自动根据单元格的大小来指定表格的大小。而单元格的大小如果不给固定的宽，单元格会自动根据字体的大小指定单元格的大小。其实表格的两个基本属性cell-padding。单元格内边距(单元格与单元格内容的距离)，还有cell-spacing，单元格与单元的距离，这两个属性都可以作为调整单元格的大小来使用。因为调整这两个属性，他会自动根据你给的距离扩大这个单元格的大小。但是一般不建议这样强行调整单元格的大小，因为这样其实你根本没有固定单元格的大小，单元格的大小核心还是根据字体的大小自动匹配的。你只是进行了调整。一旦一个表格里有多个嵌套表格的使用，还涉及跨行跨列。即使你们的字体大小一样，因为涉及到表格嵌套和跨行跨列，表格的大小会自动调整，那么整个表格的单元格就无法对齐。所以我们不建议这样调整单元格大小，而是自己给每个单元格固定的宽。那么就很好对齐了。因为表格是对称的，所以只需给宽就行，高会自动匹配。给高也无效。
        上面说的是嵌套表格的情况，当然我们不建议嵌套表格，因为即使给定了固定宽，因为边框自己有距离，还是有可能使单元格对不齐。在表格不嵌套的情况下单元格的大小由cell-padding和cell-spacing来调整还是很适合的。一般我们只会给表格固定的宽，单元格是不会给的。除非嵌套表格。表格案例的启示：每个元素都会根据其本身的字体啊，图片等等会有一个默认大小，如果不给元素设置固定的宽和高，任由其默认大小发展，就会破快整个网页的布局。
        （重点）适用场景：经常用来规范的展示数据。
    标签分类，按布局分
        列表标签
            ol
            ul
            dl
                子标签dt和dd,这两个是并列关系，但是dd是用来解释说明dt标签里面的内容。
            对应的英文单词解释：ul是unordered lists的缩写 (无序列表)

li是list item的缩写 （列表项目）

ol是ordered lists的缩写（有序列表）

dl是definition lists的英文缩写 (自定义列表)

dt是definition term的缩写 (自定义列表组)

dd是definition description的缩写（自定义列表描述）

nl是navigation lists的英文缩写 （导航列表）

tr是table row的缩写 （表格中的一行）

th是table header cell的缩写 （表格中的表头）

td是table data cell的缩写 （表格中的一个单元格）
            （重点）适用场景：经常用来规范的展示数据。

      在此之前先明白html元素的分类，根据元素的特性分类。
    块级元素
        总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
        宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;块级元素的默认宽度是100%。
        块级元素的特性
            默认宽高，宽是100%。高是内容的大小。
            可以手动设置宽高。
            块级元素是纵向排列的(这也是标准流的布局方式)
    行内元素
        和相邻的行内元素在同一行;
        宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
        行内元素的特性
            内容本身的大小就是默认宽高。
            不能手动设置宽高，上下内外边距。只能手动设置左右内外边距。
            行内元素是横向排列的。
    行内块元素
        display:inline-block -- 显示为行内块元素，表现为同行显示并可修改宽高内外边距等属性。重点使用注意，行内快元素与其他元素会自动有一条小的缝隙，如图片就是典型的行内快元素，使用时需要把该元素转为块级元素才可以消除掉那条缝隙。
        行内快元素的特性
            内容本身的大小就是行内块元素的默认宽高。
            行内块元素可以手动设置宽高
            行内快元素是横向排列的。
    html元素的特性可以按这三个点总结。1.默认宽高。2.能不能手动设置宽高。3排列方式。块级默认宽是100%，高是内容自适应大小。行内元素和行内块原申诉默认宽高都是内容自适应大小。
        
            HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
        span
            HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
        
          表单form
    表单form,两个基本属性action和method,HTML表单用于收集不同类型的用户输入。
        子标签input,结合他的属性type看他是想收集什么类型的输入，有text,password,radio,checkBox,email,sumbit
        html5表单的新特性
            select和option搭配形成下拉列表，textarea文本域,button按钮
    脚本标签<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。
    emmet语法
        快速生成HTML结构语法
            生成标签：直接写标签名然后按Tab键就会自动生成对应标签。
            如果想要生成多个相同的标签，标签名*数量然后按Tab键就可以了。比如生成4个div。直接就div*4然后按Tab键就可了。
            如果想生成父子级关系的标签，可以用>号。如ul>li。
            如果想生成兄弟关系的标签，用+号就可了。如div+p。
            如果想生成带有类名或id名的标签。标签名.类名或者标签名#id名再按Tab键就可了。例如div.nav。就等同于<div class="nav"></div>。如果省略标签，直接.类名或者直接#id名则默认标签是div。
        快速生成CSS样式语法
            书写CSS样式时只需要写每个单词里面的首字母，然后按Tab键就会生成该属性。需要注意的是值如果是像素值，需要全写，值如果是英文单词，照样是写首字母就可以了。

引入资源的路径
        <meta> 定义了HTML文档中的元数据(一般用来设置字符集)
        <script> 定义了客户端的脚本文件
        <style> 定义了HTML文档的样式文件