01HTML

時間  2019-12-07
標籤 01html html 欄目 HTML 简体版
原文   原文鏈接

1.認識HTML標記

2.元信息標記meta

2.1設置頁面關鍵字

 

2.2設置頁面說明

 

2.3定義編輯工具

 

2.4添加做者信息

 

2.5設置網頁文字及語言

2.6設置網頁的定時跳轉

<html>
<head>
    <!--html註釋-->
    <!--標題-->
    <!--<title> this is a tile </title>-->
    <title> 這是標題</title>
    <!--告訴瀏覽器使用什麼碼錶解釋html-->
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <!--搜索引擎-->
    <meta name="keywords" content="java培訓，Python培訓"/>
    <meta name="description" content="學習IT"/>
</head>
<body>

</body>
</html>

3.文本標籤

<html>
<head>
    <title> 文本標籤</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
</head>
<body>
<!--標題-->
<h1>標題1 </h1>
<h2 align="center">標題2</h2> <!-- align 設置標題的對齊方式-->
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>
<!--水平線-->
<hr/>
<!--段落-->
<p>這是第一段的內容這是第一段的內容這是第一段的內容這是第一段的內容這是第一段的內容
    這是第一段的內容這是第一段的內容這是第一段的內容這是第一段的內容這是第一段的內容</p>
<p>這是第二段的內容這是第二段的內容這是第二段的內容這是第二段的內容這是第二段的內容
    這是第二段的內容這是第二段的內容這是第二段的內容這是第二段的內容這是第二段的內容</p>
<!--段落縮進-->
<blockquote>
    這是第三段的內容這是第三段的內容這是第三段的內容這是第三段的內容這是第三段的內容
    這是第三段的內容這是第三段的內容這是第三段的內容這是第三段的內容這是第三段的內容
    這是第三段的內容這是第三段的內容這是第三段的內容這是第三段的內容這是第三段的內容
    這是第三段的內容這是第三段的內容這是第三段的內容這是第三段的內容這是第三段的內容
</blockquote>
<!--上下標，用於公式-->
y=x的平方 -- y = x<sup>2</sup><br/>
y = log以2爲底的x -- y = log<sub>2</sub>x
<!--原樣輸出 按照編輯器的效果，原樣輸出-->
<pre>
         靜夜思
 牀前明月光，疑是地上霜。
 舉頭望明月，低頭思故鄉。
</pre>
<!--有序列表 ol li -->
你最喜歡的明星
<ol>
    <li>劉德華</li>
    <li>成龍</li>
    <li>楊冪</li>
</ol>
<ol type="a">  <!--type屬性!-->
    <li>劉德華</li>
    <li>成龍</li>
    <li>楊冪</li>
</ol>
<!--無序列表 ul li -->
<ul>
    <li>學生管理</li>
    <li>教師管理</li>
    <li>工人管理</li>
</ul>
<ul type="circle">
    <li>學生管理</li>
    <li>教師管理</li>
    <li>工人管理</li>
</ul>
<!--項目列表標籤 dl dt dd -->
軟件公司的組織架構
<dl>
    <dt>技術總監</dt>
    <dd>工程師1</dd>
    <dd>工程師2</dd>
    <dd>工程師3</dd>
    <dt>財務總監</dt>
    <dd>財務1</dd>
    <dd>財務2</dd>
    <dd>財務3</dd>
</dl>
<!--行內標籤（span）和塊標籤（div）
在HTML中使用很是少，在CSS中使用多
-->
<span>span的內容</span>
<div>div的內容</div>
</body>
</html>

4.超連接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超連接標籤</title>
</head>
<body>
<!-- a 超連接標籤：
    經常使用的屬性：
        href  表示連接到的地址（文件）
        target  打開資源方式     _self: 當前窗口打開， _blank: 新窗口打開


    協議執行資源的基本流程（超連接的原理）：
        使用協議到本地計算機的註冊表中查詢是否有對應協議的軟件（程序），有就執行，沒有就不執行。

    常見的協議：
      file://   本地文件協議（本地或局域網）  在href中不寫就是使用這個默認協議
      http://    http協議（執行流程）  一般鏈接到域名或IP地址
      thunder： 迅雷下載軟件的協議
      mailto:   調用本地的發送郵件的客戶端軟件


     超連接做用；
         1）連接到資源
        2）做爲錨點使用
            打錨點： <a name="錨點名稱"></a>
            去到錨點： <a href="#錨點名稱">內容</a>

         -->
<a name="top"></a> <!--定義一個錨點-->
<!--<a href="03.html文本標籤.html#list" target="_blank">超連接</a><br/>-->
<!--<a href="../1.jpg">連接到圖片</a><br/>-->
<a href="http://www.baidu.com">連接到百度</a><br/>
<a href="http://www.moive.com/fuzhouzhe.avi">高清《復仇者聯盟2》(普統統道)</a><br/>
<a href="thunder://www.moive.com/fuzhouzhe.avi">高清《復仇者聯盟2》(迅雷通道)</a><br/>
<br/><a href="#ch01">去到第一章</a> <！--連接到錨點-->
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="ch01"></a><!--定義一個錨點-->
第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容第一章內容<br/>
<a href="#top">返回頂部</a>

</body>
</html>

5.圖像標籤

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>圖像標籤</title>
</head>
<body>
<!-- img 圖像標籤
  經常使用屬性：
          src :  表示圖片源位置
        width: 圖片寬度
        height: 圖片高度
        alt: 替代文本。當圖片的src屬性失效時，alt屬性的內容就會生效
        title: 提示文本。當鼠標放到圖片上面出現。

        地圖（熱點區域）：map
        熱點： area

 -->
<!--<img src="../picture/1.jpg" alt = "這是一張美女圖片" usemap="#Map" width="100 px" height="124px" title="提示文字"><br>-->
<!--<map name="Map"><area shape="rect" coords="196,338,301,398" href="http://www.baidu.com" target="_self"/></map>-->
<img src="../picture/1.jpg" alt="這是一張美女圖片" border="0" usemap="#Map" title="提示文字"/>
<map name="Map" id="Map">
  <area shape="rect" coords="196,338,301,398" href="http://www.baidu.com" target="_self" />
  <area shape="circle" coords="139,191,145" href="http://www.baidu.com" target="_blank" />
</map>
</body>
</html>

6.轉義字符

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轉義字符</title>
</head>
<body>
&lt;h3&gt;標題3&lt;/h3&gt;<br/>
IT教程&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;java培訓<br/>
IT教程<sup>&reg;</sup> <br/>版權全部<sup>&copy;</sup>
</body>
</html>

7.表格標籤

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格標籤</title>
</head>
<body>
<!--
  標籤：
   table 表格,默認沒有邊框
   tr   行
   td   單元格
   th   表頭
   caption  標題

   經常使用的屬性：
       border  表格的邊框
       width  寬度
       heigth 高度
       align   對齊方式。 left: 左對齊   center:居中  right：右對齊
       rowspan  行合併。把多行的單元格合併
       colspan  列合併。把多列的單元格合併

-->
<table border="2px" width="400px" height="200px" align="center">
    <caption>2018年成績單</caption>
    <tr>
        <th>姓名</th> <!-- 表頭 -->
        <th>班級</th>
        <th>學生</th>
    </tr>
    <tr>
        <td rowspan="2">狗娃</td> <!--行合併-->
        <td>計算機1班</td>
        <td>80</td>
    </tr>
    <tr>
        <td>經濟1班</td>
        <td>88</td>
    </tr>
    <tr>
        <td>狗勝</td>
        <td>計算機2班</td>
        <td>75</td>
    </tr>
    <tr>
        <td>狗蛋</td>
        <td>軟件1班</td>
        <td>85</td>
    </tr>
    <tr>
        <td colspan="2" align="center">平均分</td>
        <td>85</td>
    </tr>
</table>
</body>
</html>

8.表單標籤

8.1提交表單

8.2表單名稱

 

8.3傳送方法

 

8.4編碼方式

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單標籤</title>
</head>
<body>
<form>
    <!-- 單行輸入域：
    經常使用的屬性
        value: 該輸入的默認值
         name: 這個必須填。該name的屬性值用於給後臺程序獲取該標籤輸入的內容
         size: 能夠輸入的字符數量
     -->
    用戶名：<input type="text" value="4-10位的字母或數字" name="userName" size="25"/> <br>
    <!--密碼輸入域： 以非明文的效果獲取用戶輸入的數據。 -->
    密碼：<input type="password" name="userPwd"><br>
    <!-- 單選：
      注意：
          1)若是是同一組的單選選項就使用相同的name屬性值
          2)單選按鈕的value屬性必定填。這個value的值就是發送給後臺程序的內容
          -->
    性別：<input type="radio" name="gender" value="男"/>男
    <input type="radio" name="gender" value="女"/>女<br/>
    <!-- 多選按鈕：
           注意：
               1）若是是同一組的多選選項就使用相同的name屬性值
               2)多選按鈕的value屬性必定填。這個value的值就是發送給後臺程序的內容
       -->
    <input type="checkbox" name="hobit" value="籃球"/>籃球
    <input type="checkbox" name="hobit" value="足球"/>足球
    <input type="checkbox" name="hobit" value="兵乓球"/>兵乓球<br/>
     籍貫：
    <!--
        下拉選項：
            注意：
                1）name屬性就是後臺程序獲取的標記
                2)下拉選項的option標籤中的value屬性必定填。這個value的值就是發送給後臺程序的內容
     -->
    <select name="jiguan">
        <option value="廣東">廣東</option>
        <option value="廣西">廣西</option>
        <option value="湖南">湖南</option>
    </select><br />
     <!-- 隱藏域：用於攜帶數據，可是在頁面上不會顯示效果
        注意：
                1）name屬性就是後臺程序獲取的標記
                2) 這個value的值就是發送給後臺程序的內容
     -->
    <input type="hidden" name="id" value="001"/>
      我的簡介：
   <!--多行輸入域：能夠輸入多行文本
       rows: 一共有幾行
    cols: 一行能夠輸入幾行字符
    -->
       <textarea rows="5" cols="20" name="info"></textarea>

    <!-- 提交按鈕： 點擊這個按鈕，form中的所有數據就會發送到後臺
        value: 表示按鈕顯示的文本
    -->
    <input type="submit" value="註冊"/>
    <!--
        重置按鈕： 點擊這個按鈕，form中的全部標籤返回到初始默認狀態
     -->
    <input type="reset" />
</form>
</body>
</html>

9.框架標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>頭部頁面</title>
</head>
<body>
<h3>學生選課系統</h3>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>底部頁面</title>
</head>
<body>
<center>江西財經大學<sup>&reg;</sup>&nbsp;&nbsp;版權全部<sup>&copy;</sup></center>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左邊菜單頁面</title>
</head>
<body>
菜單選項
<ul>
    <!-- 超連接標籤的target屬性還能夠指定一個frame的名稱，若是指定的是一個frame的name，那麼在指定這個frame中打開href指定的頁面 -->
    <li><a href="student.html" target="main">學生管理</a></li>
    <li>課程管理</li>
    <li>教師管理</li>
    <li>選課管理</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中間主頁面</title>
</head>
<body>
歡迎登錄學生選課系統
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>學生管理頁面</title>
</head>
<body>
<h3 align="center">學生信息列表</h3>
<table border="1" align="center" width="500px" height="300px">
    <tr>
        <th>姓名</th>
        <th>年齡</th>
        <th>班級</th>
    </tr>
    <tr>
        <td>張三</td>
        <td>20</td>
        <td>計算機1班</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>20</td>
        <td>計算機1班</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>20</td>
        <td>計算機1班</td>
    </tr>
    <tr>
        <td>陳六</td>
        <td>20</td>
        <td>計算機1班</td>
    </tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主頁面</title>

</head>
<frameset rows="10%,*,10%">
    <frame src="header.html" name="header"/>
        <frameset cols="20%,*">
            <frame src="menu.html"/>
            <frame src="main.html" name="main"/>
        </frameset>
    <frame src="footer.html"/>
</frameset>
<body>

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

</head>
<frameset rows="10%,*,10%">
    <frame src="header.html" name="header"/>
        <frameset cols="20%,*">
            <frame src="menu.html"/>
            <frame src="main.html" name="main"/>
        </frameset>
    <frame src="footer.html"/>
</frameset>
<body>

</body>
</html>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程