HTML5-基礎(chǔ)篇 ( 一 )-HTML5基礎(chǔ)概述

一 : 科普一分鐘

//其實我有很多奇思妙想的點子,被困在腦海中,往往這就是學習的動力
開發(fā)的時候有很多好看絢麗的頁面是由HTM5構(gòu)成,我個人來說看著很激動,腦袋中有著種種奇妙的想法,想去完成它,仿佛進入了魔幻世界一樣,但是好的設(shè)計師的基礎(chǔ)通常也是很不錯的,能夠熟練掌握基礎(chǔ)才能完成你腦海中更完美的畫面.下面簡單分析一下基本H5的基本組成和簡單操作.

二 : HTML代碼基礎(chǔ)

HTML 有著各種各樣的標簽, 其中大部分標簽都是對應(yīng)的 ,后一對通常加上 / 表示結(jié)束.

我們簡單來了解一下

內(nèi)容標簽
類似<p> </p> -表示段落,

 <p> 好玩的東西一點點,快樂的東西一點點 </p>

我們還可以給這個標簽添加一些屬性方便我們區(qū)分

 <p id = "tzlove"> 好玩的東西一點點,快樂的東西一點點 </p>

當然標簽之內(nèi)不可能只有一個屬性還會有很多屬性

<p id = "tzlove"   class = "yellow"> 好玩的東西一點點,快樂的東西一點點 </p>

非內(nèi)容標簽
不是每個標簽都是都對應(yīng)的 / 不對應(yīng)的我們叫它 非內(nèi)容標簽 或者 空標簽 對于這種標簽通常只有起始標簽沒有結(jié)束標簽
常見的非內(nèi)容標簽有 <br>, img , hr ,<input> , <link> , <meta> 等等

根元素
整個網(wǎng)頁的根元素 : html
我們常常添加的是 lang 和 manifest 屬性
a : lang屬性是網(wǎng)頁的語言聲明

<html lang = "en">
<html lang = "zh-CN">

b : manifest離線緩存
一旦設(shè)置后瀏覽器將需要緩存的文件保存至本地,這樣下一次訪問時,即使是在沒有網(wǎng)絡(luò)連接的情況下也能夠正常顯示頁面內(nèi)容

文檔元數(shù)據(jù)
head 元素應(yīng)該是HTML文檔中所有元數(shù)據(jù)metadata 的集合之處
head 包含五部分 : title , link,style,base,meta元素

title --> 為標題,在瀏覽器標題欄顯示.
link --> 定義了文檔與外部資源的關(guān)系

<link   href="TZjoin.css" rel="stylesheet">  </link>
 ```
`base`用于標記文檔的基礎(chǔ)URL 地址

 `base` 還可以被用于設(shè)置全局的瀏覽器打方式,頁面中所有的連接均在新窗口中打開

`<meta>` 元素是head中種類最為豐富的一類元素.
`<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 = "教程頁面">

當我們不希望頁面被抓取公開時用robots 的 meta 標記

<meta name = `robots` content = "none">

如果希望文件和連接都能夠被檢索和查詢

<meta name = "robots" conten = "all">

不希望顯示撥號超鏈接

<meta name = "format-detection" content = "telephone = no">

避免自動識別郵箱

<meta name = "format-detection" content = "email = no">

對老式的手持設(shè)備優(yōu)化

<meta name = "HandheldFriendly" content = "true">

刷新頁面

<meta http - equiv = "refresh"  content = "300">

在頁面0 秒以后調(diào)到百度主頁

<meta http - equiv = "refresh" content = "0" URL = "https://www.baidu.com/">

設(shè)置超過緩存時間,用戶訪問頁面時再次向服務(wù)器發(fā)送更新請求

<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 之前有多個div 標簽組成很難清晰看出結(jié)構(gòu),下面我們現(xiàn)在看看新的區(qū)塊何如把內(nèi)容頁面排布的.

a : 我們創(chuàng)建header元素對應(yīng)頭部區(qū)域以 h1 的形式放置了整個頁面的標題

<body>
    <header>
        <h1>我是標題大人</h1>
     </header>
</body>

b : 導航 nav 元素來對應(yīng)導航信息,頁面的主菜單代碼

<body>
   <header>
      <h1>頁面標題</h1>
      <na>
           <u1>
               <li>欄目1</li>
               <li>欄目2</li>
               <li>欄目3</li>
               <li>欄目4</li>
           </u1>
      </na>
   </header>
</body>

c : section元素

在HTML5中,我們可以用新的section 元素對應(yīng)不同的內(nèi)容板塊,section 還可以是某一章或者某一部分.

<section>
   <h2>社會內(nèi)容</h2>
</section>

<section>
   <h2>體育新聞</h2>
</section>

為每個section板塊元素添加文章 artcle元素

<section>
   <h2>社會內(nèi)容</h2>
       <artcle>
          <h3> 沈陽小吃又添新菜</h3>
           <p>沈陽小吃又添新菜,讓我們一起看看....</p>
        </artcle>

      <artcle>
          <h3> 環(huán)保問題</h3>
           <p>環(huán)保問題越來越被重視....</p>
      </artcle>
</section>

<section>
   <h2>體育新聞</h2>
      <artcle>
          <h3> 勇士奪得總冠軍</h3>
           <p>杜蘭特終于捧起獎杯.....</p>
      </artcle>
</section>

每篇文章 article 也可以有自己的header footer 或者section 元素

<article>
     <header>
        <h3>今天是我們工作室的第一天</h3>
     </header>
      <p>今天很開心,我們工作室成立的第一天,我們是一個快樂,向上的集體,追逐淡淡的陽光,還要淡淡的自己</p>
      <footer>
         <p>其實沒有工作室,是我自己瞎編的了</p>
      <footer/>
</article>

d : aside 側(cè)邊欄

<aside>
  <h2>相關(guān)連接</h2>
   <p>包小姐,參加中國好女孩</p>
</aside>

f : aside 元素也可以加入一些相關(guān)文章推薦

<article>
     <header>
        <h3>今天是我們工作室的第一天</h3>
     </header>
      <p>今天很開心,我們工作室成立的第一天,我們是一個快樂,向上的集體,追逐淡淡的陽光,還要淡淡的自己</p>

     <aside>
        <p>工作室相關(guān)連接</p>
      </aside>
      <footer>
         <p>其實沒有工作室,是我自己瞎編的了</p>
      <footer/>
</article>

分組內(nèi)容元素

a : p

b : div 使用元素是比較高的,可以看做是一種容器,本身不代表任何意義
在HTML5 語義化大背景下,div看看做是一種最后的解決方案.

<div lang = "zh-CN">
   <p>第一段文字</p>
    <p>第二段文字</p>
</div>
<div lang = "en">
   <p>first sentense</p>
    <p>second sentense</p>
</div>

c : 列表元素常用的分組元素(無序)

  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
   </ul>

d : 如果想讓上述有序展示 ol標簽

  <ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
   </ol>

設(shè)置為小寫字母展示

  <ol type = "a">
    <li>one</li>
    <li>two</li>
    <li>three</li>
   </ol>

e : dl dt dd

dl是最外圍元素 ,代表了一項內(nèi)容的集合,存在多種類型的內(nèi)容,每一項內(nèi)容標題是用 dt來加以指定具體內(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>一個陽光帥氣的男孩</figcaption>
</figure>

g : main 元素內(nèi)容分組元素,每一張頁面最多只能有一個main 元素.

<main>
   <article>
        <h1>這是一篇文章</h1>
         <p>這篇文章是關(guān)于....一個男孩的故事</p>
    </article>
</main>

<article>
        <h1>這是第二篇篇文章</h1>
         <p>這篇文章是關(guān)于....一個女孩的故事</p>
    </article>

文本元素

a : 連接

<a href = "home.html">my home</a>

在窗口中打開上述連接

<a> href = "home.html" target = "_bank">my home</a>

a 標簽的嵌套

<a href = "home.html" target = "_blank">
   <section>
     <h1> 大家好 </h1>
     <p> 我是TZ </p>
   </section>
</a>

b : span 元素常常被用來組合文本, 結(jié)合了class 和 id 屬性

<p>
我很<span class = "red"> 帥 </span> 也很<span class = "blue" >酷</span>
</p>

c : em 和 strong 元素語氣加強,強調(diào)

<p><em>今天</em>是個好日子</p>

<p><strong>今天</strong>是個好日子</p>

d : big small 放大縮小元素

<p><big>也許生活有挫折</big></p>
<p><small>也不要忘記微笑</small></p>

f : q cite 元素 q 默認在頭和尾加上雙引號 cite 默認為斜體

g : br元素

<p>
你像一座孤傲的島,有自己的城堡<br>
我是上不了岸的潮水,也只能將你圍繞<br>
</p>

表單 form

method屬性 ->方式
action屬性 - >動作

<form method = "post"  action = "sever.php">
</form>

a : input

<form method = "post" action = "sever.php">
 <p><label>姓名 : <input name = "username" type = "text"  placeholder = "請輸入您的姓名"></label></p>
</form>

電話

 <p><label>電話 : <input name = "tel" type = "tel"  placeholder = "請輸入電話"></label></p>

郵箱

 <p><label>郵箱 : <input name = "email" type = "email"  placeholder = "請輸入電話"></label></p>

日期

 <p><label>時間 : <input name = "date"  type = "date"  placeholder = "請輸入電話"></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>

下拉菜單項

<p>
 <label  for = "loveGirl"> 請選擇帥哥 </label>
 <select>
   <option value = "1">大寶</option>
   <option value = "2">二寶</option>
   <option value = "3">三寶</option>
 </select>
</p>

提交按鈕

<p><button>提交表單</button></p>

表格學生成績表

<table>
<tr>
  <td>小紅</td>
  <td>100</td>
</tr>
<tr>
  <td>小王</td>
  <td>60</td>
</tr>
</table>

當我們要橫跨整行合并單元格用 clospan 屬性

<table>

<tr>
<td cospan = "2" > 成績單 </td>
</tr>
<tr>
  <td>小紅</td>
  <td>100</td>
</tr>
<tr>
  <td>小王</td>
  <td>60</td>
</tr>
</table>

caption元素添加標題

<table>
<caption>成績單</caption>
<tr>
  <td>小紅</td>
  <td>100</td>
</tr>
<tr>
  <td>小王</td>
  <td>60</td>
</tr>
</table>

th 強調(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>

多個屬性可以用空格分開

article{
  border : 1px solid : #000;
}

.block{
border-width : 5px;

}

我們要按照上右下左的順序

.block{
border-with: 5px 50px 1px 20px;
}

繼承性

每個diV或其他的標簽都可能繼承上一個的父級的標簽屬性,子級別沒有定義同款屬性,則使用父級屬性

選擇器

a : 標簽選擇器
```
h1{
 font-size : 30px;
}
```

b : 類選擇器

.red{

color : #F00;
}

組合

h1.red{
color : #F00;
}

c : id 選擇器

#label {
font-size : 30px;
}

d : 附加選擇器

經(jīng)過連接時候背景為紅色

a : hover{
background : #FF0;
}

使得已經(jīng)訪問過的鏈接文字顯示為紅色

a : visited{
color : #FF0;
}

常用屬性

a : 文字顏色

h1{
 color : #F00;
}

b : 文本縮進

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
}

浮動

h1,p{
float : left
}

相對定位 relative

默認情況下區(qū)塊元素采用 relative 的定位方式

絕對定位 absolute

盒子模型
a : 內(nèi)間距 padding 外間距 margin
b : box - sizing 屬性
當我們設(shè)置 box - sizing屬性值為border-box時候則設(shè)置的寬高包含內(nèi)間距和外間距
當我們設(shè)置的屬性值為 content-box時候則設(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;
       
      /*用比例來寫*/
      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)先級
id 選擇器 優(yōu)先于 類選擇器 優(yōu)先于 標簽選擇器

四 : JS基礎(chǔ)

非常簡單,簡單介紹一下語法

a : 創(chuàng)建變量

var  i = 3;

b : 運算符

console.log(1+1);
console.log(2*3);
console.log("1"+2) ; //12
console.log(1 > 2) ; //false
console.log(1 === 2) ; //false 全等運算符 要求數(shù)值和類型都相同才返回true

c : 條件語句

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)語句

for( var i = o; i < 4; i++ ){
console.log(i);
}

e : 數(shù)組

var arr = new Array(); 
arr = ["a","b","c"];

在末尾插入元素
arr.push("d");

//在開頭插入元素
arr.unshift("e");

//刪除開頭數(shù)組
arr.shift();

//刪除最后一個元素
arr.pop();

//刪除某個位置函數(shù)

arr.splice(1,1);
從第一個數(shù)組元素之后開始刪除一個數(shù)組元素

//插入元素到某個位置
arr.splice(1,0,"b");//在第一個元素后面插入元素 `b`

//將兩個數(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ù)類型可以為不同
var arr = ["a" , 123, false];

//存儲對象

var arr = [{name : "A" ,age:25},
                    {name : "B",age:26   }];

f : 日期和時間

//包含時分秒,年月日,時區(qū)
var now = new Date();
console.log(now);

//只要時分秒,年月日
console.log(now.toDateString());

//獲得部分信息,獲得小時信息
console.log(now.getHours());

//獲得 月份 0-11 0代表 一月份
console.log(now.getMonth());

//獲得天數(shù) 星期日輸出 0
console.log(now.getDay);

//獲取世界時間
console.log(now.getUICHours);


//參數(shù)創(chuàng)建時間
var date = new Date(2017,7,19,20,10);

//對日期進行修改
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);


//賦值表達式定義函數(shù) 感覺像是OC 里的block

var testID = function(id){
console.log(id);
}
testID(111);

對象

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>>

鼠標滑過button 上方時候輸出"TZzzz"

function domove(){
               console.log("TZzzz");

           
           };
           submit.onmouseover = domove;

頁面加載完畢輸出 TianTianbaby

 function loadOver(){
                   
       console.log("TianTianbaby");

       }
       this.onload = loadOver;

this 相當于 OC 中的self

拖動效果

<body>

     <div id="logo"></div>
     <div id="box"></div>
     
     
     <script type="text/javascript">
     
     var logo = document.getElementById("logo");
     logo.draggable = true;
     
     /*去除事件的默認行為*/
     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é)

為了能得到更唯美的畫面,為了更好能實現(xiàn)更好看的構(gòu)想,那么請牢記語法和css 樣式,那樣才能把我們的idea更完美的展示出來,其實HTML5并不難,把它當成一個藝術(shù)品去完成,會有更好的收獲.

最后編輯于：2018.11.15 20:56:38

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末卿啡，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌趣兄，老刑警劉巖年枕，帶你破解...
沈念sama閱讀 206,126評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異氛堕，居然都是意外死亡铲球，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,254評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門谁尸，熙熙樓的掌柜王于貴愁眉苦臉地迎上來舅踪，“玉大人，你說我怎么就攤上這事良蛮〕槁担” “怎么了？”我有些...
開封第一講書人閱讀 152,445評論 0贊 341
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵决瞳，是天一觀的道長货徙。經(jīng)常有香客問我，道長皮胡，這世上最難降的妖魔是什么痴颊？我笑而不...
開封第一講書人閱讀 55,185評論 1贊 278
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮屡贺，結(jié)果婚禮上蠢棱，老公的妹妹穿的比我還像新娘锌杀。我一直安慰自己，他們只是感情好泻仙，可當我...
茶點故事閱讀 64,178評論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布糕再。她就那樣靜靜地躺著，像睡著了一般玉转。火紅的嫁衣襯著肌膚如雪突想。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 48,970評論 1贊 284
城市分裂傳說
那天究抓，我揣著相機與錄音猾担，去河邊找鬼。笑死刺下，一個胖子當著我的面吹牛垒探，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播怠李，決...
沈念sama閱讀 38,276評論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼蛤克！你這毒婦竟也來了捺癞？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 36,927評論 0贊 259
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤构挤，失蹤者是張志新（化名）和其女友劉穎髓介，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體筋现，經(jīng)...
沈念sama閱讀 43,400評論 1贊 300
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡唐础，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 35,883評論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了矾飞。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片一膨。...
茶點故事閱讀 37,997評論 1贊 333
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖洒沦，靈堂內(nèi)的尸體忽然破棺而出豹绪，到底是詐尸還是另有隱情，我是刑警寧澤申眼，帶...
沈念sama閱讀 33,646評論 4贊 322
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布瞒津，位于F島的核電站，受9級特大地震影響括尸，放射性物質(zhì)發(fā)生泄漏巷蚪。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 39,213評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一濒翻、第九天我趴在偏房一處隱蔽的房頂上張望屁柏。院中可真熱鬧啦膜，春花似錦、人聲如沸前联。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,204評論 0贊 19
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽似嗤。三九已至啸臀，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間烁落，已是汗流浹背乘粒。一陣腳步聲響...
開封第一講書人閱讀 31,423評論 1贊 260
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留伤塌，地道東北人灯萍。一個月前我還...
沈念sama閱讀 45,423評論 2贊 352
代替公主和親
正文我出身青樓，卻偏偏與公主長得像每聪，于是被迫代替她去往敵國和親旦棉。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 42,722評論 2贊 345

HTML5-基礎(chǔ)篇 ( 一 )-HTML5基礎(chǔ)概述

HTML5-基礎(chǔ)篇 ( 一 )-HTML5基礎(chǔ)概述

一 : 科普一分鐘

二 : HTML代碼基礎(chǔ)

區(qū)塊元素

分組內(nèi)容元素

文本元素

表單 `form`

三 : CSS基礎(chǔ)

四 : JS基礎(chǔ)

五 : 總結(jié)

推薦閱讀更多精彩內(nèi)容

HTML5-基礎(chǔ)篇 ( 一 )-HTML5基礎(chǔ)概述

一 : 科普一分鐘

二 : HTML代碼基礎(chǔ)

區(qū)塊元素

分組內(nèi)容元素

文本元素

表單 form

三 : CSS基礎(chǔ)

四 : JS基礎(chǔ)

五 : 總結(jié)

推薦閱讀更多精彩內(nèi)容

表單 `form`