java web 之 網頁前端開發基礎（1）

Spongelady發表於2018-08-02
JavaWeb網頁前端

1.HTML（Hypertext Markup Language，HTML，超文字標記語言）

1.1 建立第一個HTML檔案

編寫html語言可以通過兩種方式，一種是手工編寫html程式碼，一種是藉助一些開發軟體，如Dreamweaver或者微軟公司的Expression Web這樣的網頁製作軟體。在windows作業系統中，最簡單的文字編輯軟體就是記事本。還有notepad++，以及sublime等。

編寫第一個html檔案的步驟：

  1. 單擊開始選單，依次選擇“程式/附件/記事本”命令；
  2. 在開啟的記事本窗體中寫程式碼
  3. 編寫完成之後需要將檔案儲存為html格式的檔案，具體步驟是選擇記事本選單欄中的檔案/另存為命令，在彈出的另存為對話方塊中，首先在儲存型別下拉選單中選擇所有檔案選項，然後在檔名文字框輸入一個檔名，需要注意的是，檔名的字尾應該是.htm或者.html
  4. 設定完成後，單擊儲存按鈕，則成功生成了html檔案。雙擊該檔案就會顯示該檔案的內容。

1.2HTML文件結構

html文件由4個主要的標記組成，這四個標記主要有<html>\<head>\<title>\<body>，這四個元素構成了html頁面最基本的元素。

1.2.1<html>標記

<html>檔案是HTML檔案的開頭。所有html檔案都是以次開頭，以</html>檔案結尾。html頁面所有標記都要放置在<html>和</html>之間。這個標記並沒有實質性的功能，但是卻是html檔案必不可少的內容。

1.2.2<head>標記

<head>標記是html檔案的頭標記，作用是放在html檔案的資訊。如定義css樣式程式碼可放置在<head>與</head>標記之中。

1.2.3<title>標記

<title>標記是標題標記，可將網頁的標題定義在<title>和</title>標記之中。

1.2.4<body>標記

<body>是html頁面的主體標記，頁面中所有內容都定義在<body>標誌中。<body>標記也是成對使用的，以<body>開頭，以</body>結束。<body>標記本身也有一些控制頁面的一些特性，如控制頁面的被禁圖片和顏色等。

html文字語言還有很多其他的標記，如果在使用過程中需要用到一些其他的標記可以通過查詢來使用，但是這樣使用的效率會很低下。熟能生巧。

換行標記[單獨標記]  <br>

段落標記   <p>。。。</p>:段落標記主要在段前和段後加一個空格，段落內的內容不受影響。

標題標記<h1>一級標題，....<h6>代表是6級標題。數字越小表示級別越高，文字的字型就越大。

 

居中標記<center>開頭，</center>結尾

 

文字列表標記：將文字以列表的形式依次排列，通過這種形式能更加方便訪問者。html中的列表分為有序無序兩種。

（1）無序列表

無序列表是在每一個列表前面加一個圓點符號。通過符號<ul>可以建立一組無序列表，其中每一個列表項以<li>[單標記]表示。

 

（2）有序列表

有序列表和無序列表的區別是使用有序列表標記可以將列表項進行排號。有序列表的標記為<ol>,每一個列表前使用<li>,有序列表中專案是有一定的順序的。

 

區域標記<span>：用來組合文件內的元素，它本身是沒有固定的格式的，對它應用樣式時，它將會對畫好的區域進行渲染。

<div>標記與<span>標記類似，但是二者的區別是：<span>標籤是行內元素，而<div>是塊元素，<div>作用比<span>更大。

表格標記<table>是十分重要的因素，表格迎來儲存資料。表格包含標題、表頭、行和單元格。<table>....</table>;

標題標記<caption>...</caption>,標題也有一些屬性，如align、valign等。

表頭標記<th>...</th>,也可以通過align、background、colspan、valign等屬性來設定表頭；

表格行標記<tr>，，，</tr>,一組表示表格中一行；

單元格標記<td>。。。</td>,一個<tr>中可以包含若干個<td>;

這裡就不舉例了。

接下來還有html的表單標記，就是一般網頁上會出現的登入頁面，使用者輸入的文字框就是屬於html中的表單的範疇；

還有下拉選單標記等，用到記不住就查一下。

 

補充內容：

html表單設計

 

 

相關文章