HTML第一天
一 html
1.1 什么是HTML？
HTML稱之為超文本標記語言，
文本：其實就是文字
超文本：不僅有文字還包括 音頻 視頻 超鏈接 圖片等內容，
HTML超文本標記語言，其實就是一套瀏覽器能識別的標簽，能通過這些標簽構建出超文本的內容（網頁）
也就是說 ，我們學習HTML就是學習有什么標簽 會有什么效果，
1.2 開發工具
DW:設計工具， 設計師（美工）設計圖制作出來，前端工程師
WS:開發工具，
HBuilder：開發工具
VS:最新
使用流程：
1 打開開發工具
2 檔案---》新建專案
3 專案的基本骨架
1.3 html基本檔案結構
1.3.1 HTML中的注釋
注釋就是非代碼部分，對代碼起到解釋說明的作用，增強代碼的可讀性和可維護性，
html的注釋 是 <!-- 注釋部分 --> 快捷鍵： ctrl+/
1.3.2html的基本結構
<!-- 檔案的宣告 我們寫的是html代碼 html又有很多版本 不一樣的html版本 效果也是不一樣的
檔案的宣告 就是告訴瀏覽器 當前我們使用html的哪個版本
并且 這樣的寫法 DOCTYPE html 標明當前使用html第五代版本
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
-->
<!DOCTYPE html >
?
<!--
html中標簽分類：
單標簽 ： <標簽名 />
雙標簽 ： <開始標簽> 內容 </結束標簽>
-->
<!-- 無規矩不成方圓
html標簽稱之為根標簽 作用是告訴程式員 寫代碼要寫到 根標簽中
html是一門弱語言 語法規則不強制 java是一門強語言
-->
<html>
<!-- 配置當前網頁的元資訊 例如 當前網頁的作者 開發工具 關鍵詞 等等 -->
<head>
<!-- char字符 set集合 字符集 UTF-8編碼方式 防止中文亂碼 -->
<meta charset="utf-8" />
<!-- 標題 -->
<title>百度一下 你就知道</title>
</head>
<!-- 網頁中顯示的內容都寫到body中 -->
<body>
</body>
</html>
二 HTML的常用標簽
2.1 a標簽 超鏈接標簽
?
href是a標簽的屬性 并且編輯當前a標簽跳轉的路徑
?
<a href="" >百度一下 你就知道</a>
?
代碼書寫方式 ： a + tab
?
路徑分為：
相對路徑 參照當前檔案的路徑
絕對路徑 http:// https:// ftp:// file://
?
<a href="www.baidu.com">niha shahsahas </a>
<a href="index.html">你好 哈哈哈</a>
<a href="hehe/index4.html">你好 index4</a>
<a href="hehe/heihei/index5.html">index5</a>
?
2.2 影像標簽 img
<img src="" > img+tab
src 用來添加要展示的圖片路徑 此處也可以寫 相對路徑和絕對路徑
?
絕對路徑
<img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1340978268,3705912202&fm=26&gp=0.jpg" >
?
?
相對路徑
A 需要將資源圖片放到當前工程的img檔案夾中
B 添加圖片
<img src="img/1-2.jpg" >
?
修改圖片的尺寸
<img src="img/1-2.jpg" width="320" height="800" >
img標簽會等比例縮放
?
?
影像超鏈接
<a href="http://www.baidu.com">
<img src="img/1-2.jpg" >
</a>
2.3 輸入框 input 和按鈕 button
<input /> <button>百度一下</button>
2.4 table標簽表格
2.4.1 什么是table標簽表格標簽
就是可以使用html標簽完成一個類似于 excel表格的效果
在table標簽中分為 行和列，但是 實質上是 行 tr 和每行中的單元格 td
2.4.2 創建單元格
3行4列
A 創建一個table標簽
B 需要幾行就創建幾個tr
C 需要幾列 就在每個tr中創建幾個td
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
運算式輸入：
table>tr*7>td{你好世界}*8
a{Nihao shijie$}*8
2.4.3 table的常用屬性
<table border="3" width="800" height="500" bordercolor="blue" cellspacing="0"
cellpadding="10" bgcolor="green" background="img/1-2.jpg"
align="center"
>
<tr align="right" valign="top">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
border 邊框 width height 寬高 bordercolor 邊框顏色 cellspacing 單元格間距 cellpadding 內填充（內容到邊框之間的距離 ）bgcolor 背景顏色 background背景圖片
?
align ： 如果給table添加 則代表table在網頁中的水平位置
如果給tr添加 則代表內容在單元格中的水平位置
left center right
valign 垂直對齊方式 top middle bottom
2.4.4 合并單元格
<table border="2" width="800" height="500">
<tr>
<td colspan="5">1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td rowspan="3">2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
?
?
1 創建table
2 考慮是水平還是垂直 水平colspan（向后合并） 垂直rowspan（向下合并）
3 干掉多余的
練習：
?
1 創建一個table （數最多的 不夠的肯定是合并了） 4*2
2 合并
3 干掉多余的
?
<table border="2" cellspacing="0">
<tr>
<td colspan="2">聯系人</td>
</tr>
<tr bgcolor="green">
<td>姓名</td>
<td>張三</td>
</tr>
<tr>
<td rowspan="2">電話</td>
<td>15899993333</td>
</tr>
<tr>
<td>15166333333</td>
</tr>
</table>
?
?
練習
七行一列
?
1 匯入素材
?
<table width="1200" height="730" align="center" background="img/bg.jpg">
<tr align="right" height="40">
<td>
<a href="">新聞</a>
<a href="">新聞</a>
<a href="">新聞</a>
<a href="">新聞</a>
<a href="">新聞</a>
<a href="">新聞</a>
<a href="">新聞</a>
<a href="">新聞</a>
</td>
</tr>
<tr align="center" height="150">
<td>
<img src="img/baidulogo.png" height="120">
</td>
</tr>
<tr align="center" height="50">
<td>
<input type="text" style="width: 400px;"><button>百度一下</button>
</td>
</tr>
<tr align="center" height="160">
<td>
<img src="img/d_1.png" height="150">
<img src="img/d_2.png" height="150">
<img src="img/d_3.png" height="150">
<img src="img/d_4.png" height="150">
</td>
</tr>
<tr align="center" height="160">
<td>
<img src="img/d_5.png" height="150">
<img src="img/d_6.png" height="150">
<img src="img/d_7.png" height="150">
<img src="img/d_8.png" height="150">
</td>
</tr>
<tr align="center" height="100" valign="bottom">
<td>
<a href="">把百度設為首頁</a>
<a href="">關于百度</a>
<a href="">About baidu</a>
</td>
</tr>
<tr align="center" valign="top">
<td>
?2021 Baidu <a href="">使用百度前必讀</a>
京ICP證000000000000000001號
</td>
</tr>
</table>
?
?
總結
今天學習了:
-
a標簽 超鏈接標簽的學習和使用
-
影像標簽 img的學習
-
輸入框 input和按鈕button的學習
-
table 表格標簽的學習
<a href=""></a> 注意這里的絕對路徑和相對路徑的區別 <img src=""> ? <input/<input /> <button> </button> ? <table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> ? ? 單元格的合并: colspan rowspan
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/319688.html
標籤：其他
上一篇：軟體測驗-黑盒測驗方法（二）---正交實驗法、場景圖、錯誤推測法
下一篇：開發常用網址大全