網頁設計HTML零基礎入門

、Html概述

Html是Hyper Text Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容文件渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另一個網頁。

二、Html標簽語法

Html中標簽分為：成對標簽和自閉合標簽【空標簽】

1、成對標簽

成對出現，有開始標簽必須有結束標簽，內容包裹在兩個標簽中，而且開始標簽名和結束標簽名一致,并且結束標簽必須以斜杠/開頭

語法：

<font>內容</font>

2、自閉合標簽

只有一個標簽，用斜杠結束，斜杠也可以省略

語法：

<br/>

注意事項：

成對標簽中，結束標簽必須以斜杠開頭
成對標簽與成對標簽可以嵌套不能交叉
標簽名不區分大小寫，但是我們都必須小寫

三、Html基本架構

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    
</body>
</html>

1、！DOCTYPE

!DOCTYPE html是文檔聲明，定義文檔類型為html，并且告訴不同的瀏覽器用標準方式進行解析html語言，如果不寫的話，會產生怪異模式，所謂怪異模式，就是瀏覽器會用自己的方式進行解析，不同的瀏覽器有各自的解析方式，從而會出現無效果、不兼容等問題。
注意，html中有兩種聲明類型，一種叫做xhtml，即html，另一種叫做html5，html5是xhtml的升級版，所以我們建議使用html5的聲明方式
xhtml聲明方式：
<htmlxmlns="http://www.w3.org/1999/xhtml">
html5聲明方式：
<!DOCTYPE html>

2、html

html是html文檔的整體，也就是表示一個網頁。
html中的lang="en"是定義該文件語言是英文

3、head

head是html的第一層子元素【子標簽】，負責對網頁進行一些設置以及定義標題，設置包括定義網頁的編碼格式，外鏈css樣式文件和JavaScript文件等。設置的內容不會顯示在網頁上，標題的內容會顯示在標題欄中。即title標簽。

4、meta

meta是html語言head標簽中的一個輔助性標簽，該標簽不包含任何內容，但是該標簽的屬性定義了與文檔相關聯的名稱，比如：編碼

<meta charset="utf-8"></meta>

5、body

body也是html的第一層子元素，我們頁面中顯示的所有內容全部都是編寫在該標簽體中。

四、Html文檔規范

html制定了文檔的編寫規范，必須遵守。
所有的標簽必須小寫
所有的屬性必須用雙引號括起來

五、Html注釋

html文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的內容不會顯示在頁面上。
注釋的語法：


六、html基本屬性

注：屬性是標簽的輔助作用。

屬性描述 bgcolor 設置網頁的背景顏色 background 設置網頁的背景圖片

1.bgcolor

設置網頁的背景顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html的屬性</title>
</head>
<body bacolor="pink">
    
</body>
</html>

2.路徑

我們在開發網頁時，需要經常的插入圖片、視頻、文件等一些操作，但是我們需要指定文件所在的位置，這個位置就是所謂的路徑

路徑分為：

相對路徑指目標相對于當前文件的路徑，網頁結構設計中多采用這種方式來表示目標的路徑。相對路徑有多種表示方法，其表示的意義不盡相同。表示方法如下： ./ ：代表文件所在的目錄（可以省略不寫）../ ：代表文件所在的父級目錄../../ ：代表文件所在的父級目錄的父級目錄/ ：代表文件所在的根目錄【/ ：可以理解為目標文件的絕對路徑】
絕對路徑指目標文件的完整路徑，從盤符開始。

3.background

設置網頁的背景圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html的屬性</title>
</head>
<body background="../images/10.jpg">
    
</body>
</html>

注意事項：
bgcolor和background不能同時使用
background不能指定絕對路徑

七、Html標簽

1.網頁的組成

網頁的組成：文字、圖片、視頻、超鏈接、列表、表格、表單等組成。

2、文本段落標簽

標簽描述 hn 設置文字標題【n：取值范圍 1~6】 center 居中對齊 hr 水平線屬性（width：寬度 color：顏色 size：粗細） br 換行 p 段落

3、文本控制標簽

標簽描述 font 設置字體，需要借助屬性設置

屬性描述 color 設置字體顏色 size 設置字體大小，不需要帶單位，取值范圍：1~7【瀏覽器默認值：3】 face 設置字體風格

<font size="2" color="red" face="黑體"></font>

4、文本格式化標簽

標簽描述 b 定義粗體文本 em 定義著重文字 i 定義斜體文字 small 定義小號字 strong 定義加重語氣 sub 定義下標字 sup 定義上標字 ins 定義插入字 del 定義刪除字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html文本格式化標簽</title>
</head>
<body>

    <b>粗體文本</b>
    <i>傾斜文本</i>
    <em>著重文本</em>
    <small>小號字</small>
    <strong>加重語氣</strong>
    <sub>上標</sub>
    <sup>下標</sup>
    <ins>插入字</ins>
    <del>刪除字</del>
    
</body>
</html>

5、圖片標簽

在Html中，圖像由
標簽定義。
是空標簽，意思是說，它只包含屬性。
要在頁面上顯示圖像，你需要使用源屬性（src）。src指"source"。源屬性的值是圖像的URL地址。

標簽描述 img 圖片標簽

屬性描述 src 指定圖片的地址 width 設置圖片的寬度 height 設置圖片的高度 alt 設置圖片的預備文本

注意事項：不建議設置圖片大小，容易失真

6、audio

在Html中，聲音由標簽定義。

標簽描述 audio 聲音標簽

屬性描述 src 指定聲音地址

<audio src="nice.mp3">對不起，您的瀏覽器不支持</audio>

7、video

在Html中，視頻由video標簽定義

標簽描述 video 視頻標簽

屬性描述 src 指定視頻地址

<video src="美女.mp4">對不起，您的瀏覽器不支持</video>

8、超鏈接

a標簽定義超鏈接，用于從一個頁面鏈接到另一個頁面。
a標簽最重要的屬性是href，它指定鏈接的目標。
在所有瀏覽器中，鏈接的默認外觀如下：
未被訪問的鏈接帶有下劃線而且是藍色的
已被訪問的鏈接帶有下劃線而且是紫色的
活動鏈接帶有下劃線而且是紅色的

語法：

<a href="鏈接目標">點擊內容</a>

屬性描述 href 指定鏈接目標 name 指定錨的名稱 download 指定下載鏈接 target 指定跳轉方式屬性值描述 _blank 新窗口打開【常用】 _parent 在父窗口中打開鏈接【了解】 _self 默認，在當前窗口打開【了解】 _top 在當前窗體打開鏈接，并替換當前的整個窗體【了解】 framename 到 iframe 在講【常用】

超鏈接分類：

內部鏈接鏈接目標：本地頁面 <a href="demo.html">點擊內容</a>
外部鏈接鏈接目標：外部頁面 <a href="http://www.baidu.com">點擊內容</a>
多媒體鏈接鏈接目標：圖片、視頻等 <a href="images/美女.jpg">點擊內容</a>
電子郵件鏈接鏈接目標：電子郵件【系統自帶的電子郵件】 <a href="mailto:12345@qq.com">點擊內容</a>
錨鏈接鏈接目標：錨點 1.建立錨點
<a name="錨點名"></a>

2.跳轉
<a href="#錨點名">點擊內容</a>

9、列表

列表的使用與word等軟件的列表概念相似，只不過是應用在網頁展示中。

1.有序列表

有序列表是指有數字編號或字母的列表項，可以使用css定義更多樣式。

<!-- 有序列表 -->
    <ol type="a">
        <li>新聞一</li>
        <li>新聞二</li>
        <li>新聞三</li>
    </ol>

屬性描述 type 設置符號類型值：1 a A I i 默認數字 start 從第幾個開始【用于ol標簽中】 value 從第幾個開始【用于li標簽中】

<!-- 有序列表 -->
    <ol type="a" start="4">
        <li>新聞一</li>
        <li type="1" value="1">新聞二</li>
        <li>新聞三</li>
    </ol>

2、無序列表

無序列表是指沒有數字編號或字母的列表項，可以使用css定義更多樣式。

<!-- 無序列表 -->
<ul>
    <li>童裝</li>
    <li>男裝</li>
    <li>女裝</li>
</ul>

屬性描述 type 用于設置符號類型，默認：實心圓值：空心圓、正方形【用于ul、li】

<!-- 無序列表 -->
<ul type="square">
        <li>童裝</li>
        <li type="circle">男裝</li>
        <li>女裝</li>
    </ul>

3、描述列表

描述列表指每個列表項有單獨的標題。

<!-- 描述列表 -->
    <dl>
        <dt>開源產品</dt>
        <dd>Java封裝庫</dd>
        <dd>Web組件庫</dd>
        
        <dt>網站導航</dt>
        <dd>mrliujava.com</dd>
        <dd>mrliuweb.com</dd>
    </dl>

10、表格

表格在網頁開發中使用頻率非常高，尤其是數據展示的時候。

10.1 基本使用

標簽描述 table 代表表格標簽 caption 表格標題 thead 表頭部分 tbody 表格主體部分 tfoot 表格尾部

屬性描述 border 表格邊框 cellspacing 單元格與單元格間距 width 寬度 height 高度 bgcolor 設置背景顏色 background 設置背景圖片 align 對齊方式

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>員工薪資統計表</caption>
        <thead>
            <tr>
                <th>序號</th>
                <th>姓名</th>
                <th>性別</th>
                <th>職位</th>
                <th>薪資</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td>JavaEe工程師</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>Web前端工程師</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td>傻蛋</td>
                <td>妖</td>
                <td>測試工程師</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>當前頁：1 頁</td>
                <td>上一頁</td>
                <td>下一頁</td>
                <td>尾頁</td>
                <td>共 3 頁</td>
            </tr>
        </tfoot>
    </table>

10.2 單元格合并

屬性說明 rowspan 行合并 colspan 列合并

下面是行合并：

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>員工薪資統計表</caption>
        <thead>
            <tr>
                <th>序號</th>
                <th>姓名</th>
                <th>性別</th>
                <th>職位</th>
                <th>薪資</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td rowspan="2">JavaEe工程師</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td>傻蛋</td>
                <td>妖</td>
                <td>測試工程師</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>當前頁：1 頁</td>
                <td>上一頁</td>
                <td>下一頁</td>
                <td>尾頁</td>
                <td>共 3 頁</td>
            </tr>
        </tfoot>
    </table>

下面是列合并：

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>員工薪資統計表</caption>
        <thead>
            <tr>
                <th>序號</th>
                <th>姓名</th>
                <th>性別</th>
                <th>職位</th>
                <th>薪資</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td>JavaEe工程師</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>Web前端工程師</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td colspan="2">傻蛋</td>
                <td>測試工程師</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>當前頁：1 頁</td>
                <td>上一頁</td>
                <td>下一頁</td>
                <td>尾頁</td>
                <td>共 3 頁</td>
            </tr>
        </tfoot>
    </table>

11、表單

表單是一個包含表單元素的區域。
表單元素是允許用戶在表單中輸入內容，比如：文本域(textarea)、下拉列表(select)、單選框(radio)、復選框(checkbox)等等。

11.1 基本使用

表單需要使用表單標簽來設置：

<form>
input元素
</form>

11.2 GET&POST

屬性說明 action 后臺地址 method 提交方式GET或POST

GET和POST區別：

1.GET

數據會顯示在地址欄中，數據不安全
數據大小有限制
數據通過請求頭傳遞

2.POST

數據不會顯示在地址欄中，數據安全
數據對大小無限制
數據通過實體內容傳遞

<form action="后端接口" method="POST">
        <input type="text">
        <input type="password">
</form>

11.3 LABEL

使用label用于描述表單標題，當點擊標題后文本框會獲得焦點，需要保證使用的ID在頁面中是唯一的。

<form action="后端接口" method="POST">
        <label for="username">用戶名</label>
        <input type="text" id="username">

        <label for="password">密碼</label>
        <input type="password" id="password">
</form>

也可以將文本框放在label標簽內部，這樣就不需要設置id與for屬性了。

11.4 INPUT

文本框用于輸入單行文本使用，下面是常用屬性與示例。

屬性說明 type 表單類型,默認為text name 后端接收字段名 required 必須輸入 placeholder 提示文本內容 value 默認指 maxlength 允許最大輸入字符數 size 表單長度,一般用css來控制 disabled 禁用,不可提交后端 readonly 只讀,可提交后端 accept 設置選中類型比如:.jpg capture 使用麥克風\視頻或攝像頭哪種方式獲取手機上傳文件,支持的值有microphone , video , camera

11.4.1 基本示例

<form action="后端接口" method="POST">
        <label for="username">用戶名</label>
        <input type="text" name="username" id="username" placeholder="請輸入用戶名" maxlength="5" size="50" required>
</form>

11.4.2 調用攝像頭

當input類型為file時手機會讓用戶選擇圖片或者拍照,如果想直接調取攝像頭使用以下代碼.

<form action="后端接口" method="POST">
        <label for="file">上傳文件</label>
        <input type="file" name="file" id="file" accept="*.jpg" capture="camera">
</form>

11.4.3 其他類型

通過設置表單的type字段可以指定不同的輸入內容.

類型說明 email 輸入內容為郵箱 url 輸入內容為URL地址 password 輸入內容為密碼項 tel 電話號,移動端會調出數字鍵盤 search 搜索框 hidden 隱藏表單 submit 提交表單 reset 重置表單 button 自定義按鈕

11.4.4 HIDDEN

隱藏表單用于提交后臺數據,但在前臺內容不顯示所以在其上做用樣式定義也沒有意義.

<input type="hidden" name="id" value="1">

11.4.5 SUBMIT

創建提交按鈕可以將表單數據提交到后臺,有多種方式可以提交數據,比如:AJAX,或者Html的表單按鈕.

a.使用input構建提交按鈕,如果設置了name值,那么按鈕數據也會提交到后臺,如果有多個表單項可以通過這些進行判斷是哪個表單提交的.

<input type="submit" name="submit" value="提交表單">

b.使用button也可以提交,設置type屬性為submit或不設置都可以提交表單.

<button type="submit">提交表單</button>

11.4.6 禁用表單

通過為表單設置disabled或readonly都可以禁止表單,單readonly表單的數據可以提交到后端

<input type="text" value="數據" readonly>

11.4.7 PATTERN

表單可以通過設置pattern屬性指定正則驗證.

屬性說明 pattern 正則表達式驗證規則 oninvalid 輸入錯誤時觸發的事件

<form action="">
        <label for="username">用戶名</label>
        <input type="text" name="username" id="username" pattern="[a-z]{5,20}" oninvalid="validate('請輸入5~20位字母的用戶名')">
        <button>提交表單</button>
    </form>

    <script>
        function validate(message){
            alert(message);
        }
    </script>

11.4.8 TEXTAREA

文本域指可以輸入多行文本的表單,當然更復雜的情況可以使用編輯器如ueditor , ckeditor等.

屬性說明 cols 列字符數(一般使用css控制更好) rows 行數(一般使用css控制更好)

<textarea cols="30" rows="3">請踩踩我......</textarea>

11.4.9 SELECT

下拉列表項可用于多個值中的選擇.

屬性說明 multiple 支持多選 size 列表框高度 optgroup 選項組 selected 選中狀態 option 選項值

<form action="">
        <select multiple size="10">
            <option value="">選擇課程</option>
            <optgroup label="后端">
                <option value="">JAVA</option>
                <option value="">PHP</option>
                <option value="">LINUX</option>
            </optgroup>

            <optgroup label="前端">
                <option value="">HTML</option>
                <option value="">CSS</option>
                <option value="">JAVASCRIPT</option>
            </optgroup>
        </select>
    </form>

11.4.10 RADIO

單選框指只能選擇一個選項的表單,如性別的選擇:男 , 女 , 保密只能選擇一個.

屬性說明 checked 選中狀態

<form action="">
        <input type="radio" name="" id="boy" checked>
        <label for="boy">男</label>

        <input type="radio" name="" id="girl">
        <label for="girl">女</label>
    </form>

11.4.11 CHECKBOX

復選框指允許選擇多個值的表單

屬性說明 checked 選中狀態

<form action="">
        <input type="checkbox" name="JAVA" id="java">
        <label for="java">JAVA</label>

        <input type="checkbox" name="WEB" id="web">
        <label for="web">WEB</label>
    </form>

11.4.12 FILE

文件上傳有很多方式,可以使用插件或者JS拖放上傳處理.Html本身也提供了默認的上傳功能,只是上傳效果并不是很美觀.

屬性說明 multiple 支持多選 accept 允許上傳類型.png , .psd 或者 image/png , image/gif

<form action="" enctype="multipart/form-data">
        <input type="file">
        <input type="submit" value="上傳">
    </form>

11.4.13 日期時間

屬性說明 min 最小時間 max 最大時間 step 間隔: date缺省是1天 week缺省是1周 month缺省是1月

a.日期選擇

<h1>日期選擇</h1>
    <form action="">
        <input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime">
    </form>

b.周選擇

<h1>周選擇</h1>
    <input type="week" name="" id="">

c.月份選擇

<h1>月選擇</h1>
    <input type="month" name="" id="">

d.日期與時間

<h1>日期與時間</h1>
    <input type="datetime-local" name="" id="">

11.4.14 DATALIST

input表單的輸入值選項列表

<form action="">
        <label for="username">用戶名</label>
        <input type="text" name="" id="usernmae" list="less">
        <datalist id="less">
            <option value="JAVA">后臺管理語言</option>
            <option value="CSS">美化網站頁面</option>
            <option value="MYSQL">掌握數據庫使用</option>
        </datalist>
    </form>

12、框架集

frameset元素可定義一個框架集。它被用來組織多個窗口（框架），每個框架存有獨立的文檔，在其最簡單的應用中，frameset元素僅僅會規定在框架集中存在多少列或多少行，您必須使用cols或rows屬性。

注意事項：由于是分割原網頁，所以我們不能在body中進行編寫，在head中進行分割。

標簽說明 frameset 框架集 frame 框架

屬性說明 cols 定義框架集中列的數目和尺寸 rows 定義框架集中行的數目和尺寸 frame border 去除框架邊框 scrolling 去除滾動條

12.1 垂直框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html垂直框架</title>

    <frameset cols="50%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frame src="http://www.taobao.com" frameborder="0"  scrolling="no"></frame>
    </frameset>
</head>
<body>
    
</body>
</html>

12.2 水平框架

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Html水平框架</title>
		<frameset rows="50%,*" >
				<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
		</frameset>
	</head>
<body>
</body>
</html>

12.3 混合框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html混合框架</title>

    <frameset rows="20%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frameset cols="20%,*">
            <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
            <frame src="https://www.huya.com/" frameborder="0" scrolling="no"></frame>
        </frameset>
        
    </frameset>
</head>
<body>
    
</body>
</html>

12.4 導航框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html美女</title>
</head>
<body>
    
    <img src="../images/10.jpg" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html野獸</title>
</head>
<body>
    

    <img src="../images/timg.gif" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html動物</title>
</head>
<body>
    
    <img src="../images/4.jpg" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html鏈接</title>
</head>
<body>

    <a href="Html美女.html" target="view">美女圖片</a>
    <a href="Html野獸.html" target="view">野獸圖片</a>
    <a href="Html動物.html" target="view">動物圖片</a>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html垂直框架</title>

    <frameset rows="20%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frameset cols="20%,*">
            <frame src="Html鏈接.html" frameborder="0" scrolling="no"></frame>
            <frame src="https://www.huya.com/" frameborder="0" scrolling="no" name="view"></frame>
        </frameset>
        
    </frameset>
</head>
<body>
    
</body>
</html>

13、內聯框架

iframe元素會創建包含另外一個文檔的內聯框架。

屬性說明 align 對齊方式，后期采用css的方式進行設置 width 設置寬度 height 設置高度 src 設置iframe中顯示的文檔的URL name iframe的名稱 scrolling 是否顯示滾動條 frameborder 設置iframe的邊框

完小編前段時間發表的HTML學習之后，相信大家對網站建設與網頁編寫有了一定的初步了解，今天我們來開始介紹層疊樣式表css，css是為HTML頁面的排版美化而設計的，可以實現html無法設計的效果，一般是用來配合html來使用的，一般模式：選擇器{屬性:值}即selector{property:value}例如：body{corlor:red;font-size：12px;}，他有三種引入方式：行內樣式、內部樣式表、外部樣式表。

css三種嵌入方式：

一、行內樣式

使用style屬性引入CSS樣式。

示例：

<h1 style="color:red;">style屬性的應用</h1>

<p style="font-size:14px;color:green;">直接在HTML標簽中設置的樣式</p>

實際在寫頁面時不提倡使用，在測試的時候可以使用。

例如：

<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>行內樣式</title> </head> <body>  <h1 style="color:red;">Leaping Above The Water</h1> <p style="color:red;font-size:30px;">我是p標簽</p> </body> </html>

二、內部樣式表

在style標簽中書寫CSS代碼。style標簽寫在head標簽中。

示例：

<head>

h3{

color:red;

}

</style>

</head>

例如：<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>內部樣式表</title>  <style type="text/css"> div{ background: green; } </style> </head> <body> <div>我是DIV</div> </body> </html>

三、外部樣式表

CSS代碼保存在擴展名為.css的樣式表中

HTML文件引用擴展名為.css的樣式表，有兩種方式：鏈接式、導入式。

語法：

1、鏈接式

2、導入式

@import url("css文件路徑");

</style>

例如：<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>外部樣式表</title>  <link rel="stylesheet" type="text/css" href="css/style.css" />  <style type="text/css"> @import url("css/style.css"); </style> </head> <body> <ol> <li>1111</li> <li>2222</li> </ol> </html>

行內樣式>內部樣式>外部樣式(后兩者是就近原則)。

css注釋格式如下：

/* 注釋如下*/

css中的顏色值表示如下：

可以是直接寫英文單詞，例如藍色盡可以寫blue；還可以寫為十六進制字符，例如#rrggbb\#ffcc00,#rgb如:#fc0十六進制的顏色可以在顏色表中查詢，這里我給大家提供一個，當然網上也有很多，大家也可以自己百度一下：

還有一種顏色的表示方式就是rbg模式，例如：

rgb(x,x,x) 其中x是一個0-255的整數值如:rgb(255,204,0)

rgb(x%,x%,x%) 其中x是一個0-100的整數值如rgb(100%,80%,0%)

Css的長度單位：

相對長度單位：px 像素（Pixel） em 相對于當前文本字體尺寸的倍數 % 百分比

絕對長度單位：in英寸（Inch） pt 點（Point） cm 厘米（Centimeter）mm 毫米（Millimeter）。

換算比例：1in = 2.54cm = 25.4 mm = 72pt

Css的七大類選擇器：

標簽選擇器例如：p{};

類選擇器例如.div{};（一個點加命名的類名）

Id選擇器例如 #div{};（斜體井號加ID名，ID是不可重復的，類可以相同）

通配符選擇器：*{}；

偽類選擇器：

a:link{}沒有訪問時的鏈接；

a:visited{}已經訪問過時的鏈接；

a:hove{}鼠標滑過時的鏈接；

a:active{}已經選中的鏈接；

:first-child{}為第一個字符設置樣式；

:last-child{}為最后一個字符設置樣式；

：nth-child（）{}可以為指定字符設置樣式

派生選擇器（后代選擇器、子元素選擇器和相鄰兄弟選擇器）：

后代選擇器: 以空格分隔

div ul li {color:#0099cc;}

子元素選擇器: 以>分隔

div >ul li

相鄰兄弟選擇器: 以+分隔

div + div ul li

最后一個就是組合選擇器，以逗號隔開

h1, h2, h3, h4, h5, h6 { color: green }

好了，css基礎就給大家介紹到這里，有什么不懂得地方可以給小編留言，如果您有什么好的建議也可以關注小編，我們共同學習，共同討論，共同進步，接下來我們會介紹下css的屬性，敬請期待吧

*******HTML********

**Web服務本質**

import socket

sk = socket.socket()

sk.bind(("127.0.0.1", 8080))

sk.listen(5)

while True:

conn, addr = sk.accept()

data = conn.recv(8096)

conn.send(b"HTTP/1.1 200 OK\r\n\r\n")#http協議簡化

conn.send(b"<h1>Hello world!</h1>")#發送內容

conn.close()

sk.close()

瀏覽器發送請求-->HTTP協議-->服務器接受請求-->服務端返回響應-->服務端把HTML文件內容發送給瀏覽器-->瀏覽器渲染頁面

What HTML?

*超文本標記語言（Hypertext Markup Language，HTML）是一種用于創建網頁標記語言

*本質上是瀏覽器可識別的規則，我們按照規則寫網頁，瀏覽器根據規則渲染我們的頁面。

對于不同的瀏覽器，對于同一個標簽可能會有不同的解釋。（兼容性問題）

*網頁文件的擴展名：.html或.htm

*HTML是一種標記語言，他不是一種編程語言，HTML使用標簽來描述網頁。

****HTML文檔結構****

*最基本的HTML文檔**

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

#解釋

1.<!DOCTYPE html>聲明為HTML5文檔

2.<html></html>是文檔的開始標記語言和結束標記，是HTML頁面的根本元素，在他們之間是文檔的頭部(head)和主題(body)

3.<head></head>定義了HTML文檔的開頭部分。他們之間的內容不會在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數據

4.<title></title>定義了網頁標題，在瀏覽器標題欄顯示

5.<body></body>之間的文本是可見的網頁主體內容

注意：

對于中文網頁需要使用<meta charset='utf-8'>聲明編碼。否則會出現亂碼。這些瀏覽器會設置GBK為默認編碼，則需要我們設為

****HTML標簽格式****

*HTML標簽是由尖括號包圍的關鍵字

*HTML標簽通常是成對出現的，比如：<div>和</div>，第一個標簽是開始，第二個標簽是結束。結束標簽會有斜線。

*也有一部分標簽是單獨呈現的，比如：<br/>、<hr/>、<img src="1.jpg" />等。

*標簽里面可以有若干屬性，也可以不帶屬性。

****標簽的語法

<標簽名屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分</標簽名>

<標簽名屬性1=“屬性值1” 屬性2=“屬性值2”…… />

幾個很重要的屬性：

id：定義標簽的唯一ID，HTML文檔樹中唯一

class：為html元素定義一個或多個類名（classname）(CSS樣式類名)

style：規定元素的行內樣式（CSS樣式

****HTML注釋

****<!DOCTYPE>標簽****

<!DOCTYPE> 聲明必須是HTML文檔的第一行，位于<html>標簽之前

<!DOCTYPE> 聲明不是HTML標簽，他是指示web瀏覽器關于頁面使用哪個HTML版本進行編寫的指令

****HTML常用標簽****

**head內常用的標簽**

1.<title></title> 定義網頁的標題

2.<style></style> 定義內部樣式表

3.<script><script>定義JS代碼或引入外部JS文件

4.<link/> 引入外部樣式文件

5.<meta/>定義網頁原信息

****Meta標簽

Meta標簽介紹：

meta標簽的組成：meta標簽共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不

同的參數值，這些不同的參數值就實現了不同的網頁功能。

1.http-equiv屬性：相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示

網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。

2.names屬性：主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎

機器人查找信息和分類信息用的

******body內常用表標簽******

****基本標簽（塊級標簽和內聯標簽）****

<br>

<hr>

****特殊字符****

空格------

>-------->

<--------<

&--------&

￥--------￥

版權(??)---?

注冊(??)---?

****div標簽和span標簽****

div標簽用來定義一個塊級元素，并無實際的意義。主要通過CSS樣式為其賦予不同的表現。

span標簽用來定義內聯(行內)元素，并無實際的意義。主要通過CSS樣式為其賦予不同的表現。

塊級元素與行內元素的區別：

所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。

這兩個元素是專門為定義CSS樣式而生的。

注意：

關于標簽嵌套：通常塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。

p標簽不能包含塊級標簽，p標簽也不能包含p標簽。

****img標簽****

****a標簽****

超鏈接標簽

所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，

也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，

甚至是一個應用程序。

什么是URL？

URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱為網頁地址，是因特網上標準的資源的地址。

URL舉例

http://www.baidu.com/stu/index.html

http://111.13.100.91/stu/index.html

URL地址由4部分組成

第1部分：為協議：http://、ftp://等

第2部分：為站點地址：可以是域名或IP地址

第3部分：為頁面在站點中的目錄：stu

第4部分：為頁面名稱，例如 index.html

各部分之間用“/”符號隔開。

href屬性指定目標網頁地址。該地址可以有幾種類型：

1.絕對URL-指向另一個站點（不如）

2.相對URL-指向當前站點中確切的路徑（href = 'index.html'）

3.錨URL-指向頁面中的錨（href = '#top'）

target:

1._blank表示在新標簽頁中打開目標頁面

2._self表示在當前標簽頁中打開目標頁面

****列表*****

1.無序列表

</ul>

type屬性：

1.disc（實心圓點，默認值）

2.circle（空心圓圈）

3.square（實行方塊）

4.none（無樣式）

2.有序列表

</ol>

type屬性：

1.1數字列表，默認值

2.A大寫字母

3.a小寫字母

4.I大寫羅馬

5.i小寫羅馬

3.標題列表

<dl>

</dl>

****表格****

表格是一個二維數據空間，一個表格由若干行組成，一行又有若干單元格組成，單元格里面可以

包括文字。列表。圖案。表單。數字符號。預置文本和其它的表格等內容。

表格最重要的目的是顯示表格類數據。

表格類數據是值最適合組織為表格格式（即按行和列組織）的數據

表格基本結構：

<table>

<thead>

<tr>

</tr>

</theaf>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

屬性：

1.border：表格邊框

2.cellpadding：內邊距

3.cellspacing：外邊距

4.width：像素百分比（最好通過css來設置長度）

5.rowspan：單元格豎跨多少行

6.colspan：單元格橫跨多少列（即合并單元格）

****form（表單）****

功能；

表單用于向服務器傳輸數據，從而實現用戶與web服務器的交互

表單能夠包含input系列標簽，比如文本字段、復選框、單選框、提交按鈕等等

表單還可以包含textarea、select、fieldest和lable標簽

***表單屬性

1.accept-charset 規定在被提交表單中使用的字符集（默認：頁面字符集）

2.action 規定在何處提交表單的地址（URL）（提交頁面）

3.autocomplete 規定瀏覽器應該自動完成表單（默認：開啟）

4.enctype 規定被提交數據的編碼（默認：url-encoded）

5.method 規定在提交表單時所用的HTTP方法（默認GET）

6.name 規定識別表單的名稱（對于DOM使用：document.forms.name）

7.novalidate規定瀏覽器不驗證表單

8.target規定action屬性中地址的目標（默認_self）

***表單元素

基本概念：

HTML表單是HTML元素中較為復雜的部分，表單往往和腳本、動態頁面、數據處理等功能相結合，因此它是制作動態網站很重要的內容。

表單一般用來收集用戶的輸入信息

表單工作原理：

訪問者在瀏覽有表單的網頁時，可填寫必需的信息，然后按某個按鈕提交。這些信息通過Internet傳送到服務器上。

服務器上專門的程序對這些數據進行處理，如果有錯誤會返回錯誤信息，并要求糾正錯誤。

當數據完整無誤后，服務器反饋一個輸入完成的信息。

******input******

<input>元素會根據不同的type屬性，變化為多種形態

type屬性值表現形式對應代碼

text單行輸入文本<input type="text" />

password密碼輸入框<input type="password" />

date日期輸入框<input type="date" />

checkbox復選框<input type="checkbox" checked="checked" />

radio單選框<input type="radio" />

submit提交按鈕<input type="submit" value="提交" />

reset重置按鈕<input type="reset" value="重置" />

button普通按鈕<input type="button" value="普通按鈕" />

hidden隱藏輸入框<input type="hidden" />

file文本選擇框<input type="file" />

屬性說明：

1.name：表單提交時的“鍵”，注意和id的區別

2.value：表單提交時對應項的值

type = “button”，“reset”，“submit”時，為按鈕上顯示的文本信息

type = “text”，“password”，“hidden“時，為輸入框的初始值

type = ”checkbox“，”radio“，”file“時，為輸相關聯的值

3.checked：radio和checkbox默認被選中的項

4.readonly：text和password設置只讀

5.disabled：所有input均適用

******select標簽******

</select>

</form>

屬性說明：

1.multiple：布爾屬性，設置后為多選，否則默認單選

2.disabled：禁用

3.selected：默認選中該項

4.value：定義提交時的選項值

******lable標簽******

定義：<lable>標簽為input元素定義標注（標記）

說明：

1.label元素不會向用戶呈現任何特殊效果

2.<lable>標簽的for屬性值應當與相關元素的id屬性值相同

<form>

</form>

******textarea多行文本******

默認內容

</textarea>

屬性說明：

1.name:名稱

2.rows:行數

3.cols:列數

4.disable:禁用

在線咨詢

上一篇：web前端ajax筆記之一
下一篇：使用python的正則表達式的匹配規則P來匹配HTML標簽及內容

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

網頁設計HTML零基礎入門

、Html概述

二、Html標簽語法

1、成對標簽

2、自閉合標簽

三、Html基本架構

1、！DOCTYPE

2、html

3、head

4、meta

5、body

四、Html文檔規范

五、Html注釋

六、html基本屬性

1.bgcolor

2.路徑

3.background

七、Html標簽

1.網頁的組成

2、文本段落標簽

3、文本控制標簽

4、文本格式化標簽

5、圖片標簽

6、audio

7、video

8、超鏈接

9、列表

1.有序列表

2、無序列表

3、描述列表

10、表格

10.1 基本使用

10.2 單元格合并

11、表單

11.1 基本使用

11.2 GET&POST

11.3 LABEL

11.4 INPUT

11.4.1 基本示例

11.4.2 調用攝像頭

11.4.3 其他類型

11.4.4 HIDDEN

11.4.5 SUBMIT

11.4.6 禁用表單

11.4.7 PATTERN

11.4.8 TEXTAREA

11.4.9 SELECT

11.4.10 RADIO

11.4.11 CHECKBOX

11.4.12 FILE

11.4.13 日期時間

11.4.14 DATALIST

12、框架集

12.1 垂直框架

12.3 混合框架

12.4 導航框架

13、內聯框架

您的項目需求