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 条评论
登录 后参与评论

相关文章

来自专栏移动开发之家

从Android到React Native开发(三、自定义原生控件支持)

恍惚间3个月过去了,作为揭棺而起的失踪人口,迟来的第三篇,也是react native原生相关的最后的一篇,是时候给收个尾了。这次就不废话了,直接上主题( ̄^ ̄...

501
来自专栏用户2442861的专栏

sublime text 配置php调试环境(快捷键)

2、在sublime text 2中 工具->编译系统->新建编译系统 添加如下代码:

1821
来自专栏程序小工

【VSCode插件】background添加编辑器背景

VScode 编辑器对中文支持很好,插件丰富,主题也好看,所以目前已经由 sublime 转投 Vscode 了。在插件搜集中找到了可以自定义编辑器背景的插件b...

3533
来自专栏北京马哥教育

[来稿]pycharm快捷键、tips、常用设置及版本控制 制

在PyCharm安装目录 /opt/pycharm-3.4.1/help目录下可以找到ReferenceCard.pdf快捷键英文版说明 or 打开pychar...

4818
来自专栏向治洪

react native实现上拉加载下拉刷新

前言 我们在做原生app开发的时候,很多场景都会用到下拉刷新、上拉加载的操作,Android中如PullToRefreshListView,ios中如MJRef...

2878
来自专栏搜云库

手把手教你 MongoDB 的安装与详细使用(二)

上一篇文章练习了,MongoDB 的以下操作

51110
来自专栏Golang语言社区

go channel 通信通道

go中最重要的一种通信通道就是channel 1.给一个 nil channel 发送数据,造成永远阻塞 2.从一个 nil channel 接收数据,造成...

3053
来自专栏Pythonista

Golang之beego读取配置信息,输出log模块

3422
来自专栏韦弦的偶尔分享

微信小程序导航参数中含有问号

和三一样,还可以使用 encodeURIComponent 和 decodeURIComponent 这就是小程序中导航的参数含有?的解决方案,如果还有其他好...

5592
来自专栏禅林阆苑

Sublime快捷键与常用插件配置总结 【原创】

Sublime快捷键与常用插件配置总结 Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: git...

4138

扫码关注云+社区

领取腾讯云代金券