HTML代码片段

IE条件注释

<!--[ifIE6]>
IE6版本有效
<![endif]-->
<!--[if gt IE6]>
IE6以上版本有效
<![endif]-->
<!--[if gte IE6]>
IE6(包含)及以上版本有效
<![endif]-->
<!--[if lt IE8]>
IE8以下版本有效
<![endif]-->
<!--[if lte IE8]>
IE8(包含)及以下版本有效
<![endif]-->
<!--[if !IE]>-->
除了IE
<![endif]-->

用Chrome或最新浏览器内核渲染页面

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit"><!-- 此标签只有360浏览器支持 -->

HTML特殊符号(也有的叫字符实体)

  • 空格 &nbsp;
  • < &lt;
  • > &gt;
  • & &amp;
  • " &quot;
  • © &copy; 版权
  • ® &reg; 注册商标
  • × &times;

HTML5页面最简结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

如果使用Emmet插件,只需输入html:5+Tab键即可生成上面的结构。

占位标签模版

段落

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

导航

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</nav>

表格

<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

更多见这里 Sublime有生成这些占位标签的插件:Placeholders

响应式Meta

<meta name="viewport" content="width=device-width, initial-scale=1">

邮件链接

普通的

<a href="mailto:someone@yoursite.com">Email Us</a>

带主题的

<a href="mailto:someone@yoursite.com?subject=Mail from Our Site">Email Us</a>

防止搜索引擎爬取页面

防止所有搜索引擎(有操守的搜索引擎,呵呵)

<meta name="robots" content="noindex">

只防Google

<meta name="googlebot" content="noindex">

防止爬取链接指向的页面

<a href="privatepage.html" rel="nofollow">Link to private page</a>

关闭输入框自动补全

<input name="q" type="text" autocomplete="off"/>

参考

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 学习纲要:异步流程处理

    修改上面的代码,用 Promise,async/await,事件发布订阅 这几种方式实现下面的需求

    Joel
  • 用10只老鼠找出1千瓶水中的1瓶毒药(附 JS 实现)

    条件:现在有1千瓶水,其中有1瓶是毒药。不能通过外观和气味等外在特征来区分毒药和水。老鼠吃了毒药或毒药和水的混合体后,1周会死亡。

    Joel
  • 创建 AST 节点写法示例

    AST (Abstract Syntax Tree(抽象语法树)) 是源代码语法结构的一种抽象表示。不了解 AST 的,可以看这篇文章。

    Joel
  • Mybatis案例超详解(上)

    本来是想像之前一样继续跟新Mybatis,但由于种种原因,迟迟没有更新,快开学了,学了一个暑假,博客也更新了不少,我觉得我得缓缓,先整合一些案例练练,等我再成...

    泰斗贤若如
  • python 宏使用详解

    宏类似python中的函数,可以传参数进去,但不能有返回值!在实际开发项目中,可以将一些复用代码抽取出来放到宏中,然后把不固定的值作为变量!

    py3study
  • 使用jquery的tmpl构建复杂表格

    Tmpl提供了几种tag: ${}:等同于{{=}},是输出变量,通过了html编码的。 {{html}}:输出变量html,但是没有html编码,适合输出ht...

    一笠风雨任生平
  • html基础+常用标签

    程序员同行者
  • HTML 5&CSS快速入门1.计算机中的文件2.网页组成4.HTML基础操作

    超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

    意气相许的许
  • Docker+Jenkins持续集成环境(3)集成PMD、FindBugs、Checkstyle静态代码检查工具并邮件发送检查结果

    为了规范代码,我们一般会集成静态代码检测工具,比如PMD、FindBugs、Checkstyle,那么Jenkins如何集成这些检查工具,并把检查结果放到构建邮...

    用户1177380
  • .Net Core 导出Html到PDF

      最近由于项目的需求问题,涉及到了在.Net Core中导出PDF的一个问题,最后选择方式是后端拼接到Html页面然后再通过Html导出到PDF。中间也尝试了...

    小世界的野孩子

扫码关注云+社区

领取腾讯云代金券