HTML入門知識彙總

時間  2019-12-04
標籤 html 入門 知識 彙總 欄目 HTML 简体版
原文   原文鏈接

1. HTML認識

1.1 什麼是HTML

HTML是描述（製做）網頁的語言，指的是超文本標記語言（Hyper Text Markup Language）。php

超文本：就是指頁面內能夠包含圖片、連接、甚至音樂、程序等非文字元素；html

標記語言：是一套標記標籤（markup tag）；html5

標記：一種標記符、標記標籤，能夠告訴瀏覽器如何顯示其中的內容；java

1.2 C/S與B/S架構

應用程序通常分爲兩種架構：golang

一、C/S架構 ：Client客戶端和Server服務器端架構，好比咱們使用的QQ、Foxmail等；web

二、B/S架構 ：B瀏覽器/S服務器結構，好比咱們使用淘寶、京東、百度等；能直接經過瀏覽器使用的應用都是B/S架構；數據庫

C/S架構特色須要用戶下載安裝軟件並更新麻煩，而B/S架構特色是用戶電腦上面只需有瀏覽器就可使用，因此B/S架構是趨勢，咱們之後開發的應用也是B/S架構。瀏覽器

總結：B/S架構的軟件重要的一塊就是使用瀏覽器，瀏覽器呈現內容須要HTML，因此咱們必須學習HTML；服務器

1.3 動態網頁與靜態網頁

靜態網頁：html代碼和內容書寫完畢後，頁面的內容和顯示效果就基本上不會發生變化了——除非你修改頁面代碼。網絡

動態網頁：頁面代碼雖然沒有變，可是顯示的內容倒是能夠隨着時間、環境或者數據庫操做的結果而發生改變的。動態網頁通常須要與後臺程序支撐（jsp,aspx，php）。

注意：動態網頁與靜態網頁的區分不能以頁面是否有動態效果，而是內容自己是不是變化顯示的。

2.HTML入門

2.1 Eclipse建立html5工程

1.File→New→Other→輸入web→選擇Static Web Project

此時建立的是一個static靜態web項目：

 

2.在建立好的WebContent目錄下新建一個html5格式的.html文件；

 

3.自定義快速建立一個HTML文件；

在WebContent文件右鍵彈框中自定義顯示HTML建立文件屬性的方法：

Window→Perspective→Customize Perspective→Shortcuts→Web→勾選HTML選項；

 

2.2 在Eclipse中修改文件編碼或工程目錄編碼

涉及到網頁的編碼顯示問題，因此一開始咱們就須要考慮工程開發的編碼（UTF-8）的形式。在此說明兩種設置工程編碼的方式：

①設置項目工程目錄Workspace下全部工程編碼統一爲UTF-8；

 

②設置單個工程文件編碼爲UTF-8；

在項目工程位置處右鍵，修改Other中的編碼爲UTF-8編碼；

2.3 HTML的結構

下面是一個H5格式的HTML初始的結構及結構的意義說明：

 1 <!--表示HTML文檔註釋，快捷鍵：ctrl+shift+/-->
 2 <!-- 文檔聲明：位於文檔的首行，告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。
 3 讓瀏覽器經過正確的方式解析咱們的網頁，使網頁能正常顯示。 -->
 4 <!DOCTYPE html>
 5 <!--html: 標籤告知瀏覽器其自身是一個 HTML 文檔  開始標籤/開放標籤-->
 6 <html> 
 7 <!--head: 標籤用於定義文檔的頭部（文檔的描述信息）-->
 8 <head>
 9 <!-- meta元素可提供有關頁面的元信息，好比針對搜索引擎和更新頻度的描述和關鍵詞等。
10 聲明文件的編碼是UTF-8的編碼，告訴瀏覽器，你用什麼編碼去解析這個文件
11 UTF-8 : 國際通用碼    GBK/GB2312 : 中文編碼
12 這裏的編碼必須要和文件的編碼徹底一致-->
13 <meta charset="UTF-8">
14 <!--content中提供給搜索引擎的關鍵字信息 -->
15 <meta name="keyword" content="java、大數據、golang">
16 <!--title:網頁的標題，會顯示在標題欄 -->
17 <title>Insert title here</title>
18 </head>
19 <!--body: 標籤用於定義文檔的主體（文檔的主體內容） -->
20 <body>
21 
22 </body>
23 <!--結束標籤/閉合標籤 -->
24 </html>

3. HTML標籤

HTML裏最重要的也是最豐富的元素，就是HTML裏面的標籤，做爲一名web開發者，咱們有必要了解並熟練掌握這些HTML裏的各個標籤元素；下面一一進行分類別講解。

3.1 特殊符號標籤

在網頁中比較少見的好比<>與&就屬於特殊符號，這部分標籤比較特殊，須要單獨拿出來講明一下；

格式

意義

&nbsp;

空格 (小空格)

&emsp;

空格 (大空格，佔一箇中文位置)

&gt;

大於 >

&lt;

小於 <

&amp;

&

 

 

 

 

 

 

 

 

 

 

3.2 基本標籤

基本標籤是網頁元素的主要組成部分，通常構成網頁文字及承載內容塊的主要載體標籤有如下類型的標籤元素：

標籤

標籤說明

閉合屬性

i

斜體(強調)

雙標籤

b

加粗(重要)

雙標籤

u

下劃線

雙標籤

p

段落(換行，默認狀況下和上下的內容之間有間距)

雙標籤

br

換行

單標籤

font

字體(屬性：size,color,face)

雙標籤

h(n)

標題 (h1-h6 從大到小的 換行 加粗，上下內容之間有距離)

官方：一個網頁裏面，建議只出現一個h1與h2

雙標籤

hr

水平線

單標籤

pre

預格式文本

雙標籤

span

行內標籤

雙標籤

div

塊標籤

雙標籤

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

div 、span兩個標籤沒有特殊的功能，只是做爲一個內容容器,但使用頻率很高，主要與CSS配合使用。

兩個都是用於寫CSS樣式。

主要區別：

div：塊標籤（它會獨佔一行）

span：行內標籤（它不會獨佔一行）

直接上代碼說明一下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>div與span容器類標籤</title>
 6 </head>
 7 <body>
 8 <!--span標籤不會獨佔一行，後面能夠繼續寫東西 -->
 9 <span style="background-color: red;">span標籤</span>能夠繼續寫東西
10 <!--div標籤會獨佔一行，後面的東西都會被擠到下一行顯示  -->
11 <div style="background-color: green;">div標籤</div>這個地方不能寫東西了
12 </body>
13 </html>

顯示效果以下：

 

3.3 重要標籤

 超連接a標籤

 a:標籤表明超鏈接，可使多個頁面能夠連接起來。

語法：

<a href=」連接跳轉地址」 target=」何處打開目標」>連接名</a>

屬性說明：

屬性名

屬性值

備註

href

連接的目標 URL

打開頁面的地址

target

在何處打開目標 URL)

_blank:打開新頁面
_self:在本頁面打開(默認)

 

 

 

 

 

圖片img標籤

img:標籤能夠向頁面展現一個圖片信息。

語法：

<img alt="規定圖像的替代文本" src="指定圖片來源" width="設置圖片的寬度" height="設置圖片的高度" title="鼠標移動會顯示此title內容">

注意：

img是一個行內標籤；支持多種圖片格式（jpg，bmp，png，gif）；必需要有src屬性；未設置寬高時，默認是等比顯示

列表標籤ul,ol,dl

列表標籤是頁面開發中很是經常使用的一個種標籤，通常用於作某項數據的列表或是導航。

HTML中的列表共有3種形式：無序列表、有序列表以及定義列表。

①無序列表ul

語法：

<ul>
    <li>成員內容</li>
</ul>

ul表明整個列表， li表明列表中的每一個成員。

示例代碼：

<!--無序列表  -->
<ul>
<li>本科生招生</li>
<li>研究生招生</li>
<li>留學生招生
    <ul>
        <li>英國留學區</li>
        <li>美國留學區</li>
    </ul>
</li>
<li>本科生就業</li>
<li>研究生就業</li>
<li>成教/網絡/自考</li>
</ul>

顯示效果以下：

②有序列表ol

語法：

<ol>
    <li>成員內容</li>
</ol>

示例代碼：

<!-- 有序列表 -->
<ol>
<li>本科生招生</li>
<li>研究生招生</li>
<li>留學生招生
    <ol>
        <li>英國留學區</li>
        <li>美國留學區</li>
    </ol>
</li>
<li>本科生就業</li>
<li>研究生就業</li>
<li>成教/網絡/自考</li>
</ol>

顯示效果以下：

③定義列表dl

語法：

 1 <!--
 2     dl:標記定義了一個定義列表
 3     dt:用來建立列表中的上層項目
 4     dd:用來建立列表中最下層項目
 5     <dt>和<dd>都必須放在<dl></dl>標誌對之間
 6 -->
 7 <dl>
 8     <dt>上層項目</dt>
 9     <dd>下層項目</dd>
10 </dl>

示例代碼：

1 <dl>
2     <dt>女裝</dt>  
3     <dd>連衣裙</dd>
4     <dd>牛仔褲</dd>
5     
6     <dt>男裝</dt>
7     <dd>T桖</dd>
8     <dd>POLO杉</dd>
9 </dl>

顯示效果以下：

3.4 表格table標籤

table標籤通常使用來生成表格。

語法：

 1 <!-- 表格標籤：table標籤：定義一個表格；
 2     tr標籤：表示行
 3     td標籤：定義單元格
 4     th標籤：定義表頭 
 5     border屬性:定義邊框
 6     caption：（表格）標題-->
 7 <table border="邊框" width="寬度" height="高度">
 8     <caption>表格標題</caption>
 9     <thead><!-- 表的頭部結構-->
10         <tr>
11                 <th>標題</th>
12         </tr>
13     </thead>
14     <tbody><!-- 表的身體結構-->
15         <tr>
16         <td>單元格</td>
17     </tr>
18     </tbody>
19     <tfoot><!-- 表的尾部結構-->
20         <tr>
21         <td>結尾</td>
22     </tr>
23     </tfoot>
24 </table>

表格行列的合併

跨行與跨列的屬性在td標籤中：

colspan :合併列； 跨列 跨n列，就把下面的n-1個td刪除

rowspan :合併行； 跨行跨n行，在把它下面n-1 個 tr的td刪除一個

示例代碼：

 1 <!--表格合併行與列 定義一個四行四列的表格
 2     合併行：rowspan
 3     合併列：colspan -->
 4 <table border="1">
 5     <caption>班級學生信息表</caption>
 6     <thead>
 7         <tr>
 8             <th>姓名</th>
 9             <th>年齡</th>
10             <th>性別</th>
11             <th>班級</th>
12         </tr>
13     </thead>
14     <tbody>
15         <tr>
16             <td>張三</td>
17             <td>15</td>
18             <td>男</td>
19             <td rowspan="4">17級2班</td>
20         </tr>
21         <tr>
22             <td>李四</td>
23             <td colspan="2">20</td>
24         </tr>
25         <tr>
26             <td>王五</td>
27             <td>18</td>
28             <td>男</td>
29         </tr>
30         <tr>
31             <td>廖七</td>
32             <td>15</td>
33             <td>女</td>
34         </tr>
35     </tbody>
36 </table>

顯示效果以下：

3.5 表單Form標籤

表單主要用於收集用戶數據，而後提供表單提交數據到後臺進行對應的數據參數的處理。

表單Form標籤的基本語法（結構組成）：

 1 <!-- 表單標籤：收集用戶數據 form
 2      action:表明的是這個表單要提交的地址，後臺的程序地址
 3      method:提交方式   
 4      get:提交的內容會在地址欄顯示    大小限制：255byte
 5         post提交不會在地址欄顯示  -->
 6 <form action="#id" method="get">
 7     <!-- 這裏面放對應的表單元素-->
 8     <input type="text" name="username">
 9     <!-- 提交方式-->
10     <input type="submit" value="提交註冊">
11 </form>

表單元素類型

input標籤中的可選type類型：

類型

名稱

特色

text

普通文本框

 顯示普通文字

password

密碼框

內容顯示爲*號

submit

提交按鈕

點擊後就提示表單

button

普通按鈕

 普通按鈕，可添加事件方法

reset

重置按鈕

回到最初狀態(注：不是清空)

radio

單選

一組單選必需name相同

checkbox

多選

一組多選必需name相同

file

附件

能夠選擇文件進行提交

hidden

隱藏域

不顯示控件；作數據修改時會有用

image

圖片按鈕

必需配合src屬性來展現

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

備註input標籤元素屬性：

name屬性：

注：表示控件的名稱，只名稱的控件數據纔會提交到後臺

        凡是要提交到後臺的控件，都要加上name

        用於單選與多選的分組，同一組的元素name須要一致

value屬性：

    注：有不一樣的類型(type)中，value的意義是不一樣的

        text/password 若是咱們提交寫上,它就是默認值(也是咱們要提交的值)，提交value的值

        submit/button/reset 表示顯示在按鈕中的文字

        radio/checkbox 是一個元素所表明的值

其它屬性：

        maxlength:一個文本框最多輸入多少字符

        readonly:只讀(不可輸入)

        disabled：禁用(不可輸入) -> 不會提交這個表單元素的數據

        checked:僅用於 radio/checkbox做用是默認幫咱們進行選擇

代碼示例：

 1 <!-- 表單標籤：收集用戶數據 form
 2      action:表明的是這個表單要提交的地址，後臺的程序地址
 3      method:提交方式   
 4      get:提交的內容會在地址欄顯示    大小限制：255byte
 5         post提交不會在地址欄顯示  -->
 6 <form action="" method="get">
 7 <!-- 表單元素： 備註：凡是表單元素提交必需要有name屬性，否則不能提交到後臺
 8 input type:radio（單選框），互斥name屬性設置成一致；默認選中使用checked
 9 type:checkbox（複選框），name屬性設置成一致爲一組；  
10 type:file（文件）
11 type:textarea（文本輸入框）：rows（行寬）、cols（列寬）-->
12     用戶名：<input type="text" name="username"><br>
13     密碼：<input type="password" name="password"><br>
14     性別：<input type="radio" name="sex" checked="checked">男
15     <input type="radio" name="sex">女<br>
16     愛好：<input type="checkbox" name="hobby">籃球
17         <input type="checkbox" name="hobby">足球
18         <input type="checkbox" name="hobby">舞蹈<br>
19     上傳文件：<input type="file" name="image"><br>
20     我的簡介：<textarea rows="3" cols="20"></textarea><br> <!-- style="resize:none" 表示控件不可拖動改變大小 -->
21     <!-- select（下拉框） 
22     option標籤訂義了下拉框中的內容  
23     selected（屬性）定義了默認被選擇
24     multiple（屬性）表示容許下拉框容許多選
25     size（屬性）表示默承認以顯示2個-->
26     聯繫地址： <select multiple="multiple" size="2">
27                 <option value="">---請選擇---</option>
28                 <option value="chengdu" selected="selected">成都</option>
29                 <option value="chongqing">重慶</option>
30                 <option value="wuhan">武漢</option>
31            </select><br>
32     <!-- 四種按鈕：提交時不須要寫name屬性
33                 submit：自動提交
34                 reset：重置表單，返回默認值
35                 button：普通按鈕
36                 image:圖片按鈕 -->
37         <input type="submit" value="提交註冊">
38         <input type="reset" value="重置">
39         <input type="button" value="按鈕">
40         <input type="image" src="./eategg.gif" alt="圖片不存在" value="圖片提交">
41 </form>

3.6 相對路徑說明

以文件自己爲參照路徑進行定位。

../表明返回當前文件路徑的上一級目錄；./表明當前頁面所在文件夾下的文件路徑

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