HTML 基础

供显示的元素

标签: 所有的标签都有的意义是，形成独立空间。支持嵌套

1、文本标签 ：span普通的文本标签，只是用来形成独立空间的。

2、标题标签 ：h1~h6使内容加粗、放大、竖着布局。

3、竖着布局的标签：div单纯的让文字竖着布局。

4、段落标签：p行与行之间的间距更大。

5、超链接标签：a实现页面的跳转。

        属性：

        1、herf：用来设置资源路径

        2、target：_self  默认的，在自己窗口打开；_blank  空白的，在新窗口打开；窗口名称 指定              窗口打开

6、锚点标签：a类似于书签的作用。

        样式：

        1、position：fixed；bottom：200px；right：200px     固定，距下200像素，距右200px；

        属性：

        1、name：定义锚点

        2、href：#是用来区分超链接标签的，没有什么实际意义

        先用  a  标签  和  name  标签埋一个目标点，然后用另一个  a  标签和  herf="#+name"  属性  设置用来跳转的点  

7、换行标签：br空标签。

8、图片标签：img空标签

        属性

        1、src：表示资源路径;

        绝对路径：被访问资源在磁盘当中的绝对位置

        相对路径：访问资源与被访问资源之间的相对关系

                兄弟关系：在同一个文件夹下，不需要客气，直接访问就行。

                叔侄关系：分别在一个大文件夹下和大文件夹内的一个小文件夹内。需要借助叔叔

                表兄弟关系：分别在一个大文件下两个小文件夹内 ../返回上一级  /打开

        2、alt="阿巴阿巴"当资源路径有问题或图片加载不成功的时候，显示这个属性里的文本信息。

        3、width：设置宽度   high：设置高  只设置宽或高时，另一个会按原始的比例自动设置

9、列表标签

        1、无序列表 unorderlist

        <ul>  <li>第n条</li>   </ul>

        2、有序列表 orderlist

        <ol>  <li>第n条</li>   </ol>

        属性：

        1、type：表示设置序号类型 如 type="a" 是类型是abcd

        2、start：表示设置序号开始的 start="c" 从c开始排序 cdef

10、表格标签

        1、放表格的大容器：table

        属性：

        1、border：表格有边框

        2、width：控制表格整体的宽

        3、high：控制表格整体的高

        4、cellpadding：设置单元格填充度

        5、cellspacing：设置单元格之间的间距（ 0 表示单元格挨在一起）

2、行：tr

3、列（嵌套在 tr 内）：tdth（相较于 td 多了字体加粗，居中的效果）

        属性：

        1、width：控制表格的宽

        2、high：控制表格的高

        3、rowspan：行合并

        4、colspan：列合并

4、thead：表格的头（包起来的那一行会呈现在页面的上面，不会再按照顺序依次呈现）

5、tbody：表格的身体（和 thead 一样）

6、tfoot：表格的结尾（和 thead 一样）

        11、框架标签（ 嵌套页面的 ）：

        iframe：

        属性

        1、src：嵌套的资源

        2、width：宽

        3、height：高

        4、frameborder：一般用 0 ，表示把边框去掉。可以把任意页面非常逼真的嵌入进来。

        5、name：给窗口起的名称

12、音频资源（ mp3格式 ）

audio：

        属性：

        1、src：资源路径

        2、controls：让播放器展示出来，手动播放

        3、aotoplay：表示自动播放

        4、loop：循环播放

13、视频资源（ mp4格式 ）

        video：

        属性：

        1、src：资源路径

        2、controls：让播放器展示出来手动播放

        3、aotoplay：表示自动播放

        4、loop：循环播放

        5、width，height：视频比例不会变，但是会自动放大缩小后放到指定宽高的容器里

公共属性： ( src=" " )

1、style：加样式( width:30px;high:50px; )

2、class：划分类

4、id：唯一的标识符，类似于身份证号

供收集用户信息的标签

1、input：

        属性：

        type：根据 type 属性进行区分

        1、type="text"：单行文本框

        2、type="passward"：密码框

        3、type="radio"：选框。

                单选框：加上name属性进行分组后后，name属性相同的是同一组，只能选择一个。

        4、type="checkbox"：多选框。

        5、type="file"：文件选择器

        6、type="color"：颜色拾取器

        7、type="date"：日期选择器

        8、type="datetime - local"：日期时间

        9、type="week"：周选择器

        10、type="range"：滑块

                属性：min：最小时代表的值；max：最大时代表的值；value：初始值；

        11、type="number"：数字

                属性：min：最小时代表的值；max：最大时代表的值；value：初始值；step：设置步长；

        12、type="button"：表示普通按钮

                属性value：对按钮进行说明的

        13、type="reset"重置按钮

                属性value：对按钮进行说明的

        14、type="submit"提交按钮

                属性value：对按钮进行说明的

2、select：下拉框

3、option：下拉框下先择的内容，和select配套使用

4、textrarea：多行文本域

        属性：

        rows：表示高度，多少行；

        cols表示宽度，一行里有多少个字符；

Visual Studio Code 快捷键

1、！：形成 html 的基本框架元素

2、Ctrl+/：形成注释

3、标签命+回车：形参html元素

4、标签命+{ 内容 }+回车：在花括号当中直接书写文本，会直接在html元素标签内生成文本

5、标签名+*N（N代表个数）：直接生成多个元素

6、标签命+{ 内容 $$ }+*N+回车：$代表0~9；

7、>：代表向下一级生成html元素

8、+：代表同级下生成不同的标签