首頁 > 開發者 > JavaScript
1.學網頁最好的方法：學習別人的網頁。
2.文檔結構
<html>(超文字標記語言 (HTML))
<head> <title> </title> </head>
<body> </body>
</html>
3. <font size="7" color="red"></font> 字型標記,大小為7，顏色為紅色
4. <b></b> 加粗
<strong></strong> 加強語氣
<i></i> 斜體 <em></em> 加強語氣
<sup></sup> 上標
<sub></sub> 下標
<br /> 換行
<hr width="80%" size="" noshade="noshade" /> 水平線、占螢幕的80%寬,大小，實體型
<u></u> 底線
<s></s> 刪除線
<p align="center"></p> 段落
<h1 align="right"></h1> 標題
5.meta標記
(1)放在head標記裡面
(2)<meta name="keywords" content="value1,value2"> 設定網頁關鍵字
(3)<meta name="description" content="對value1進行拓展"> 設定描述
(4)<meta name="author" content="作者名"> 設定作者
(5)<meta http-equiv="content-type" content="text/html;charset=gb2312"> 設定字元集 ，content-type表示中文，
(6)<meta http-equiv=="refresh" content="2;URL=http://www.itcast.cn"/> 設定頁面定時跳轉
6.<!--注釋標記-->
7.不懂看w3cschool協助手冊
8.<body bgcolor="red" text="white" leftmargin="0"></body>
9.某些html標記有一些預設值
10.用適合的html標記去描述我們的網頁
11.80%與80px的區別
12.記住製作網頁的過程
13.<blockquote cite="URL"></blockquote> 整段縮排2個字元 ，定義一個區塊引述，及轉載的地址
14.<pre></pre> 預格式化
15. 空格
© 著作權號
® 商標號
& &
< <
> >
" "
16.無序列表 <ul type=""></ul> <li type=""></li> type的值:disc,circle,square
有序列表 <ol type=""></ol> <li type=""></li> type的值:A a 1
自訂欄表 <dl></dl> <dt></dt> <dd></dd>
17.gif(圖形交換格式)：256種顏色，支撐透明色，動畫
jpeg(JPEG 格式):1670種顏色
png(網路可移植格式):1670種顏色，支撐透明色
18.<img src="圖片的路徑" alt="文本" title="滑鼠移到圖片是顯示的文本" border=2 width="" height="" align="" vspace=10px hspace=10px/>
19.絕對路徑 相對路徑 src="01.png" src="pic/01.png" src="../01.png"
20.html的作用------控制頁面顯示
21.表格 <table border="" bordercolor="" bordercolorlight="" bordercolordark="" cellspacing="" cellpadding="" align="" width="" height="" frame="" rules="none">
<caption align="top"></caption> 表題
<colgroup align="" valign="" bgcolor="" span=""></colgroup>
<thead>
<th></th>
<th></th>
</thead>
<body>
<tr> <td colspan="" align="" valign="" bgcolor=""> 1 </td> <td rowspan=""> 2 </td> </tr>
</body>
<foot> </foot>
</table>
22.<a href="" title="" target="_blank另外,_self自身,_parent上級,_top"></a>
23.<a href=mailto:電子郵件地址></a>
24.<a href="#name"></a>
<a name="name"></a> 錨連結
<a href="xx.html#name"></a> 跳轉到xx.html頁面的錨點#name
25.<form action=url method="post,get" name="">
<input type="text,password" name="" value="" size="" maxlength="" readonly="readonly" />
<input type="submit" value="確定"/>
<input type="reset" value="取消" />
<input type="button" value="確定" />
<input type="radio" name="sex" value="man" checked="cehcked"/>男
<input type="radio" name="sex" value="woman" />女
<lable for="man">男</lable>
<input type="radio" name="sex" value="man1" id="man" />
<lable for="woman">女</lable>
<input type="radio" name="sex" value="woman1" id="woman" />
<select>
<optgroup lable="地區">
<option value="1">北京</option>
<option value="2">南京</option>
</optgroup> <option value="3">廣州</option>
</select>
<select name="" size="2" multiple="multiple">
<option value="1">北京</option>
<option value="2">南京</option>
</select>
<input type="checkbox" name="" value=""/>
<input type="file" name="" />
<input type="image" src=""/>
<textarea name="" cols="" rows=""></textarea>
<fieldset> <legend></legend> </fieldset>
</form>
26.web標準組成:結構xhtml、表現css(層疊樣式表)、行為javascript 好處：表現和內容分離
27.<style type="text/css"> 選取器{屬性:值；} </style>
29.想用一個特殊的字型，可以考慮用圖片表示；設計的時候盡量用通用的字型
30.長度單位:em px
31.網頁方式 (1)內嵌式：<p style="color:red;"></p>
(2)嵌入式：<style type="text/css"></style>
(3)外部連結式：<link href="" rel="stylesheet" type="text/css" />
(4)匯入式：<style type="text/css"> @import url(""); </style>
32. 1.標籤選擇符: h1
2.類選擇符: .
3.id選擇符: #
4.萬用字元：*
5.包含選擇符：body p（常用）
6.選擇符分組：p,div,body
7.標籤指定式選擇符：p#class
8.組合選擇符：h1.p1,#conternt h1,h2
33.css樣式特點 1.繼承：子項目會繼承父元素的某些樣式
2.層疊：子項目的某些樣式會覆蓋父元素的樣式
3.後面的樣式，會覆蓋前面的樣式
34.css樣式的優先權 1.內嵌--嵌入--外部連結--匯入 2. !important 提權
35.文本 1.text-indent:2em
2.text-align:left center right
3.white-space(對象中空白處理):normal pre nowrap
4.vertical-align(元素的垂直對齊):sup sub top text-bottom
5.color:#FFFFFF，red
6.font-size:12px
7.font-family:Arial,'宋體'
8.line-height:1.5em
9.font-weight:bold,normal(正常)
10.font-style:normal italic(斜體)
11.text-decoration:none underline overline line-through(刪除線)
12.letter-spacing(字元間距):normal length
13.word-spacing(單詞間距):normal length
36.偽類 1. :link 未訪問
2. :visited 已經訪問
3. :hover 滑鼠移動到連結上
4. :active 滑鼠按下連結 a.a1:link{}
37.命名方法 1.駝峰：navMenuRedButton
2.帕斯卡：NavMenuRedButton
3.匈牙利：red_navMenuButton
38.盒子模型 content 內容
padding 內填充(不要輕易為外層添加這個屬性，因為會改變外層的寬度)
border 邊框
margin 外填充(不要輕易為外層添加這個屬性，因為會改變外層的寬度) 公式：=content+(padding*2)+(border*2)+(margin*2)
39. margin:20px :表示上右下左
margin:20px 20px : 表示上下、右左
margin:20px 20px 20px : 表示上、右左、下
margin:20px 20px 20px 20px
margin:0 auto; 表示盒子置中
40. border:1px solid red :表示上右下左邊框像素為1，實線，紅色
41.將我們用到的元素，預設內外邊距歸零
42.padding:10px :表示上右下左
43.列表 list-style:none outside none; :表示列表樣式為無
44.元素的分類 1.塊狀元素：div,p, body,h1~h6 可以作為容器且獨佔一行
2.內嵌元素：a,span
3.可以通過：內嵌元素：{display:block;} 把內聯變成塊狀，這樣子設定內嵌元素的高寬就起作用
45.背景 background:顏色 圖片 平鋪方式 固定方式 位置
background-color:gold; background-image:url(); background-repeat:no-repeat; background-position:center center 水平垂直置中 background-attachment:fixed 固定圖片 (scroll滾動) IE6隻有html與body兩個元素，支撐這 個功能
46.css精靈 思路1：準備兩張大小相同，內容不同的圖片，一張正常，一張通過偽類進行啟用
思路2：準備一張合成圖片，通過background-position:進行定位。
47.布局 1.預設檔案流
2.浮動 ：float:left; 浮動原理：從檔案流中分離出來，原先佔據的位置就被後面的對象填上。 如果想多個快同一列，把浮動方向一致就可以了
3.絕對位置 : position:absolute 原理：從檔案流中分離出來，相對的對象如果沒有指定就是body，用position:relative在對象上 指定 相對定位 : position:relative top="" left="" 原理：不從檔案流中分離出來，相對的對象是自己本身
4.清除浮動：clear:both; 消除浮動對子類的影響 消除浮動對父類的影響 1.增加一個空子類，類名為.class{clear:both}; 2.overflow:hidden 子類不能有定位布局 3..clearFix:after{ clear:both; display:block; visibility:hidden; height:o; line-height:0; centent:""; } .clearFix{zoom:1;} 48.溢出 overflov:visible(不剪下也不添加捲軸) hidden(不顯示超過對象尺寸的內容) scroll(顯示捲軸) auto(剪下或者捲軸)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
