JAVA--高級基礎開發HTML

時間  2019-12-16
標籤 java 高級 基礎 開發 html 欄目 Java 简体版
原文   原文鏈接

Day01【HTML基礎入門】

  • HTML概述
    1. 什麼是HTML?
  1. HTML: 是一門超文本標記語言(HyperText Markup Language)；
  2. 超文本:就是指頁面能夠包含圖片、超連接等非文字的內容。
  3. 標記:就是使用標籤的方法將須要的內容包括起來。

超文本標記語言主要分爲兩部分,頭部部分(head)和主體部分(body),其中頭部提供關於網頁的信息,主體部分包括網頁的具體內容。html

    1. HTML能作什麼?

Html用於編寫網頁,平時上網經過瀏覽器咱們看到的大部分頁面都是用HTML編寫而成的，那麼在瀏覽器訪問網頁時，咱們能夠經過右擊查看網頁源代碼，這樣就看到具體的HTML代碼。前端

  1. 網頁內容包含HTML代碼、CSS代碼、javaScript代碼。
  • HTML代碼:用於展現須要顯示的數據。
  • CSS代碼: 使顯示的數據更加好看。
  • JavaScript代碼: 使整個頁面顯示的數據更加有動畫的效果。
  1. 網頁根據內容可分爲靜態的網頁和動態的網頁:
  • 靜態網頁: 就是編寫以後在瀏覽器不在改變的網頁，HTML用於編寫靜態的網頁。
  • 動態網頁: 會根據不一樣的狀況顯示不一樣的內容。
    1. HTML語言的特色:
  1. HTML文件不須要編譯，直接使用便可。
  2. HTML文件的後綴名爲 .Html或者 .Htm。
  3. HTML機構都是由標籤組成的。
  4. 其中的 標籤名是定義好的，咱們只須要使用便可。
  5. 標籤名不區分大小寫。
  6. 在一般的狀況下標籤名由開始標籤和結束標籤組成。
  7. 若是沒有結束標籤建議以<br/結尾>
  8. HTML包括兩部分，Head(頭)和body(體)。

Html標準示例:java

<html>瀏覽器

<head>服務器

<title>這是標題</title>ide

</head>字體

<body>動畫

這裏是正文ui

</body>編碼

</html>

以上的標籤組成了html頁面的基本結構，現將全部的標籤進行陳述：

  1. <HTML>：真個頁面的根標籤。
  2. <Head>：頭標籤，用於引入腳本，導入樣式，通常狀況下頭標籤的內容在瀏覽器中不顯示。
  3. <title>：子標籤，用於顯示瀏覽器的標題。
  4. <body>：標籤體，用於顯示整個網頁，咱們編寫的html代碼就是在標籤體中。
    1. hTML環境的搭建

使用「記事本」開發效率低，現階段比較流程的前端 IDE（集成開發環境）是 HBuilder、WebStorm，爲了統一環境，要求全部同窗的都安裝 WebStorm前端開發軟件。

<!DOCTYPE html>

<html lang="en">

<head>

     <!-- 設置 html 頁面的編碼 -->

    <meta charset="UTF-8">

    <title>HTML網頁的技術</title>

</head>

<body>

          正文

</body>
  1. 在模板代碼中，咱們使用到了 HTML 註釋

格式：<!—註釋內容 -->

  1. 註釋特色：
  • 瀏覽器查看時，不顯示。右鍵查看源碼能夠看到。
  • 註釋標籤不能嵌套。
  • 註釋特殊用法，爲不一樣的瀏覽器提供不一樣的解決方案 （瞭解）.
    1. 標籤介紹
  • 標題標籤: <hn>在html中有六級標題
  1. <h1>標題內容</h1>
  2. <h2>標題內容</h2>
  3. <h3>標題內容</h3>
  4. <h4>標題內容</h4>
  5. <h5>標題內容</h5>
  6. <h6>標題內容</h6>

  其中: h1—h6：字體依次遞減,<h1>最大.<h6>最小。

  • 段落標籤: <p>: 用來定義段落。
  • 換行標籤：<br/>：單標籤，用來換行
  • 分隔線標籤: <hr/>:展現一條水平線。
  • <hr/>標籤裏面的屬性:
  • Color：顏色
  • Width: 寬度
  • Size: 高度
  • aling：對齊方式
  • Center: 居中
  • Left：居左
  • Right：居右
  • 加粗<b>:給字體加粗
  • 斜體<i>：給字體設置成斜體
  • 字體標籤<font>：字設置字體的標籤。
  • <font>字體標籤中的屬性:
  • size屬性設置字體的大小：值的範圍的1到7,HTML默認爲3.
  • color屬性用來設置字體的顏色。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>HTML網頁的技術</title>

</head>

<body>

     <!-- <hn>標籤一級標題最大，六級標題最小-->

     <h1>一級標題</h1>

     <h2>二級標題</h2>

     <h3>三級標題</h3>

     <h4>四級標題</h4>

     <h5>五級標題</h5>

     <h6>六級標題</h6>

     <!--</hr>標籤的做用就是在頁面中建立一條水平分割線-->

     <hr/>

     <!--<p>段落標籤-->

     <p>甘肅省天水市清水縣</p>

     <p>山東省聊城市東昌府區</p>

     <!--<b>標籤 設置粗體-->

     <b>李文傑、陳天意、郭豔星、郭朝旭、桑鳳嬌</b><br/>

     <!--<i>標籤-設置斜體  <br/>標籤設置換行-->

     <i>李文傑、陳天意、郭豔星、郭朝旭、桑鳳嬌</i><br/>

 

     <!--<font>字體標籤-->

     <!-- size屬性設置字體的大小：值的範圍的1到7-->

     <!--color屬性用來設置字體的顏色-->

     <font size="7">攻城獅VS程序猿</font><br>

     <font size="7" color="red">攻城獅VS程序猿</font>

      <!--<b>格式化的標籤-->

</body>

</html>
    1. 列表標籤
  • 列表標籤:<ol>和<ul>
  • <ol>：定義有序的列表。
  1. type列表的類型取值：：A、a 、I 、i 、1 等。
  • <ul>：定義無序的列表。
  1. Type符號的類型: disc 實心圓、square 方塊 、circle 空心圓
  • <li>: 是<ul>或者<ol>的子標籤。

<!DOCTYPE html>
<html lang="en">
<head>
     <!-- 設置 html 頁面的編碼，今天最後講解-->
    <meta charset="UTF-8">
    <title>HTML網頁的技術</title>
</head>
<body>
              <ol type="A">
                   <li>有序的列表標籤</li>
                   <li>有序的列表標籤</li>
                   <li>有序的列表標籤</li>
                   <li>有序的列表標籤</li>
                   <li>有序的列表標籤</li>
                   <li>有序的列表標籤</li>
                   <li>有序的列表標籤</li>
              </ol>
              <ul type="squaqe">
                   <li>無序的列表標籤</li>
                   <li>無序的列表標籤</li>
                   <li>無序的列表標籤</li>
                   <li>無序的列表標籤</li>
                   <li>無序的列表標籤</li>
                   <li>無序的列表標籤</li>
                   <li>無序的列表標籤</li>
              </ul>
</body>
</html>

 

 

7 超連接標籤

  • 超連接標籤: <a>超連接，是在 html 頁面提供一種能夠訪問其餘位置的實現方式。
  • 屬性: href:用戶肯定頁面須要顯示的路徑（URL）。
  • Target：肯定以何種方式打開href所設置的頁面。經常使用的取值:
  1. _black: 在新的窗口中打開href 肯定的頁面。
  2. _self默認:使用href肯定的頁面替換當前的頁面。

示例：

<li><a href="http://www.baidu.com" target="_self">百度</a></li>
<li><a href="http://www.163.com" target="_blank">網易</a></li>

8 圖片標籤

  • 圖片標籤: <img>: 在html頁面中引入一張圖片。
  1. 屬性：src：指定須要顯示圖片的URL。
  2. 屬性：alt：圖片沒法顯示時替代的文本。
  3. 屬性：width：設置圖片的寬度。
  4. 屬性：heigth：設置圖片的高度。

<img src="..img/a.jpg" width="100%" height="100%" alt="主人圖片被dog吃了"/>

9 表格標籤

  • <Table>標籤：也就是表格標籤。Html中表格由<table>標籤以及<tr><th>組成。
  • <table>：標籤是父標籤，至關於整個表格的容器。
  • 屬性: border:表格邊框的高度。
  • 屬性: width:表格的寬度。
  • 屬性: cellpadding: 單元邊沿與其內容之間的空白。
  • 屬性: cellcpacing: 單元格之間的空白。
  • 屬性: bgcolor：表格的背景顏色。
  • <tr>標籤:用來定義行的
  • 屬性: align: 水平對齊方式：left、center、right.
  • 屬性:valign：垂直對齊方式：top、middle、mottom.
  • <td>標籤:用於定義表格的單元格，也就是一個列。
  • 屬性：colspan: 單元格可橫跨的列數。
  • 屬性：rowspan：單元格可橫跨的行數。
  • 屬性：align:單元格內容水平的對齊方式：left、center、right
  • 屬性: nowrap：單元格內的內容是否折行。
  • 屬性: valign：單元格中的內容垂直的對齊方式。
  • <th>標籤用於定義表頭。單元格內的內容默認居中、加粗。

表格標籤的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格標籤</title>
</head>
<body>
      <table border="100%" width="100%" align="center" bgcolor="aqua">
                  <tr>
                      <th>ID</th>
                      <th>姓名</th>
                      <th>性別</th>
                      <th>年齡</th>
                      <th>生日</th>
                      <th>愛好</th>
                  </tr>
                  <tr align="center">
                      <td>1001</td>
                      <td>李文傑</td>
                      <td>男</td>
                      <td>23</td>
                      <td>1996</td>
                      <td>羽毛球</td>
                  </tr>
                  <tr align="center">
                      <td>1002</td>
                      <td>桑鳳嬌</td>
                      <td>女</td>
                      <td>22</td>
                      <td>1998</td>
                      <td>羽毛球</td>
                  </tr>
                  <tr align="center">
                      <td>1003</td>
                      <td>陳天意</td>
                      <td>男</td>
                      <td>23</td>
                      <td>1996</td>
                      <td>乒乓球</td>
                  </tr>
                  <tr align="center">
                      <td>1004</td>
                      <td>郭朝旭</td>
                      <td>男</td>
                      <td>27</td>
                      <td>1993</td>
                      <td>籃球</td>
                  </tr>
                  <tr align="center">
                      <td>1005</td>
                      <td>王智雅</td>
                      <td>女</td>
                      <td>22</td>
                      <td>1998</td>
                      <td>羽毛球</td>
                  </tr>
              </table>
</body>
</html>

 

展現效果:

10 表單標籤

  • 表單標籤：<form>。

表單標籤就是在Html頁面中建立一個from表單，表單標籤在瀏覽器上沒有任何的提示，若是數據須要提交到服務器，負責收集數據的標籤必須存放在表單標籤體中。

  • <From>表單標籤的屬性:
  • action屬性：請求的路徑，肯定表單須要提交到服務器的地址。
  • method屬性: 請求的方式，GET、POST方式。
  1. GET請求: 提交的數據追加到請求的路徑上。
  • 由於請求路徑的長度有限，因此GET請求提交的數據有限。
  • 請求的數據會在地址欄顯示，因此不適合作密碼等數據的提交。
  1. POST請求: 提交的數據不在追加到請求的路徑上，也就是不在地址欄中顯示。，提交的數據大小不顯示。

<body>

<!--表單-->

<form action="" method="">

<!--此處的內容可能被提交到服務器-->

</form>

<!--此處的內容在<form>標籤外部，此處數據不能提交到表單-->

</body>
  • 輸入域標籤:<input>：
  • <input >：標籤用於得到用戶的輸入信息，type屬性值不一樣，蒐集方式不一樣。
  • <input>標籤中type屬性:
  1. Text：文本框，單行輸入的字段，用戶能夠輸入文本，默認寬度20個字符。
  2. Password：密碼框，密碼字段，該字段中的信息以黑圓顯示。
  3. Radio：單選框，表示一組互斥選項按鈕中的一個，當其中的一個按鈕被選中，以前的按鈕就會變爲非選中。
  4. Submit：提交按鈕，提交按鈕會把表單數據發送到服務器端，這個按鈕不寫name屬性，只寫value屬性，不然會將提交兩個字發送到服務器端。
  5. Checkbox:複選框按鈕，若是要選擇多個愛好就要用到Checkbox.
  6. Image: 按鈕上的圖片，若是想要給按鈕設置圖片就用image屬性。
  7. File屬性:文件上傳的組件，提供瀏覽，按下能夠選擇上傳的文件。
  8. Hidden屬性：這個屬性叫隱藏字段，字段會發送給服務器，可是在瀏覽器端是不會顯示的。
  9. Reset屬性:此按鈕爲重置按鈕，將表單恢復到默認值。
  10. Button:普通按鈕，經常使用javaScript結合使用。
  11. Name屬性: 是元素名，若是須要將表單數據提交到服務器， 必須提供name屬性，服務器經過屬性值得到提交的數據。
  12. Value屬性:設置<input>標籤的默認值，submit和reset爲按鈕顯示數據。
  13. Readonly:是否可讀。
  14. Disabled:是否可用。
  • <select>：下拉列表標籤。
  • <select>：標籤能夠進行單選或者多選，須要使用子標籤<option>指定列表項。
  • <select>：標籤中的屬性:
  1. name屬性: 發送給服務器端的名稱。
  2. multiple屬性：多選屬性。若是不寫此屬性，則默認爲單選。
  3. size: 多選時，可見選項的數目。
  • <option>：子標籤，下拉列表中的一個選項。其屬性爲：
  1. value：屬性是發送給服務器端的選項值。
  2. selected: 勾選當前列表項，若是一旦添加此屬性，那麼就默認被選中。
  • <textarea>：文本域標籤屬性。它是一個多行的文本域輸入控件。
  • cols：屬性，表示文本域的列數。
  • rows:屬性，表示文本域的行數。

針對以上表單標籤示例：及顯示效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單標籤</title>
</head>
<body>
<h3 style="color: red"> Form表單標籤</h3><hr/>
<from  action="http://www.baidu.com" method="">
    <table>
        <tr>
        <td>用戶名:</td>
        <td>
            <input type="text" name="userName" style="background: aqua"              placeholder="請輸入用戶名"></br>
        </td>
        </tr>
        <tr>
        <td>密@碼:</td>
        <td>
            <input type="password" name="password" style="background: aqua" placeholder="請輸入密碼"></br>
        </td>
        </tr>
        <tr>
        <td>成@績:</td>
        <td>
        <input type="text" name="score" style="background: aqua" placeholder="請輸入成績"><br>
        </td>
        </tr>
        <tr>
        <td>性  別:</td>
        <td>
            <input type="radio" name="gender" value="女">女
            <input type="radio" name="gender" value="男">男</br>
        </td>
        </tr>
        <tr>
            <td>E-mail:</td>
            <td>
                <input type="email" name="userMail" style="background: aqua"placeholder="請輸入你的郵箱">
            </td>
        </tr><br>
        <tr>
        <td>生  日:</td>
        <td>
            <input type="date" name="date"></br>
        </td>
        </tr>
        <tr>
        <td>學@歷:</td>
        <td>
            <select name="name">
                <option value="0">小學</option>
                <option value="1">初中</option>
                <option value="2">高中</option>
                <option value="3">大學</option>
            </select>
        </td>
        </tr><br>
        <tr>
        <tr>
        <td>愛@好:</td>
            <td>
            <input type="checkbox" name="Hobby" value="play">籃球
            <input type="checkbox" name="Hobby" value="sing">唱歌
            <input type="checkbox" name="Hobby" value="sleep">睡覺
            </td><br>
        </tr>
        <tr>
            <td>文本框:</td>
            <td>
                <textarea cols="30" rows="20" style="background: salmon"></textarea>
            </td>
        </tr>
        <tr>
            <input type="hidden" value="name">
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="submit" value="提交">
                <input type="reset"  value="重置">
            </td>
        </tr>
    </table>
</from>
</body>
</html>

 

針對以上代碼，顯示效果以下所示：

  • <video>:視頻標籤，其子標籤爲< source>主要用戶給網頁添加視頻。
  • src屬性：就是引入該視頻的URL路徑。
  • type屬性：默認爲video/mp4或者video/ogg格式的視頻。
  • controls屬性：用來控制視頻的播放進度。

<h3 style="color: red">給網頁設置視頻</h3>

<video width="320" height="240" controls>

 <source src="../movie.mp4" type="video/mp4">

 <source src="../lwj.ogg" type="video/ogg">

</video>

顯示效果以下：

  • <audio> 標籤：是音頻標籤，用來給網頁設置音頻等。其子標籤爲<source>.
  • src屬性：就是引入該音頻的URL路徑。
  • type屬性: 爲該音頻設置固定的audio/mp3格式

<h3 style="color: red">給網頁設置音樂</h3>

<audio controls>

    <source src="MP3/華晨宇 - 國王與乞丐 (Live).mp3" type="audio/mp3">

</audio>

效果以下所示:

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