<Html> 標簽
阿新 • • 發佈：2018-12-19
訪問 tex value www. 式表 用戶數據 帶時分秒 狀態 列表
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>頁頭部分</title> </head> <body> <!-- 標題內容 --> <h1>標題h1~h6</h1> <!-- 文本內容 --> <p>文本內容</p> <!-- 橫線部分 --> <hr color="red"><!-- 居中和字體 --> <font size="5px"><center>你好</center></font> <!-- 圖片 --> <img width="50%";height="50%" src="L:/pic/1.jpg"> <!-- 無序列表 --> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <!-- 有序列表 --> <ol> <li>豬</li> <li>狗</li> <li>牛</li> </ol> <!-- 超鏈接 _self:默認值，當前頁打開 _blank：在空白頁打開 --> <button><a href="http://www.baidu.com" target="_blank">點我</a></button> <!-- div和span： * div:每一個div占滿一整行。塊級標簽 * span：文本信息在一行展示，行內標簽 內聯標簽 --> <div>你好!div</div> <span>hello!span</span><br/> <!-- * table：定義表格 * width：寬度 * border：邊框 * cellpadding：定義內容和單元格的距離 * cellspacing：定義單元格之間的距離。如果指定為0，則單元格的線會合為一條、 * bgcolor：背景色 * align：對齊方式 --> <table width="1px" border="1px" cellpadding="10" cellspacing="0" align="left"> <!-- * tr：定義行 * bgcolor：背景色 * align：對齊方式 * td：定義單元格 * colspan：合並列 * rowspan：合並行 --> <tr> <th>數學</th> <th>語文</th> <th>英語</th> </tr> <tr> <td>100</td> <td>88</td> <td>92</td> </tr> </table> <hr> <br/> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表單標簽</title> </head> <body> <!-- form：用於定義表單的。可以定義一個範圍，範圍代表采集用戶數據的範圍 * 屬性： * action：指定提交數據的URL * method:指定提交方式 * 分類：一共7種，2種比較常用 get： 1. 請求參數會在地址欄中顯示。會封裝到請求行中(HTTP協議後講解)。 2. 請求參數大小是有限制的。 3. 不太安全。 post： 2. 請求參數不會再地址欄中顯示。會封裝在請求體中(HTTP協議後講解) 2. 請求參數的大小沒有限制。 3. 較為安全。 * 表單項中的數據要想被提交：必須指定其name屬性 --> <form action="#" method="get"> <label for="username"> 用戶名 </label>：<input type="text" name="username" placeholder="請輸入用戶名" id="username"><br> 密碼：<input type="password" name="password" placeholder="請輸入密碼"><br> <!-- 單選框 --> 性別：<input type="radio" name="gender" value="male" > 男 <input type="radio" name="gender" value="female" checked> 女 <br> <!-- 復選框 --> 愛好：<input type="checkbox" name="hobby" value="shopping"> 逛街 <input type="checkbox" name="hobby" value="java" checked> Java <input type="checkbox" name="hobby" value="game"> 遊戲<br> <!-- 選擇文件 --> 圖片：<input type="file" name="file"><br> <!-- 隱藏域 --> 隱藏域：<input type="hidden" name="id" value="aaa"> <br> <!-- 取色器 --> 取色器：<input type="color" name="color"><br> <!-- 年月日 --> 生日：<input type="date" name="birthday"> <br> <!-- 帶時分秒的年月日 --> 生日：<input type="datetime-local" name="birthday"> <br> <!-- 郵件 --> 郵箱：<input type="email" name="email"> <br> <!-- 數字框 --> 年齡：<input type="number" name="age"> <br> <!-- 下拉框 --> 省份：<select name="province"> <option value="">--請選擇--</option> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected>陜西</option> </select><br> 自我描述： <!-- 文本域 --> <textarea cols="20" rows="5" name="des"></textarea> <br> <!-- 提交 --> <input type="submit" value="登錄" > <!-- 按鈕 --> <input type="button" value="一個按鈕" ><br> <!-- 圖片 --> <input type="image" src="img/regbtn.jpg"> </form> </body> </html>
css選擇器
1. 概念： Cascading Style Sheets 層疊樣式表 * 層疊：多個樣式可以作用在同一個html的元素上，同時生效 2. 好處： 1. 功能強大 2. 將內容展示和樣式控制分離 * 降低耦合度。解耦 * 讓分工協作更容易 * 提高開發效率 3. CSS的使用：CSS與html結合方式 1. 內聯樣式 * 在標簽內使用style屬性指定css代碼 * 如：<div style="color:red;">hello css</div> 2. 內部樣式 * 在head標簽內，定義style標簽，style標簽的標簽體內容就是css代碼 * 如： <style> div{ color:blue; } </style> <div>hello css</div> 3. 外部樣式 1. 定義css資源文件。 2. 在head標簽內，定義link標簽，引入外部的資源文件 * 如： * a.css文件： div{ color:green; } <link rel="stylesheet" href="css/a.css"> <div>hello css</div> <div>hello css</div> * 註意： * 1,2,3種方式 css作用範圍越來越大 * 1方式不常用，後期常用2,3 * 3種格式可以寫為： <style> @import "css/a.css"; </style> 4. css語法： * 格式： 選擇器 { 屬性名1:屬性值1; 屬性名2:屬性值2; ... } * 選擇器:篩選具有相似特征的元素 * 註意： * 每一對屬性需要使用；隔開，最後一對屬性可以不加； 5. 選擇器：篩選具有相似特征的元素 * 分類： 1. 基礎選擇器 1. id選擇器：選擇具體的id屬性值的元素.建議在一個html頁面中id值唯一 * 語法：#id屬性值{} 2. 元素選擇器：選擇具有相同標簽名稱的元素 * 語法： 標簽名稱{} * 註意：id選擇器優先級高於元素選擇器 3. 類選擇器：選擇具有相同的class屬性值的元素。 * 語法：.class屬性值{} * 註意：類選擇器選擇器優先級高於元素選擇器 2. 擴展選擇器： 1. 選擇所有元素： * 語法： *{} 2. 並集選擇器： * 選擇器1,選擇器2{} 3. 子選擇器：篩選選擇器1元素下的選擇器2元素 * 語法： 選擇器1 選擇器2{} 4. 父選擇器：篩選選擇器2的父元素選擇器1 * 語法： 選擇器1 > 選擇器2{} 5. 屬性選擇器：選擇元素名稱，屬性名=屬性值的元素 * 語法： 元素名稱[屬性名="屬性值"]{} 6. 偽類選擇器：選擇一些元素具有的狀態 * 語法： 元素:狀態{} * 如： <a> * 狀態： * link：初始化的狀態 * visited：被訪問過的狀態 * active：正在訪問狀態 * hover：鼠標懸浮狀態 6. 屬性 1. 字體、文本 * font-size：字體大小 * color：文本顏色 * text-align：對其方式 * line-height：行高 2. 背景 * background： 3. 邊框 * border：設置邊框，符合屬性 4. 尺寸 * width：寬度 * height：高度 5. 盒子模型：控制布局 * margin：外邊距 * padding：內邊距 * 默認情況下內邊距會影響整個盒子的大小 * box-sizing: border-box; 設置盒子的屬性，讓width和height就是最終盒子的大小 * float：浮動 * left * right
<Html> 標簽