HTML入門知識匯總

BoYang 發(fā)布于2019-04-23 11:42 / 3590人閱讀

摘要：認識什么是是描述制作網(wǎng)頁的語言，指的是超文本標記語言。中的列表共有種形式無序列表有序列表以及定義列表。無序列表語法成員內(nèi)容代表整個列表，代表列表中的每個成員。

1. HTML認識

1.1 什么是HTML

HTML是描述（制作）網(wǎng)頁的語言，指的是超文本標記語言（Hyper Text Markup Language）。

超文本：就是指頁面內(nèi)可以包含圖片、鏈接、甚至音樂、程序等非文字元素；

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

標記：一種標記符、標記標簽，可以告訴瀏覽器如何顯示其中的內(nèi)容；

1.2?C/S與B/S架構

應用程序一般分為兩種架構：

1、C/S架構：Client客戶端和Server服務器端架構，比如我們使用的QQ、Foxmail等；

2、B/S架構：B瀏覽器/S服務器結構，比如我們使用淘寶、京東、百度等；能直接通過瀏覽器使用的應用都是B/S架構；

C/S架構特點需要用戶下載安裝軟件并更新麻煩，而B/S架構特點是用戶電腦上面只需有瀏覽器就可以使用，所以B/S架構是趨勢，我們以后開發(fā)的應用也是B/S架構。

總結：B/S架構的軟件重要的一塊就是使用瀏覽器，瀏覽器呈現(xiàn)內(nèi)容需要HTML，所以我們必須學習HTML；

1.3 動態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁

靜態(tài)網(wǎng)頁：html代碼和內(nèi)容書寫完畢后，頁面的內(nèi)容和顯示效果就基本上不會發(fā)生變化了——除非你修改頁面代碼。

動態(tài)網(wǎng)頁：頁面代碼雖然沒有變，但是顯示的內(nèi)容卻是可以隨著時間、環(huán)境或者數(shù)據(jù)庫操作的結果而發(fā)生改變的。動態(tài)網(wǎng)頁一般需要與后臺程序支撐（jsp,aspx，php）。

注意：動態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁的區(qū)分不能以頁面是否有動態(tài)效果，而是內(nèi)容本身是否是變化顯示的。

2.HTML入門

2.1 Eclipse創(chuàng)建html5工程

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

此時創(chuàng)建的是一個static靜態(tài)web項目：

2.在創(chuàng)建好的WebContent目錄下新建一個html5格式的.html文件；

3.自定義快速創(chuàng)建一個HTML文件；

在WebContent文件右鍵彈框中自定義顯示HTML創(chuàng)建文件屬性的方法：

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

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

涉及到網(wǎng)頁的編碼顯示問題，所以一開始我們就需要考慮工程開發(fā)的編碼（UTF-8）的形式。在此說明兩種設置工程編碼的方式：

①設置項目工程目錄Workspace下所有工程編碼統(tǒng)一為UTF-8；

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

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

2.3?HTML的結構

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

 1 
 2 
 4 DOCTYPE html>
 5 
 6 <html> 
 7 
 8 <head>
 9 
13 <meta charset="UTF-8">
14 
15 <meta name="keyword" content="java、大數(shù)據(jù)、golang">
16 
17 <title>Insert title heretitle>
18 head>
19 
20 <body>
21 
22 body>
23 
24 html>

3. HTML標簽

HTML里最重要的也是最豐富的元素，就是HTML里面的標簽，作為一名web開發(fā)者，我們有必要了解并熟練掌握這些HTML里的各個標簽元素；下面一一進行分類別講解。

3.1?特殊符號標簽

在網(wǎng)頁中比較少見的比如<>與&就屬于特殊符號，這部分標簽比較特殊，需要多帶帶拿出來說明一下；

格式	意義
	空格 (小空格)
	空格 (大空格，占一個中文位置)
>	大于 >
<	小于 <
&	&

?

3.2 基本標簽

基本標簽是網(wǎng)頁元素的主要組成部分，一般構成網(wǎng)頁文字及承載內(nèi)容塊的主要載體標簽有以下類型的標簽元素：

標簽	標簽說明	閉合屬性
i	斜體(強調)	雙標簽
b	加粗(重要)	雙標簽
u	下劃線	雙標簽
p	段落(換行，默認情況下和上下的內(nèi)容之間有間距)	雙標簽
br	換行	單標簽
font	字體(屬性：size,color,face)	雙標簽
h(n)	標題 (h1-h6 從大到小的換行加粗，上下內(nèi)容之間有距離) 官方：一個網(wǎng)頁里面，建議只出現(xiàn)一個h1與h2	雙標簽
hr	水平線	單標簽
pre	預格式文本	雙標簽
span	行內(nèi)標簽	雙標簽
div	塊標簽	雙標簽

div 、span兩個標簽沒有特殊的功能，只是作為一個內(nèi)容容器,但使用頻率很高，主要與CSS配合使用。

兩個都是用于寫CSS樣式。

主要區(qū)別：

div：塊標簽（它會獨占一行）

span：行內(nèi)標簽（它不會獨占一行）

直接上代碼說明一下：

 1 DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>div與span容器類標簽title>
 6 head>
 7 <body>
 8 
 9 <span style="background-color: red;">span標簽span>可以繼續(xù)寫東西
10 
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="規(guī)定圖像的替代文本" src="指定圖片來源" width="設置圖片的寬度" height="設置圖片的高度" title="鼠標移動會顯示此title內(nèi)容">

注意：

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

列表標簽ul,ol,dl

列表標簽是頁面開發(fā)中非常常用的一個種標簽，一般用于做某項數(shù)據(jù)的列表或是導航。

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

①無序列表ul

語法：

<ul>
    <li>成員內(nèi)容li>
ul>

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

示例代碼：


<ul>
<li>本科生招生li>
<li>研究生招生li>
<li>留學生招生
    <ul>
        <li>英國留學區(qū)li>
        <li>美國留學區(qū)li>
    ul>
li>
<li>本科生就業(yè)li>
<li>研究生就業(yè)li>
<li>成教/網(wǎng)絡/自考li>
ul>

顯示效果如下：

②有序列表ol

語法：

<ol>
    <li>成員內(nèi)容li>
ol>

示例代碼：


<ol>
<li>本科生招生li>
<li>研究生招生li>
<li>留學生招生
    <ol>
        <li>英國留學區(qū)li>
        <li>美國留學區(qū)li>
    ol>
li>
<li>本科生就業(yè)li>
<li>研究生就業(yè)li>
<li>成教/網(wǎng)絡/自考li>
ol>

顯示效果如下：

③定義列表dl

語法：

 1 
 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 
 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 
 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>15td>
18             <td>男td>
19             <td rowspan="4">17級2班td>
20         tr>
21         <tr>
22             <td>李四td>
23             <td colspan="2">20td>
24         tr>
25         <tr>
26             <td>王五td>
27             <td>18td>
28             <td>男td>
29         tr>
30         <tr>
31             <td>廖七td>
32             <td>15td>
33             <td>女td>
34         tr>
35     tbody>
36 table>

顯示效果如下：

3.5 表單Form標簽

表單主要用于收集用戶數(shù)據(jù)，然后提供表單提交數(shù)據(jù)到后臺進行對應的數(shù)據(jù)參數(shù)的處理。

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

 1 
 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	密碼框	內(nèi)容顯示為*號
submit	提交按鈕	點擊后就提示表單
button	普通按鈕	?普通按鈕，可添加事件方法
reset	重置按鈕	回到最初狀態(tài)(注：不是清空)
radio	單選	一組單選必需name相同
checkbox	多選	一組多選必需name相同
file	附件	可以選擇文件進行提交
hidden	隱藏域	不顯示控件；做數(shù)據(jù)修改時會有用
image	圖片按鈕	必需配合src屬性來展示

備注input標簽元素屬性：

name屬性：

注：表示控件的名稱，只名稱的控件數(shù)據(jù)才會提交到后臺

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

??????? 用于單選與多選的分組，同一組的元素name需要一致

value屬性：

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

??????? text/password 如果我們提交寫上,它就是默認值(也是我們要提交的值)，提交value的值

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

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

其它屬性：

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

??????? readonly:只讀(不可輸入)

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

??????? checked:僅用于 radio/checkbox作用是默認幫我們進行選擇

代碼示例：

 1 
 6 <form action="" method="get">
 7 
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> 
21     
26     聯(lián)系地址： <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     
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 相對路徑說明

以文件本身為參照路徑進行定位。

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

GPU云服務器云服務器 html入門 html入門視頻 html教程入門 html快速入門

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1039.html

前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業(yè)務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
DOM結構知識點匯總

摘要：樹結構繪制樹測試測試鄭少女哈哈需要注意的點節(jié)點很特殊，和標簽之間的不屬于的子節(jié)點。如果緊跟標簽后面的不是上面 DOM樹結構繪制DOM樹測試 hello, Im come from Mars. by--鄭少女哈哈需要注意的點 html節(jié)點很特殊，html和head標簽之間的text不屬于html的子節(jié)...

DobbyKim 2019-08-23 12:04 評論0 收藏0
vue基礎知識匯總

摘要：類似于頁面加載完畢執(zhí)行的操作，比如默認加載商品列表需特別注意，和遍歷是在前，在后。過濾器應用在產(chǎn)品金額前加上符號局部過濾器在實例中創(chuàng)建過濾器名稱全局過濾器在實例外建立語法過濾器名稱回調參數(shù)舉例或者寫成元方法語法全局方法局部方法 mounted mounted 類似于window.onload 頁面加載完畢執(zhí)行的操作，比如默認加載商品列表 mounted: function () { ...

ky0ncheng 2019-08-22 17:26 評論0 收藏0
前端常見知識點匯總（面試）-HTML和CSS部分

摘要：一內(nèi)聯(lián)元素與行元素的區(qū)別內(nèi)聯(lián)元素即行內(nèi)元素。絕對定位，相對于定位以外的第一個父元素進行定位，元素脫離文檔流。一、內(nèi)聯(lián)元素與行元素的區(qū)別 1、內(nèi)聯(lián)元素即行內(nèi)元素。2、內(nèi)聯(lián)元素，在文檔流中擠在一行；不能設置寬高（即，即使設置了也不管用，例如a標簽）、margin和padding的top和bottom 塊元素，獨占一行；可以設置寬高、margin、padding3、可以使用displa...

DevTTL 2019-08-30 15:55 評論0 收藏0