HTML标签学习笔记

• 标签学习笔记

1.加HTML框架快捷键！+Tab

2.注释方法快捷键ctrl+/ 

3.加粗字体  strong

4.标签

双标签（有开始和结束）
单标签（不需要包裹）
标签关系：父子关系（嵌套关系）    兄弟关系（并列关系）
标题标签：标题等级（新闻）h1-h6  级标题 只有这六级标题 <h1> .... </h1>     vscode输入h1 按回车

5.依次选中同类文本快捷键 ctrl+d

6.段落标签：每个段落用 <p>...</p>

7.换行标签 ：<br>单标签     <hr>加分割线

8.文本格式化标签：

加粗（b strong） 下划线 （u  ins） 倾斜(i  em)  删除线(s   del)  

9.图片标签：

单标签  <img src="" alt="" title="">    

 <img+标签属性>  双引号内加图片名或者图片地址  
            图片显示则失败显示alt文本“图片显示失败”
            图片标签   title提示文本  当鼠标悬停时，才显示的文本                          图片标签 width和height 宽度和高度（数字）控制图片尺寸

路径：图片不在当前的文件中   要用到路径  

         1.绝对路径 （在盘符开始具体的路径 ） 
         2.多用相对路径*（从当前文件开始去找目标文件） 同文件夹图片相当于同级路径（下级文件夹名/文件名）  上级文件夹（../文件名）

10.音频标签 ：

 <audio src="" controls></audio>

                        src音频路径      

                        controls显示播放的控件  

                        autoplay自动播放（有的浏览器不支持）

                       loop循环播放

11.视频标签  

<video src="" controls></video>  

12.链接标签

<a href="可加入路径和网址  #为空链接"  target="_blank">超链接</a>

 _self默认值 覆盖原网页

 _blank新窗口跳转

13.列表标签  

（无序列表 有序列表 自定义列表）
                 无序列表  ul 整体  li元素    ul里只能放li   li里面随便放
                 有序列表  ol 整体  li元素
                 自定义列表  dl 整体  dt标题  dd内容   dl只能放dt、dd     dt、dd里面随便放

14.表格标签  

table 表格整体 - caption表格标题 - tr 表格每行-td表格单元格-内容   （均为包含关系）
          表格属性 （在table后加）   

                        border 边框宽度  width 表格宽度  height 表格高度
          表头 th   表格标题 caption 
          表格头部 thead  表格主体 tboby  表格底部 tfoot 
          合并单元格   rowspan 跨行合并  colspan 跨列合并（加td后面）

15.表单标签  

16.input标签  

通过type属性值不同 不同效果  

         type：  text 文本框

                      password 密码框
                      radio 单选框           

                      checkbox 多选框 name 分组 组名   checked 默认选中
                      file 文件选择 （multiple）  

                      submit 提交按钮 （3种按钮配合form使用）
                      reset 重置按钮                    

                      button 普通按钮 配合js使用 （value显示名称）
                      placeholder ：  占位符  提示输入内容

17.button标签  type ：submit  reset  button

18.select标签 ：下拉菜单的整体    双标签

19.option标签：下拉菜单的每一项       

                           selected 默认选中

20.textarea文本域标签 （双标签）：

                          cols可见宽度  rows可见行数 

21.label标签：包裹标签和内容 

22.语义化标签：

                        无语义标签：div标签  span标签
                        有语义标签：了解

23.字符实体：

                       空格  &nbsp