i-memo: WEB

型態選擇器 Type selectors	<h1> <h2> ...<div> <p>
ID選擇氣 ID selectors	使用「#」宣告一個id在同一個網頁只能出現一次
類別選擇器 Class selectors	使用「.」宣告，一個class可以在一個網頁出現多次
通用選擇器 Universal selector	使用「」，{ }所有元素套用括號內的樣式
群組選擇器 Groups of selectors	不用元素擁有同樣的屬性時可以群組設定
後代選擇器 Descendant combinator	一個元素之下的所有選擇器為後代選擇器
子選擇器 Child combinator	當b元素在a元素下一層時，則b元素為a元素的子選擇器，但若中間有其他元素插入則只是後代選擇器
同層相鄰選擇器 Adjacent sibling combinator	有同一個父親的兩個元素以「+」為連結，選擇某個特定元素之後的第一個特定元素
同層全體選擇器 General sibling combinator	有同一個父親的兩個元素以「~」為連結，選擇某個特定元素的同一層元素
偽類選擇器 Pseudo-classes	一個元素的特殊狀態，ex滑鼠移至元素上的狀態設定或一個元素中本來就存在的元素，ex第一個子元素、最後一個子元素
偽元素選擇器 Pseudo-elements	被用於指定某個元素的某部分樣式，ex某個樣式的第一個字母、第一行、或其元素之前之後插入內容
屬性選擇器 Attribute selectors	可以為擁有指定屬性的HTML元素設定樣式，不僅限於類別和ID屬性

2015年3月23日

還原壓縮過的js程式碼：Javascript Beautifier

http://jsbeautifier.org/

有時候拿到js的code 是被壓過只剩一行超難人眼看可以用這線上工具

http://www.minwt.com/html/12284.html

2015年3月17日

2015年2月24日

2015年2月13日

HTML5+CSS3上課筆記－ CSS (cascading style sheets)

h1 { color:red;}

h1叫選擇器(selector)
color叫屬性(property)
red叫屬性值(value)
{}內叫宣告區塊(declaration block)
color:red;叫宣告(declaration)

CSS3 新增內容

新的選擇器	偽類選擇器、屬性選擇器、nth選擇器
區塊模式	box-sizing有新屬性定義範圍更直覺
背景與邊框	全螢幕背景、漸層背景、圓角邊框、圖片邊框...
新的圖片屬性	圖片陰影、圖片剪裁
新的文字屬性	英文字強失斷行、陰影
多欄版面配置	multiple columns
2D/3D變形、動畫

CSS套用方法

套用方式		優先順序
行內樣式 inline style	直接寫在HTML的元素內 `<span class="aaa" style="color:red;"></span>`	1
內部樣式 internal style sheet	直接寫在HTML文件放在<head>內 `<style type="text/css"> section { border:1px solid black !important; } </style>` 加了!important 會變最最優先無法被行內樣式取代 (也可把important 放在行內樣式中)	2
外部樣式 external style sheet	將所有CSS樣式宣告在其他檔案中在<head>內 `<link href="css/style.css" rel="stylesheet">`	3
匯入套用 imported	可以在html也能在css中但較常用在css文件內的import HTML中： `<style type="text/css"> @import url(style.css); </style>` CSS中： `@import url(style.css);`

CSS常用單位：
pt：印刷用字體尺寸
px：像素(pixel)
em：相對比例，對繼承父元素的比例
例：
body {font-size:2em;}
h1 {font-size:1em;}

h1實際大小會是1em*2=2em

%：相對比例，對繼承父元素比例

*預設值為1em=100%=12pt=16px
*px和em的換算線上工具：http://pxtoem.com

CSS常用合併寫法：
*四邊數值合併：padding、margin

padding:1px 2px 3px 4px;
(padding-top padding-right padding-bottom padding-left)

padding:1px 2px 3px;
(padding-top padding-right&left padding-bottom)

padding:1px 2px;
(padding-top&buttom padding-right&left;

padding:1px;
(padding-top&bottom&right&left)

margin是與外的距

	↑
←	★	→
	↓

padding 是與內的距

	↓
→		←
	↑

*背景合併
background:#ccc url('../image/bg.jpg') no-repeat fixed left top;
#ccc是background-color
url()是background-image
no-repeat是background-repeat
fixed是background-attachmen 是否要跟著捲軸動
left top是background-position 背景圖位置

順序：background-color | background-image | background-repeat | background-attachmen | background-position

background-repeat

repeat	重複預設
repeat-x	橫向重複(x軸)
repeat-y	縱向重複(y軸)
no-repeat	不重複

background-attachmen

scroll	跟著頁面捲動預設
fixed	背景固定

background-position

left top left center left bottom right top right center right bottom center top center center center bottom	直接指定位置
x%,y%	指定圖片%位置
x px, y px	指定圖片px位置

*邊框合併 border
border:1px solid #ccc;
順序：border-width | border-style | border-color

border-style

none	無
hidden	隱藏
dotted	點線
dashed	虛線
solid	實線
double	雙線
groove	立體
ridge	立體
inset	立體
outset	立體

*文字樣式合併 font
font: italic normal bold 12px/20px Verdana;
順序：font-style | font-varian | font-weight | font-size/font-height | font-family
省略後至少要保留font-size和font-family

font-style：normal(一般)、

italic(斜體)

、oblique(字體傾斜)
font-variant：normal(一般)、small-caps(小寫)、groove(立體)
font-weight：normal(一般)、bold(粗體)、bolder(極粗體)、100~900(指定數值)

CSS3前綴
加了後browser才讀的到
Chrome/Safari: -webkit-
Firefox: -moz-
IE:-ms-
Opera: -o-

前綴檢查器：http://cssprefixer.appspot.com/ (寫好的css貼上去會自行產生前綴)
也可用http://caniuse.com/ 按「Show all」看是否有減號(沒減號加了也沒用)

HTML5+CSS3上課筆記－ HTML

HTML5 vs HTML4

HTML4寫法	HTML5寫法
<div id="header"></div>	<header></header>
<div id="menu"></div>	<nav></nav>
<div id="content"></div>	<section></section> <article></article>
<div id="footer"></div>	<footer></footer>

HTML5常用的語意標籤：

<article>	可以獨立存在的內容，比section有更明確的語意(但沒有一定要article包section 或是相反)，代表獨立、完整的區塊。可能包含有header或footer
<section>	文件區塊
<aside>	不是頁面的主要內容區塊移掉也不影響頁面閱讀功能
<footer>	頁面或區塊的底部
<header>	頁面或區塊的頂部通常包含logo、網站標題、導覽列
<nav>	包含道覽連結的區塊
<figure>	文件中的圖片
<figcaption>	圖片說明
<video>	包含影片當及相關音樂檔、說明等
<audio>	包含聲音播放檔

以上在caniuse測試 ie9以上都可支援

其他元素列表可參考：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/

如要讓ie8以下支援html5 可head中加入


  <!--[if lt IE 9]>

        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

 <![endif]-->

HTML head內容：
*CSS一定放在JS先

*<meta> 設定網頁文件相關資訊屬性有charset、content、name
<meta name="description" content"網頁描述"> (網頁描述大約70字)
<meta name="keywords" content"關鍵字a, 關鍵字b, 關鍵字c">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> (viewport給行動裝置用)：
width：指定寬度(數字或「device-width」
height：指定高度(數字或「device-height」
initial-scale：第一次進入頁面的初始比例(最小0.25 最大5)
minimum-scale：允許縮小最小比例(最小0.25 最大5)
maximum-scale：允許放大最大比例(最小0.25 最大5)
user-scalable：是否允許使用者縮放(是為1 否為0)

*網站圖示icon 不一定要ico檔也可以gif 或png size為16x16 、32x32

HTML body內容：
*每個網頁只能有一個h1

2015年2月8日

HTML5+CSS3上課筆記－網站、工具

W3C SCHOOL

http://www.w3schools.com/

http://www.w3schools.com/html/html_form_attributes.asp (html5 input新屬性)

測試瀏覽器支援度

https://html5test.com

http://fmbip.com/

測試語法在各瀏覽器的各版本是否支援或是可否用前綴字使其支援

http://caniuse.com/

查看瀏覽器市佔率

http://gs.statcounter.com/

icon產生(但現在可用png圖檔就好不定一定要ico)

http://www.favicon.cc/

px和em的換算

http://pxtoem.com/

自動產生css前綴子

http://cssprefixer.appspot.com/

(會自動判斷哪些屬性需要加哪些browser用到的前綴子)

hex和rgb的轉換

http://hex.colorrrs.com/

css.的generator

http://css3generator.com/

圖片邊框(border-img)產生器

http://border-image.com/

(上傳圖調整用的位子)

線上壓縮png
https://tinypng.com/

css3產生漸層的語法

http://www.colorzilla.com/gradient-editor/

符號編碼轉換 (ex >→ &# 或在css用\0000 在js用 \u0000)

https://www.evotech.net/articles/testjsentities.html

google fonts

https://www.google.com/fonts

Font Awesome(作者將各種常用圖示做成字型)

http://fortawesome.github.io/Font-Awesome/

文字編輯器

Brackets (可直接不存檔在chrom直接預覽網頁)

推薦外掛：Color Picker、emmet

Color Picker可以 option+command+K 選擇顏色(可包含透明度)

emmt可以

1.輸入「div>p>a」按tab後自動產生「<div><p><a></a></p></div>」

2.輸入「ul>li*3」按tab後自動產生「<ul><li></li><li></li><li></li><ul>」

3.對著class name按command E 直接編輯其CSS

Sublime

有各種套件可下載

安裝package control (https://packagecontrol.io/installation)

View→Show Console

把網站的程式碼貼上 enter 重新啟動

之後安裝各套件方式：

1.打開Package Control (Crrl +shift +p 或 command + shift +p)

2.輸入install package→enter

3.輸入套件名→enter

推薦套件：emmet、colorpicker、html boilerplate、cssformat、livereload(要撘配chrome套件)

2015年1月23日

< s:if　判斷是否包含字串

是否contain某個字串不是用contain

AAA和BBB都是參數


<s:if test="%{#AAA.indexOf(#BBB)>=0}">

AAA裡有BBB
</s:if>

2014年12月16日

利用js 讓網頁下雪

http://www.schillmania.com/projects/snowstorm/basic-example.html

CSS3 單位可以計算：calc

http://www.minwt.com/css/11583.html

EX：


width:calc(100%/3);

width:calc(600px/3)

還可以混合! 真是太貼心了


width:calc(100%/3+10px);

2014年11月19日

用瀏覽器就能開發設計網站

http://codepen.io/

介紹
http://www.minwt.com/html/11470.html

2014年10月28日

配色網站-http://coolors.co/

http://coolors.co/

空白鍵random產生

可以lock喜歡的顏色 or 自己填色碼

2014年10月7日

建立 RESTful WS Server

Web.xml



<servlet>

    <servlet-name>ServletAdaptor</servlet-name><!--指定 Servlet 幫你處理 RESTful WS-->

    <servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>

    <init-param>

        <param-name>com.sun.jersey.config.property.packages</param-name>

        <param-value>imemo.ws</param-value><!--指定 RESTful WS Package-->

     </init-param>

     <load-on-startup>1</load-on-startup>

</servlet> <servlet-mapping>

     <servlet-name>ServletAdaptor</servlet-name>

     <url-pattern>/ws/*</url-pattern><!--指定 Servlet Mapping URL-->

</servlet-mapping>

WS的Class



@Path("/members") //指定 RESTful 服務的 Path (URL)

public class AccountsServices {

    @POST //指定 HTTP Method

    @Consumes(MediaType.MULTIPART_FORM_DATA) //指定 Consumes (消化)資料型態

    @Produces(MediaType.TEXT_PLAIN) //指定 Produces (產出)資料型態

    @Path("vip") //指定 Subpath

    public String vip(@FormParam("account") String account) {

  

        return Response.ok("OK").build();

     }

}

WADL
URL: https://localhost:8888/ws/application.wadl



<application xmlns="http://research.sun.com/wadl/2006/10">

        <resources base="https://localhost:8888/ws/">

          <resource path="/members"><!--指定 Path-->

             <resource path="vip"><!--指定 Subpath-->

               <method id="vip" name="POST"><!--指定 HTTP Method -->

                  <request><representation mediaType="multipart/form-data"/></request><!--指定 Consumes (消化)資料型態 -->

                  <response><representation mediaType="text/plain"/></response><!--指定 Produces (產出)資料型態 -->

              </method>

        …

chrome套件：Postman

2014年9月30日

手機版網頁畫面滿版

http://cfyeric.blogspot.tw/2010/10/blog-post.html


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

Viewport的屬性
width / height
設定該頁適合顯示的畫面大小

device-width設定依行動裝置的螢幕寬度而定

initial-scale
設定預設的畫面是以多少倍的 viewport 來顯示

minimum-scale / maximun-scale
設定畫面提供縮放的最小與最大比例，值都為正數。最小值default：0.25；最大值default：10.0

通常可設定maximun-scale=1.0 防止螢幕翻轉成landscape模式後重新讓內容去對應轉動後viewport的寬度

user-scalable
設定是否能夠讓使用者縮放的功能

2014年6月20日

利用 tag 幫文字標注音假名


        <div>

            <ruby>

                <rb>今日</rb>

                <rt>きょう</rt>

            </ruby>

            は

            <ruby>

                <rb>暑</rb>

                <rt>あつ</rt>

            </ruby>

            いですね

        </div>

上面這串顯示出來就是：

今日きょうは暑あついですね

2014年5月8日

< s:radio 能換行的小撇步

前提後面沒有要接 textfield之類之類的東西


<s:radio name="member.sex"  list="# {'M':'男<br/>', 'F':'女'}" ></s:radio>

2014年5月5日

FREE的 FrontPage-Expression Web4

http://www.microsoft.com/en-us/download/details.aspx?id=36179

Details的地方有繁中連結 ....

http://download.microsoft.com/download/2/B/E/2BE7AA64-07FA-4E37-99CD-BC9722691FB7/Web_Trial_zh-Hant.exe

訂閱：文章 (Atom)

i-memo

2018年5月3日

[Chrome套件]CSSPeeper

2016年1月11日

Eclipse jsp 預設 encoding改為utf8

2015年5月12日

線上產生LOADING GIF圖檔：preloaders.net

2015年4月16日

HTML5+CSS3上課筆記－ CSS選擇器