• 技术文章 >web前端 >html教程

    HTML中编码规范的总结

    不言不言2018-08-13 15:14:08原创891

    本篇文章给大家带来的内容是关于HTML中编码规范的总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    1.img标签要写alt标签
    2.单标签不要写闭合标签(img、link、input、hr、br)
    3.自定义属性要以data- 开头
    4.td要在tr里面,li要在ul/ol里面
    5.ul/ol的直接子元素只能是li
    6.section里面要有标题标签
    7.使用section标签增强SEO(搜索引擎优化)
    8.行内元素里面不可使用块级元素(a标签里面不能放p)
    9.每个页面要写
    10.要用table布局写邮件模板
    11.html要保持简洁,不要套太多层
    12.特殊情况下才在html里面写script和style
    13.样式要写在head标签里
    14.html要加上lang的属性

        <html lang="en">
        <html lang="zh-CN">

    15.要在head标签靠前位置写上charset和meta标签

    16.特殊符号使用html实体

    © &copy;
    ¥ &yen;
    ® &reg;
    > &gt;
    < &lt;
    & &amp;

    17.img空src的问题

    <img src="about:blank" alt><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

    18.关于行内元素空格和换行的影响
    19.类的命名使用小写字母加中划线(hello-world)
    20.不推荐使用自定义标签
    21.重复杂id和重复属性
    22.不推荐使用属性设置样式(canvas width height 需要写)
    23.使用合适的标签
    (1)如果内容是表格就使用table,table有自适应的优点;如果是一个列表就使用ol/ul标签,扩展性比较好
    (2)如果是输入框就使用input,而不是写一个p标签,然后设置contenteditable=true,因为这个在IOS Safari上光标定位容易出现问题。如果需要做特殊效果除外
    (3)如果是粗体就使用b/strong,而不是自己设置font-weight
    (4)如果是表单就使用form标签,注意form里面不能套form
    (5)如果是跳链就使用a标签,而不是自己写onclick跳转。a标签里面不能套a标签
    (6)使用html5语义化标签,如导航使用nav,侧边栏使用aside,顶部和尾部使用header/footer,页面比较独立的部分可以使用article,如用户的评论。
    (7)如果是按钮就应该写一个button或者<input type="button">,而不是写一个a标签设置样式,因为使用button可以设置disabled,然后使用CSS的:disabled,还有:active等伪类使用,例如在:active的时候设置按钮被按下去的感觉
    (8)如果是标题就应该使用标题标签h1/h2/h3,而不是自己写一个<p class="title"></p>,相反如果内容不是标题就不要使用标题标签了
    (9)在手机上使用select标签,会有原生的下拉控件,手机上原生select的下拉效果体验往往比较好,不管是IOS还是android,而使用<input type="tel">在手机上会弹一个电话号码的键盘,<input type="number"> <input type="email">都会弹相应的键盘
    (10)如果是分隔线就使用hr标签,而不是自己写一个border-bottom的样式,使用hr容易进行检查
    (11)如果是换行文本就应该使用p标签,而不是写br,因为p标签可以用margin设置行间距,但是如果是长文本的话使用p,因为p标签里面不能有p标签,特别是当数据是后端给的,可能会带有p标签,所以这时容器不能使用p标签。
    24.不要在https的链接里写http的图片

    <img src=”//static.chimeroi.com/hello-world.jpg”>

    相关推荐:

    html的基础元素,让你零基础学习HTML

    html页面中友情链接怎么进行添加设置?(代码示例)

    以上就是HTML中编码规范的总结的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:HTML中编码规范
    上一篇:input中id和name属性具体有什么不同啊?(示例) 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• ExtJs教程8• 为什么是这样的?_html/css_WEB-ITnose• 浏览器得到地址栏的相关信息_html/css_WEB-ITnose• HTML移动开发参考_html/css_WEB-ITnose• html+css知识整理_html/css_WEB-ITnose
    1/1

    PHP中文网