、HTML基本信息

注釋：<!-- -->

DOCTYPE：就是告訴瀏覽器，我們要使用什么規范

head：網頁頭部標簽

• title：網頁標題
• meta：描述性標簽，描述網站的信息，用來做SEO
• charset = "UTF-8"
• name = "keyword" content = ""關鍵詞
• name = "descrisption" content = ""描述

body：代表網頁主題

二、網頁基本標簽

標題標簽

• <h1>一級標簽</h1>一直到6級標簽

段落標簽

• <p>段落標簽</p>

換行標簽

• <br/> /是閉合的意思，單標簽，閉不閉合都行

水平線標簽

• <hr/>

字體樣式標簽

• <strong>粗體</strong>
• <em>斜體</em>

注釋

• <!-- -->

特殊字符

• 空格 ---->一個空格
• 大于號 >
• 小于號<
• 版權符號©

特殊符號就是 & xxx ;

三、圖像標簽

<img src="path" alt="文字" title="text" width="x" heigth="y" />

• src 圖像地址 必填
• alt 圖像的代替文字(找不到圖片的時候顯示) 必填
• title 鼠標懸停提示文字
• width 圖像的寬度
• height 圖像的高度

注意：../ 代表上一級目錄

四、鏈接標簽

文本鏈接

<a href="path" target="目標窗口位置">鏈接文本或圖像</a>

• href 鏈接路徑，要跳轉帶那個位置 必填
• target鏈接在哪個窗口打開：常用值_self 當前窗口（默認的）、_blank 新窗口

圖像鏈接：就是嵌套圖片標簽

頁面間鏈接

• 從一個頁面鏈接到另一個頁面

錨鏈接

• 第一步需要一個標記 使用name做標記
• 第二步跳轉到標記 使用#標記
• <a name="top" ></a>
  <a href="#top"></a>
  上面是頁面內的跳轉
  
  <a name="down"></a>
  <a href="第一個頁面的path#down"></a>
  頁面間的跳轉

功能性鏈接

• 郵件鏈接：mailto： <a href="mailto:郵箱"></a>點擊后會打開郵箱
• qq鏈接：在qq推廣工具里面的

五、行內元素和塊元素

塊元素

• 無論內容多少，該元素獨占一行
• p、h1-h6

行內元素

• 內容撐開寬度、左右都是行內元素的可以排在一起
• a、strong、em...

六、列表

什么是列表：就是一種展示方式

有序列表

• <ol> <li></li> </ol>

無序列表

• <ul> <li></li> </ul>

自定義列表

<dl>
    <dt></dt> 標題
    <dd></dd> 選項
    <dd></dd>
    <dd></dd>
</dl>

七、表格

為什么使用表格

• 簡單通用
• 結構穩定

基本結構

• 單元格
• 行
• 列
• 跨行
• 跨列

<table border="1px" 邊框>表格標簽
    <tr>
        <td></td>列標簽
        <td></td>
        <td></td>
    </tr>行標簽 這代表一行
</table>

跨列：使用colspan="夸的列數" <td colspan="4">

跨行：使用rowspan="夸的行數" <td rowspan="4">

八、視頻和音頻

視頻元素

• video
• <video src="path" controls autoplay></video>
• src:資源路徑
• controls控制條
• autoplay自動播放

音頻元素

• audio
• <audio src="" controls autoplay></audio>

九、頁面結構分析

十、iframe內聯框架

<iframe src="path" name="mainFrame"></iframe>

• src必填
• width
• heigth
• name標記
• name的使用
  <iframe src="" name="hello" frameborder="0" width="1000px" heigth="800px"></iframe>
  
  <a href="path" target="hello"></a>
  點擊超連接后，會在內聯框架里顯示這個頁面

十一、表單

表單：form

<form method="post|get" action="result.hetml">
    <input />
</form>

• method 規定如何發送表單數據常用psot、get
• action 表示向何處發送表單數據，把表單的數據發送給那個地方

get方式提交：我們可以在url中看到我們提交的信息，不安全，但高效

post方式提交：比較安全，可以傳輸大文件

表單元素格式

單選框

• input type="radio"
• value 單選框的值
• name ：表示組，name一樣一次只能選一個，name不一樣可以選多個
• checked默認選中的

多選框

• input type="checkbox"
• value = "sleep"
• name = "hooby"
• checked默認選中的
• <input type="checkbox" name="sleep" value="slppe" checked/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  多選框的結果是以數組的形式返回的

按鈕

<input type="button" name="btn1" value="點擊" />普通按鈕
<input type="image" src ="點擊跳轉的path"/>圖片按鈕
<input type="submit"/>提交按鈕
<input type="reset"/>重置按鈕

下拉框

<select name="列表名稱">
    <option value="選項的值" select>中國</option>
    <option value="選項的值">中國</option>
    <option value="選項的值">中國</option>
    <option value="選項的值">中國</option>
    <option value="選項的值">中國</option>
</select>
提交的格式就是列表名稱和value

• selected 默認選擇

文本域

<textarea name="name" cols="列數" rows="行數">文本內容</textarea>

文件域

<input type="file" name="files"/>
<input type="button" value="提交"/>

郵件驗證

<input type="email" name="youjian">

URL

<input type="url" name="url"> 

數字驗證

<input type="number" name="num" max="100" min="0" step="10">

滑塊

<input type="range" max="100" min="0">

搜索

<input type="search" name="search">

十二、表單的應用

隱藏域 hidden

<input type="text" id="mark" hidden>

只讀 readonly

<input type="text" id="mark" readonly>

禁用 disabled

<input type="text" id="mark" disabled>

增強鼠標可用性

<label for="mark">點擊</label>
<input type="text" id="mark">

十三、表單初級驗證

為什么要進行表單驗證：緩解服務器壓力、保證數據安全

提示信息

• placeholder="提示信息" 在輸入框上

非空判斷

• required

正則表達式驗證

• pattern
• <input type="text" name="mail" pattern="正則表達式">

高級驗證使用js

制作網頁的很多時候為了頁面美觀都需要圖片能夠做到上下居中、左右居中。網上現實的方式方法也有很多，這里分享我經常使用的一種方法。

實現方法

// HTML代碼
<div class="row">
          <div class="col-xs-3">
                    <img src="/public/empty_200x100.png" class="imgbg" style="background-image:url('/uploads/demo.jpg');">
          </div>
</div>

// CSS 代碼
<style type="text/css">
          .imgbg{
                    width:100%; 
                    background-color: #ebf2f9; 
                    background-position: center; 
                    background-size:contain; 
                    background-repeat: no-repeat;
          }
</style>

實現原理

1、先準備一張透明的png圖片。

2、對這個圖片定義一個 Css樣式，添加這幾個屬性：

background-position: center；背景圖片居中

background-size: contain；顯示完整背景圖片

background-repeat: no-repeat；背景圖不重復

3、然后把要顯示的圖片作為背景圖片。

這樣圖片就不會隨著尺寸不同錯位顯示。展示的時候如果需要顯示正方形圖片，只需要制作一個1x1比例的png圖片，另外可以根據自己的要求制作png圖片。

升級處理

在展示圖片的時候，可能有些小伙伴不喜歡把圖片放到style樣式里面，可能會感覺到看起來怪怪的。

style="background-image: url('/uploads/demo.jpg');

我們想要的可能是這樣的展示方式

<img src="/public/empty_200x100.png" data-src="/uploads/demo.jpg" class="imgbg">

這樣其實也簡單，我們可以借助于 jquery 來實現這個功能。代碼如下：

<script type="text/javascript">
$(document).ready(function() {
          $("[class='imgbg']").each(function(index, el) {
                    $(this).css('background-image', 'url(' + $(this).data('src') + ')');
          });
});
</script>

PHP 實現

PHP 實現生成圖片也分為二種

1、圖片上傳的時候，按后臺設置的尺寸生成。

2、圖片預覽的時候，按URL中設置的參數生成。

github地址

https://github.com/zjutsxj/autoCropImage

1）想讓元素樣式有個變化的過程，那么我們需要以某種方式從一個樣式過渡到另一種樣式。

• transition
• transition-property
• transition-duration
• transition-timing-function
• transition-delay

CSS3 過渡是元素從一種樣式逐漸過渡到另一種樣式。

其語法如下所示：

transition: 指定屬性 持續時間 速度曲線 開始時間;

它是一個復合屬性，我們也可以如下分開使用這幾個屬性。

transition-property: 屬性值; /*指定屬性名*/
transition-duration: 屬性值; /*完成過渡這一過程的時間*/
transition-timing-function: 屬性值; /*速度曲線*/
transition-delay: 屬性值; /*過渡的開始時間*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin-top:40px;
            margin-left:40px;
            width:50px;
            height:50px;
            background-color:#51adcf;
            transition: transform 1s ease-in-out; /*ease-in-out 慢速開始慢速結束*/
        }
        div:nth-child(2){
            transform: rotate(-60deg);
        }
        div:hover{
            transform: scale(2);
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

• 在 div:hover 中，使用 transform: scale(2) 設置當鼠標放在 div 元素上時，元素會放大 1 倍。
• 在 div:nth-child(2) 中，使用 div:nth-child(2) 設置第二個元素逆時針旋轉 60deg。
• 使用 transtion 屬性實現過渡的效果，其中 ease-in-out 是 transition-timing-function 屬性的屬性值。

transition-timing-function 屬性用來設置過渡效果從開始到結束的時間曲線，它有很多可用屬性值，常用屬性值如下表：

例子，圖片一秒一步，4步變大為原先二倍：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:50px;
            height:50px;
            margin:50px;
            background-color:cornflowerblue;
            transition: transform 4s steps(4);
        }
        div:hover{
            transform:scale(2);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

練習一下：

按以上要求用 HTML 完成以下效果：