目錄
一. HTML?
1.概述
2. 安裝前端開發工具
? ? (1)HBuilderX下載
? ? (2)創建html項目和使用
3. HTML基礎
1.標簽
? (1).標簽定義:
? (2).標簽結構:?
? (3).標簽屬性:
2.常用標簽:?
3.特殊符號:?
4.表格(table)
? ?(1)基本標簽:
? ?(2)基本結構:
?? (3)表格屬性:
5.表單(form)
? ?(1). 表單概述:
? ?(2). 常見用法
? ? 1)文本表單
? ? 2)常見表單
? ? 3)下拉框
? ? 4)文本域
? ? 5)按鈕
? ?(3). 代碼舉例:
一. HTML?
? ?1.概述
? ? ? ? ?HTML(HyperText Markup Language)是超文本標記語言,?XML 是可擴展標記語言 ,用來存儲數據. 二者都是以ML(Markup Language) 標記語言結尾
? ? ? ? ?HTML用來標記網頁內容,里面提供了各自不同功能的標簽,?例如在網頁中顯示超鏈接,圖片.?
?通過使用標簽來修飾網頁內容,在瀏覽器中運行解釋網頁,最終運行出我們想要的效果.
2. 安裝前端開發工具
? ? (1)HBuilderX下載
HBuilderX-高效極客技巧
? ? (2)創建html項目和使用
? ?內容解釋
?(1)文檔聲明:?
? ? 聲明html語言版本 例如html5,主要就是告訴瀏覽器如何解析 ,可以避免產生一些不可預期的行為?
html4的文檔聲明:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
html5的文檔聲明:
<!DOCTYPE html>
?(2)頭部
頭部區域的標簽為: <title>, <style>, <meta>, <link>, <script>? 例如:
<title> 定義網頁的標題
<meta> 位于文檔的頭部, 提供有關頁面的元信息(meta-information) 例如針對搜索引擎和更新頻度的描述和關鍵詞。<meta charset="utf-8" />
<link rel="icon" href="ico地址">??標題處添加圖標
? ? 運行代碼
3. HTML基礎
1.標簽
? (1).標簽定義:
? ? ? ? 用于描述網頁
? (2).標簽結構:?
? ? ? ?1) <標簽名> 標簽內容 </標簽名> 閉合標簽(有標簽內容)
? ? ? ?2) <標簽名/> 自閉合標簽 (無標簽內容)??
? (3).標簽屬性:
? ? ? 1) 定義: 用來說明當前標簽的顯示或使用? 例如:<body text=”red”>
? ? ? 2) 格式: 屬性名 = “屬性值“
? ? ? 3) 位置:?<標簽名 屬性名 = “屬性值“ >xxx</標簽名>
? ? ? 4) 注意: 一個標簽可以添加多個屬性:<標簽名 屬性名 = “屬性值“ 屬性名 = “屬性值“... >
2.常用標簽:?
? ?(1)標題標簽 <h1>一級標題</h1>…..<h6>六級標題</h6>
? ?(2)段落標簽 <p></p>
? ?(3)換行標簽 <br/>
? ?(4)分割線標簽?<hr/>
? ?(5)列表標簽? 無序列表<ul><li></li></ul>? 有序列表<ol><li></li></ol>
? ?(6)超鏈接 <a></a>?
? ?(7)加粗 <b><b>
超鏈接: 通過鏈接訪問其他網頁資源
例如: <a href=“http://www.baidu.com” target=“_blank”>百度</a>
? ? ? ? ?<a href=“地址” target =“窗口”>內容</a>
target?: 默認值為_self 當前窗口? ? _blank 新窗口
href (Hypertext Reference 超文本引用) :? 規定鏈接指向的頁面的URL(頁面地址)
URL (Uniform Resource Locator) : 統一資源定位符
? ?(7)圖像標簽 <img/>
例如 : <img src=“img/demo.jpg”? width=“300”? height=“150“? border= ” 1 ”/>
src : 圖像的路徑
width / height: 圖像的寬度 / 高度
border: 圖像邊框的粗度
px: 像素單位
3.特殊符號:?
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body bgcolor="yellow"><!-- 設置背景顏色 --><b>我的<b/>第一<br/>張網頁<!-- <font color="red" size ="7">百度<font/> --><font color="red" >百度<font/><!-- 設置字體顏色 --><!-- 標題標簽 --><h1>一級標題</h1><h2>二級標題</h2><h3>三級標題</h3>.....<h6>六級標題</h6><!-- 段落標簽 --><p>這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落</p><p>這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落</p><p>這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落</p><!-- 換行 添加在誰后面就從哪里換行 -->換行<br>這是一個段落,這是事實<br>上是一段落<!--列表 分為<ul></ul> 無序列表 和 <ol></ol有序列表--><ul><li>這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落</li><li>這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落</li><li>這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落</li></ul><ol type="I"><li>這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落</li><li>這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落</li><li>這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落 這是一個段落</li></ol><!--圖像--><img src ="img/baidu.ico" /><img src ="img/baidu.ico" width="300" height="100" boder="2"/><!-- 超鏈接 --><!-- 在當前窗口打開 --><a href="https://www.bilibili.com/" target="_self" >嗶哩嗶哩</a><!-- 在新窗口打開 --><a href="https://www.bilibili.com/" target="_blank" >嗶哩嗶哩</a><!-- 特殊符號 --><!-- <小于號 >大于號 --><b>----><hr/>分割線<!-- 空格 -->aaaaa bbbbbbb<!-- 注冊商標 ®-->®<!-- 版權 © -->©</body>
</html>
頁面展示:
4.表格(table)
? ?(1)基本標簽:
table標簽：表格標簽
tr標簽：表格中的行
th標簽:? 表格的表頭
td標簽：表格單元格
? ?(2)基本結構:
<table>定義表格
? ? ? ? <tr>定義表行,一個tr就是一行
? ? ? ? ? ? ? ? <th>定義表頭</th>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? ? ? <td>定義單元格</td> 當前行的列
? ? ? ? </tr>
</table>
? (3)表格屬性:
width? ? ? ? ? ? ?寬度 可以設置 表格 單元格...
height? ? ? ? ? ? 高度 可以設置表格 單元格...
cellspacing? ? 單元格之間的距離
cellpadding? ?內容到單元格邊框的距離
align? ? ? ? ? ? ? 對齊方式
valign? ? ? ? ? ? 內容位置
cospan? ? ? ? ? 跨列合并單元格
rowspan? ? ? ? 跨行合并單元格
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 表格 --><table border="1" width="800" height="400" cellspacing="10" ><!-- border邊框 width寬度 height高度 cellspacing單元格之間的距離 --><tr height="60" align="center"><!-- align(對齊方式): center水平居中對齊 right右邊對齊 left左邊對齊--><td>項目</td><td colspan="5">上課</td><td colspan="2">休息</td></tr><tr align="center" ><td>星期</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td><td>星期日</td></tr><tr align="center"><td rowspan="4">上午</td><!-- rowspan(跨行合并單元格)= "合并的個數" --><td>語文</td><td>數學</td><td>英語</td><td>英語</td><td>物理</td><td>計算機</td><td rowspan="4" valign="bottom">休息</td><!-- valign(文本位置): bottom底部 top頂部 --></tr><tr align="center"><td>數學</td><td>數學</td><td>地理</td><td>化學</td><td>歷史</td><td>計算機</td></tr><tr align="center"><td>語文</td><td>數學</td><td>歷史</td><td>計算機</td><td>物理</td><td>化學</td></tr><tr align="center"><td>數學</td><td>數學</td><td>地理</td><td>化學</td><td>歷史</td><td>計算機</td></tr><tr align="center"><td rowspan="2">下午</td><td>數學</td><td>數學</td><td>地理</td><td>化學</td><td>歷史</td><td>計算機</td><td rowspan="2">休息</td></tr><tr align="center"><td>數學</td><td>數學</td><td>地理</td><td>化學</td><td>歷史</td><td>計算機</td></tr></table><table border="1" width="500" cellpadding="5"><!-- cellpadding 文本到單元格邊框的距離 --><tr ><td>姓名</td><td> </td><!--  空格 --><td>性別</td><td> </td><td rowspan="5" width="80" align="center">照片</td></tr><tr><td>出生年月</td><td> </td><td>籍貫</td><td> </td></tr><tr><td>政治面貌</td><td></td><td>民族</td><td></td></tr><tr><td>將康狀況</td><td></td><td>婚姻情況</td><td></td></tr><tr><td>聯系電話</td><td></td><td>電子郵箱</td><td><www class="51jianli"></www></td></tr><tr><td>求職意向</td><td colspan="4"></td> <!-- colspan(跨列合并單元格)="合并的個數" --></tr><tr ><td height="250">工作經歷</td><td colspan="4"></td></tr><tr><td height="60">教育經歷</td><td colspan="4"></td></tr><tr><td height="60">英語水平</td><td colspan="4"></td></tr><tr><td height="60">計算機水平</td><td colspan="4"></td></tr><tr><td height="60">自我評價</td><td colspan="4"></td></tr></table></body>
</html>頁面展示:
5.表單(form)
? ?(1). 表單概述:
? ? ? ?網頁的表單中有許多可以輸入或選擇的組件,用戶可以在表單中填寫信息,最終提交表單,把客戶端數據提交至服務器
? ?(2). 常見用法
? ? ? ? 1)文本表單
? ? 2)常見表單
? ? 3)下拉框
? ? 4)文本域
? 5)按鈕
? ? ? ?(3). 代碼舉例:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="server.html" method="get"><!-- action:指定提交后，由服務器上那個處理程序處理(java程序) method: 指定向服務器提交的方法,一般為post或get方法, post方法比較安全-->用戶名:<input type="text" name="count" value="zhangsan" readonly="readonly"/><br/><!-- readonly="readonly"只讀,提交表單時,可以提交數據 value就是輸入的值 在輸入框輸入的內容,會賦給value屬性-->密碼:<input type="text" name="password" placeholder="請輸入密碼" disabled="disabled"/><br /><!-- placeholder="提示內容,當輸入框輸入內容后提示自動消失" --><!-- disabled="disabled"禁用 ,禁用之后不能提交數據 -->性別:<input type="radio" name="gender" value="男"/>男<input type="radio" name="gender" value="女"/>女<!--type="radio"單選框 ; name="gender"通過name屬性分組,值相同時就是一組,會互斥 ,避免出現同時勾選上男和女--><br />課程:<input type="checkbox" name="couse" value="java"/> java<input type="checkbox" name="couse" value="c++"/> c++<input type="checkbox" name="couse" value="python"/> python<input type="checkbox" name="couse" value="高數"/> 高數<!-- type="checkbox" 復選框(多選)--><br />省份:<select name ="provice"><!-- 下拉選擇框 --><option>請選擇</option><option value="1001">北京</option><option value="1002" selected="selected">天津</option><!-- selected="selected"下拉選擇框默認值 --><option value="1003">上海</option></select><br />附件:<input type="file" name="file"/> <br/><!-- 選擇文件 -->備注:<textarea cols="30" rows="5" name="mark"></textarea><!-- 文本域 --><br /><br /><input type="submit"/><!--提交按鈕 可以觸發表單的提交 --><input type="reset"/><!-- 重置按鈕 --><input type="button" value="保存"/></form></body>
</html>頁面展示:
)
：數組 “扁平化 + 映射” 的高效組合拳)
