专栏首页小白程序猿HTML规范 - 代码格式

HTML规范 - 代码格式

  • 说明文案的注释方法
  • 采用类似标签闭合的写法,与HTML统一格式;注释文案两头空格,与CSS注释统一格式。
<!-- 头部 -->
<div class="g-hd">
    <!-- LOGO -->
    <h1 class="m-logo"><a href="#">LOGO</a></h1>
    <!-- /LOGO -->
    <!-- 导航 -->
    <ul class="m-nav">
        <li><a href="#">NAV1</a></li>
        <li><a href="#">NAV2</a></li>
        <!-- 更多导航项 -->
    </ul>
    <!-- /导航 -->
</div>
<!-- /头部 -->
  • 开始注释:<!-- 注释文案 -->(文案两头空格)。
  • 结束注释:<!-- /注释文案 -->(文案前加“/”符号,类似标签的闭合)。
  • 允许只有开始注释!
  • 代码本身的注释方法
  • 单行代码的注释也保持同行,两端空格;多行代码的注释起始和结尾都另起一行并左缩进对齐。
<!-- <h1 class="m-logo"><a href="#">LOGO</a></h1> -->
<!--
<ul class="m-nav">
    <li><a href="#">NAV1</a></li>
    <li><a href="#">NAV2</a></li>
</ul>
-->
  • HTML注释在IE6中的BUG
    • 如果两个浮动元素之间存在注释,那么可能导致布局错位或文字的BUG。
    • 所以,这种情况下,我们通常将注释去掉,或者索性采用模板语言(ftl、vm)的注释。
  • 严格的嵌套
    • 尽可能以最严格的xhtml strict标准来嵌套,比如内联元素不能包含块级元素等等。
    • 正确闭合标签且必须闭合。
  • 严格的属性
    • 属性和值全部小写,每个属性都必须有一个值,每个值必须加双引号。
    • 没有值的属性必须使用自己的名称做为值(checked、disabled、readonly、selected等等)。
    • 可以省略style标签和script标签的type属性。
  • 常用的标签

标签

语义

嵌套常见错误

常用属性(加粗的为不可缺少的或建议的)

<a></a>

超链接/锚

a不可嵌套a

href,name,title,rel,target

<br />

换行

<button></button>

按钮

不可嵌套表单元素

type,disabled

<dd></dd>

定义列表中的定义(描述内容)

只能以dl为父容器,对应一个dt

<del></del>

文本删除

<div></div>

块级容器

<dl></dl>

定义列表

只能嵌套dt和dd

<dt></dt>

定义列表中的定义术语

只能以dl为父容器,对应多个dd

<em></em>

强调文本

<form></form>

表单

action,target,method,name

<h1></h1>

标题

从h1到h6,不可嵌套块级元素

<iframe></iframe>

内嵌一个网页

frameborder,width,height,src,scrolling,name

<img />

图像

alt,src,width,height

<input />

各种表单控件

type,name,value,checked,disabled,maxlength,readonly,accesskey

<label></label>

标签为input元素定义标注

for

<li></li>

列表项

只能以ul或ol为父容器

<link />

引用样式或icon

不可嵌套任何元素

type,rel,href

<meta />

文档信息

只用于head

content,http-equiv,name

<ol></ol>

有序列表

只能嵌套li

<option></option>

select中的一个选项

仅用于select

value,selected,disabled

<p></p>

段落

不能嵌套块级元素

<script></script>

引用脚本

不可嵌套任何元素

type,src

<select></select>

列表框或下拉框

只能嵌套option或optgroup

name,disabled,multiple

<span></span>

内联容器

<strong></strong>

强调文本

<style></style>

引用样式

不可嵌套任何元素

type,media

<sub></sub>

下标

<sup></sup>

上标

<table></table>

表格

只可嵌套表格元素

width,align,background,cellpadding,cellspacing,summary,border

<tbody></tbody>

表格主体

只用于table

<td></td>

表格中的单元格

只用于tr

colspan,rowspan

<textarea></textarea>

多行文本输入控件

name,accesskey,disabled,readonly,rows,cols

<tfoot></tfoot>

表格表尾

只用于table

<th></th>

表格中的标题单元格

只用于tr

colspan,rowspan

<thead></thead>

表格表头

只用于table

<title></title>

文档标题

只用于head

<tr></tr>

表格行

嵌套于table或thead、tbody、tfoot

<ul></ul>

无序列表

只能嵌套li

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第五节、Python的注释《Python学习》

    任何时候,我们都可以给程序加上注释。注释是用来说明代码的,给自己或别人看,而程序运行的时候,Python解释器会直接忽略掉注释,所以,有没有注释不影响程序的执行...

    申霖
  • layui后台布局与百度富文本(ueditor)兼容性问题处理方案

    在使用layui后台布局时遇到了发布文章时使用百度富文本编辑器的兼容问题,有时文章写到了一半,无法回到首行,百度富文本编辑器菜单栏卡在顶部,只能手动操作。下面说...

    申霖
  • 文本标签「程序员培养之路第二天」

    • <video src="mov.mp4" controls="controls">

    申霖
  • Gartner 2019十大安全项目解读:比去年多了些啥?

    当George接任一家零售公司的CISO时,IT安全相对简单。但随着该组织的发展——为支持整个组织的数字业务,在线订购增多、员工和大量基于云的平台和技术增加——...

    FB客服
  • 论文记录 - Self-Supervised Learning for Cardiac MR Image Segmentation by Anatomical Position Prediction

    这篇论文是飘在 Arxiv 前十的一篇论文,当时就加入了待看清单,觉得这个自监督学习的方法用于心脏分割挺新颖的。

    caoqi95
  • 如何使用TensorFlow生成对抗样本

    如果说卷积神经网络是昔日影帝的话,那么生成对抗已然成为深度学习研究领域中一颗新晋的耀眼新星,它将彻底地改变我们认知世界的方式。对抗学习训练为指导人工智能完成复杂...

    两只橙
  • 本周末的QQ群视频--还是电商网站的事

    主要讲了如何开发“点击某商品,进入商品详情页”。 产品列表页,就是这个电商网站的首页,也是一般多数电商网站的首页,在首页上尽量多的把商品展示出来。 一般来讲,它...

    web前端教室
  • 更快更安全,HTTPS 优化总结

    在网站升级到 HTTPS 之后,我们还可以有很多玩意可以折腾,优化 HTTPS,让它更快更安全。这里是一篇 HTTPS 优化的总结,也包含问题的解决方法,不过不...

    程序员宝库
  • ios Category

    category是Objective-C 2.0之后添加的语言特性,category的主要作用是为已经存在的类添加方法。除此之外,apple还推荐了catego...

    赵哥窟
  • 数据库知识整理

    Read uncommitted:读未提交,顾名思义,就是一个事务可以读取另一个未提交事务的数据。

    用户3467126

扫码关注云+社区

领取腾讯云代金券