前端開發工具:
Dreamweaver、Hbuilder、WebStorm、Sublime、PhpStorm...
==========================================================
head頭的本質:
優化頁面,利於搜索;
設置字符集,防止亂碼;
引入外部樣式方便;
規定呈現樣式。
===========================================================
<meta name="keyword" content="PHP、JS、CSS">
<meta name="description" content="PHP、JS、CSS">
===========================================================
<hr size="100" width="200">
size就是高度
===========================================================
<big>hello html</big>比默認的大一個號的字體(若是已經最大,就無效)
<small>hello html</small>比默認的小一個號的字體(若是已經最小,就無效)
=========================================================================
<sub>顯示在右下角
<sup>顯示在右上角
=================================================================
斜體效果的一些標籤:
<i>你好i</i>
<em>你好em</em>
<cite>你好tite</cite>
<address>你好address</address>
其中address是塊級元素,獨佔一行,其餘三個是行級元素。
=================================================================
css的樣式:
<img src="1.jpg" width="100" height="100">
<img src="1.jpg" style="width:100px;height:100px;">
使用style時須要加單位。
====================================================================
text-indent: 2.5em;首行縮進
==================================================================
在table元素中邊框亮邊線,是指表格的左側和頂部的邊線:
bordercolorlight;php
在table元素中邊框暗邊線,是指表格的右側和底部的邊線:
bordercolordark;
====================================================================
設置表格的背景顏色:
bgcolor,background,
bgcolor能夠設置body標籤和table相關標籤的背景顏色,
示例:<table bgcolor="red"></table>
background必須寫進style中。bgcolor不寫在style中。
==================================================================
table相關標籤:
table、thead、tbody、th、caption、tr、td、tfoot。
<table style="border:1px solid #ccc;">
<caption>
我是表格標題caption
</caption>css
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>html
<tbody>
<tr>
<td>張三</td>
<td>12</td>
</tr>
</tbody>前端
<tfoot>
<tr>
<td>合計</td>
<td>100</td>
</tr>
</tfoot>工具
</table>
================================================================
align 設置左右對齊方式(left、right、center)
valign 設置上下對齊方式(top、bottom、middle)
===============================================================
img的border-radius能夠設置邊角的弧度,
若是寬高同樣,弧度50%時圖片顯示圓形;
若是寬高不同,弧度50%時顯示橢圓形;
<img src="1.jpg" style="width:1080px;border-radius:50%;">學習
opacity:0.5;設置圖片透明度
<img src="1.jpg" style="width:1080px;opacity:0.5;">
==================================================================
css中屬性選擇器:
[alt="php"]{border:5px solid red;}設置屬性alt的值爲php的元素樣式;
[alt][title]{border:5px solid red;}設置擁有屬性alt和title的元素的樣式;
[alt^="php"]{border:5px solid red;}設置屬性alt的值爲php開頭的元素樣式;
[alt$="php"]{border:5px solid red;}設置屬性alt的值爲php結尾的元素樣式;
[alt~="php"]{border:5px solid red;}設置屬性alt的值包含php的樣式(字符之間以空格隔開);
[alt|="php"]{border:5px solid red;}設置屬性alt的值包含php的樣式(字符之間以-隔開);
=====================================================================================
僞類選擇器:
li:first-child{color:red;} //第一個li
li:last-child{color:red;} //最後一個li
li:nth-child(5){color:red;}//第五個li
li:nth-child(odd){color:red;}//第奇數個li
li:nth-child(even){color:red;}//第偶數個li
================================================================================
+表示同級且相鄰:
h1+h2{color:red;}//表示設置與h1相鄰的同級的h2元素的顏色,不包括h1,必須是下一個元素,不能是上
一個;
h1~h2{color:red;}//表示設置與h1同級的全部的h2元素的顏色,不包括h1,也不包括h1以前的h2元素;
==========================================================================================
text-indent:2em;//縮進兩字符
==================================================================================
cellspacing 外邊距
cellpadding 內邊距
=================================================================================開發工具