张孝祥javascript学习笔记1---HTMLCSS
?本節(jié)摘要及說明：本節(jié)只是對(duì)學(xué)習(xí)過程中知識(shí)點(diǎn)的一個(gè)簡(jiǎn)單的記錄。
<body>標(biāo)簽的屬性
Text屬性:用于設(shè)定整個(gè)網(wǎng)頁中的文字顏色
link屬性:用于設(shè)定一般超鏈接文本的顯示顏色
alink屬性：用于設(shè)定鼠標(biāo)移動(dòng)到超鏈接上時(shí)，超鏈接文本的顯示顏色
vlink屬性:用于設(shè)定訪問過的超鏈接文本的顯示顏色
background屬性:用于設(shè)定背景墻紙所用的圖像文件，可以是GIF或JPEG文件的絕對(duì)路徑
bgcolor屬性:用于設(shè)定背景顏色，當(dāng)已設(shè)定墻紙時(shí)，這個(gè)屬性會(huì)失去作用，除非墻紙具有透明部分
leftmargin屬性:用于設(shè)定網(wǎng)頁顯示畫面與瀏覽器窗口左邊沿的間隙，單位為像素
topmargin屬性:用于設(shè)定網(wǎng)頁顯示畫面與瀏覽器窗口上邊沿的間隙，單位為像素
class、name、id、style等屬性
?
注釋與特殊字符
用<!-- 注釋-->這種風(fēng)格加入注釋
特殊字符可以用數(shù)值碼和引用實(shí)體兩種方式表示,例如，©、©；
| HTML編碼 | 顯示或處理結(jié)果 |
| < | < |
| > | > |
| & | & |
| "； | " |
| ® | ? |
| © | ? |
| ™ | ? |
| | 空格字符 |
格式標(biāo)簽
<p></p>用來創(chuàng)建一個(gè)段落
<br>換行
<nobr></nobr>防止瀏覽器對(duì)比較長的內(nèi)容自動(dòng)換行
<blockquote></blockquote>縮進(jìn)效果顯示
<center></center>水平方向居中顯示
<marquee>ww</marquee> 水平動(dòng)態(tài)效果
<dl><dt><dd></dd></dt></dl>
<dl><dt></dt></dl>
<ul><li></li></ul>圓點(diǎn)表示的列表項(xiàng)
<ol><li></li></ol>數(shù)字標(biāo)示的列表項(xiàng)
<pre></pre>預(yù)格式化
文本標(biāo)簽
<h1></h1>…<h6></h6>
<b></b>粗體
<i></i>斜體
<u></u>下劃線
<sub></sub>下標(biāo)
<sup></sup>上標(biāo)
<tt></tt>打字機(jī)風(fēng)格的文本
<cite></cite>引用方式的文本
<em></em>強(qiáng)調(diào)的文本
<strong></strong>加重的文本
<font></font> <font>標(biāo)簽的三個(gè)屬性:face、size和color 沒有安裝字體就顯示瀏覽器默認(rèn)的字體
超鏈接標(biāo)簽
<a href=”” target=”_blank”></a>
target屬性 表示在新的窗口中打開目標(biāo)網(wǎng)頁
用<a name=””>定義定位標(biāo)記，例如，<a name=”標(biāo)記1”>第一部分</a>
使用<a href=”#標(biāo)記1”>跳轉(zhuǎn)到第一部分</a>就可以定位到網(wǎng)頁中的”標(biāo)記1”這個(gè)位置
<a href=””>打開網(wǎng)頁所在的目錄</a>
<a href=“#”>空</a>
圖像標(biāo)簽
<img src=””/>
alt 鼠標(biāo)放在圖片上時(shí)的提示文本 圖像無法加載時(shí)顯示的文字
align 指定圖像與周圍文本的對(duì)齊方式
border 圖像邊框的方式? 單位像素
width 圖像在瀏覽器中的寬帶 單位像素 沒有指定大小以圖像原始的大小顯示
height 圖像在瀏覽器中的高度 單位像素 沒有指定大小以圖像原始的大小顯示
<hr>標(biāo)簽，可以設(shè)置size，color，width和noshade等屬性
size 粗細(xì)? olor 顏色 idth 寬度 noshade 是否有陰影
圖像超鏈接
<a href="http://www.baidu.com"><img src="images/3.jpg" alt="圖像超鏈接"></a>
圖像地圖
<img src="images/4.jpg" alt="" usemap="#mymap">
<map name="mymap">
??? <area alt="" shape="rect" coords="0,0,65,200" href="倒計(jì)時(shí).html" target="_blank">
??? <area alt="" shape="rect" coords="65,0,130,200" href="圖片滾動(dòng).html" target="_blank">
??? <area alt="" shape="rect" coords="130,0,200,200" href="顯示時(shí)間.html" target="_blank">
</map>
表格
<table></table>
<caption></caption>
<tr></tr>
<th></th>
<td></td>
幀標(biāo)簽
不能定義在body標(biāo)簽當(dāng)中,幀標(biāo)簽當(dāng)中也不能顯示body標(biāo)簽
<frameset rows="20%,*"? frameborder="1">
??? <frame src="test/top.html" name="top">
??? <frameset cols="30%,*">
??????? <frame src="test/left.html">
??????? <frame src="test/right1.html" name="right" scrolling noresize>
??? </frameset>
</frameset>
target屬性四個(gè)內(nèi)置的取值：_blank,_parent,_self,_top
<noframes>標(biāo)簽
<iframe></iframe>
表單標(biāo)簽
<form></form>
action屬性:設(shè)置接收和處理瀏覽器遞交的表單內(nèi)容的服務(wù)器程序的URL
method：post/get
target：用來指定服務(wù)器返回結(jié)果顯示的目標(biāo)窗口或目標(biāo)幀
title：設(shè)置當(dāng)前網(wǎng)站訪問者的鼠標(biāo)放在表單任意位置過幾秒時(shí)，瀏覽器用黃色小浮標(biāo)顯示的內(nèi)容
enctype：指定瀏覽器使用哪種編碼方法將表單數(shù)據(jù)傳送給WWW服務(wù)器。該屬性可以有兩種取值：application/x-www-form-urlencoded和multipart/form-data。默認(rèn)的設(shè)置值為application/x-www-form-urlencoded
<input type=””/>
type：submit、reset、text、checkbox(checked)、radio、hidden、file、image
<select multiple size=”2”>
?? <option selected value=”0”></option>
</select>
<textarea cols=”” rows=””>默認(rèn)內(nèi)容,無value屬性</textarea>
<label>
meta 標(biāo)簽
<meta name=”” content=””> 用與在網(wǎng)頁中加入一些關(guān)于網(wǎng)頁的描述信息,例如網(wǎng)頁的關(guān)鍵字，網(wǎng)頁的描述信息
meta標(biāo)簽的name屬性設(shè)置:keywords、description、Robots(此時(shí)content的設(shè)置值可以是index,noindex,follow,nofollow,all,none)、generator（用于說明編輯此網(wǎng)頁軟件的名稱，此時(shí)content就是軟件名稱）、author、copyright
<meta http-equiv=”” content=””>用于在HTML文檔中模擬HTTP協(xié)議的響應(yīng)消息頭,例如告訴瀏覽器是否刷新該網(wǎng)頁，使用什么樣的字符集來顯示網(wǎng)頁內(nèi)容，隔多長時(shí)間自動(dòng)刷新網(wǎng)頁
meta標(biāo)簽http-equiv的屬性設(shè)置:content-type (文本類型和字符集編碼)、refresh(指定時(shí)間段刷新或跳轉(zhuǎn)到指定頁面)、expires(禁止瀏覽器使用緩存頁面)、Windows-Target(設(shè)置防止自己的網(wǎng)頁被別人當(dāng)做一個(gè)frame頁面調(diào)用，可以設(shè)置此屬性，此時(shí)content=”_top”)、pragma(可以禁止瀏覽器在本地計(jì)算器上緩存當(dāng)前頁面，此時(shí)content=”no-cache”)、page-enter和page-Exit(頁面進(jìn)入和退出的特殊效果)
<meta name=”Windows-Target” content=”_top”>
<meta name=”pragma” content=”no-cache”>
<meta name=”cache-control” content=”no-cache”>
<meta name=”page-enter” content=”revealTrans(Transition=23,Duration=1.000)”>
頭元素
<title></title>標(biāo)簽對(duì)
<base>標(biāo)簽用于指定網(wǎng)頁中的超鏈接的基準(zhǔn)地址，以及改變網(wǎng)頁中所有使用相對(duì)地址的URL的基準(zhǔn)地址
<base href=”http://www.baidu.com” target=”_blank” >
<link>標(biāo)簽定義了當(dāng)前文檔和另一個(gè)文檔或資源之間的關(guān)系
幾個(gè)主要的屬性:
href
REL與REV 定義了兩個(gè)資源的關(guān)系類型(Contents,index,glossary,copyright,next,previous,start,help,bookmark,stylesheet,alternate,shortcut Icon)
TITLE 可選屬性 目標(biāo)資源的描述信息，關(guān)系
TYPE 目標(biāo)資源的MIME類型 TYPE=”text/css” TYPE=”text/javascript”
MEDIA 指定目標(biāo)資源被接收的介質(zhì)和資源(screen,print,projection,aural,braille,tty,tv,all)
<meta>標(biāo)簽
分區(qū)標(biāo)簽
<div></div>可以用來組合其他的HTML元素，但不能嵌套在段落元素中。
<span></span>
CSS(層疊樣式表)
設(shè)置CSS的幾種方式：
--內(nèi)聯(lián)樣式表(Inline sytles)?
<meta http-equiv=”Content-Style-Type” content=”text/css”> text/xsl 建議用內(nèi)聯(lián)的時(shí)候加上此句
--嵌入樣式表(Embedded style sheets) 用注釋包起來是為了有些不能支持style樣式的瀏覽器
<head>
<style type=”text/css” media=”screen,projection”>
<!--
P{FONT-SIZE:20pt;COLOR:red;FONT-FAMILY:宋體}
-->
</style>
</head>
其中，p成為選擇器，有三種類型的選擇器：html標(biāo)簽、class、id
--外部樣式表(Linked style sheets)
首先編寫一個(gè)test.css文件，文件中的內(nèi)容如下：
P {
??????? FONT-SIZE: 20pt;
??????? COLOR: red;
??????? FONT-FAMILY: '宋體'
??? }
網(wǎng)頁中引入css樣式：
<link rel=”StyleSheet” href=”test.css” type=”text/css” media=”screen”> type和media可選，rel和href必選，如果用了type屬性，必須設(shè)置為text/css。
--輸入樣式表(imported style sheets)
@import url(test.css);
樣式規(guī)則選擇器
--HTML selector:p,div
分別為某個(gè)HTML標(biāo)簽的各個(gè)類定義樣式規(guī)則
<style>
P.stop{color:red}
P.warning{color:green}
P.normal{color:yellow}
</style>
--Class selector:? 關(guān)聯(lián)clss selector、獨(dú)立class selector
為某個(gè)類別的所有HTML標(biāo)簽定義樣式規(guī)則
<style>
.blueone{color:blue}
</style>
--ID selector:一個(gè)網(wǎng)頁文件中只能有一個(gè)元素能使用某一ID屬性值，ID selector就是為樣式規(guī)則定義語句選擇具有某一ID屬性值得HTML元素。
--關(guān)聯(lián)選擇器 指一個(gè)用空格隔開的兩個(gè)或更多的單一選擇器組成的字符串 優(yōu)選權(quán) 關(guān)聯(lián)>單一
? P EM{color:green}
--組合選擇器 為了減少樣式表的重復(fù)聲明，可以在一條樣式規(guī)則定義語句中組合若干個(gè)，每個(gè)選擇器用逗號(hào)隔開
H1，H2,P{color:green}
--偽元素選擇器 指對(duì)同一個(gè)HMTL元素的各種狀態(tài)和其所包括的部分內(nèi)容的一種定義方式，例如，對(duì)于超鏈接標(biāo)簽的正常狀態(tài)、訪問過的狀態(tài)、選中狀態(tài)、光標(biāo)移到超鏈接文本上的狀態(tài)，對(duì)于段落的首字母和首行
格式如下：
HTML元素:偽元素{屬性:值}
常用的偽元素：
A:active、A:hover、A:link、A:visited、P:first-line、P:first-letter
塊級(jí)元素 ，如DIV標(biāo)簽 設(shè)置了寬和高的HTML元素
類選擇器與偽元素一起使用的格式：HTML元素.類名.偽元素{屬性:值}
CSS樣式屬性分類
--字體--背景--文本--位置--布局--邊緣--列表--其他
font-family、font-size(絕對(duì)大小和相對(duì)大小，相對(duì)大小的設(shè)置可以為larger或smaller，絕對(duì)單位有：px、mm、cm、in、pt、pc，相對(duì)單位有em、ex、%)、font-style、text-decoration、font-weight、
font-variant、text-transform、Color(三種表示方法:#RRGGBB、rgb(R,G,B)、red)、
background-color、background-image(例如:{background-image:url(‘’)})、background-repeat(設(shè)置值:no-repeat,repeat,repeat-x,repeat-y)、background-attachment(設(shè)置值:fixed,scroll)、background-position(left,center,right,20px,top,center,bottom)、background、word-spacing、letter-spacing、vertical-align(設(shè)置值:sub(下標(biāo)),super(上標(biāo)),top(與頂端對(duì)齊),middle(居中),bottom(與底端對(duì)齊),相對(duì)于元素行高的百分比)、text-align(設(shè)置值:left,right,center,justify),text-indent(文本第一行的縮進(jìn)值),
white-space(normal,pre,nowrap),line-height
Filter(CSS濾鏡)
<div style="width:12;height:40;background-color:red;
??? filter:Alpha(opacity=80)Blur=(Add=5,Direction=135)"> CSS濾鏡<br>www.baidu.com</div>
<div style="width:12;height:40;background-color:red;
??? filter:Alpha(opacity=80)Blur=(Add=5,Direction=135)FlipV">CSS濾鏡<br>www.baidu.com</div>
filter參數(shù):
-alpha(opacity=?,finishopacity=?,style=?,StartX=?,StartY-?,FinishX=?,FinishY=?)
-BlendTrans(Duration=?)
-Blur(Add=?,Direction=?,Strength=?)
-Chroma(Color=?)
-DropShadow(Color=?,Offx=?,Offy=?,Positive=?)
-FlipH,FlipV,Gray,Invert,Light,Xray
-Glow(Color=?,Strength=?)
-Mask(Color=?)
-RevealTrans(Duration=?,Transition=?)
-Shadow(Color=?,Direction=?)Direction取值為45的整數(shù)倍
-Wave(Add=?,Freq=?,LightStrength=?,Phase=?,Strenght=?)
位置
位置屬性就是指定元素的位置，它是CSS-P中的內(nèi)容，CSS-P是CSS的一個(gè)擴(kuò)展，它可以用阿里控制任何網(wǎng)頁元素在瀏覽器文檔窗口中的位置
Position 設(shè)置值:absolute,relative,static
left
top
width
height
Z-index
邊緣
margin(margin-top、margin-right、margin-bottom、margin-left)
padding(padding-top,padding-right,padding-bottom.padding-left)
border-width(border-top-width,設(shè)置值：thin,medium,thick或數(shù)值)
border-color(border-top-color)
border-style(border-top-style)設(shè)置值:none,dotted,dashed,solid,double,groove,ridge,inset,outset
border(border-top)
列表
list-style-type 設(shè)置值：disc(實(shí)心圓),circle(空心圓),square(方塊),decimal(阿拉伯?dāng)?shù)字),lower-roman(小寫羅馬數(shù)字),upper-roman(大寫羅馬數(shù)字),lower-alpha(小寫英文字母),upper-alpha(大寫英文字母),none(無項(xiàng)目符號(hào))
list-style-image
list-style-position 設(shè)置值:inside,outside
list-style
其它
Cursor 設(shè)置值:hand(手型),crosshair(‘+'型),text(‘|’型),wait(等待),default,help,e-resize(東箭頭),ne-resize,n-resize,nw-resize,w-resize,sw-resize,s-resize,se-resize,auto
樣式規(guī)則的注釋與有效范圍
樣式表中的注釋
使用”/*要注釋的內(nèi)容*/”格式進(jìn)行注釋，注釋不能嵌套
樣式規(guī)則的繼承
所有嵌套在某個(gè)HTML標(biāo)簽中的HTML標(biāo)簽都會(huì)繼承外層標(biāo)簽設(shè)置的樣式規(guī)則
樣式規(guī)則的優(yōu)先級(jí)
-ID選擇器>CLASS選擇>HTML標(biāo)簽選擇器
-內(nèi)聯(lián)樣式表>嵌入樣式表>鏈接樣式表
轉(zhuǎn)載于:https://www.cnblogs.com/java-pan/archive/2012/03/26/html-css.html
總結(jié)
以上是生活随笔為你收集整理的张孝祥javascript学习笔记1---HTMLCSS的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CssGaga 快速上手指南
- 下一篇： 苹果手机5s多少钱一部