一 : 科普一分鐘
//其實(shí)我有很多奇思妙想的點(diǎn)子,被困在腦海中,往往這就是學(xué)習(xí)的動(dòng)力
開(kāi)發(fā)的時(shí)候有很多好看絢麗的頁(yè)面是由HTM5構(gòu)成,我個(gè)人來(lái)說(shuō)看著很激動(dòng),腦袋中有著種種奇妙的想法,想去完成它,仿佛進(jìn)入了魔幻世界一樣,但是好的設(shè)計(jì)師的基礎(chǔ)通常也是很不錯(cuò)的,能夠熟練掌握基礎(chǔ)才能完成你腦海中更完美的畫(huà)面.下面簡(jiǎn)單分析一下基本H5的基本組成和簡(jiǎn)單操作.
二 : HTML代碼基礎(chǔ)
HTML 有著各種各樣的標(biāo)簽, 其中大部分標(biāo)簽都是對(duì)應(yīng)的 ,后一對(duì)通常 加上 / 表示結(jié)束.
我們簡(jiǎn)單來(lái)了解一下
- 內(nèi)容標(biāo)簽
類(lèi)似<p></p>-表示段落,
<p> 好玩的東西一點(diǎn)點(diǎn),快樂(lè)的東西一點(diǎn)點(diǎn) </p>
我們還可以給這個(gè) 標(biāo)簽添加一些屬性方便我們區(qū)分
<p id = "tzlove"> 好玩的東西一點(diǎn)點(diǎn),快樂(lè)的東西一點(diǎn)點(diǎn) </p>
當(dāng)然 標(biāo)簽之內(nèi)不可能只有一個(gè)屬性還會(huì)有很多屬性
<p id = "tzlove" class = "yellow"> 好玩的東西一點(diǎn)點(diǎn),快樂(lè)的東西一點(diǎn)點(diǎn) </p>
- 非內(nèi)容標(biāo)簽
不是每個(gè)標(biāo)簽都是都對(duì)應(yīng)的/不對(duì)應(yīng)的我們叫它非內(nèi)容標(biāo)簽或者空標(biāo)簽對(duì)于這種標(biāo)簽通常只有起始標(biāo)簽 沒(méi)有結(jié)束標(biāo)簽
常見(jiàn)的非內(nèi)容標(biāo)簽有<br>,img,hr,<input>,<link>,<meta>等等
- 根元素
整個(gè)網(wǎng)頁(yè)的根元素 :html
我們常常添加的是lang和manifest屬性
a : lang屬性是網(wǎng)頁(yè)的語(yǔ)言聲明
<html lang = "en">
<html lang = "zh-CN">
b : manifest離線緩存
一旦設(shè)置后瀏覽器將需要緩存的文件保存至本地,這樣下一次訪問(wèn)時(shí),即使是在沒(méi)有網(wǎng)絡(luò)連接的情況下也能夠正常顯示頁(yè)面內(nèi)容
-
文檔元數(shù)據(jù)
head元素應(yīng)該是HTML文檔中所有元數(shù)據(jù)metadata的集合之處
head包含五部分 :title,link,style,base,meta元素title--> 為標(biāo)題,在瀏覽器標(biāo)題欄顯示.
link--> 定義了文檔與外部資源的關(guān)系<link href="TZjoin.css" rel="stylesheet"> </link> ``` `base`用于標(biāo)記文檔的基礎(chǔ)URL 地址<base href = "www.zzzzz.com">
`base` 還可以被用于設(shè)置全局的瀏覽器打方式,頁(yè)面中所有的連接均在新窗口中打開(kāi)<base target = "_bank">
`<meta>` 元素是head中種類(lèi)最為豐富的一類(lèi)元素. `<meta>` 元素雖然包含了多種多樣的元數(shù)據(jù),但它也被規(guī)定了必須包含 `name` , `http-equiv` 和 `charset` 其中一種 `內(nèi)核渲染` --> `renderer` 這一屬性 急速內(nèi)核
<meta name = "renderer" content = "webkit">
引擎渲染
<meta http-equiv = "X-UA-compatible" content = "IE = edge,chrome = 1">
搜索引擎優(yōu)化
<meta name = "keywords" content = "H5">
<meta name = "description content = "教程頁(yè)面">
當(dāng)我們不希望頁(yè)面被抓取公開(kāi)時(shí) 用robots 的 meta 標(biāo)記
<meta name = `robots` content = "none">
如果希望文件和連接都能夠被檢索和查詢(xún)
<meta name = "robots" conten = "all">
不希望顯示撥號(hào)超鏈接
<meta name = "format-detection" content = "telephone = no">
避免自動(dòng)識(shí)別郵箱
<meta name = "format-detection" content = "email = no">
對(duì)老式的手持設(shè)備優(yōu)化
<meta name = "HandheldFriendly" content = "true">
刷新頁(yè)面
<meta http - equiv = "refresh" content = "300">
在頁(yè)面0 秒以后 調(diào)到百度主頁(yè)
<meta http - equiv = "refresh" content = "0" URL = "https://www.baidu.com/">
設(shè)置超過(guò)緩存時(shí)間,用戶(hù)訪問(wèn)頁(yè)面時(shí)再次向服務(wù)器發(fā)送更新請(qǐng)求
<meta http-equiv = "expires" content = "wed,12 Aug 2017 10:10:23 GMT">
不需要轉(zhuǎn)碼優(yōu)化
<meta http-equiv = "Cache-control" content = "no -siteapp">
-
區(qū)塊元素
HTML5的主題 是body 元素 有不同的區(qū)塊構(gòu)成,html5 之前有多個(gè)div 標(biāo)簽組成 很難清晰看出結(jié)構(gòu),下面我們現(xiàn)在看看新的區(qū)塊何如把內(nèi)容頁(yè)面排布的.
a : 我們創(chuàng)建header元素 對(duì)應(yīng)頭部區(qū)域 以 h1 的形式放置了整個(gè)頁(yè)面的標(biāo)題
<body>
<header>
<h1>我是標(biāo)題大人</h1>
</header>
</body>
b : 導(dǎo)航 nav 元素來(lái)對(duì)應(yīng)導(dǎo)航信息,頁(yè)面的主菜單 代碼
<body>
<header>
<h1>頁(yè)面標(biāo)題</h1>
<na>
<u1>
<li>欄目1</li>
<li>欄目2</li>
<li>欄目3</li>
<li>欄目4</li>
</u1>
</na>
</header>
</body>
c : section元素
在HTML5中,我們可以用新的section 元素對(duì)應(yīng)不同的內(nèi)容板塊,section 還可以是某一章或者某一部分.
<section>
<h2>社會(huì)內(nèi)容</h2>
</section>
<section>
<h2>體育新聞</h2>
</section>
為每個(gè)section板塊元素添加文章 artcle元素
<section>
<h2>社會(huì)內(nèi)容</h2>
<artcle>
<h3> 沈陽(yáng)小吃又添新菜</h3>
<p>沈陽(yáng)小吃又添新菜,讓我們一起看看....</p>
</artcle>
<artcle>
<h3> 環(huán)保問(wèn)題</h3>
<p>環(huán)保問(wèn)題越來(lái)越被重視....</p>
</artcle>
</section>
<section>
<h2>體育新聞</h2>
<artcle>
<h3> 勇士奪得總冠軍</h3>
<p>杜蘭特終于捧起獎(jiǎng)杯.....</p>
</artcle>
</section>
每篇文章 article 也可以有自己的header footer 或者section 元素
<article>
<header>
<h3>今天是我們工作室的第一天</h3>
</header>
<p>今天很開(kāi)心,我們工作室成立的第一天,我們是一個(gè)快樂(lè),向上的集體,追逐淡淡的陽(yáng)光,還要淡淡的自己</p>
<footer>
<p>其實(shí)沒(méi)有工作室,是我自己瞎編的了</p>
<footer/>
</article>
d : aside 側(cè)邊欄
<aside>
<h2>相關(guān)連接</h2>
<p>包小姐,參加中國(guó)好女孩</p>
</aside>
f : aside 元素 也可以加入一些相關(guān)文章推薦
<article>
<header>
<h3>今天是我們工作室的第一天</h3>
</header>
<p>今天很開(kāi)心,我們工作室成立的第一天,我們是一個(gè)快樂(lè),向上的集體,追逐淡淡的陽(yáng)光,還要淡淡的自己</p>
<aside>
<p>工作室相關(guān)連接</p>
</aside>
<footer>
<p>其實(shí)沒(méi)有工作室,是我自己瞎編的了</p>
<footer/>
</article>
-
分組內(nèi)容元素
a :
pb :
div使用元素是比較高的,可以看做是一種容器,本身不代表任何意義
在HTML5 語(yǔ)義化大背景下,div看看做是一種最后的解決方案.
<div lang = "zh-CN">
<p>第一段文字</p>
<p>第二段文字</p>
</div>
<div lang = "en">
<p>first sentense</p>
<p>second sentense</p>
</div>
c : 列表元素 常用的分組元素(無(wú)序)
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
d : 如果想讓上述有序展示 ol標(biāo)簽
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
設(shè)置為小寫(xiě)字母展示
<ol type = "a">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
e : dl dt dd
dl是最外圍元素 ,代表了一項(xiàng)內(nèi)容的集合,存在多種類(lèi)型的內(nèi)容,每一項(xiàng)內(nèi)容標(biāo)題是用 dt來(lái)加以指定 具體內(nèi)容則以 dd 指定
<dl>
<dt>一班</dt>
<dd>小紅</dd>
<dt>二班</dt>
<dd>小綠</dd>
<dt>三班</dt>
<dd>小剛</dd>
</dl>
f : figure 元素 展示于 插圖,圖表,照片,代碼等
<figure>
<img scr = "tz.png" alt = "帥哥">
<figcaption>一個(gè)陽(yáng)光帥氣的男孩</figcaption>
</figure>
g : main 元素 內(nèi)容分組元素,每一張頁(yè)面最多只能有一個(gè)main 元素.
<main>
<article>
<h1>這是一篇文章</h1>
<p>這篇文章是關(guān)于....一個(gè)男孩的故事</p>
</article>
</main>
<article>
<h1>這是第二篇篇文章</h1>
<p>這篇文章是關(guān)于....一個(gè)女孩的故事</p>
</article>
-
文本元素
a : 連接
<a href = "home.html">my home</a>
在窗口中打開(kāi)上述連接
<a> href = "home.html" target = "_bank">my home</a>
a 標(biāo)簽的嵌套
<a href = "home.html" target = "_blank">
<section>
<h1> 大家好 </h1>
<p> 我是TZ </p>
</section>
</a>
b : span 元素 常常被用來(lái)組合文本, 結(jié)合了class 和 id 屬性
<p>
我很<span class = "red"> 帥 </span> 也很<span class = "blue" >酷</span>
</p>
c : em 和 strong 元素 語(yǔ)氣加強(qiáng),強(qiáng)調(diào)
<p><em>今天</em>是個(gè)好日子</p>
<p><strong>今天</strong>是個(gè)好日子</p>
d : big small 放大縮小元素
<p><big>也許生活有挫折</big></p>
<p><small>也不要忘記微笑</small></p>
f : q cite 元素 q 默認(rèn)在頭和尾加上雙引號(hào) cite 默認(rèn)為斜體
g : br元素
<p>
你像一座孤傲的島,有自己的城堡<br>
我是上不了岸的潮水,也只能將你圍繞<br>
</p>
-
表單
form
method屬性 ->方式
action屬性 - >動(dòng)作
<form method = "post" action = "sever.php">
</form>
a : input
<form method = "post" action = "sever.php">
<p><label>姓名 : <input name = "username" type = "text" placeholder = "請(qǐng)輸入您的姓名"></label></p>
</form>
電話
<p><label>電話 : <input name = "tel" type = "tel" placeholder = "請(qǐng)輸入電話"></label></p>
郵箱
<p><label>郵箱 : <input name = "email" type = "email" placeholder = "請(qǐng)輸入電話"></label></p>
日期
<p><label>時(shí)間 : <input name = "date" type = "date" placeholder = "請(qǐng)輸入電話"></label></p>
單選
<input type = "radio" name = "sex" value = "male checked">男 </input>
<input type = "radio" name = "sex" value = "female ">女 </input>
勾選
<p>
<label><input type = "checkbox" name = "rule"> 規(guī)章制度 </input></label>
</p>
下拉菜單項(xiàng)
<p>
<label for = "loveGirl"> 請(qǐng)選擇帥哥 </label>
<select>
<option value = "1">大寶</option>
<option value = "2">二寶</option>
<option value = "3">三寶</option>
</select>
</p>
提交按鈕
<p><button>提交表單</button></p>
表格 學(xué)生成績(jī)表
<table>
<tr>
<td>小紅</td>
<td>100</td>
</tr>
<tr>
<td>小王</td>
<td>60</td>
</tr>
</table>
當(dāng)我們要橫跨整行合并單元格用 clospan 屬性
<table>
<tr>
<td cospan = "2" > 成績(jī)單 </td>
</tr>
<tr>
<td>小紅</td>
<td>100</td>
</tr>
<tr>
<td>小王</td>
<td>60</td>
</tr>
</table>
caption元素添加標(biāo)題
<table>
<caption>成績(jī)單</caption>
<tr>
<td>小紅</td>
<td>100</td>
</tr>
<tr>
<td>小王</td>
<td>60</td>
</tr>
</table>
th 強(qiáng)調(diào)表頭
<table>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>小紅</td>
<td>100</td>
</tr>
<tr>
<td>小王</td>
<td>60</td>
</tr>
</table>
表格顏色
<table>
<colgroup>
<col class = "deep-green" span = "2">
</colgroup>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>小紅</td>
<td>100</td>
</tr>
<tr>
<td>小王</td>
<td>60</td>
</tr>
</table>
三 : CSS基礎(chǔ)
- css聲明
<body>
background : #FFF000;
color : #445;
</body>
多個(gè)屬性可以用空格分開(kāi)
article{
border : 1px solid : #000;
}
.block{
border-width : 5px;
}
我們要按照上右下左的順序
.block{
border-with: 5px 50px 1px 20px;
}
- 繼承性
每個(gè)diV或其他的標(biāo)簽都可能繼承上一個(gè)的父級(jí)的標(biāo)簽屬性,子級(jí)別沒(méi)有定義同款屬性,則使用父級(jí)屬性
-
選擇器
a : 標(biāo)簽選擇器
h1{ font-size : 30px; }
b : 類(lèi)選擇器
.red{
color : #F00;
}
組合
h1.red{
color : #F00;
}
c : id 選擇器
#label {
font-size : 30px;
}
d : 附加選擇器
經(jīng)過(guò)連接時(shí)候 背景為紅色
a : hover{
background : #FF0;
}
使得已經(jīng)訪問(wèn)過(guò)的鏈接文字顯示為紅色
a : visited{
color : #FF0;
}
- 常用屬性
a : 文字顏色
h1{
color : #F00;
}
b : 文本縮進(jìn)
p{
text-indent :2em
}
c : 行高屬性
h1{
color : #F00;
background : #ECF0F1;
height : 60px;
line - height : 60px;
}
d : 字體屬性
h1{
font-family : "Courier New";
}
e: 設(shè)置原角屬性
h1{
border : 10px solid #FF;
border - radius :50%;
}
f : 左邊框
p{
border-left : 5px splid #27AE60;
background : #ECF0F1;
padding : 5px 10px;
}
g : 塊元素 和行內(nèi)元素
分塊
h1,p{
display : inline
}
行內(nèi)
h1,p{
display : block
}
浮動(dòng)
h1,p{
float : left
}
相對(duì)定位 relative
默認(rèn)情況下區(qū)塊元素采用 relative 的定位方式
絕對(duì)定位 absolute
盒子模型
a : 內(nèi)間距padding外間距margin
b :box - sizing屬性
當(dāng)我們?cè)O(shè)置box - sizing屬性值為border-box時(shí)候 則設(shè)置的寬高包含內(nèi)間距和外間距
當(dāng)我們?cè)O(shè)置的屬性值為content-box時(shí)候 則設(shè)置的寬高不包含內(nèi)間距和外間距.列表
<body>
<u1>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</u1>
</body>
設(shè)置列表顏色 和圖片
li{
background:#c0392b;/*red*/
color:#fff;
list-style:none;
padding:15px;
margin:5px 0;
text-indent:35px;
background:#C0392B url(check.png) no-repeat 10px 10%;
box-sizing:border-box;
width:200px;
float:left;
margin-right:10px;
/*用比例來(lái)寫(xiě)*/
margin-right:4%;
width:22%;
min-width:120px;
}
- 常用效果
- 文字陰影
h1{
text-shadow: 0 8px 5px rgba(0,0,0,.5);
text-shadow: 1px 1px 0 rgba(255,255,255,.7);
text-shadow: -1px -1px 0 rgba(0,0,0,.7);
}
在 X Y 上的陰影位移,陰影的模糊程度,陰影的顏色.
- 優(yōu)先級(jí)
id 選擇器優(yōu)先于類(lèi)選擇器優(yōu)先于標(biāo)簽選擇器
四 : JS基礎(chǔ)
非常簡(jiǎn)單,簡(jiǎn)單介紹一下語(yǔ)法
a : 創(chuàng)建變量
var i = 3;
b : 運(yùn)算符
console.log(1+1);
console.log(2*3);
console.log("1"+2) ; //12
console.log(1 > 2) ; //false
console.log(1 === 2) ; //false 全等運(yùn)算符 要求數(shù)值和類(lèi)型都相同才返回true
c : 條件語(yǔ)句
var answer = "a";
if (answer == "A"){
console.log("回答正確");//輸出回答正確
}
switch (answer){
case "A" :
console.log("1");
break;
case "b" :
console.log("2");
break;
case "c" :
console.log("3");
break;
}
d : 循環(huán)語(yǔ)句
for( var i = o; i < 4; i++ ){
console.log(i);
}
e : 數(shù)組
var arr = new Array();
arr = ["a","b","c"];
在末尾插入元素
arr.push("d");
//在開(kāi)頭插入元素
arr.unshift("e");
//刪除開(kāi)頭數(shù)組
arr.shift();
//刪除最后一個(gè)元素
arr.pop();
//刪除某個(gè)位置函數(shù)
arr.splice(1,1);
從第一個(gè)數(shù)組元素之后開(kāi)始刪除一個(gè)數(shù)組元素
//插入元素到某個(gè)位置
arr.splice(1,0,"b");//在第一個(gè)元素后面插入元素 `b`
//將兩個(gè)數(shù)組內(nèi)容相連創(chuàng)建新的數(shù)組
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = arr1.concat(arr2);
//數(shù)組元素倒敘
var arr1 = [1,2,3];
arr1.reverse();
//數(shù)組中數(shù)據(jù)類(lèi)型可以為不同
var arr = ["a" , 123, false];
//存儲(chǔ)對(duì)象
var arr = [{name : "A" ,age:25},
{name : "B",age:26 }];
f : 日期和時(shí)間
//包含時(shí)分秒,年月日,時(shí)區(qū)
var now = new Date();
console.log(now);
//只要時(shí)分秒,年月日
console.log(now.toDateString());
//獲得部分信息,獲得小時(shí)信息
console.log(now.getHours());
//獲得 月份 0-11 0代表 一月份
console.log(now.getMonth());
//獲得天數(shù) 星期日輸出 0
console.log(now.getDay);
//獲取世界時(shí)間
console.log(now.getUICHours);
//參數(shù)創(chuàng)建時(shí)間
var date = new Date(2017,7,19,20,10);
//對(duì)日期進(jìn)行修改
date.setHours(10);
//日期轉(zhuǎn)化為毫秒
var date = "Fri Sep 19 2016";
Date.parse(date);
- 函數(shù)
function TZFunction(){
console.log("hellow world");
}
TZFunction();
//加參數(shù)
function TZFunction(id){
console.log(id);
}
TZFunction(3);
//賦值表達(dá)式定義函數(shù) 感覺(jué)像是OC 里的block
var testID = function(id){
console.log(id);
}
testID(111);
- 對(duì)象
var student{
name : `xiaoming`,
age : 22,
job : `student`
}
var faculty = new object();//Obeject 構(gòu)造函數(shù)
faculty.name = "小明";
faculty.age = 20;
faculty.job = "student";
- DOM操作
a : dom事件處理
<button id = "submit"> sunbmit</button>
<script type="text/javascript">
var submit = document.getElementById("submit");
submit.onclick = function(){
console.log("tzZZZZ");
}
</script>>
鼠標(biāo)滑過(guò)button 上方時(shí)候輸出"TZzzz"
function domove(){
console.log("TZzzz");
};
submit.onmouseover = domove;
頁(yè)面加載完畢輸出 TianTianbaby
function loadOver(){
console.log("TianTianbaby");
}
this.onload = loadOver;
this 相當(dāng)于 OC 中的self
拖動(dòng)效果
<body>
<div id="logo"></div>
<div id="box"></div>
<script type="text/javascript">
var logo = document.getElementById("logo");
logo.draggable = true;
/*去除事件的默認(rèn)行為*/
var box = document.getElementById("box");
box.ondragover = function(event){
event.preventDefault();
};
/*把logo放入box 中*/
box.ondrop = function(event){
box.appendChild(logo);
};
</script>
</body>
body{
poisition:relative;
}
#logo{
width : 300px;
height:200px;
background:url(corn.png) center 50% no-repeat;
position:absolute;
left:0;
}
#box{
width : 300px;
height : 200px;
background:#d4efdf;
border-radius:10px;
border:5px dashed #27ae60;
position:absolute;
right:0;
}
五 : 總結(jié)
為了能得到更唯美的畫(huà)面,為了更好能實(shí)現(xiàn)更好看的構(gòu)想,那么請(qǐng)牢記語(yǔ)法和css 樣式,那樣才能把我們的idea更完美的展示出來(lái),其實(shí)HTML5并不難,把它當(dāng)成一個(gè)藝術(shù)品去完成,會(huì)有更好的收獲.
