html basic

网页图标

支持的图片格式是icon、png

常用的大小：16x16、24x24、32x32 (单位：像素)

<head>
    <!-- 省略协议号为了节省空间，省略后按http协议来访问
		当rel="icon"时，type默认为"image/x-icon"
	-->
    <link rel="icon" href="//www.jd.com/facicon.ico">
</head>

Emment插件使用

REF

!或html:5 + Enter生成基本文档结构

按结构选择器的语法 + Enter生成对应的结构

如： div>ul>li + Enter 生成如下结构

<div>
   <ul>
       <li></li>
   </ul>
</div>

div+p+bq + Enter 生成如下结构

<div></div>
<p></p>
<blockquote></blockquote>

ul>li*5 + Enter 生成下面结构

<ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

div+div>p>span+em^h2 + Enter 生成如下结构

其中em^h2表示生成h2元素作为em父元素的兄弟元素

如果是^^则表示祖父元素，以此类推，但不会超出语句中最外层元素

<div></div>
<div>
   <p><span></span><em></em></p>
   <h2></h2>
</div>

div+(div>p)+em + Enter 生成如下结构

(x)+em：表示生成em最为x最外层元素的兄弟元素

<div></div>
<div>
   <p></p>
</div>
<em></em>

div>(header>ul>li*2>a)+footer>p + Enter生成如下结构

<div>
   <header>
       <ul>
           <li><a href=""></a></li>
           <li><a href=""></a></li>
       </ul>
   </header>
   <footer>
       <p></p>
   </footer>
</div>

dl>(dt+dd)*3 + Enter生成如下结构

<dl>
   <dt></dt>
   <dd></dd>
   <dt></dt>
   <dd></dd>
</dl>

div#header+div.page+div#footer.class1.class2.class3 + Enter生成如下结构

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

dt[title="name"] + Ener生成如下结构

<dt title="name"></dt>

ul>li.item$*5 + Enter生成如下结构

<ul>
   <li class="item1"></li>
   <li class="item2"></li>
   <li class="item3"></li>
   <li class="item4"></li>
   <li class="item5"></li>
</ul>

ul>li.item$$*5 + Enter生成如下结构

<ul>
   <li class="item01"></li>
   <li class="item02"></li>
   <li class="item03"></li>
   <li class="item04"></li>
   <li class="item05"></li>
</ul>

ul>li.item$@4*5 + Enter生成如下结构

<ul>
   <li class="item4"></li>
   <li class="item5"></li>
   <li class="item6"></li>
   <li class="item7"></li>
   <li class="item8"></li>
</ul>

ul>li.item$@-*5 + Enter生成如下结构

<ul>
   <li class="item5"></li>
   <li class="item4"></li>
   <li class="item3"></li>
   <li class="item2"></li>
   <li class="item1"></li>
</ul>

ul>li.item$@-7*5 + Enter 生成如下代码

<ul>
   <li class="item11"></li>
   <li class="item10"></li>
   <li class="item9"></li>
   <li class="item8"></li>
   <li class="item7"></li>
</ul>

ul>li.item$@4-*5 + Enter

<ul>
   <li class="item4-"></li>
   <li class="item5-"></li>
   <li class="item6-"></li>
   <li class="item7-"></li>
   <li class="item8-"></li>
</ul>

ul>li.item$$@-04*5 + Enter

<ul>
   <li class="item08"></li>
   <li class="item07"></li>
   <li class="item06"></li>
   <li class="item05"></li>
   <li class="item04"></li>
</ul>

ul>li.item$@4test*5 + Enter

总结：$是代表单调有序数的占位符， $$表示两位，@和@-指定基数（从几开始）

<ul>
   <li class="item4test"></li>
   <li class="item5test"></li>
   <li class="item6test"></li>
   <li class="item7test"></li>
   <li class="item8test"></li>
</ul>

a[href=https://www.baidu.com]{click} + Enter

<a href="https://www.baidu.com">click</a>

a{click}>span{This is a span.} + Enter

<a href="">click<span>This is a span.</span></a>

a>{click} + Enter

<a href="">click</a>

a{click} + Enter

<a href="">click</a>

a>{click}+span{This is a span. } + Enter

<a href="">click<span>This is a span.</span></a>

p{click}+a{here}+{to continue}

<p>click</p><a href="">here</a>to continue

p>{click}+a{here}+{to continue} + Enter

<p>click<a href="">here</a>to continue</p>

在div上输入.wrap>.content + Enter

<div class="wrap">
	<div class="content"></div>
</div>

在div中输入.wrap+.content + Enter

<div class="wrap"></div>
<div class="content"></div>

在em中输入.item + Enter, 因为em不能嵌套em

<span class="item"></span>

table>#row$$*4>[colspan=2] + Enter

<table>
   <tr id="row01">
       <td colspan="2"></td>
   </tr>
   <tr id="row02">
       <td colspan="2"></td>
   </tr>
   <tr id="row03">
       <td colspan="2"></td>
   </tr>
   <tr id="row04">
       <td colspan="2"></td>
   </tr>
</table>

定义列表

dl(definition list)的直接子元素只能dt(data term)、dd(data description)

一般dt后跟若干个dd

列表相关的常见CSS属性：list-style-type、list-style-image、list-style-position、list-style

适用于display设置为list-item的元素，比如li元素

list-style-image: 设置某张图片为li元素前面的标记，会覆盖list-style-type的设置

list-style-position:设置li元素前面标记的位置，可以取outside、inside两个值

list-style: list-style-type、list-style-image、list-style-position的缩写属性

表格(Table)

table tr(row)

td(data)

table td {
    // 设置单元格间距
    border-spacing: 10px 20px;
}

cell-spaing、cell-padding、border, align

细线表格

table {
    // 合并border
	border=collapse: collapse；
}

也可以通过table的background-color来体现单元格边框

表单

form

常用属性

method： get, post

action：提交表单的目标（通常是服务url）

target：类似a的target

enctype: 对要提交的数据进行编码的方式

application/x-www-form-urlencoded (default)

multipart/form-data: 文件上传时必须为这个值，且method须为post

text/plain: 普通文本传输

accept-charset: 规定扁担提交时使用的字符编码

checkbox

需要设置value值才能正确提交

同一组name设置同一个

radio

需要设置value值才能正确提交

同一组name需要相同才能实现单选

label

可以和某个input绑定，点击label就可以激活对应的input

for属性的值跟绑定的input的id值要相同

input

常用属性

name：表单数据的字段值

value：字段对应的值

maxlength

minlength

placeholder

readonly: 只读，bool(不用设置值)

disabled: 禁用， bool

checked: 默认被选中，bool，用在radio, checkbox上

autofocus: 页面加载时自动聚焦， bool

form: 设置所属的form（填写form的id），设置了该值，即使input不在form中，表单提交时其数据也能提交

去除tab选中效果

input: focus {
    outline: none;
}

input:not[type="text"]:not[type="password"]: focus {
    outline: none;
}

设置tabindex = “-1”

button

type有三种取值： button, reset, submit

textarea

常用属性

resize: none horizontal vertical bpth，尺寸是否可调整

建议不要使用cols, rows去设置尺寸，而用css: width, height

select

常用属性

size：展示几项，一般为1（默认）

multiple：bool, 是否可多选，不常用

<select name="edu" size="2", multiple>
    <option value="1">小学</option>
    <option value="2">初中</option>
    <option value="3">高中</option>
    <option value="4" selected>大学</option>
    <option value="5">研究生</option>
</select>

fieldset legend

<fieldset>
    <legend>Get请求测试</legend>
    <form action="https://www.baidu.com/s", target="_blank">
        <div>
            <input name="wd" type="text">
            <button>百度一下</button>
        </div>
    </form>
    <div>
        <input name="q" type="text">
        <button>汽车之家</button>
    </div>
</fieldset>

background-imag vs img

前者是css属性，不占用空间；后者是html元素，占空间
前者支持CSS Sprite；后者不支持
后者更易被搜索引擎收录（结合alt属性）
后者优先加载；前者在加载完HTML元素后加载

文档画布得背景

html或body元素得背景都能够延伸到整个文档画布
如果同时设置了html和body元素得背景，根元素html得背景才会作为文档画布背景
建议通过body元素来设置文档画布背景

伪元素的背景

div::first-line  {
	background-color: blue;
}

html basic

网页图标

Emment插件使用

定义列表

表格(Table)

细线表格

表单

form

checkbox

radio

label

input

button

textarea

常用属性

select

常用属性

fieldset legend

background-imag vs img

文档画布得背景

伪元素的背景

Further Reading

iptables

ios - webview-troubleshooting

weex - wxbridgecontext

Trending Tags