web前端學習（二）html學習筆記部分（11）-- 沒有標號記錄的知識合集

時間  2019-11-30
標籤 web 前端 學習 html 筆記 部分 沒有 標號 記錄 知識 合集 欄目 HTML 简体版
原文   原文鏈接

這一部份內容相對比較簡單，就不按規矩排序了。（主要是網站上也沒有這一部份內容的排序）php

1.  html5的 非主體結構元素css

　　學習筆記（1）裏面記錄過。html

2.  html5表單提交和PHP環境搭建前端

　　1.  php環境搭建html5

　　　　詳見個人下一篇隨筆java

　　2.  html5表單的建立linux

　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
<form action="">
    用戶名：
    <input type="text">
    <br/>
    密碼：
    <input type="password">
    <br/>
    你喜歡的水果有？
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <br/>
    請選擇您的性別：
    男<input type="radio" name="sex">
    女<input type="radio" name="sex">
    <!--radio的name屬性必須是同樣的，不然就會出現兩個選項均可以選了-->
    <!--下拉列表：select標籤-->
    <select name="" id="">
        <option value="">www.jikexueyuan.com</option>
        <option value="">www.google.com</option>
        <option value="">www.iwen.com</option>
    </select>
    <input type="button" value="按鈕">
    <input type="submit" value="submit提交">
</form>
    <!--文本域能夠在表單form以外建立-->
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>

　　3.  html5表單與php交互ios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
<form action="http://localhost:8000/newPHPProject/newfile.php" method="get">
    <!--get提交的時候表單的內容都要寫一遍
    post提交的時候什麼都不寫-->
    用戶名：
    <input type="text" name="name">
    <br/>
    密碼：
    <input type="password" name="password">
    <br/>
    你喜歡的水果有？
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <br/>
    請選擇您的性別：
    男<input type="radio" name="sex">
    女<input type="radio" name="sex">
    <!--radio的name屬性必須是同樣的，不然就會出現兩個選項均可以選了-->
    <!--下拉列表：select標籤-->
    <select name="" id="">
        <option value="">www.jikexueyuan.com</option>
        <option value="">www.google.com</option>
        <option value="">www.iwen.com</option>
    </select>
    <input type="button" value="按鈕">
    <input type="submit" value="submit提交">
</form>
    <!--文本域能夠在表單form以外建立-->
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>

newfile.phpcss3

<?php
echo "hello\n";
echo "用戶名：".$_GET['name']."<br>密碼：".$_GET['password'];
// 點是用來連接字符串的，就這麼蛋疼，有時候不知道一個小點就很難受，畢竟徹底沒有認真學習php知識
// 上面使用的get提交表單的方法就用get，用post方法提交表單的方法就用post
echo $_GET['name'];

 

3.  html5開發前準備web

3.1  html5開發前的準備

　　1.  爲何學習html5？

　　　　自從2010年html5正式推出以來，它馬上收到了世界各大瀏覽器的熱烈歡迎和支持。根據世界上各大IT界知名媒體的評論，新的web時代，html5的時代立刻到來。

　　　　跨平臺運行

　　　　硬件要求低

　　　　flash以外的選擇

　　2.  軟硬件環境

　　　　硬件：雙核、2g內存

　　　　軟件：windows、mac OS X、linux

　　3.  介紹HTML5

　　　　1）什麼是html5？

　　　　　　HTML是用來描述網頁的一種語言

　　　　　　HTML是指超文本標記語言（Hyper Text Markup Language）

　　　　　　HTML是否是編程語言，是一種標記語言

　　　　2）HTML5的新特性：

　　　　　　用於繪畫的canvas標籤

　　　　　　用於媒介回放的video和audio元素

　　　　　　對本地離線存儲的更好支持

　　　　　　新的特殊內容元素

　　　　　　　　如：article、footer、header、nav、section

　　　　　　新的表單控件：

　　　　　　　　如：calendar、date、time、email、url、search

　　　　　　瀏覽器的支持：

　　　　　　　　Safari、Chrome、Firefox以及Opera包括IE9基本支持了HTML5

　　4.  環境搭建

　　　　開發工具

　　　　　　經常使用：WebStorm、notepad++、Eclipse、text sublime、Dreamweaver

　　　　　　推薦：Intellij  IDEA

　　5.  常見問題解決

　　　　尋求問題根源

　　　　查看參考文檔

　　　　參考示例

　　　　常見問題經過搜索引擎搜索

　　　　問題反饋

　　6.  須要掌握的技能

　　　　HTML5　　

　　　　XHTML

　　　　CSS3

　　　　JavaScript

　　　　jQuery：

　　　　　　jQuery-UI

　　　　　　jQuery-Mobile

　　掌握一些經常使用的快捷鍵

4.  html5框架、背景和實體

4.1  框架（框架在html5中已通過時了）

　　框架標籤（frame）：

　　　　框架對於頁面的設計有着很大的做用

　　框架集標籤（<frameset>）:

　　　　框架集標籤訂義如何將窗口分割爲框架

　　　　每個frameset定義一系列行或列

　　　　rows/cols的值規定了每行或每列佔據屏幕的面積

　　經常使用標籤：

　　　　noresize：固定框架大小

　　　　cols：列

　　　　rows：行

　　內聯框架（如今很重要的框架，詳細講解）：

　

frameset示例：

frama.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body bgcolor="#efca65">

</body>
</html>

framb.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body bgcolor="#333333">

</body>
</html>

framc.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body bgcolor="aaaaaa">

</body>
</html>

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<frameset rows="10%,10%,10%">
<!-- 寫百分比和不夠100不影響最終的佈局，由於都是按比例調的 -->
    <frame src="framea.html"></frame>
    <frame src="frameb.html"></frame>
    <frame src="framec.html"></frame>
</frameset>
</html>

 

最重要的內聯框架iframe

順便講解target的四種的區別（_self，_blank，_parent，_top）

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<a href="http://www.jikexueyuan.com" target=""></a>
<body>
<iframe src="framec.html" frameborder="0" width="800px" height="800px"></iframe>
</body>
</html>

framea.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body bgcolor="#efca65">
framea
<br/>
<a href="www.baidu.com" target="_top">百度</a>
</body>
</html>

frameb.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body bgcolor="#333333">
frameb
<br/>
<iframe src="framea.html" width="400px" height="400px"></iframe>
</body>
</html>

framec.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body bgcolor="aaaaaa">
framec
<br/>
<iframe src="frameb.html" width="600px" height="600px"></iframe>
</body>
</html>

　　

4.2  背景、顏色

背景標籤：

　　Background

背景顏色：

　　Bgcolor

示例：

<body background="cat.jpg">
<!--這裏的貓圖片是重複的-->
</body>


<body bgcolor="#111111">
<!--這裏的貓圖片是重複的-->
</body>

 

4.3  實體

　　HTML中預留字符必須替換成字符實體

　　如：<(&lt;)、>(&gt;)、&、

　　直接在百度中搜索html實體就能夠搜到。

5.  html5列表、塊和佈局

5.1  html5列表的使用

列表標籤

<ol>　　有序列表

<ul>　　無序列表

<li>　　列表項

<dl>　　列表

<dd>　　描述

 

　　1.  無序列表

　　　　使用標籤：<ul> <li>

　　　　type屬性選擇：disc（實體圓）、circle（空心圓）、square（方塊）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>list</title>
</head>
<body>
    <ul type="square">
        <li>ios</li>
        <li>java</li>
        <li>前端</li>
        <li>php</li>
    </ul>
    <!--默認type是實心圓-->
</body>
</html>

 

　　2.  有序列表

　　　　使用標籤：<ol><li>

　　　　屬性：A、a、l、i、start

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>list</title>
</head>
<body>
    <ol type="a" start="3">
        <!--start裏面必須是數字，不關type是什麼類型的-->
        <li>ios</li>
        <li>java</li>
        <li>前端</li>
        <li>php</li>
    </ol>
    <!--默認type是數字，start是開始的第一個字符-->
</body>
</html>

 

　　3.  嵌套列表

　　　　<ul>、<ol>、<li>

顧名思義就是列表嵌套

　　4.  自定義列表

　　　　<dl>、<dt>、<dd>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>list</title>
</head>
<body>
    <dl>
        <dt>helloworld</dt>
            <dd>哈哈哈哈哈哈哈哈</dd>
        <dt>helloworld</dt>
            <dd>哈哈哈哈哈哈哈哈</dd>
    </dl>
</body>
</html>

 

5.2  html5塊元素標籤的使用

　　html塊元素

　　　　塊元素在顯示時，一般會以新行開始

　　　　如：<h1>、<p>、<ul>

　　html內聯元素

　　　　內聯元素一般不會以新行開始

　　　　如：<b>（加劇元素）、<a>、<img>

　　html<div>元素

　　　　<div>元素也被稱爲塊元素，其主要是組合HTML元素的容器

　　html<span>元素

　　　　<span>元素是內聯元素，可做爲文本的容器

注：css中的color元素改的是內部全部沒有樣式的文字的顏色。

5.3  html5佈局的使用

　　1.  使用<div>元素佈局

　　2.  使用<table>元素佈局

div佈局示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>unusual_title</title>
</head>
<style type="text/css">
    body{
        margin:0px;
    }
    div#container{
        width:100%;
        height:950px;
        background-color:darkgray;
    }
    div#heading{
        width:100%;
        height:10%;
        background-color: aqua;
    }
    /*寫div通常是很麻煩的，通常都是會刪掉的*/
    #content_menu{
        width:100%;
        height:10%;
        background-color: aquamarine;
    }
    #content_body{
        width:70%;
        height:80%;
        background-color: blueviolet;
        float:left;
    }
    #footing{
        width:100%;
        height:10%;
        /*百分比指的都是佔父元素的百分比；*/
        background-color: black;
        clear:both;
        /*clear：both功能是清除左右兩側的浮動元素，不然沒法顯示這一層的內容*/
    }
</style>
<body>
    <div id="container">
        <div id="heading">heading</div>
        <div id="content_menu">content_menu</div>
        <div id="content_body">content_body</div>
        <div id="footing">footing</div>
    </div>
</body>
</html>

table佈局示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body marginheight="20px" marginwidth="30px" bgcolor="#8a2be2">
<!--marginheight和marginwidth指的是body邊界的上下margin和左右兩邊的margin-->
<table width="100%" height="950px" style="background-color: darkgray">
    <tr>
        <td colspan="3" width="100%" height="10%" style="background-color: aqua">這是頭部</td>
    </tr>
    <tr>
        <td width="20%" height="80%" style="background-color: blue">
            <ul>
                <li>li1</li>
                <li>li2</li>
                <li>li3</li>
            </ul>
        </td>
        <td width="60%" height="80%" style="background-color: blueviolet">內容主體</td>
        <td width="20%" height="80%" style="background-color: blue">右菜單</td>
    </tr>
    <tr>
        <td width="100px" height="10%" colspan="3" style="darkcyan">這是底部</td>
    </tr>
</table>
</body>
</html>

 

6.html5特性簡介

　　什麼是html　　

　　　　html是用來描述網頁的一種語言

　　　　html指超文本標記語言　　

　　　　html不是編程語言，是一種標記語言

　　2012年出現的html5，2013年出現的xhtml

　　學好html5須要學好如下知識

　　　　html、xhtml、css、css三、JavaScript、JQuery、HTML5

　　HTML新特性

　　　　1.用戶繪畫的canvas標籤

　　　　2.用於媒介回訪 video和audio元素

　　　　3，對本地離線儲存的更好支持

　　　　4.新的特殊內容元素

　　　　　　如：article、footer、header、nav、section　　

　　　　5.新的表單控件

　　　　　　如：calendar、date、time、email、url、search

　　　　6.瀏覽器的支持

　　　　　　Safari、Chrome、Firefox以及Opera包括IE9基本支持了HTML5

 

 集成開發環境搭建

　　intellij idea軟件能夠編寫web前端程序；

 　　下載時選擇下載收費版，收費版功能更加齊全。

7.html5樣式、連接和表格

7.1html5樣式

　　1.標籤

　　　　<style> :樣式定義

　　　　<link>:資源定義

　　2.屬性

　　　　rel="stylesheet" : 外部樣式表

　　　　type="text/css" :引入文檔的類型

　　　　margin-left：外邊距

　　3.三種樣式表插入法

　　　　外部樣式表：

　　　　　　<link ref="stylesheet"  href="" type="text/css">

　　　　內部樣式表：

　　　　　　<style>

　　　　　　</style>

　　　　內聯樣式表：

　　　　　　<p sytle="color:red">

7.2html連接

　　1.連接數據

　　　　文本數據

　　　　圖片連接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="http://www.baidu.com">文字連接</a>
<a href="http://www.baidu.com">
    <img src="html.png" alt="圖片加載失敗(圖片連接)">
</a>
</body>
</html>

 

　　2.屬性：

　　　　href屬性：指向另外一個文檔的連接

　　　　name屬性：建立文檔內的連接

　　3.img標籤屬性

　　　　alt：替換文本屬性

　　　　width：寬

　　　　height：高

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="http://www.baidu.com">文字連接</a>
<a href="http://www.baidu.com">
    <img src="html.png" alt="圖片加載失敗" width="20px" height="30px">
</a>
<a name="tips">hello</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="#tips">跳轉到hello</a>
<!--意思就是跳轉到name爲tips的文檔內的連接-->
</body>
</html>

7.3 html表格

<table> 定義表格
<caption> 定義表格標題
<th> 定義表格的表頭
<tr> 定義表格的行
<td> 定義表格的單元
<thead> 定義表格的頁眉
<tbody> 定義表格的主體
<tfoot> 定義表格的頁腳
<col> 定義表格的列屬性

　　1.沒有邊框的表格

　　　　

<table border="0px">

 

　　2.表格中的頭　

<table border="1px">
        <tr>
            <th>表頭1</th>
            <th>表頭2</th>
            <th>表頭3</th>
        </tr>
        <tr>
            <td>單元格222</td>
            <td>單元格222</td>
            <td>單元格222</td>
        </tr>
        <tr>
            <td>單元格222</td>
            <td>單元格222</td>
            <td>單元格22</td>
        </tr>
    </table>

 

　　3.空單元格

　　4.帶有標題的表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>表格頭種類1</p>
    <table border="1px">
        <caption>表格頭種類2</caption>
        <tr>
            <th>表頭1</th>
            <th>表頭2</th>
            <th>表頭3</th>
        </tr>
        <tr>
            <td>單元格222</td>
            <td>單元格222</td>
            <td>單元格222</td>
        </tr>
        <tr>
            <td>單元格222</td>
            <td>單元格222</td>
            <td>單元格22</td>
        </tr>
    </table>
</body>
</html>

 

　　5.表格內的標籤　　

　　　　顧名思義

　　6.單元格邊距

　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>表格頭種類1</p>
    <table border="5px">
        <tr>
            <th>表頭1</th>
            <th>表頭2</th>
            <th>表頭3</th>
        </tr>
        <tr>
            <td>單元格222</td>
            <td>單元格222</td>
            <td>單元格222</td>
        </tr>
        <tr>
            <td>單元格222</td>
            <td>單元格222</td>
            <td>單元格22</td>
        </tr>
    </table>
    <br/>
    <br/>
    <table border="5px" cellpadding="5px">
        <!--cellpadding調細胞單元格的內邊距（padding）-->
        <tr>
            <th>表頭1</th>
            <th>表頭2</th>
            <th>表頭3</th>
        </tr>
        <tr>
            <td>單元格222</td>
            <td>單元格222</td>
            <td>單元格222</td>
        </tr>
        <tr>
            <td>單元格222</td>
            <td>單元格222</td>
            <td>單元格22</td>
        </tr>
    </table>
</body>
</html>

 

　　7.單元格間距

　　　　table的border屬性設置的是內部小單元格的邊距，要經過設置單元格的邊距來消除多重border

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>表格頭種類1</p>
    <table border="5px">
        <tr>
            <th>表頭1</th>
            <th>表頭2</th>
            <th>表頭3</th>
        </tr>
        <tr>
            <td>單元格222</td>
            <td>單元格222</td>
            <td>單元格222</td>
        </tr>
        <tr>
            <td>單元格222</td>
            <td>單元格222</td>
            <td>單元格22</td>
        </tr>
    </table>
    <br/>
    <br/>
    <table border="5px" cellspacing="5px">
        <!--cellpadding調細胞單元格之間的外邊距（padding）-->
        <tr>
            <th>表頭1</th>
            <th>表頭2</th>
            <th>表頭3</th>
        </tr>
        <tr>
            <td>單元格222</td>
            <td>單元格222</td>
            <td>單元格222</td>
        </tr>
        <tr>
            <td>單元格222</td>
            <td>單元格222</td>
            <td>單元格22</td>
        </tr>
    </table>
</body>
</html>

 

　　8.表格內的背景顏色和圖像

　　9.單元格內容排列

　　10.跨行和跨列單元格

8.html元素、屬t性和格式化

 　　元素指的是從開始標籤到結束標籤的全部代碼

開始標籤 元素內容 結束標籤
<p> this is my web page </p>
<br/>(也叫空標籤)    

　　標籤以鍵/值對的形式出現

　　經常使用標籤屬性：<h1>:align 對齊方式

　　通用屬性：

　　　　title：規定元素的額外信息

　　格式化：

<b> 定義粗體文本
<big> 定義大號字
<em> 定義着重文字
<i> 定義斜體字
<small> 定義小號字
<strong> 定義加劇語氣
<sub> 定義下標
<sup> 定義上標
<ins> 定義插入字
<del> 定義刪除字

 

9.XHTML的使用規範

 　　1.什麼事XHTML

　　　　XHTML指的是可擴展超文本標記語言

　　　　XHTML與HTML4.01幾乎是相同的

　　　　XHTML是更嚴格更純淨的HTML版本

　　　　XHTML是以XML應用的方式定義的HTML　

　　　　XHTML的到全部主流瀏覽器的支持

　　2.爲何使用XHTML　　

　　　　爲了代碼的完整性和良好性

　　3.文檔聲明：

　　　　DTD：規定了使用標記語言的網頁語法

　　4.三種XHTML文檔類型

　　　　STRICT（嚴格類型）

　　　　TRANSITIONAL（過渡類型）

　　　　FRAMESET（框架類型）

　　5.XHTML  1.0  Strict：

　　　　<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 　　　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">

　　　　該DTD包含全部HTML元素和屬性，但不包括展現性和棄用的元素（好比font），不予許框架集（Framesets）。

　　　　XHTML須要寫標準的語法

　　　　XHTML元素語法：

　　　　　　XHTML元素必須正確嵌套

　　　　　　XHTML元素必須始終關閉

　　　　　　XHTML元素必須小寫

　　　　　　XHTML文檔必須有一個根元素

　　　　XHTML屬性語法規則

　　　　　　XHTML屬性必須使用小寫

　　　　　　XHTML屬性值必須用引號包圍

　　　　　　XHTML屬性最小化（必須使用小寫字母）也是禁止的

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程