HTML標(biāo)簽

HTML標(biāo)簽

代碼實(shí)例：

1 塊級(jí)標(biāo)簽和內(nèi)斂標(biāo)簽
<!DOCTYPE html>
<html lang="en">
<head>
<!--    <meta http-equiv="refresh" content="2;URL=http://www.baidu.com" charset="UTF-8">-->
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>安河橋</title>

    <link rel="stylesheet" href="">

    <style></style>

</head>
<body>

<span><font size="33" color="yellow" >yfjs</font></span>

<div>
    <div><font size="20" color="red">rsx</font></div>
    <span><font size="30" color="orange" >大家都好</font></span>
</div>

             <h2><font size="19" color="purple">rsx?>yf?<xy?</font></h2>

             <p><font size="19" color="blue">rsx&"?'</font></p>
             <p><font size="12" color="#ff4500">rsx??</font></p>

<p><font size="40" color="#adff2f"><p></font></p>
2 img標(biāo)簽和a標(biāo)簽
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>RNG never give up</title>

    <style>
        .c1{
            height: 1000px;
            width: 200px;
            background-color: orange;
        }
    </style>

</head>
<body>

<div>RNG never give up</div>
<a name="top">RNG who is you winner</a><p></p>

<img src="1.jpg" alt="RNG" title="永不言棄" width="" height="">

<a href="https://image.baidu.com/search/index?tn=baiduima
ge&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=
1568021205974_R&pv=&ic=&nc=1&z=&hd=&latest=?right=&se=1&showtab=0&fb=0&width=&height=&face=0&i
stype=2&ie=utf-8&sid=&word=rng%E5%A3%81%E7%BA%B8&f=3&oq=rng&rsp=0" target="_blank">RNG圖片</a>

<div class="c1"></div>
<a href="#top">回到頂部</a>

</body>
</html>

target：

目前創(chuàng)新互聯(lián)公司已為上千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、橫縣網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

  • _blank表示在新標(biāo)簽頁(yè)中打開(kāi)目標(biāo)網(wǎng)頁(yè)
  • _self表示在當(dāng)前標(biāo)簽頁(yè)中打開(kāi)目標(biāo)網(wǎng)頁(yè)
3 列表標(biāo)簽

1.無(wú)序列表

type屬性：

  • disc（實(shí)心圓點(diǎn)，默認(rèn)值）
  • circle（空心圓圈）
  • square（實(shí)心方塊）
  • none（無(wú)樣式）

2.有序列表

type屬性： start是從數(shù)字幾開(kāi)始

  • 1 數(shù)字列表，默認(rèn)值
  • A 大寫(xiě)字母
  • a 小寫(xiě)字母
  • Ⅰ大寫(xiě)羅馬
  • ⅰ小寫(xiě)羅馬
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<ul type="square">
    <li>rsx</li>
    <li>yf</li>
    <li>xy</li>
</ul>

<ol type="I" start="10">
    <li>rsx</li>
    <li>yf</li>
    <li>xy</li>

</ol>

</body>
</html>
4 table標(biāo)簽

屬性:

  • border: 表格邊框.
  • cellpadding: 內(nèi)邊距 （內(nèi)邊框和內(nèi)容的距離）
  • cellspacing: 外邊距.（內(nèi)外邊框的距離）
  • width: 像素 百分比.（最好通過(guò)css來(lái)設(shè)置長(zhǎng)寬）
  • rowspan: 單元格豎跨多少行
  • colspan: 單元格橫跨多少列（即合并單元格）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Title</title>

</head>
<body>

<table border="51" cellpadding="10" cellspacing="10">
       <thead>
            <tr>
                <th>name</th>
                <th>age</th>
                <th>hobby</th>
            </tr>

       </thead>
       <tbody>
            <tr>
                <td>rsx</td>
                <td>13</td>
                <td>Python</td>
            </tr>
            <tr>
                <td>yf</td>
                <td>12</td>
                <td>--</td>
            </tr>
            <tr>
                <td>xy</td>
                <td>14</td>
                <td>GO</td>
            </tr>
       </tbody>
</table>
5 input標(biāo)簽

type屬性:

? text:普通文本輸入框
? password:密文

? date:日期選擇框
? radio:單選框
? checkbox:復(fù)選框
? submit:提交按鈕
? button:普通按鈕
? reset:重置
? file:文件上傳
? hidden:隱藏input框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="hidden">

用戶名:<input type="text">
密碼:<input type="password">

<input type="radio" name="sex" value="1" >男
<input type="radio" name="sex" value="2" checked>女

<input type="checkbox" name="hobby" value="1">1
<input type="checkbox" name="hobby" value="2">2
<input type="checkbox" name="hobby" value="3">3
<input type="checkbox" name="hobby" value="4" checked>4

<div>
    <input type="date">
</div>

<div>
    <input type="file">
</div>

</body>
</html>
6 form表單

功能：

表單用于向服務(wù)器傳輸數(shù)據(jù)，從而實(shí)現(xiàn)用戶與Web服務(wù)器的交互

表單能夠包含input系列標(biāo)簽，比如文本字段、復(fù)選框、單選框、提交按鈕等等。

表單還可以包含textarea、select、fieldset和 label標(biāo)簽。

表單屬性

屬性描述
accept-charset 規(guī)定在被提交表單中使用的字符集（默認(rèn)：頁(yè)面字符集）。
action 規(guī)定向何處提交表單的地址（URL）（提交頁(yè)面）。
autocomplete 規(guī)定瀏覽器應(yīng)該自動(dòng)完成表單（默認(rèn)：開(kāi)啟）。
enctype 規(guī)定被提交數(shù)據(jù)的編碼（默認(rèn)：url-encoded）。
method 規(guī)定在提交表單時(shí)所用的 HTTP 方法（默認(rèn)：GET）。
name 規(guī)定識(shí)別表單的名稱（對(duì)于 DOM 使用：document.forms.name）。
novalidate 規(guī)定瀏覽器不驗(yàn)證表單。
target 規(guī)定 action 屬性中地址的目標(biāo)（默認(rèn)：_self）。

表單元素

基本概念：
　　HTML表單是HTML元素中較為復(fù)雜的部分，表單往往和腳本、動(dòng)態(tài)頁(yè)面、數(shù)據(jù)處理等功能相結(jié)合，因此它是制作動(dòng)態(tài)網(wǎng)站很重要的內(nèi)容。
　　表單一般用來(lái)收集用戶的輸入信息
　　表單工作原理：
　　訪問(wèn)者在瀏覽有表單的網(wǎng)頁(yè)時(shí)，可填寫(xiě)必需的信息，然后按某個(gè)按鈕提交。這些信息通過(guò)Internet傳送到服務(wù)器上。
　　服務(wù)器上專門的程序?qū)@些數(shù)據(jù)進(jìn)行處理，如果有錯(cuò)誤會(huì)返回錯(cuò)誤信息，并要求糾正錯(cuò)誤。當(dāng)數(shù)據(jù)完整無(wú)誤后，服務(wù)器反饋一個(gè)輸入完成的信息。

HTML標(biāo)簽

HTML標(biāo)簽

點(diǎn)擊提交按鈕，input中type=submit的那個(gè)按鈕，然后就會(huì)將form表單中所有用戶輸入的內(nèi)容或者選擇的內(nèi)容（{name屬性:值，}）都發(fā)給服務(wù)端（以我們自己寫(xiě)的那個(gè)socket舉例，打印一下接收的內(nèi)容），但是所有的輸入標(biāo)簽必須有一個(gè)叫做name的屬性。

HTML標(biāo)簽

發(fā)現(xiàn)跳到這個(gè)頁(yè)面了：看url的內(nèi)容，有了我們輸入的內(nèi)容，并且是給你組合起來(lái)的，name屬性值和你輸入的值組合到一起了，通過(guò)&符號(hào)分隔，并且在路徑那里加了個(gè)問(wèn)號(hào)

HTML標(biāo)簽

打印一下socket接收的消息，你就發(fā)現(xiàn)已經(jīng)接受到這些數(shù)據(jù)了

HTML標(biāo)簽

HTML標(biāo)簽

HTML標(biāo)簽

讓用戶選擇的，必須指定一個(gè)value值，要不然后端接收不到內(nèi)容，用戶自己填寫(xiě)的標(biāo)簽，不需要指定value值

然后再點(diǎn)擊提交，后端打印一下接收的數(shù)據(jù)：

HTML標(biāo)簽

但是這樣并不好，因?yàn)閡rl中顯示了你的信息，并且如果內(nèi)容很多的話，你的地址欄不能夠輸入那么長(zhǎng)的內(nèi)容，為什么會(huì)默認(rèn)拼接到url里面呢，因?yàn)閒orm表單默認(rèn)是get請(qǐng)求提交內(nèi)容，我們可以改為post，來(lái)看看：post會(huì)把所有你提交的信息封裝到一個(gè)消息體里面，在瀏覽器上就看不到了，對(duì)于小白來(lái)說(shuō)，看著安全一些。

HTML標(biāo)簽

HTML標(biāo)簽

點(diǎn)擊提交就跳到這個(gè)網(wǎng)址了：

HTML標(biāo)簽

在看后端打印的內(nèi)容：

HTML標(biāo)簽

你會(huì)發(fā)現(xiàn)一個(gè)post請(qǐng)求：

把內(nèi)容往后拉，就能看到咱們提交的數(shù)據(jù)了

HTML標(biāo)簽

那么你看，你的瀏覽器再你點(diǎn)擊提交的時(shí)候，獲取了你所輸入的內(nèi)容，然后通過(guò)網(wǎng)絡(luò)提交給你的服務(wù)端代碼程序了。

然后我們后端通過(guò)提交過(guò)來(lái)的數(shù)據(jù)，來(lái)做某些事情，該驗(yàn)證的驗(yàn)證，該保存的保存

所以記住form表單里面有兩個(gè)屬性：action控制往哪里提交數(shù)據(jù)、method控制用什么方式提交。

HTML標(biāo)簽

注意：

form表單提交數(shù)據(jù)的時(shí)候，必須有個(gè)submit按鈕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="hidden">

用戶名:<input type="text">
密碼:<input type="password">

<input type="radio" name="sex" value="1" >男
<input type="radio" name="sex" value="2" checked>女

<input type="checkbox" name="hobby" value="1">1
<input type="checkbox" name="hobby" value="2">2
<input type="checkbox" name="hobby" value="3">3
<input type="checkbox" name="hobby" value="4" checked>4

<div>
    <input type="date">
</div>

<div>
    <input type="file">
</div>

</body>
</html>

標(biāo)題名稱：HTML標(biāo)簽
文章源于：http://bm7419.com/article42/ijhpec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站策劃、微信小程序、面包屑導(dǎo)航、自適應(yīng)網(wǎng)站、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站