當(dāng)前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

张孝祥javascript学习笔记1---HTMLCSS

發(fā)布時間：2023/11/27 生活经验 37 豆豆

生活随笔收集整理的這篇文章主要介紹了张孝祥javascript学习笔记1---HTMLCSS 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

?本節(jié)摘要及說明：本節(jié)只是對學(xué)習(xí)過程中知識點的一個簡單的記錄。

<body>標簽的屬性

Text屬性:用于設(shè)定整個網(wǎng)頁中的文字顏色

link屬性:用于設(shè)定一般超鏈接文本的顯示顏色

alink屬性：用于設(shè)定鼠標移動到超鏈接上時，超鏈接文本的顯示顏色

vlink屬性:用于設(shè)定訪問過的超鏈接文本的顯示顏色

background屬性:用于設(shè)定背景墻紙所用的圖像文件，可以是GIF或JPEG文件的絕對路徑

bgcolor屬性:用于設(shè)定背景顏色，當(dāng)已設(shè)定墻紙時，這個屬性會失去作用，除非墻紙具有透明部分

leftmargin屬性:用于設(shè)定網(wǎng)頁顯示畫面與瀏覽器窗口左邊沿的間隙，單位為像素

topmargin屬性:用于設(shè)定網(wǎng)頁顯示畫面與瀏覽器窗口上邊沿的間隙，單位為像素

class、name、id、style等屬性

注釋與特殊字符

用這種風(fēng)格加入注釋

特殊字符可以用數(shù)值碼和引用實體兩種方式表示,例如，©、&copy；

HTML編碼	顯示或處理結(jié)果
<	<
>	>
&	&
&quot；	"
®	?
©	?
™	?
	空格字符

格式標簽

<p></p>用來創(chuàng)建一個段落

<br>換行

<nobr></nobr>防止瀏覽器對比較長的內(nèi)容自動換行

<blockquote></blockquote>縮進效果顯示

<center></center>水平方向居中顯示

<marquee>ww</marquee> 水平動態(tài)效果

<ul><li></li></ul>圓點表示的列表項

<ol><li></li></ol>數(shù)字標示的列表項

<pre></pre>預(yù)格式化

文本標簽

<b></b>粗體

<i></i>斜體

<u></u>下劃線

<sub></sub>下標

<sup></sup>上標

<tt></tt>打字機風(fēng)格的文本

<cite></cite>引用方式的文本

<em></em>強調(diào)的文本

<strong></strong>加重的文本

<font></font> <font>標簽的三個屬性:face、size和color 沒有安裝字體就顯示瀏覽器默認的字體

超鏈接標簽

target屬性表示在新的窗口中打開目標網(wǎng)頁

用<a name=””>定義定位標記，例如，<a name=”標記1”>第一部分</a>

使用<a href=”#標記1”>跳轉(zhuǎn)到第一部分</a>就可以定位到網(wǎng)頁中的”標記1”這個位置

<a href=””>打開網(wǎng)頁所在的目錄</a>

圖像標簽

alt 鼠標放在圖片上時的提示文本圖像無法加載時顯示的文字

align 指定圖像與周圍文本的對齊方式

border 圖像邊框的方式? 單位像素

width 圖像在瀏覽器中的寬帶單位像素沒有指定大小以圖像原始的大小顯示

height 圖像在瀏覽器中的高度單位像素沒有指定大小以圖像原始的大小顯示

<hr>標簽，可以設(shè)置size，color，width和noshade等屬性

size 粗細? olor 顏色 idth 寬度 noshade 是否有陰影

圖像超鏈接

圖像地圖

表格

幀標簽

不能定義在body標簽當(dāng)中,幀標簽當(dāng)中也不能顯示body標簽

target屬性四個內(nèi)置的取值：_blank,_parent,_self,_top

<noframes>標簽

表單標簽

action屬性:設(shè)置接收和處理瀏覽器遞交的表單內(nèi)容的服務(wù)器程序的URL

method：post/get

target：用來指定服務(wù)器返回結(jié)果顯示的目標窗口或目標幀

title：設(shè)置當(dāng)前網(wǎng)站訪問者的鼠標放在表單任意位置過幾秒時，瀏覽器用黃色小浮標顯示的內(nèi)容

enctype：指定瀏覽器使用哪種編碼方法將表單數(shù)據(jù)傳送給WWW服務(wù)器。該屬性可以有兩種取值：application/x-www-form-urlencoded和multipart/form-data。默認的設(shè)置值為application/x-www-form-urlencoded

type：submit、reset、text、checkbox(checked)、radio、hidden、file、image

?? <option selected value=”0”></option>

</select>

<textarea cols=”” rows=””>默認內(nèi)容,無value屬性</textarea>

<label>

meta 標簽

meta標簽的name屬性設(shè)置:keywords、description、Robots(此時content的設(shè)置值可以是index,noindex,follow,nofollow,all,none)、generator（用于說明編輯此網(wǎng)頁軟件的名稱，此時content就是軟件名稱）、author、copyright

meta標簽http-equiv的屬性設(shè)置:content-type (文本類型和字符集編碼)、refresh(指定時間段刷新或跳轉(zhuǎn)到指定頁面)、expires(禁止瀏覽器使用緩存頁面)、Windows-Target(設(shè)置防止自己的網(wǎng)頁被別人當(dāng)做一個frame頁面調(diào)用，可以設(shè)置此屬性，此時content=”_top”)、pragma(可以禁止瀏覽器在本地計算器上緩存當(dāng)前頁面，此時content=”no-cache”)、page-enter和page-Exit(頁面進入和退出的特殊效果)

頭元素

<title></title>標簽對

<base>標簽用于指定網(wǎng)頁中的超鏈接的基準地址，以及改變網(wǎng)頁中所有使用相對地址的URL的基準地址

幾個主要的屬性:

href

REL與REV 定義了兩個資源的關(guān)系類型(Contents,index,glossary,copyright,next,previous,start,help,bookmark,stylesheet,alternate,shortcut Icon)

TITLE 可選屬性目標資源的描述信息，關(guān)系

TYPE 目標資源的MIME類型 TYPE=”text/css” TYPE=”text/javascript”

MEDIA 指定目標資源被接收的介質(zhì)和資源(screen,print,projection,aural,braille,tty,tv,all)

<meta>標簽

分區(qū)標簽

<div></div>可以用來組合其他的HTML元素，但不能嵌套在段落元素中。

CSS(層疊樣式表)

設(shè)置CSS的幾種方式：

--內(nèi)聯(lián)樣式表(Inline sytles)?

--嵌入樣式表(Embedded style sheets) 用注釋包起來是為了有些不能支持style樣式的瀏覽器

<head>

<!--

P{FONT-SIZE:20pt;COLOR:red;FONT-FAMILY:宋體}

-->

</style>

</head>

其中，p成為選擇器，有三種類型的選擇器：html標簽、class、id

--外部樣式表(Linked style sheets)

首先編寫一個test.css文件，文件中的內(nèi)容如下：

P {
??????? FONT-SIZE: 20pt;
??????? COLOR: red;
??????? FONT-FAMILY: '宋體'
??? }

網(wǎng)頁中引入css樣式：

--輸入樣式表(imported style sheets)

@import url(test.css);

樣式規(guī)則選擇器

--HTML selector:p,div

分別為某個HTML標簽的各個類定義樣式規(guī)則

<style>

P.stop{color:red}

P.warning{color:green}

P.normal{color:yellow}

</style>

--Class selector:? 關(guān)聯(lián)clss selector、獨立class selector

為某個類別的所有HTML標簽定義樣式規(guī)則

<style>

.blueone{color:blue}

</style>

--ID selector:一個網(wǎng)頁文件中只能有一個元素能使用某一ID屬性值，ID selector就是為樣式規(guī)則定義語句選擇具有某一ID屬性值得HTML元素。

--關(guān)聯(lián)選擇器指一個用空格隔開的兩個或更多的單一選擇器組成的字符串優(yōu)選權(quán) 關(guān)聯(lián)>單一

? P EM{color:green}

--組合選擇器為了減少樣式表的重復(fù)聲明，可以在一條樣式規(guī)則定義語句中組合若干個，每個選擇器用逗號隔開

H1，H2,P{color:green}

--偽元素選擇器指對同一個HMTL元素的各種狀態(tài)和其所包括的部分內(nèi)容的一種定義方式，例如，對于超鏈接標簽的正常狀態(tài)、訪問過的狀態(tài)、選中狀態(tài)、光標移到超鏈接文本上的狀態(tài)，對于段落的首字母和首行

格式如下：

HTML元素:偽元素{屬性:值}

常用的偽元素：

A:active、A:hover、A:link、A:visited、P:first-line、P:first-letter

塊級元素，如DIV標簽設(shè)置了寬和高的HTML元素

類選擇器與偽元素一起使用的格式：HTML元素.類名.偽元素{屬性:值}

CSS樣式屬性分類

--字體--背景--文本--位置--布局--邊緣--列表--其他

font-family、font-size(絕對大小和相對大小，相對大小的設(shè)置可以為larger或smaller，絕對單位有：px、mm、cm、in、pt、pc，相對單位有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(下標),super(上標),top(與頂端對齊),middle(居中),bottom(與底端對齊),相對于元素行高的百分比)、text-align(設(shè)置值:left,right,center,justify),text-indent(文本第一行的縮進值),

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的一個擴展，它可以用阿里控制任何網(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(實心圓),circle(空心圓),square(方塊),decimal(阿拉伯?dāng)?shù)字),lower-roman(小寫羅馬數(shù)字),upper-roman(大寫羅馬數(shù)字),lower-alpha(小寫英文字母),upper-alpha(大寫英文字母),none(無項目符號)

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)容*/”格式進行注釋，注釋不能嵌套

樣式規(guī)則的繼承

所有嵌套在某個HTML標簽中的HTML標簽都會繼承外層標簽設(shè)置的樣式規(guī)則

樣式規(guī)則的優(yōu)先級

-ID選擇器>CLASS選擇>HTML標簽選擇器

-內(nèi)聯(lián)樣式表>嵌入樣式表>鏈接樣式表

轉(zhuǎn)載于:https://www.cnblogs.com/java-pan/archive/2012/03/26/html-css.html

總結(jié)

以上是生活随笔為你收集整理的张孝祥javascript学习笔记1---HTMLCSS的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。