html + css + js初步簡單學習筆記

阿新 • • 發佈：2018-12-23

html:

<html>這個是HTML5的根元素。可以省略注意每個檔案最多隻有一個根元素

<head>頁面頭部分,可以省略
<style>引入樣式
<h1 - h6> 標題1-6字型越來越小
<p> 定義的是段落可以指定id class style 等屬性
<hr> 定義水平線
<span> 和div基本相似，只是不會預設換行，定義文件中的節

<progress> 進度條
頭部資訊：
<script> 該元素包含javaScript指令碼。

<style> 該元素定義內部css樣式

<link> 該元素用於連線外部CSS樣式等資源

<base> 該元素用於指定該頁面中所有的連線和基準連結

<meta> 該元素用於定義HTML頁面的元資料

<table>標籤

1.table標籤的作用: 顯示資料
幫助頁面佈局
2.colspan: 跨列
rowspan: 跨行
3.<table>相關標籤:
<caption>：用於定義表格標題
<tr>:用來定義表格行
<td>:用來定義表格列
<th>:用來定義表格頁首的單元格,內容自動居中
<thead>：用來定義一個子表格塊的表格頭
<tbody>：用來定義一個子表格塊的內容主體
<tfoot>: 用來定義一個子表格塊的頁尾
<col>: 為表格中的一個或者多個列指定屬性值
<colgroup>：用來組織多個<col...../>元素

框架:

作用:可以實現在同一個頁面中

<frameset>：不負責頁面內容的顯示,只是輔助頁面的分割 cols rows

<iframe> </iframe> frameborder=0:內聯框的邊框為0

表單：form
action:提交位置
method:提交方式,get,post
表單元素：
文字框,input type=text name="",value
密碼框,input type=password
單項框，radio,name=""
複選框：checkbox
提交按鈕：submit
普通按鈕：button
圖片按鈕：image src=""
檔案上傳：file
隱藏域：hidden
重置按鈕：reset
disabled:禁用標籤
readonly只讀

下拉列表：select,option
文字域：textarea

html:超文字標籤語言，內容
css:層疊樣式表，美化
js:java指令碼，動畫

標籤的分類
塊級標籤：
標題標籤：h1,h2,h3,h4,h5,h6
段落標籤:p
水平線標籤：hr
有序列表標籤：ol,li
無序列表標籤：ul,li
定義描述標籤：dl,dt,dd
表格標籤：table，tr,td
表單標籤：form
分割槽標籤：div
行級標籤：
影象標籤：img
範圍標籤：span
換行標籤：br

<b> 定義粗體文字
<i> 定義斜體文字
<em>定義強調文字實際效果和斜體文字差不多
<strong> 定義粗體文字與<b>差不多
<sub> 定義下標文字
<bdo>定義文字的顯示方向只能是ltr 或者是 rtl 比如
<bdo dir = ltr>左至右</bdo><br/>
<bdo dir = rtl>右至左</bdo><br/>

<article> 該元素代表頁面上獨立、完整的一篇文章。
該元素內部可以使用<head> <footer> <section> <article>(附屬文章)

<section> 頁面分塊

<nav> 該元素用於定於導航條包括主導航條邊欄導航等

<aside> 該元素專門用於定義當前頁面或當前文章的附屬資訊

<header> 該元素內部可以包含多個<h1-6>這樣的標題

<hgroup> 用於組織多個<h1-6> 這樣的標題元素

<footer> 用於腳註部分什麼版權資訊，作者授權

<figure> 一塊獨立的圖片區域可以包含<figcaption> <img>元素標籤

<figcaption> 圖片區域標題

<abbr> 用以表達一個縮寫，可以指定如下屬性（title）
表示的是該縮寫所代表的全稱
比如：瘋狂教育中心的簡寫是<abbr title = 瘋狂java >fkjava</abbr>

<address>用於表示的是一個地址瀏覽器會使用縮排的方式顯示這段被引用文字，可以加上cite
比如：瘋狂軟體的地址是<address>廣州市天河區車坡大崗路4號灃巨集大廈3006-3011</address>

<cite> 表示是一本書或者一首歌等的標題

<dfn>瀏覽器通常會用粗體或者斜體字顯示 <dfn.../>所包含的文字

<del>:定義文件中被刪除的文字，瀏覽器通常會以中劃線形式顯示這個文字

cite：該屬性值是個URL該URL對應的文字解釋了文字被刪除或者插入的原因

datetime: 定義文字被刪除或者插入的日期

<ins>:定義文字被刪除的文字瀏覽器通常會以下劃線的形式顯示這個文字

<pre>: 預格式化，實際上就是瀏覽器會保留<pre ..../>裡面的文字格式比如空格回車

<sample>: 用於定義示範文字內容

<kbd>: 用於定義鍵盤文字。該元素用於表示文字是通過鍵盤輸入的。通常在計算機使用文件、使用說明中會經常使用該元素

<var> :用於表示一個變數。瀏覽器會通常使用斜體字來顯示其文字

css:

div+css頁面佈局:

1.盒子的屬性:

內容:變遷中的文字或圖片,或者是其他盒子

邊框:border （border-color、border-style、border-width）

內邊距:padding,標識內容離邊框的距離

外邊距:margin

2.超連結的樣式:

超連線4種樣式:

(有順序)
未訪問狀態(a:link)

已訪問狀態(a:visited)

滑鼠移上狀態(a:hover)

啟用選定狀態(a:active) relative(相對的)

3.樣式分類:按照樣式的位置來分類

行內樣式: 樣式程式碼寫到標籤後面

內部樣式: 樣式程式碼寫在style標籤裡面,除錯階段使用

外部樣式: 樣式程式碼寫在css檔案中,外部樣式標籤需要使用link標籤來引用: <link rel="stylesheet" href="**.css">

優先順序: 行內樣式 > 內部樣式 > 外部樣式

先記住其優點在慢慢體會
表達效果豐富
文件佔用的體積小
便於資訊的檢索
可讀性好

另外記住由外部匯入：
<style type = "txt/css">
@import "檔名.css";
</style>
這種方式外部匯入
另外一種就是在內部設定css樣式

內聯樣式：
eg:
<div style = "
font-size: 18px;
color : #60c;
height: 30px;
width: 200px;
border-top:3px solid #cccccc;
border-left: 3px solid #cccccc;
border-bottom: 3px solid #000000;
border-right: 3px solid #000000;
">

接下來是元素選擇器：
實際上就是在自己設定的css樣式前面加上名字元素標籤的名字
比如：div{
這裡面上就是css樣式的設定
}

屬性選擇器：
實際上在元素選擇器上面的元素標籤後面加上這個元素的屬性設定比如說：
div(id = 3){
...
}
div(id *= xx){
...
}

ID選擇器：
實際上就是在名字前面加個#號
比如 #XX{
...這裡面同樣是css樣式的內容
}
表示的是對id = xx的元素起css的樣式作用
還可以
p#xx{
。。。
}
這個就表示id為xx而且是隻對這個id元素的p元素起作用

class選擇器：
比如:
.myclass {
。。。
}
對所有的myclass元素都起作用的css樣式
再比如：
div.myclass{
...
}
對所有的class為myclass的div元素起作用

包含選擇器：
用於指定目標選擇器必須處於某個選擇器對應的元素內部
比如：
div{
...
}
div .a{
...
}

子選擇器：
等於說包含選擇器可以包含孫子但是子選擇器卻只能夠包含直接子元素
比如說：
div{
。。。
}
div>.a{這個格式就是說a是這個div元素的直接子類
...
}

兄弟選擇器：
格式如下：Selector1~selector2{
...
}等於說同時兄弟兩個選擇器都是這種css格式設定

於是就多了個
選擇器組合？
格式：
Selector1,selector2,Selector3...{
...
}
這裡面定義的css樣式會出現在這個所有的選擇器匹配的元素裡面
比如：
div,.a,#abc{
...
}

偽元素選擇器：
如下幾個：
:first-letter:該選擇器對應的css樣式對指定的物件內的第一個字元起作用
:first-line:該選擇器對應的css樣式對指定物件內的第一行內容起作用
:before：該選擇器與內容相關的屬性結合使用，用於在指定物件內部的前端插入內容
:after：該選擇器與內容相關的屬相結合使用，用於在指定物件的內部的尾端新增內容

在元資料中的http-equiv屬性有很多種設定:
實際上表示的是http檔案頭作用還有很多其他屬性可以設定，慢慢積累

記住solid表示的是實現為dotted表示的是虛線

UI狀態下的偽類選擇器：
Selector:link：匹配selector選擇器且未被訪問前的元素
selector:visited:。。且已被訪問過的元素
上面兩種都是大部分指超連結。
:hover : 匹配。且已處於被使用者啟用狀態的元素(滑鼠點選與釋放之間)
:focus：。。且處於滑鼠懸停狀態的元素
:enabled：，，且當前處於可用狀態的元素
:disabled：。。不可用狀態的元素
:checked：。。處於選中狀態的元素
:defualt：、、且頁面開啟時處於選中狀態的元素(即使當前沒有被選中)
:read-only: 且處於只讀狀態的元素
:read-write:且處於讀寫狀態的元素
:selection:匹配當前selector選擇器中當前被選中的內容

not 和 target 屬性：
Selector:not (Selector2)
匹配選擇器1但是不匹配選擇器2的元素。
Selector:target
匹配符合selector選擇器而且必須是命名錨點目標的元素(雙擊選中)

隨機改變頁面的顏色：
function changeBg(){
var bgColor = "";
for(var i = 0; i <6 ; i++){
bgColor += "" + Math.round(Math.random() * 9);
}
//將隨機生成的背景顏色複製給頁面的背景顏色
document.body.style.backgroundColor = "#" + bgColor;
}

幾個字型相關的屬性：
letter-spacing:字元間距，11px,14px
word-spacing ：單詞之間的間隔 11px,14px
text-shadow:陰影效果
color,radius(偏移半徑),xoffset,yoffset(偏移方向)
一般是在span的style裡面設定這些屬性

常用背景屬性：
p{
background: url(images/bg.jpg) no-repeat 30px 60px #86748b;
}

常用文字屬性：
p{
white-space: nowrap;
}
white-space用於設定目標元件中文字內容對空格處理的方式。normal或者是nowrap
normal抵達容器邊界自動換行
mowrap強制在同一行內顯示所有文字除非遇到<br/>或者文字結束
a{
text-decoration: none;
}
表示是否有修飾線，下劃線等，none,blink,uderline,line-through,overline

//下面內容出自轉發：http://www.cnblogs.com/sunyunh/archive/2012/09/01/2666841.html

CSS中， Box Model叫盒子模型（或框模型），Box Model規定了元素框處理元素內容（element content）、內邊距（padding）、邊框（border）和外邊距（margin）的方式。在HTML文件中，每個元素（element）都有盒子模型，所以說在Web世界裡（特別是頁面佈局），Box Model無處不在。下面是Box Model的圖示：

　　　　　　　　　　　　　　　　　　Box-Model 1

　　說明：上圖中，由內而外依次是元素內容（content）、內邊矩（padding-top、padding-right、padding-bottom、padding-left）、邊框（border-top、border-right、border-bottom、border-left）和外邊距（marging-top、margin-right、margin-bottom、margin-left）。

　　內邊距、邊框和外邊距可以應用於一個元素的所有邊，也可以應用於單獨的邊。而且，外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。

　　下圖是W3School的Box Model 圖解：

　　　　　　　　　　　　　　Box-Model 2（W3School）　　

　　說明：

　　1.和第一幅圖一樣，在上圖中，元素框的最內部分是實際的內容（element）；直接包圍內容的是內邊距（padding），內邊距呈現了元素的背景（background）；內邊距的邊緣是邊框（border）；邊框以外是外邊距（margin），外邊距預設是透明的，因此不會遮擋其後的任何元素（其實元素的margin就是其所在父元素的padding）。元素的背景應用於由內容和內邊距、邊框組成的區域。

　　2.內邊距、邊框和外邊距都是可選的，預設值是零。但是，許多元素將由使用者代理樣式表設定外邊距和內邊距。可以通過將元素的 margin 和 padding 設定為零來覆蓋這些瀏覽器樣式。這可以分別進行，也可以使用通用選擇器（*）對所有元素進行設定：

/*設定所有元素的外邊距和內邊矩為0*/
* {
  margin: 0;
  padding: 0;
}

　　3. 在 CSS 中，width 和 height 指的是內容區域（element）的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。假設框的每個邊上有 10 個畫素的外邊距和 5 個畫素的內邊距。如果希望這個元素框達到 100 個畫素，就需要將內容的寬度設定為 70 畫素，以下是CSS程式碼：

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

下圖是對上面CSS程式碼的解釋：

　　以下是一個完整的CSS Box Model佈局的示例。

View Code

　　以下是上面示例的效果截圖：

js部分：

僅提供部分程式碼：如果學會了javase 基本上js語法沒有什麼太大的問題但是要注意js和javase是兩個不相關的語言

<html>
<head>
<title>www.mldnjava.cn</title>
<script language="JavaScript">
function fun(){
var arr = new Array("MLDN","MLDNJAVA","LiXingHua") ;// 開闢三個元素的陣列
var str = "陣列內容：" ;
for(i=0 ;i<arr.length;i++){
str += arr[i] + "、" ;
}
return str ;
}
alert(fun()) ;
</script>
</head>
<body>
</body>
</html>

<html>
<head>
<title>www.mldnjava.cn</title>
<script language="JavaScript" src="hello.js">
</script>
</head>
<body>
</body>

</html>

helllo.js:

alert("Hello World!!!") ;

<html>
<head>
<title>www.mldnjava.cn</title>
<script language="JavaScript">
document.write("<h1>Hello MLDN !!!</h1>") ;
document.write("<h5>www.MLDNJAVA.cn</h5>") ;
</script>
</head>
<body>
</body>
</html>

<html>
<head>
<title>www.mldnjava.cn</title>
<script language="JavaScript">
document.write("<table border=\"1\">") ;
for(i=1 ; i<=9; i++){
document.write("<tr>") ;
for(j=1; j<=9; j++){
if(j<=i) {
document.write("<td>" + i + "*" + j + " = " + i*j + "</td>") ;
} else {
document.write("<td> </td>") ;
}
}
document.write("</tr>") ;
}
document.write("</table>") ;
</script>
</head>
<body>
</body>
</html>

<html>
<head>
<title>www.mldnjava.cn，MLDN高階Java培訓</title>
<script language="javascript">
function fun(){
alert("Hello World!!!") ;
}
</script>
</head>
<body>
<h3><a href="#" onclick="fun()">按我吧！</a></h3>
</body>
</html>

<html>
<head>
<title>www.mldnjava.cn，MLDN高階Java培訓</title>
<script language="javascript">
function validate(f){
var value = f.email.value ;
if(!/^\[email protected]\w+.\w+$/.test(value)){
alert("EMAIL輸入格式不正確！") ;
f.email.focus() ;// 讓email獲得焦點
f.email.select() ;// 讓已有的內容全選
return false ;
}

return true ;
}
</script>
</head>
<body>
<form action="test.htm" method="post" name="myform" onsubmit="return validate(this)">
EMAIL：<input type="text" name="email">
<input type="submit" value="提交">
</form>
</body>
</html>

<html>
<head>
<title>www.mldnjava.cn，MLDN高階Java培訓</title>
<script language="javascript">
function show(val){
document.myform.result.value = val ;
}
</script>
</head>
<body>
<form action="test.htm" method="post" name="myform">
部門：<select name="dept" onchange="show(this.value)">
<option value="技術部">技術部</option>
<option value="銷售部">銷售部</option>
<option value="財務部">財務部</option>
</select>
結果：<input type="text" name="result" value="">
</form>
</body>
</html>

<html>
<head>
<title>www.mldnjava.cn，MLDN高階Java培訓</title>
<script language="javascript">
function show(){
var name = document.myform.name.value ;
alert("姓名：" + name) ;
var sex ; // 表示性別
if(document.myform.sex[0].checked) {
sex = document.myform.sex[0].value ;
} else {
sex = document.myform.sex[1].value ;
}
alert("性別：" + sex) ;
var inst = "" ;
for(i=0 ; i<document.myform.inst.length; i++){
if(document.myform.inst[i].checked){
inst += document.myform.inst[i].value + "、" ;
}
}
alert("興趣：" + inst) ;
}
</script>
</head>
<body>
<form action="test.htm" method="post" name="myform">
姓名：<input type="text" name="name"><br>
性別：<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女<br>
興趣：<input type="checkbox" name="inst" value="唱歌">唱歌
<input type="checkbox" name="inst" value="游泳">游泳
<input type="checkbox" name="inst" value="跳舞">跳舞
<input type="checkbox" name="inst" value="程式設計" checked>程式設計
<input type="checkbox" name="inst" value="上網">上網<br>
<input type="button" value="顯示" onclick="show()">
</form>
</body>
</html>

<html>
<head>
<title>www.mldnjava.cn，MLDN高階Java培訓</title>
<script language="javascript">
function returnValue(thisurl){
var city = document.myform.city.value ;// 取出當前選擇好的資訊
var doc = window.opener.document ;// 取得父視窗文件
doc.parentform.result.value = city ;// 設定新內容
window.close() ;
}
</script>
</head>
<body>
<form name="myform">
選擇：<select name="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="廣州">廣州</option>
<option value="天津">天津</option>
</select>
<input type="button" value="返回" onclick="returnValue()">
</form>
</body>
</html>

<html>
<head>
<title>www.mldnjava.cn，MLDN高階Java培訓</title>
<script language="javascript">
function fun(thisurl){
window.open(thisurl,"頁面標題","width=470,heigth=150,scrollbars=yes,resizeable=no") ;
}
</script>
</head>
<body>
<form action="" method="post" name="myform">
網址：<SELECT name="url" onChange="fun(this.value)">
<OPTION VALUE="hello_1.htm">hello1</OPTION>
<OPTION VALUE="hello_2.htm">hello2</OPTION>
</SELECT>
</form>
</body>
</html>

<html>
<head>
<title>www.mldnjava.cn，MLDN高階Java培訓</title>
<script language="javascript">
function fun(thisurl){
if(window.confirm("確認刪除？")){
alert("您選擇的“是”！") ;
} else {
alert("您選擇的“否”！") ;
}
}
</script>
</head>
<body>
<a href="#" onclick="fun()">刪除郵件</a>
</body>
</html>

<html>
<head>
<title>www.mldnjava.cn，MLDN高階Java培訓</title>
<script language="javascript">
function shownewpage(thisurl){
window.open(thisurl,"頁面標題","width=470,heigth=150,scrollbars=yes,resizeable=no") ;
}
</script>
</head>
<body>
<form name="parentform">
<input type="button" value="選擇資訊" onclick="shownewpage('content.htm')">
<br>選擇的結果：<input type="text" name="result">
</form>
</body>
</html>

等等

關於前端html css js 實際上可以不用自己寫出網站但是要能夠在網上找框架和資源並且能夠修改

這是對後端的基本要求

此內容純屬個人看法和總結。。

html + css + js初步簡單學習筆記

html + css + js初步簡單學習筆記

html,css,js實現簡單的頁面應用

HTML+CSS+JS簡單實現支付寶付款界面效果

前端學習html css js

html之css選擇器語法學習筆記

讓網頁裝進Android手機（將html+css+js打包成Android應用）（簡單的）

利用前端三大件（html+css+js）開發一個簡單的“todolist”專案

製作一張簡單的網頁（HTML+CSS+JS) 【2】

製作一張簡單的網頁（HTML+CSS+JS) 【3】

html+css+js 簡單日曆

製作一張簡單的網頁（HTML+CSS+JS）【1】

html+css+js簡單實現圖片輪播效果

簡單的五子棋小遊戲(html+css+js)

html+css+js基礎學習

簡單學完HTML+CSS+JS,現在開始看演算法(第四版)----歐幾里得演算法

學習完html,css,js,jq之後做網頁心得

HTML | CSS | JS-隨筆目錄

Sublime text 3 格式化HTML/css/js/json代碼插件

HTML+CSS+JS（面試題）

前端基礎（HTML+CSS+JS）-day12

html + css + js初步簡單學習筆記

相關推薦