前端(經常使用標籤,表格,表單)

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 --> 給用戶看的內容css


HTML標籤的語法:
<head 屬性1=值1 屬性2=值2></head>
<body></body>html

經常使用標籤:
<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>
相關文章
相關標籤/搜索