HTML
1. HTMl定義
FTP UPLOAD|ooxx.avi|1024 --> HTTP協議
HTML: 超文本標記語言
2. HTML標簽的結構
HTML的結構
head --> 給瀏覽器看的內容
title --> 標題
style --> CSS樣式
link --> CSS文件
script --> JS
meta
<meta charset="UTF-8">
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
body --> 給用戶看的內容
HTML標簽的語法：
<head 屬性1=值1 屬性2=值2></head>
<body></body>
常用標簽:
<h1>內容<h1> 標題
<br> 換行
<hr> 橫線
<a href="網站">自定義連接</a> 點擊自定義連接會連接到其他網站(內聯標簽)
<span>內容</span> 內聯標簽
<p> 段落(塊級標簽)
<b>內容</b> 加粗
<i>內容</i> 斜體
<u>內容</u> 下划線
<s>內容</s> 刪除
<div>內容</div> 獨占一行,是塊級標簽
ul 讓內容一行一行的排列下來,每排前面有空格:
<ul type="none">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
讓每節內容前面帶上序號(可以規定序號的類型和從什么地方開始):
<ol type="a" start='3>
<li>111</li>
<li>222</li>
dl 給內容加上標題:
<dl>
<dt>標題1</dt>
<dd>內容1</dd>
<dt>標題2</dt>
<dd>內容1</dd>
<dd>內容2</dd>
</dl>
結果如下:
特殊字符:
div標簽和span標簽
1, div標簽用來定義一個塊級元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表 現。
2, span標簽用來定義內聯(行內)元素，並無實際的意義。主要通過CSS樣式為其賦予不同 的表現。
塊級元素與行內元素的區別：
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。如果單獨在網頁 中插入這兩個元素，不會對頁面產生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。
img標簽:
<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">
示例代碼:
<imgsrc="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4278083535,964765985&fm=27&gp=0.jpg" alt="劉詩詩" title="鼠標">
a 標簽:
超鏈接標簽
所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。
示例代碼:
<a href="https://www.taobao.com">淘</a>
制作表格:
分為兩部分
第一部分:(表頭部分,相當於表格的分類)
第二部分:(內容部分,可以把相同的特征合到一起,也可以不合)
屬性:
border 表格邊框
cellpadding 內邊距
cellspacing 外邊距
width 像素,百分比,(最好通過css來設置長寬)
rowspan 單元格豎跨多少行
colspan 單元格橫跨多少行
用戶輸入標簽 form
功能:
表單用於向服務器傳輸數據,從而實現用戶與Web服務器的交互
表單能夠包含input系列標簽,比如文本字段,復選框,單選框,提交按鈕等
表單還可以包含textarea , select , fieldset 和 label標簽
表單屬性:
表單元素
基本概念
(1)HTML表單是HTML元素中較為復雜的部分,表單往往和腳本,動態頁面,數據處理等功能 相結合,因此它是制作動態網站很重要的內容
(2)表單一般用來收集用戶的輸入信息
表單工作原理:
訪問者在瀏覽有表單的網頁時,可填寫必須的信息,然后按某個按鈕提交.這些信息通過 Internet傳送到服務器上
input
<input>元素會根據不同的type屬性,變化為多種形態
select 標簽
屬性說明:
multiple : 布爾值屬性,設置后為多選,否則默認單選
disabled : 禁用
selected : 默認選中該項
value : 定義提交時的選項值
label 標簽
定義: <label>標簽為 input 元素定義標注(標記)
說明: 1. label元素不會向用戶呈現任何特殊效果
2. <label>標簽的for屬性值應當與相關元素的id屬性值相同
用法及結果展示:
用戶名 和 密碼:
結果:
選擇文件:
結果
checkbox用法:
結果:
按鈕(button):
結果:
選擇內容(第一種方法):
結果:
第二種方法:
結果:
完整代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>哈哈</h1> <form action="'http://127.0.0.1:8090" method="post"> <label for="i">用戶名</label> <input type="text" id="i" placeholder="請輸入用戶名"> <label>密碼 <input type="password" placeholder="請輸入密碼"> </label> <br> <br> <label>時間 <input type="date" placeholder="請輸入時間"> </label> <label>郵箱 <input type="email" placeholder="請輸入郵箱"> </label> <hr> <input type=checkbox>閱讀並接受<<百度用戶協議>> <hr> <select name="city"> <option value="020">北京市</option> <option value="010">上海市</option> <option value="000" selected>深圳市</option> </select> <hr> <select name="city" multiple> <option value="020" selected>北京市</option> <option value="010" selected>上海市</option> <option value="000" selected>深圳市</option> </select> <hr> <textarea name="'info" cols="60" rows="20"></textarea> <hr> <input type="file" name="avatar"> <hr> <input type="button" value="按鈕"> <input type="reset" value="重置"> <input type="submit"> </form> <hr> <form action="http://127.0.0.1:8080" method="post"> <input type="text" name="alex"> <input type="submit"> </form> </body> </html>