Html超文本標記語言
(HyperText Markup Language)
超文本
指的是網頁中可以顯示的內容(圖片,超鏈接,視頻,)
標記語言
標記–>標簽(標注)
例如:買東西的時候—>商品具有標簽,看到標簽就知道商品的屬性(價格,材質,型號等,)
標記語言就是提供了很多的標簽,不同的標簽具有不同的功能,最終運行時,由瀏覽器對標簽進行解析,最終呈現出不同標簽的樣子
安裝前端開發工具
在dcloud.io中下載HbuilderX并安裝
Html基礎結構
<!-- 聲明html語言的版本 htmls -->
<!DOCTYPE html>
<!-- html標簽是標記語言的根標簽 -->
<html>
<!-- head頭標簽 --><head><!-- 設置字符集標簽 --><meta charset="utf-8" /><!-- 標題標簽 --><title>百度一下,你就知道</title></head><!-- body是html文件的主體內容標簽 --><body><b>網頁的內容都寫在body里</b></body>
</html>標簽結構：
閉合標簽
<!--閉合標簽（封閉的區間）-->
<開始標簽>
標簽體
</結束標簽>
單行標簽
<!--換行標簽-->
<body><b>你好<!--換行標簽--><br/>我叫a</b>
</body>
標簽的屬性
標簽的屬性：可以通過改變標屬性，設置標簽顯示的格式
屬性必須寫在開始標簽中
屬性格式：屬性名 = ” 值 “
一個標簽中可以寫多個屬性
<!--設置字體顏色為紅色，字體大小為7-->
<font color = "red" size = "7">百度
</font>
常用標簽
標題標簽
<!--align設置文本在網頁中的位置-->
<!--center設置居中-->
<h1 align = "center">一級標題</h1>
<!--right設置居右-->
<h2 align = "right">二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>段落標簽
<p>p表示一個段落 段落與段落之間有間隔
</p>
<p align = "center">一個段落占一行
</p>
列表
無序列表
<!--設置列表前為正方形-->
<ul type = "square"><li>列表項1</li><li>列表項2</li><li>列表項3</li>
</ul>
有序列表
<!--設置數字為羅馬數字-->
<ol type = "I"><li>列表項1</li><li>列表項2</li><li>列表項3</li>
</ol>
超鏈接
<!--target = "_blank"在新窗口打開目標網頁-->
<a href = "www.bilibili.com" target = "_blank">嗶哩嗶哩</a>
<!--target = "_self"默認值,在當前窗口打開一個新網頁-->
<a href = "www.bilibili.com" target = "_self">嗶哩嗶哩</a>
圖片標簽
<!--html中插入的圖片都是圖片的地址-->
<img src = "圖片地址"/>
<img src = "圖片地址" border = "1"/>
<a href = "www.bilibili"><img src = "圖片地址"/>
</a>
特殊符號轉義
在網頁中有一些符號不能直接顯示
需要通過其他的符號進行代替,這些代替的符號就是轉義符
< ; 是< >是>
<b>------>效果等同于<b>
等效于四個空格
®是商標符號圈R
©是版權符號?
表格
表格的基本結構
<!--table是表格標簽-->
<!--border = 1 表示邊框寬度 width = 400表示表格的寬度-->
<table border = "1" width ="400"><!--tr表格行--><tr><!--th是單元格(表頭 加粗 居中)--><!--可以給每個單獨的單元格設置寬度,只要給第一列的單元格設置寬度,一整列單元格都會變化--><th wtdth = "150">姓名</th><!--給單元格第一個元素設置高度,一整行的高度都會變化--><th height = "50">語文</th><th>數學</th><th>英語</th></tr><!--td是普通單元格--><tr><td>張三</td><td>90</td><td>80</td><td>70</td></tr></table>
上表結果如下
表格的屬性
width:表格的寬度
height:表格的高度
cellspacing:單個單元格和單元格之間的間距
cellpadding:內容到單元格邊框的距離
align: left/center/right 設置單元格內容的水平位置
valign: top/middle/bottom 設置單元格的垂直位置
colspan:跨多列合并,從哪個合并,就在哪個單元格中添加colspan,要記得刪除多余的單元格
rowspan:跨多行合并,從哪個合并,就在哪個單元格中添加rowspan,在其他行中刪除多余的單元格
表單
<body><!-- action = "后端地址" --><!-- method = "提交數據方式 get/post" --><form action="" method="get"><!-- input單行輸入框type = "text"文本name = "自定義的名字" 向后端提交的鍵placeholder = "提示信息"readonly = "readonly" 不能修改,但是可以提交disabled = "disabled" 禁用組件,不能修改也不能提交 type = "password" 密碼區域type = "radio"單選框 多個選項的name必須相同才能互斥單選選擇性組件必須要給默認的value,比如選擇性別type = "checkbox"多選框 多個選項的name相同<select name = "">下拉選擇框<option value = "610100">西安</option>選項</select><textarea name = "adress" ></textarea>多行文本域type = "file" 文件選擇框<input = "submit"/>提交按鈕<input type="reset" value="重置"/> 重置按鈕,點擊后重置表單內容<input type="button"/> 創建一個按鈕,可以給按鈕添加事件來完成某一個操作-->賬號:<input type="text" name="account" value="" placeholder="請輸入賬號"/><br />密碼:<input type = "password" name="password"/><br /><!-- 單選 -->性別:<input type="radio" name="gender" value="男"/>男<input type="radio" name="gender" value="女"/>女<br /><!-- 多選 -->課程:<input type="checkbox" name="course" value="java"/>java<input type="checkbox" name="course" value="c++"/>c++<input type="checkbox" name="course" value="mysql"/>mysql<br /><!-- 選擇框 -->籍貫:<select name = "province"><option value="610100">西安</option><option>咸陽</option><option>漢中</option></select><br /><!-- 文本框 -->地址:<textarea name = "address" cols="30" rows="5"></textarea><br /><!-- 附件 -->附件:<input type="file" name="file"/><br /><!-- --><!-- submit提交按鈕--><input type="submit" value="保存"/><!-- 重置按鈕 --><input type="reset" value="重置"/><!-- 按鈕 --><input type="button" value="登錄" onclick="alert(1111)"/></form></body>
創建的表單內容如下
)
