HTM基礎之HTML標籤

時間  2019-11-18
標籤 htm 基礎 html 標籤 欄目 HTML 简体版
原文   原文鏈接

HTML（超文本標記語言）css

html代碼實際上就是一套可以被瀏覽器所識別的規則代碼，由一個個標籤組成。html代碼就是一大長串字符串，而這種字符串的格式正好可以被瀏覽器所識別，也就有了咱們的WEB頁面。html

後端與前端交互方式前端

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

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

經常使用的HTML標籤：瀏覽器


<head>
    <!-- 指定編碼 -->
    <meta charset="UTF-8">
    <title>Darren</title>
    <!--引入css-->
    <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/favicon.ico">
    <!--每一秒刷新一次-->
    <!--<meta http-equiv="refresh" content="1">-->
    <!-- 關鍵字檢索 -->
    <!--<meta name="keywords" content="大師兄">-->
    <!--每一秒跳轉到url-->
    <!--<meta http-equiv="refresh" content="1;Url=http://www.imdsx.cn">-->
    <!-- 網站描述-->
    <!--<meta name="description" content="大師兄是名低調的測試工程師">-->
    <!-- ie打開時以最高的兼容模式打開 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--寫css標籤的位置-->
    <style>   </style>
    <!--引入js和編寫js-->
    <script> </script>
       <!--title圖標-->
    <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/favico.ico">
    <!--引入css文件-->
    <link rel="stylesheet" href="tmp.css">
</head>
<body>
<!--<h1> 11111</h1>-->
<!--<br/>換行-->
<!--<p></p>段落標籤-->
<!--<p>-->
<!--年輕,就是拿來折騰的。讓本身具有獨立生活的能力，具有一技之長的資本，是須要無數個夜晚的靜思，<br/>-->
<!--無數寂寞時光的堆積而成的。-->
<!--別在最該拼搏的年紀選擇穩定，世界上最大的不變是改變，只有天天進步，才能擁抱生命的無限可能！<br/>-->
<!--你覺得你給對方留了電話存了微信，應該彼此也能互相幫忙，卻忘記了一件很重要的事情，只有關係平等，才能互相幫助。-->
<!--不要爲了戶口丟掉生活，爲了穩定丟掉青春，爲了平淡丟掉夢想，由於你所謂的穩定，不過實在浪費生命。-->
<!--真正的勇者不是狼狽的逃脫，而是用閒暇時間，磨練本身。-->
<!--只有等現實的日子富足了，能力夠強了，才能夠去追求那些美好的生活狀態，才該去追求那些偉大的夢。不然那些夢幻般的生活，都只是空中閣樓，不堪一擊。-->
<!--生活是本身的，本身都不求進取，憑什麼讓別人給你美好的將來？</p>-->
<!--標題標籤--1-6  1級別最高-->
<!--自動閉合標籤--不是成對的>
<meta> <link><input>
<!--主動閉合標籤-->

<!--一、塊級標籤 二、內連標籤（行內標籤）-->
<!--塊級標籤：本身佔一整行-->
<!--<h1>大師兄</h1>-->
<!--<h2>大師兄</h2>-->
<!--<h3>大師兄</h3>-->
<!--<h4>大師兄</h4>-->
<!--<h5>大師兄</h5>-->
<!--<h6>大師兄</h6>-->
<!--div至關於一個白板什麼都沒有一切要經過css進行裝飾，經過css樣式裝飾後能夠變成任意標籤-->
<!--<div>最真實</div>-->
<!--內連標籤和行內標籤用多少佔多少-->
<!--span是一個真正的白板標籤，經過css樣式裝飾後能夠變成任意標籤-->
<!--<span>n你猜吧</span>-->

<!--文本框標籤<input>-->
<!--文本框-->
<!--<input type="text" name=username">-->
<!--<input type="text" value="請輸入用戶名" name="username">-->
<!--&lt;!&ndash;文本框提示置灰顯示&ndash;&gt;-->
<!--<input type="text" placeholder="請輸入用戶名">-->
<!--&lt;!&ndash;密碼輸入框&ndash;&gt;-->
<!--<input type="password" name="passwd">-->
<!--多選框-->
<!--<input type="checkbox"> -->
<!--&lt;!&ndash;默認勾選的複選框&ndash;&gt;-->
<!--<input type="checkbox" checked="checked">-->
<!--單選框-->
<!-- 單選框 radio name相同 勾選是互斥-->
<!--<input type="radio" name="sex" value="1" checked="checked"><span>男</span>-->
<!--<input type="radio"name="sex"value="2"><span>女</span>-->
<!--按鈕 只是一個單純的按鈕，點擊沒反應,想提交數據必須結合js綁定事件（ajax）,value是按鈕上的文字-->
<!--<input type="button" value="login">-->
<!-- 提交 提交表單須要用submit -->
<!-- reset 還原表單中填寫的數據到默認 -->
<!--<input type="reset" value="重置">-->
<!--若是submit和form連用，直接請求form對應的action的目標的url-->
<!--<input type="submit" value="提交">-->
<!--表單標籤 能夠理解爲載體至關於紙，input至關於在紙上的文字-->
<!--action就是提交到哪裏 method就是請求的方法-->
<!--&lt;!&ndash;ajax提-->
<!--<form action="https://www.baidu.cn" method="post">-->
    <!--<input type="text" placeholder="請輸入用戶名">-->
    <!--<input type="text" placeholder="請輸入密碼">-->
    <!--<input type="button" value="登錄">-->
    <!--<input type="submit" value="提交">-->
    <!--<input type="reset" value="重置">-->
<!--</form>-->

<!--label和input聯合運用，增長input的點擊範圍可直接點擊文字就輸入(輸入框獲取到焦點顯示光標)
for:映射到input的id；id是一種選擇器，在整個html是惟一的；class也是
-->
<!--<label for="i1">用戶名</label><input type="text" id="i1">-->
<!--<label for="li1">用戶名</label><input type="text"id="li1">-->
<!--多行文本textarea的文本內容須要寫在兩個標籤之間沒有value屬性-->
<!--<textarea>特別的愛，給特別的你</textarea>-->

<!--下拉框-select,option裏面是內容-->
<!-- select中size顯示幾個，mutiple表示按住ctrl能夠多選-->
<!--option裏面selected=selected默認選中的-->

<!--<select size="4" multiple="multiple"name="城市">-->
    <!--<option selected="selected" value="1">鐵嶺</option>-->
    <!--<option value="2">雞西</option>-->
    <!--<option value="3">大連</option>-->
    <!--<option value="4">瀋陽</option>-->
<!--</select>-->
<!--下拉分組 label後面是分組的名字-->
<!--<select>-->
    <!--<optgroup label="黑龍江">-->
        <!--<option selected="selected" value="1">鐵嶺</option>-->
        <!--<option value="2">雞西</option>-->
        <!--<option value="3">大連</option>-->
        <!--<option value="4">瀋陽</option>-->
    <!--</optgroup>-->
        <!--<optgroup label="山東">-->
        <!--<option value="1">青島</option>-->
        <!--<option value="2">煙臺</option>-->
        <!--<option value="3">日照</option>-->
        <!--<option value="4">濟南</option>-->
    <!--</optgroup>-->
<!--</select>-->

<!--超連接標籤 target屬性爲以什麼方式跳轉-->
<!--_blank新tab頁跳轉，去掉a標籤的下劃線經過屬性style="text-decoration:none"-->
<!--<a href="https://www.baidu.com" target="_blank" style="text-decoration:none">百度</a>-->
<!--錨點  如：#test-p   -->
<!--a標籤還能夠作錨點，經過id進行對應關係的映射 錨點能夠做爲跳轉 -->
<!--<div style="height: 1000px" id="li"> </div>-->
<!--<a href="#li">回到頂部</a>-->
<!--特殊符號&nbsp表明空格-->
<!--&gt；表明大於號，&lt；表明小於號-->
<!--<a href="s.html">大&nbsp&nbsp&nbsp&nbsp 師        兄</a>-->

<!--圖案片標籤，src是圖片的位置；alt圖片加載失敗後顯示alt的文案，
title鼠標懸浮在圖片上顯示的文字-->
<!--<img src="dsx.jpg" alt="測試" title="孩子和狗">-->
<!--列表標籤。形式的標籤-->
<!--<ul>-->
    <!--<li>123</li>-->
    <!--<li>123</li>-->
<!--</ul>-->
<!--列表標籤數字形式的標籤-->
<!--<ol>-->
    <!--<li>abc</li>-->
    <!--<li>abc</li>-->
<!--</ol>-->
<!--分層列表dl ,其中dt外層，dd內層-->
<!--<dl>-->
    <!--<dt>山東</dt>-->
    <!--<dd>青島</dd>-->
    <!--<dd>日照</dd>-->
    <!--<dt>北京</dt>-->
    <!--<dd>懷柔</dd>-->
    <!--<dd>順義</dd>-->
<!--</dl>-->

<！--table 表格標籤 thead：表頭 th：表頭行 tbody：內容 tr：行 td：列 boder：表格的邊框 coslpan：td佔幾列 rowspan：tr佔幾列-->
<table border="1">    <thead>         <tr>             <th>ID</th>             <th>課程</th>             <th>姓名</th>             <th>年齡</th>             <th colspan="2">操做</th>         </tr>    </thead>     <tbody>           <tr>                <td>1</td>                <td rowspan="3">計算機</td>                <td>阿霞</td>                <td rowspan="3">18</td>                <td>編輯</td>                <td>刪除</td>           </tr>            <tr>                 <td>2</td>                 <td>阿磊</td>                 <td>編輯</td>                 <td>刪除</td>            </tr>             <tr>                  <td>3</td>                  <td>阿西</td>                  <td>編輯</td>                  <td>刪除</td>             </tr>     </tbody></table></body></html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程