HTML基礎之HTML標籤

時間 2019-11-18

標籤 html 基礎標籤欄目 HTML 简体版

原文原文鏈接

HTML:超文本標記語言css

html代碼實際上就是一套可以被瀏覽器識別的規則代碼，由一個個標籤組成。html

後端與前端交互方式：前端

一、後端直接返回瀏覽器可以識別的html代碼json

二、後端返回數據，前端替換html中的指定數據後端

基本的HTML頁面瀏覽器

<!DOCTYPE html>   <!--始終位於頁面的第一行，告訴瀏覽器這是一個HTML頁面-->

<html lang="en">   <!--html標籤(只能有一個)，指定語言-->

<head>    <!--<head> 和</head>之間爲文檔的頭部 -->
    <meta charset="UTF-8">  <!--設置編碼類型-->
    <title>Title</title>     <!--標題-->
</head>

<body>   <!--<body> 和</body>之間爲文檔的主體部分，也是用戶能看到的部分-->
</body>

</html>

HTML標籤網絡

一、自閉和標籤post

二、主動閉合標籤網站

html head

head 標籤中的內容都是爲瀏覽器和搜索引擎準備的

<!DOCTYPE html>
<html lang="en">
<head>
    <!--指定編碼-->
    <meta charset="UTF-8">
    <!--每1秒鐘刷新一下-->
    <meta http-equiv="refresh" content="1">
    <!--1秒後跳轉到www.baidu.com-->
    <meta http-equiv="refresh" content="1;http://www.baidu.com">
    <!--關鍵字檢索，網絡爬蟲就根據這個keywords-->
    <meta name="keywords" content="besttest">
    <!--網站描述-->
    <meta name="description" content="測試培訓">
    <!--ie打開時以最高兼容模式打開-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 在head中所寫的全部標籤所有都看不到，是內部的一些東西，除了一個標籤就是title-->
    <title>金牛座</title>
    <!--rel表明告訴瀏覽器我要把link做爲title的圖標-->
    <link rel="shortcut icon" href="http://ui.imdsx.cn/static/image/dsx_Small.jpg">
    <!--引入css樣式表-->
    <link rel="stylesheet" href="xxx.css">
    <!--css樣式-->
    <style></style>
    <!--引入js或編寫js-->
    <script src="tmp.js"></script>
</head>
<body>

</body>
</html>

html body

p、br、h、form、div、span、input、label、空格(&nbsp)、大於號(&gt) 、小於號 (&lt)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>金牛座</title>
</head>

<body>
<!--p--段落標籤-->
<!--br---換行標籤-->
<p>馬雲說：<br>人生在世，老是要經歷些悲歡離合、人情冷暖，自9月10日宣佈一年後將退休後，阿里巴巴董事局主席馬雲受到了更多的關注，今天馬雲在達沃斯論壇上對諸多疑問一一做答。</p>

<!--標題標籤  h1-h6 ,h1最大 -->
<h1>標題標籤</h1>
<h2>標題標籤</h2>
<h3>標題標籤</h3>
<h4>標題標籤</h4>
<h5>標題標籤</h5>
<h6>標題標籤</h6>

<!--div是塊級標籤(僞白板標籤)  不管本身有多大都佔滿一整行-->
<div>水電費</div>

<!--span是行內標籤 或 白板標籤 或叫 內聯標籤，沒有附着任何css樣式  本身有多大就佔多大位置-->
<span>水電費</span>

<!--input標籤 type有不少類型，默認爲文本框text-->
<!--type="text"  placeholder-默認提示-->
<!--name屬性是跟後端交互的key，value屬性是跟後端交互的值  向後端傳的json串{"username":admin,"passwd":"123456"}-->
<!--placeholder-默認提示-->
<input type="text" placeholder="請輸入用戶名：" value="admin" name="username">

<!--type="password"密文-->
<input type="password" placeholder="請輸入密碼："  name="passwd">

<!--type="radio"單選-->
<!--經過name屬性控制只能單選，當name相同時，幾個選項是互斥的-->
<span>男</span><input type="radio" name="sex">
<span>女</span><input type="radio"  name="sex">

<!--type="checkbox"多選框  {"check":[1,2,3]} 默認值checked="checked"-->
<span>奔馳</span> <input type="checkbox" name="check"  value="1"  checked="checked">
<span>寶馬</span> <input type="checkbox" name="check" value="2">
<span>奧迪</span> <input type="checkbox" name="check" value="3">

<!--type="file"上傳文件-->
<input type="file">

<!--表單標籤-->
<form action="http://www.baidu.com" method="post">
    <div>
        <span>用戶名：</span>
        <input type="text" placeholder="請輸入用戶名">
        <label for="i1">用戶名</label>   <!--label擴展input的可點擊範圍，label和input經過id來關聯-->
        <input id="i1" type="text" placeholder="請輸入用戶名">
    </div>
    <div>
       <span>密&nbsp&nbsp碼：</span>   <!--瀏覽器會把文本中的多個空格解析成一個-->
        <input type="password" placeholder="請輸入密碼">
    </div>
<div>
    <!--button若是想要有操做 只能經過js綁定事件來作-->
    <input type="button" value="登陸">
    <!--submit按鈕若是和form表單連用則會直接觸發請求-->
    <input type="submit" value="註冊">
    <!--reset按鈕若是和form表單連用則會直接觸發重置操做-->
    <input type="reset">
</div>
</form>

<!--富文本標籤-->
<textarea></textarea>
<!--特殊轉譯符-->
<!--&lt 表明<   &gt 表明>-->
&ltp&gt&lt/p&gt

<!--下拉框標籤-->
<select name="s1">
    <option value="1">中秋</option>
    <option value="2">國慶</option>
    <option value="3" selected="selected">都過不上</option>
</select>

<!--分組下拉框-->
<select>
    <option>請選擇城市</option>
    <optgroup label="黑龍江">
        <option>哈爾濱</option>
        <option>牡丹江</option>
    </optgroup>
    <optgroup label="河北">
        <option>石家莊</option>
        <option>秦皇島</option>
    </optgroup>
</select>

<!--超連接標籤-->
<a href="http://www.baidu.com">跳轉到百度</a>

<!--圖片標籤-->
<img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg" alt="圖片加載失敗的文案" title="鼠標懸浮的圖案">

<!--列表 點的列表-->
<ul>
    <li>第一列</li>
    <li>第二列</li>
</ul>

<!--列表 數字列表-->
<ol>
    <li>第一列</li>
    <li>第二列</li>
</ol>

<!--表格-->
<table border="1">
    <thead>      <!--thead 表頭-->
    <tr>
        <th>id</th>
        <th>請求方式</th>
        <th>請求參數</th>
        <th colspan="2">操做</th>    <!--colspan 佔幾列-->
    </tr>
    </thead>
    <tbody>      <!--tbody 表體-->
    <tr>
        <td>1</td>
        <td>post</td>
        <td>{}</td>
        <td>修改</td>
        <td>執行</td>
    </tr>
     <tr>
        <td>1</td>
        <td>post</td>
        <td>{}</td>
        <td>修改</td>
        <td rowspan="2">執行</td>   <!--rowlspan 佔幾行-->
    </tr>
     <tr>
        <td>1</td>
        <td>post</td>
        <td>{}</td>
        <td>修改</td>
    </tr>
    </tbody>
</table>
</body>
</html>

相關標籤/搜索

html+css+javascript+html

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。