html && CSS

時間 2019-12-01

標籤 html css 欄目 HTML 简体版

原文原文鏈接

1.html:超文本標記語言，用來對網頁文檔信息進行格式化展現的語言，主要包括頭部(head)和主體(body)。

http協議：用於服務器和瀏覽器之間的數據傳送，規定html如何在客戶端和服務器端傳輸

url:統一資源定位符，進行信息資源的惟必定位

網頁中三種最基本的頁面組成元素是文字、圖像、超連接

單元格垂直合併所用的屬性是__ rowspan 。單元格橫向合併所用的屬性是__ colspan ____ 。

在HTML中，引入CSS的方法主要有__行內式____、_內嵌樣式___、__導入式____、__連接式__4種

CSS中插入註釋格式是_/**/ _。

font-size：控制文本尺寸 font-family：修改字體樣式

CSS顯示這樣一個邊框：上邊框 10 像素、下邊框 5 像素、左邊框 20 像素、右邊框 1 像素的寫法是border-width:10px1px5px20px

CSS中設置行高的屬性是line-height

設置網頁中某個標籤的左邊界爲5px用的CSS樣式爲 margin:0 0 0 5px 或者 margin:0 5px。

**margin:5px 6px 7px 8px; 意思上元素塊爲5px，右元素塊距離爲6px ，下元素塊距離爲7px，左元素塊距離8px，

等於margin-top:5px; margin-right:6px; margin-bottom:7px; margin-right:8px; 同樣效果簡寫；

參考連接：http://www.cnblogs.com/spring_wang/p/3938674.html

轉法：margin:5px 6px 7px 8px

2.特色：a.獨立於平臺，即獨立於計算機硬件和操做系統

b.超文本

c.精確的結構化文檔

幾個工具：HBuilder、DW、webStorm

本地文件路徑： file:///C:/Users/Administrator/Desktop/hh.html

file://協議 /是根目錄

字體樣式：

name="decription" name="author" //相似keywords功能

//css外部引入

//js外部引入

<font color="red"> 修改字體顏色

style="background-color:red;font-size:20px;font-family:arial"

background-color:標準的css屬性

bgcolor是IE擴展的html屬性，二者效果相同推薦使用

shape=rect表示的形狀是矩形； shape=poly表示的形狀是多邊形

HBuilder：http://127.0.0.1:8020/TestHtml/table.html

1.html常見標籤

<h1>到<h6> 字體加粗加大效果，字體大小依次減少，默認換行效果，只能識別h1到h6

<h7> 則做爲body效果

<h1 align="center">ss</h1> //align標籤屬性

<hr width="200" align="left" size="7" color="pink"/> //橫線，單標籤 200px width="80%" 按比例縮放

<font size="5" color="red" face="微軟雅黑"/> //沒有align屬性 face表明字體

<br/> 換行   空格 "" " ' ' & &

<p> 段落符，相隔之間會換行，相對於<br/>有較大的間距

<b> 加粗 <i>斜體 <u>下劃線 <del>刪除

<pre>aa ss</pre>//中間空格不會被清掉

10<sub>3</sub> 下標 <sup> 上標

<qq> (表明左右括號)

bgcolor 將背景設置顏色

background 設置背景顏色 background和bgcolor不能同時使用 <body background="img/7.png">

2.<img>

常見屬性： src:圖像文件地址(可使用網絡圖片) width:圖像大小 height (width和height設置一個便可，會自動等比例縮放，默認px)

border:圖像邊框(跟style一塊兒使用能夠改變樣式) alt:圖片資源找不到時顯示的文本內容( 爲圖片添加簡要說明文字的屬性 )

title :鼠標移動到圖片上面的提示信息

border="10" style="border-color:red"

3.<embed src="a.mp3" autostart="true"(可能不支持) loop=「true」 hidden="false" width="100px" height="100px"/> 音視頻

autostart="true"(可能不支持) loop 循環 hidden 隱藏

支持格式 mp3 wma asf swf flv rm ra ram avi

<center></center> 能夠將音視頻控件位置放在中間有效

4.<table border="1" width="50%" cellpadding="10" cellspacing="20"> cellpadding 內邊距 cellspacing 外邊距

tr 行

列 td <th>修飾文本，默認居中加粗的效果 <th align="left" width="100"> width會影響一整列 <td align="center">

rowspan="2" 跨兩行 colspan="2" 跨兩列

<th rowspan="3">sqwwe</th>  td和th都能使用rowspan和colspan

table>tr*9>th*5 +tab 快捷生成9行5列的表格

style="border-top: none;" 去除上下兩個表格重複的線

修改表格的樣式，單線條

5.<a href="5.htm"><img border="0" src=""></a> a 超連接 href 連接地址

target="_blank" 在新窗口中打開連接，新的窗口（通常不推薦）

_parent 在父窗體中打開連接

_self 當前窗體中打開連接，默認值

_top 在當前窗體打開連接，並替換當前的整個窗體(框架頁)

<a href="login.html" target="_top">退出登陸</a> 退出頂層頁，前提是已有上一級頁面

ctrl+shift+r 快捷複製

6.錨點

<a name="first"> </a> <a href="#first"> </a>點first指向name

<a href="#"> </a> 從頁面開頭算起

7.框架 Iframe 內嵌框架

Iframe和frame區別：

一、frame不能脫離frameSet單獨使用，iframe能夠
二、frame不能放在body中,不然不能正常顯示
　 frame不能和body同時使用, iframe能夠和body同時使用

8.frameSet不能與body共存，不然可能致使效果顯示不出來

<frameset rows="20%,60%,*" cols="" border="1"> rows將頁面橫向切分 cols 縱向切分

<frame src="url"/> border frameborder="yes" 顯示框線

scrolling="NO" 不會有scrolling bar 默認yes

Noresize 使用者沒法調整分割頁面的大小。

經常使用框架：

</frameset>

</frameset>

9. form表單用於收集和提交用戶輸入的數據,提交到服務器,客戶端和服務器交互數據的一個方式。

action:提交的目標是動態網頁jsp等，提交的具體的服務器地址

method: get: 1.把提交的參數信息放在url地址欄 (查詢用) 默認

2.參數和提交地址用?相鏈接

3.參數和參數之間用&相鏈接

4.每個參數都是鍵值對方式提交

5.提交的數據量較少(2-4k)，把信息顯示在地址欄，存在安全問題。有緩存，效率比較高

6.若是不寫name值，不會提交

post:傳送的數據做爲http request的一部分，資料不會顯示在地址欄，傳送的數據量比較大。(增刪改用)

2-4與get同樣

5.相對安全，不會走緩存，提交的數據理論上沒有限制。

post格式：

請求格式：POST /hello.jsp HTTP/1.1

響應格式：HTTP/1.1 200 OK

HTTP請求頭與請求正文；HTTP響應頭與響應正文要分別以空行分隔

請求正文：username=aaa&password=123&submit=submit

常見狀態碼：200 響應成功

400 錯誤的請求 404 文件不存在 405 服務器不支持客戶的請求方式

500 服務器內部錯誤

put：

上傳文檔到服務器

delete:

用於刪除服務器上某個文檔

有name纔會提交。 action="#" 提交到本頁

文本框：<input type="text"/> 輸入一行文本 placeholder 默認文本 value 默認值

密碼：<input type="password"/> 輸入一行文本，不可見，以星號表示。

單選按鈕:<input type="radio" name="msex"/> 在兩個單選按鈕上加name="sex"的一組值，能夠達到單選效果

<input type="radio" name="msex"/> checked="checked" 默認選擇 checked也是能夠

複選框:<input type="checkbox"> checked="checked" 默認選擇

隱藏域:<input type="hidden"> 值對用戶不可見，但會提交給服務器，通常用於傳用戶id

下拉列表：<select> <option>aa</option> </select> selected="selected" 默認選擇

文本域(多行文本): <TEXTAREA rows="5" cols="70">默認值</TEXTAREA>

提交按鈕:<input type="submit"> 提交信息

普通按鈕:<input type="button">

重置按鈕:<input type="reset"> 重置表單信息

文件上傳：<input type="file">

圖片:<input type="image" src="url" style="height:100px;"/>

驗證碼:<input type="text" maxlength="3" size="5" name="rcode"/>

name用於提交數據 maxLength最大輸入長度 size（1-7）文本框長度

Readonly只針對input(text / password)和textarea有效，disabled對於全部的表單元素都有效，包括select, radio, checkbox, button等。
但使用了disabled後，當咱們將表單以POST或GET的方式提交的話，該元素的值不會被傳遞出去，而readonly會將該值傳遞出去。

總結:

全部要提交的表單域必須加name屬性，除了不提交，如button

單選按鈕和複選按鈕：

name相同即爲一組

沒定義values屬性，選中按鈕提交默認爲:on,而不是空字符串。

option沒指定value屬性，被選中則提交的是<option>的文本，而不是on或空字符串

表單域名字問題：

服務器目錄以"/"開頭

CSS3.0:層疊樣式表（帶px）

1. 三種引用方式：就近原則，按順序執行，通常先使用最後定義的樣式(相同的樣式，做用於同一個標籤上)

1.內聯方式：直接寫在html裏面 <th style="background-color:red;">1</th>

2.嵌入樣式： <style type="text/css">

table{ //對全部table,加樣式 table是選擇器

border-collapse: collapse

} </style>

3.外部引入 .css文件

2.塊級元素(切分紅多個塊)

<div style="width:500px;border:solid"></div> //列級元素 border:solid 實線邊框

<span ></span> //行級元素，切分行

控制隱藏效果:

display:none|block; //不佔空間

visibility: hidden|visible; //保留空間

3.id選擇器（ id選擇器優先級 > 類選擇器優先級 > 標籤選擇器優先級）

#div01{ 不可重複

background-color: aqua;

}

< div id="div01" >ssss</ div >

2. 元素選擇器

div{ //對全部div做用

height: 100;

}

3.類選擇器

.divClass { //對全部class爲divClass起做用

height: 100;

}

< div class="divClass" >sss</divClass>

4.元素選擇器

div[ class ]{ //做用全部帶class的屬性 div[class^=div] 包含div div[class$=ss] 以ss結尾

background-color:pink;

}

div h2{ height:200px; } 只要div內包含h2，就起做用

子包含選擇器： div>h2{ height:200px; } 選擇div下第一個元素起做用

#div01,.divclass{ height:200px; } 對div和類divclass起做用

鼠標移動到哪個div就會改變。

a{ text-decoration: none; } //全網頁超連接無下劃線

3.行級元素(通常用於顯示提示信息)

4.定位：

z-index：1 能夠修改圖片的位置，值越大，越靠上層。層次樣式的體現

position: absolute; 絕對定位只相對於瀏覽器左上角而言

position: relative; 相對定位相對於上一個div的位置而言

#img02{

position: relative;

top: 120px;

left: 110px;

z-index: 2;

}

float:right 也能夠達到放在右邊的效果

5.padding：內邊距

margin:外邊距

border: 邊框

盒子模型相關的屬性(上右下左)：內容(content)、填充(padding)、邊框(border)、邊界(margin)

兩個元素之間相鄰左maigin 10 向右10 對於div相距10 對於其餘是20

background-position:-5px 10px 向左偏移5px，向下偏移10px xy座標系

列表的項目符號爲實心矩形type: square

文本對齊屬性的取值:justify、center、right、left

6.. 表單實際上包含兩個重要組成部分：一是描述表單信息的 __web 頁

二是用於處理表單數據的服務器端 ___ 表單處理程序 __ _ 。

7.可以創建網頁交互性的腳本語言有兩種，一種是隻在服務器_端運行的語言，另外一種在網上常用的語言是客戶端語言

8.腳本語言：Web服務器直接把用腳本語言編寫的未經編譯的程序源代碼發送到瀏覽器端，由瀏覽器負責解析、編譯和執行。

9.web服務器架構採用SOAP(簡單對象訪問協議)通信，規定客戶與服務器之間一概用xml進行傳輸數據。

10.Tomcat做爲運行Servlet的容器，基本功能是接收與解析來自客戶的請求，同時把客戶的請求傳送給相應的Servlet,

並把Servlet的相應結果返回給客戶。

11.jsp提示http://blog.csdn.net/cpp_lzth/article/details/6830463

12.隱藏：

style=" display:none; " 隱藏並讓出位置

style="visibility:hidden; " 隱藏，但仍佔着位置

13.引入bootstrap:

打開w3cschool+bootstrap直接引用別人作好的框架( http://www.dnzs.com.cn/w3cschool/bootstrap/bootstrap-tables.html )

2.縮寫和首字母縮寫：

<acronym title="ccc">d</acronym> //鼠標移動到d時會有ccc顯示

<dfn><abbr title="aaa">ss</abbr></dfn> //斜體

3.地址:

預格式化：

<pre>aa ss</pre>//中間空格不會被清掉

4.刪除字<del> 下劃線<ins> 上標<sup>(字體往上顯示) 下標<sub>

引用一段話<blockquote> 短引用<q>

5.計算機代碼：

鍵盤文本 kbd, 計算機代碼示例samp, 計算機代碼文本code

6.樣式2

h1 {color:red}

p {color:blue}

</style>

7.<meta http-equiv="Content-type" content="text/html;charset= gb2312"/> //http-equiv 模擬一個HTTP響應頭

8.<a href="/example/html/lastpage.html" style="text-decoration:none"> 建立一個無下劃線的連接

<link rel="stylesheet" type="text/css"href="mystyle.css">   引用外部樣式表

9.table中border="a" a的值越大，表格的邊框線越粗

cellpadding 單元格距離邊的距離 cellspacing 單元格之間的距離

background 單元格背景圖 bgcolor="red" 單元格背景色

align 字體存放位置 frame有五種可選值，box表明包圍整個圈，above表格上放

below hsides(水平，即上下橫線) vsides （垂直，即左右豎線）

<table border="5" cellpadding="10"> //邊框線粗爲5，單元格邊距爲10

<td align="left">aaa</td> //字體靠左邊框顯示 align屬性選擇：

left right center	justify對行進行伸展，這樣每行均可以有相等的長度（就像在報紙和雜誌中）。 char 內容對準指定的字符

left right center

justify對行進行伸展，這樣每行均可以有相等的長度（就像在報紙和雜誌中）。 char 內容對準指定的字符

10. //圓形的無序號列表 type表示序號表的類型：type='cirlce" //空心圓形 disc實心圓形

square 方形有序號的 type="A" a I(大寫羅馬數字) i（小寫羅馬數字）

<ul type="disc"> //嵌套使用無序號表

<li>茶

<li>涼茶

</ul>

</li>

</ul>

</li>

</ul>

11.定義列表

<dl>

</dl>

12.塊級元素：

div （division/section）定於文檔中的分區或節，把文檔分割成獨立的、不一樣的部分

常搭配css使用

span 行內的元素，搭配css 可用於部分文本設置樣式屬性

<div class="A"> //class 元素有一個或多個的類名

樣式：其餘地方引用的時候，<div class="mycss">就能夠

<body>

<style>

.mycss{

background-color:black;

color:blue;

margin:20;

padding:20;

}

</style>

<p style="font-size:30px">heoooooosjsjsjsj</p>

</div>

</body>

<style>

span.myspan{

color:red;

margin:20;

}

</style>

若是css 以 .xxx 命名則調用的時候，用class="xxx"

若是css以 #xxx命名，則調用的時候，用id="xxx"

css中float：left表明靠左邊展現

clear:both 左右兩邊都不出現浮動元素

line-height:30px; 行與行之間的高度

border-style 1.none:表示沒邊框線   2.solid：表示單線   3.double：表示雙線   4.groove：表示凹槽   5.redge:表示皺紋   6.dotted:點線(貌似IE6下效果等同於dashed)   7.dashed:虛線

13.引用圖片:若爲網絡圖片則指向對應的連接便可；若爲本地的圖片，則指向圖片文件所在的文件目錄

如：file:///C:/Users/Administrator/Desktop/html_study/ip.gif

14.border: 1px solid black; 邊框1像素，實線

15.響應式設計網頁：使用bootstrap實現

 <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" 
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

16.frameset框架集：能夠包含多個子框架

<frameset rows="50%,50%"> //cols 垂直框架能夠爲數值 1,3 ,1,也表示佔比 rows 水平框架 noresize="noresize"(參數值能夠任意)。使框架不能改變或者移動

<frameset rows="20%,30%"> //嵌套使用frameset

</frameset>

</frameset>

不能將 <body></body> 標籤與 <frameset></frameset> 標籤同時使用！不過，假如你添加包含一段文本的 <noframes> 標籤，就必須將這段文字嵌套於 <body></body> 標籤內。

<body>不處理框架</body>

</noframes>

內聯框架：<iframe src="URL" frameborder="0"></iframe> 能夠實現把一個網站的內容嵌入到另外一個網站裏 frameborder="0" 無邊框

跳轉至指定元素的位置：<frame src="/example/html/link.html #C10">

<a href=" www.baidu.com" target="myframe" >sss</a> 經過target指向myframe框架實現跳轉

16.連接：

<base target="_blank" /> base爲頁面上的全部連接規定默認地址或默認目標（target）

<a href=" www.w3cSchool.com.cn" target="_blank" > 因爲base的存在，沒有target屬性也會在新的窗口中打開連接。

若base 和target都不存在的時候，連接就只會在原窗口中打開網頁。

17.常見實體：

顯示結果	描述	實體名稱	實體編號
	空格
<	小於號	<	<
>	大於號	>	>
&	和號	&	&
"	引號	"	"
'	撇號	' (IE不支持)	'
￠	分	¢	¢
£	鎊	£	£
¥	日圓	¥	¥
€	歐元	€	€
§	小節	§	§
©	版權	©	©
®	註冊商標	®	®
™	商標	™	™
×	乘號	×	×
÷	除號	÷	÷

18：URL

URL規則：scheme://host.domain:port/path/filename     port  若是省略，則文檔必須位於網站的根目錄中

19.表單：

get ：from表單裏所填的值，附加在action指定的URL後面，作爲URL連接而傳遞。javascript

post ：from表單裏所填的值，附加在HTML Headers上。css

<form action=" http://www.example.com/test.asp" method="post/get"> //aciton要提交的

<input type="text" name="lastname"

value="Nixon" size="30" maxlength="50">

<option>Apples

<option selected>Bananas

<option>Cherries

</select>

<textarea name="Comment" rows="60"

cols="20"></textarea>

</form>

20 html5:

<video width="200" height="100" controls="controls"> 加載視頻文件， control 屬性供添加播放、暫停和音量控件。

</video>

屬性	值	描述
autoplay	autoplay	若是出現該屬性，則視頻在就緒後立刻播放。
controls	controls	若是出現該屬性，則向用戶顯示控件，好比播放按鈕。
height	pixels	設置視頻播放器的高度。
loop	loop	若是出現該屬性，則當媒介文件完成播放後再次開始播放。
preload	preload	若是出現該屬性，則視頻在頁面加載時進行加載，並預備播放。html 若是使用 "autoplay"，則忽略該屬性。html5
src	url	要播放的視頻的 URL。
width	pixels	設置視頻播放器的寬度。來源： http://www.w3school.com.cn/html5/html_5_video.asp

方法	屬性	事件
play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType	videoHeight	error
	duration	timeupdate
	ended	ended
	error	abort
	paused	empty
	muted	emptied
	seeking	waiting
	volume	loadedmetadata
	height
	width

註釋：在全部屬性中，只有 videoWidth 和 videoHeight 屬性是當即可用的。在視頻的元數據已加載後，其餘屬性纔可用。java

來源： http://www.w3school.com.cn/html5/html_5_video_dom.asp

21.拖拽圖片資源並放置新位置：

#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}

</style>

function allowDrop(ev){

ev.preventDefault(); //避免瀏覽器對數據的默認處理，drop 默認以連接形式打開

}

function drag(ev){

ev.dataTransfer.setData("Text",ev.target.id); //將要拖拽的圖片id存入Text標記

}

function drop(ev){

ev.preventDefault();

var data=ev.dataTransfer.getData("Text"); //取出以前存的id值

ev.target.appendChild(document.getElementById(data)); //將上面的id值追加到新的元素中

}

</script>

</head>

<body>

<p>請把 W3School 的圖片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> //id="div1" 引用css樣式

<br />

<img id="drag1" src="/i/w3school_banner.gif" draggable="true" ondragstart="drag(event)" /> //開始拖動的時候調用drag(event)

22.移動座標和劃線的方法用駝峯法，moveTo(a,b) lineTo(a,b)

var c=document.getElementById("mcanvas");

var ctx=c.getContext("2d");

ctx. moveTo(10,10);

ctx. lineTo(150,50);

ctx.lineTo(10,60);

ctx.stroke();

</script>

23.畫圓：

arc(x, y, radius, beginAngle, endAngle, anticlockwise); x，y：圓心座標； radius：半徑； beginAngle,
endAngle：開始的弧度和結束的弧度； anticlockwise：參數爲true時爲逆時針，參數爲false時爲順時針；

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.beginPath();

cxt.arc(70,18,15,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

24.顏色漸變：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var grd= ctx.createLinearGradient(0,0,175,50); //建立線性

grd.addColorStop(0,"#FF0000");

grd.addColorStop(1,"#00FF00");

ctx.fillStyle=grd;

ctx.fillRect(0,0,175,50);

</script>

25加載圖片：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var img=new Image()

img.src="/i/eg_flower.png"

ctx.drawImage(img,0,0);

26.操做div塊時，腳本應在前面，div塊在後面。

27.常見dom屬性和方法：

方法	描述
getElementById()	返回帶有指定 ID 的元素。
getElementsByTagName()	返回包含帶有指定標籤名稱的全部元素的節點列表（集合/節點數組）。
getElementsByClassName()	返回包含帶有指定類名的全部元素的節點列表。
appendChild()	把新的子節點添加到指定節點。
removeChild()	刪除子節點。
replaceChild()	替換子節點。
insertBefore()	在指定的子節點前面插入新的子節點。
createAttribute()	建立屬性節點。
createElement()	建立元素節點。
createTextNode()	建立文本節點。
getAttribute()	返回指定的屬性值。
setAttribute()	把指定屬性設置或修改成指定的值。