(超详细)HTML重难点标签突破

1.a标签

标签属性:

1. href 跳转的链接或锚点 href 其实是 hyper reference 超链接的缩写

   • href的取值如下
   • 链接

   •   百度一下 
     

   •   百度一下 
     

   •   百度一下 
     

   •   链接到此项目根目录下的a目录下的b目录下的c目录下的3.HTML
          
     

   •       链接到此页面同一目录下3.HTML
     

• 伪协议用法

• javascript伪协议

•       链接到此页面同一目录下3.HTML   
  

  • 上面的用法通常用来解决a标签没有任何响应的需求，:;之间不写任何东西即可，因为href属性值为空会刷新页面，为#会是页面回到顶部

• 锚点用法

•       点我滚动到ID为bottom的元素的位置
  

  • 发邮件

  •   点我发邮件  
    

  • 电话

  •   点我打电话给18888888888  
    

• a 标签链接到超文本文件能直接打开，遇到非超文本文件提示下载

  •   跳转到文本文档
      跳转到图片上
      下载压缩文件
      下载可执行文件
    

2. target 指定页面的打开方式

   •   百度一下  
     

   •   百度一下    
     

   •   百度一下    
     

   •   百度一下    
     

   •   百度一下    
     

   •   百度一下    
     

3. rel = noopener 防止一些BUG

4. download 此属性表示不是打开页面而是下载页面，不是所有浏览器都支持，尤其是手机浏览器

2.table表格标签

• table 表格标签 常用属性如下 :
  • border 边框 默认双条线 单位 px 只对 一般为1px
  • width 整个表格的宽度 单位 px
  • height 整个表格的高度 单位 px
  • align 此表格在浏览器中的对齐方式
  • cellspacing 单元格和单元格之间的距离 单位 px

• thead 表头
• tbody 表格体
• tr 表格行 常用属性如下
  • height 高度
  • align 设置当前行里面每个单元格的文字的水平对齐方式
  • valign 设置当前行里面每个单元格的文字的垂直对齐方式
• th 列或行的表头
• td 列数据 常用属性如下
  • width
  • height
  • align 设置单元格内文字的水平对齐方式 left 左 center 中 right 右
  • valign 设置单元格内文字的垂直对齐方式 top 上 center 中 bottom 下
  • 注意 ：设置了当前单元格的宽度 整个列都会受到影响，设置了当前单元格的高度 整个行都会受到影响
• tfoot 表尾

table的结构中间只能有thead，tbody(必须有tbody否则浏览器也会给你补上)，tfoot，不能再放其他东西了，而td单元格里面放啥都行

示例：

    

        

            

                
序号
                
姓名
                
电影
                
评分
            
            

                
1
                
刘德华
                
拆弹专家
                
9.0
            
            

                
2
                
郭富城
                
无双
                
9.1
            
            

                
3
                
甄子丹
                
追龙
                
8.9
            
            

                
4
                
张家辉
                
贪玩蓝月
                
5.0
            
        
    

• 单元格的合并

  1. 行合并: rowspan 上下合并
  2. 列合并： colspan 左右合并
  3. 合并单元格步骤 :
     1. 确定要合并的n个格
     2. 删掉多余的格，只留一个
     3. 在剩余的唯一的格子上 写入 colspan 或者 rowspan 把几行/列合成一个就写几

• 表格常用的CSS属性

  1. table-layout

     •   table-layout: auto; /* 大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。 */
       

     •   table-layout: fixed; /*表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。 */
       

  2. border-collapse

     •   border-collapse:collapse; /* 表格边框合并 不设置的话默认不合并*/
       

  3. border-spacing

     •   border-spacing:0;  /* 表格单元格之间的间距  一般都设置为0才好看 */
       

3.img标签

作用：发出get请求，展示一张图片

属性：

• alt 图片加载失败的描述文字

• height 图片的高 宽高只设置一个另一个值会等比缩放 都设置很可能会失真

• width 图片的宽

• src 图片的路径 也可以是图片的链接

两个重要的事件：

1. onload 在图片加载成功时触发
2. onerror 在图片加载失败时触发

响应式的CSS样式：

max-width:100%;   /* 各种屏幕都适用 */

可替换元素：在 CSS中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。

简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如