zoukankan      html  css  js  c++  java
  • HTML标签区别




    "一切美好的事物都是曲折地接近自己的目标,一切笔直都是骗人的,所有真理都是弯曲的,时间本身就是一个圆圈。好比HTML的标签有始有终"
    ——有心人做有心事哦,晚安Emily!





    (一)三表 用途
    list列表 整齐布局 ul先到先得,ol有序排列,还有个自定义【dl>dt>dd
    table列表 展示数据结构 【caption table>th/tr>td(thead标题 tbody数据 tfoot脚注)】
    border/cellspacing/cellpadding表格边框/相邻单元格外边间距/单元格内外边间距三参为0(去重叠可用border-collapse)】
    【跨单元格 柱列colspan 横行rowspan】
    form表单 收集用户信息 表单域action--服务器脚本
    表单控件type="date" name maxlength
    提示信息<label for="">扩大热区<input id="">
    其他属性textarea/seclect/option
    checkbox的name=“ [ ]”加中括号表示告诉后台服务器脚本含多个值
    value 光标聚焦保留值,一并打包发送后台
    placeholder 仅作背景,光标输入自动去掉提示信息


    (二)img图像,格式优先考虑webp>jpg>png>svg>png24>png8>gif

    格式 特点 应用
    ①png 透明,文件大,色彩多 【小LOGO、透明背景】
    png24 控制在40kb,色彩少
    png8 文件小,色彩单一
    ②jpg 不透明,文件小,色彩中 【轮播/广告、大背景/产品】
    图片大小控制在40~200kb
    ③gif 单一透明,色彩少 【动图】
    ④webp 透明动态,且文件小 【部分支持的浏览器,如Chrome】
    ⑤ico 字体图徽,文件小 【标签页title/小图徽】
    ⑥svg 缩放矢量,依赖代码<svg> 【可编辑,SEO爬虫可读取】

    【1】插图和背景区别

    ①.前者为产品展示,移动位置靠盒模型margin padding ②.后者为小图标或超大背景图,只能通过background-position

    【2】去除图片底侧空白

    ①思路:不让img、input行内块与父盒子基线对齐 ②vertical:top 或 display:block


    作者:MaricoCheung
    出处:http://www.cnblogs.com/MaricoCheung/
    ——有心人做有心事哦,晚安EmilyChen!

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

     
  • 相关阅读:
    18 个 Java8 日期处理的实践,太有用了!
    IntelliJ IDEA 2019.3安装激活破解使用教程
    低收入人员如何打造自己核心竞争优势
    关于企业网络营销的实战步骤
    关于如何做好微信营销和QQ营销的心得
    百度竞价项目的一些简要说明
    ASO是什么?AppStore搜索规则是什么?
    如何选择APP推广渠道和推广技巧
    浅析Hibernate映射(二)——关系映射(3)
    浅析Hibernate映射(二)——关系映射(4)
  • 原文地址:https://www.cnblogs.com/MaricoCheung/p/13375166.html
Copyright © 2011-2022 走看看