HTML标签常用属性

  • HTML注释:<!-- 注释的内容 -->

  • 文档声明:<!doctype html>

  • <a href="" target="_blank">:必须给定href属性才算是一个超链接,否则就是一个普通的行内标签

    href取值:除url外其他都是空链接

      href="javascript:void(0);",不刷新页面,但是貌似有其他JS浏览器兼容问题
      href="javascript:;",不刷新页面,推荐方法
      href="#linkName",不刷新页面,设置锚点链接的
      href="###",不刷新页面
      href="#",这样设置页面会刷新且会到页面顶部
      href="url"
    

    target取值:规定在何处打开链接

      target="_blank":在新窗口(页签)打开
      target="_self":在当前窗口(页签)打开,默认值
      target="_parent":在父窗口(页签)打开
      target="_top":在整个窗口中打开,将会清除所有被包含的框架并将文档载入整个浏览器窗口
      target="frameName":在指定的框架(frameName)中打开,不能以下划线开头
    

Continue →

针对移动端的一些常用 <meta> 讲解

手持设备通用meta

  • <meta content="telephone=no" name="format-detection" />

    用于设定是否将网页内容中的手机号码显示为拨号的超链接,iPhone上默认为yes;

  • <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    • width,viewport的宽度;

    • height,viewport的高度;

    • initial-scale,初始的缩放比例;

    • minimum-scale,允许用户缩放到的最小比例;

    • maximum-scale,允许用户缩放到的最大比例;

    • user-scalable,用户是否可以手动缩放;

Continue →

HTML布局之垂直居中

css 中虽然有 vertical-align 属性,但是这个属性并非是对布局设置垂直居中用的;

这里,记录一下自己常用的布局垂直居中的方法:

设置 display: table-cell

表格单元格的内容默认是垂直居中显示的;所以,我们也可以将一个 div 模拟成一个 td,这样再设置内容垂直居中就行了;不过 IE7以下浏览器不支持 display: table-cell

HTML:

<div class="box">
    <div class="con">con</div>
</div>

CSS:

.box {
    width: 100px;
    height: 100px;
    display: table-cell;
    vertical-align: middle;
    background-color: #03c6a8;
}
.con {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    background-color: #0a727d;
}

显示效果:

div

定位

定位,主要是设置子元素的 left 和 top 相对于父元素 50%,然后再用 margin-left 和 margin-top 设置其值为子元素宽度的一半;

HTML:

<div class="box02">
    <div class="con02">con</div>
</div>

CSS:

.box02 {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: #03c6a8;
}
.con02 {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -25px;
    margin-top: -25px;
    background-color: #0a727d;
}

显示效果:

div

使用 vertical-align: middle

vertical-align,不能运用于块元素,所以,如果要让 div 使这个属性,首先得设置 div 的 display: inline-block;行内元素如果要有宽、高也得先具有块元素的特性;

HTML:

<div class="box03">
    <span class="con03">con03</span><span class="con03-span"></span>/* 两span间不要换行 */
</div>

CSS:

.box03 {
    width: 100px;
    height: 100px;
    text-align: center;
    background-color: #03c6a8;
}
.con03 {
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
}
.con03-span {
    width: 1px;
    height: 100%;
    margin-right: -1px;
    display: inline-block;
    vertical-align: middle;
}

显示效果:

div

HTML布局之左右结构

在进行 html 结构布局之时,常用到的一种布局结构就是左右结构,比如注册表单之类的(左边标题,右边是表单控件),还比如常用的1:2:1的结构布局。这些情况下,我们常希望是左(或右)固定,而右(或左)能根据父元素的宽度自适应。

Continue →

CSSDOC

CSSDOC采用的是DocBlock,一个借鉴自PHPDocumentor项目的术语。一段DocBlock是一段可供人类和机器读取的数据块;

一段DocBlock/** 开头,以空格加 */ 结尾(像正常CSS注释一样)。而它的每一行必须以空格加星号(*)开头,否则将被文档生成器忽略。标签以@开始,紧跟着名字,中间不带空格。标签的描述或值应该放在标签名称之后,前面用空格分开。

Continue →

用 Emmet 书写 css

对于cssemmet语法,多数情况下直接取第一个字母,如果是多个单词连接,一般取每个单词的首字母或取第一个单词的首字母和第二个单词的前两字母;

对于sublime,如果装了emmet插件,一般输入一个字母后就会有提示:

Continue →

用 Emmet 书写 html

emmet,一般是作为编辑器的一个插件使用,目前比较知名的编辑器都有emmet插件;其前身是 zen coding,熟练掌握后,可使书写 htmlcss 的效率大大提升;而且其学习成本非常低;

使用方法:大多数编辑器中都是按 TAB 健;

Continue →