2八、HTML

時間 2019-11-22

標籤 html 欄目 HTML 简体版

原文原文鏈接

javaWeb：使用Java語言開發基於互聯網的項目php

軟件架構：html

一、C/S ：Client/Server 客戶端/服務器端html5

在用戶本地有一個客戶端程序，在遠程有一個服務器端程序java

優勢：用戶體驗好編程

缺點：開發，安裝，部署，維護，麻煩瀏覽器

二、B/S：Browser/Server 瀏覽器/服務器端安全

只須要一個服務器，用戶經過不一樣的網址，客戶訪問不一樣的服務器端程序服務器

優勢：開發，安裝，部署，維護簡答架構

缺點：若是應用過大，用戶的體驗可能會受到影響jsp

對硬件要求太高

服務器端資源分類：

一、靜態資源：

使用靜態網頁開發技術發佈的資源

特色：全部用戶訪問，獲得的結果是同樣的

例如：文本，圖片，音頻，視頻，HTML，CSS，JavaScript

若是用戶請求的是靜態資源，那麼服務器會直接將靜態資源發送給瀏覽器，瀏覽器中內置了靜態資源的解析引擎，能夠展現靜態資源

二、動態資源：

使用動態網頁及時發佈的資源

特色：全部用戶訪問，獲得的結果可能不同

例如：jsp/servlet，php，asp···

若是用戶請求的是動態資源，那麼服務器會執行動態資源，轉換成靜態資源，再發送給瀏覽器

靜態資源：

HTML：用於搭建基礎網頁，展現頁面內容

CSS：用於美化頁面，佈局頁面

JavaScript：控制頁面的元素，讓頁面有一些動態的效果

HTML：超文本標記語言，最基礎的網頁開發語言

超文本：超文本就是用超鏈接的方法，將各類不一樣空間的文字信息組織在一塊兒的網狀文本

標記語言：由標籤構成的語言。 <標籤名稱> 如HTMl，XML

注意：標記語言不是編程語言

HTML快速入門：

一、文件後綴名爲html或者htm

二、標籤分類：圍堵標籤：有開始標籤和結束標籤。如<html></html>

自閉合標籤：開始標籤和結束標籤在一塊兒。如<br/>

三、標籤能夠嵌套：須要正確的嵌套

錯誤：<a><b></a></b>

正確：<a><b></b></a>

四、在開始標籤中能夠定義屬性，屬性是有鍵值對構成，值須要用引號（‘單雙均可’）引發來

五、html的標籤不區分大小寫，可是建議使用小寫

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
hello
</body>
</html>

HTML的標籤：

一、文件標籤：構成html最基本的標籤

一、html：html文檔的根標籤

<html lang="en"> </html>

二、head：頭標籤。用於指定html文檔的一些屬性。引入外部的資源

<head> </head>

三、title：標題標籤

<title>Title</title>

四、body：體標籤

<body> </body>

五、<！DOCTYOPE html>：html5中定義文檔爲html文檔

<!DOCTYPE html>

二、文本標籤：和文本相關的標籤

一、註釋：

二、<h1> to <h6>：標題標籤

<h1> 標題</h1>
<h2> 標題</h2>
<h3> 標題</h3>
<h4> 標題</h4>
<h5> 標題</h5>
<h6> 標題</h6>

h1-h6:字體大小逐漸遞減

三、<p>：段落標籤

<p>段落</p>

四、<br>：換行標籤

<br>

五、<hr>：展現一條水平線

屬性：color，顏色

width，寬度

size ，高度

align，對齊方式

<hr color="red" size="20" width="100%" align="right" >

六、<b>:字體加粗

<b>加粗字</b>

七、<i>:字體斜體

<i>斜體字</i>

八、<center>：居中標籤

<center><h1>標題居中</h1></center>

九、<font>:字體標籤

屬性：color，顏色

size，大小

face，字體

屬性定義：color ：一、英文單詞：red，green，blue

二、rgb（值1，值2，值3）：值的範圍：0-255

三、#值1值2值3:值的範圍00-FF

size：一、數值：默認是px（像素）

二、數值%：佔比相對於父元素的比例

<font color="blue" size="17" >字體</font>

三、圖片標籤：顯示圖片

<img>

屬性：src：圖片相對路徑

align：對齊方式

alt：圖片顯示不成功，顯示的文字

width：寬度

height：高度

注意：相對路徑：./表明當前目錄

../表明上一級目錄

<img src="image/WechatIMG5.jpeg" height="1438" width="1080" align="center" alt="圖片加載失敗"/>

四、列表標籤：

有序列表：<ol>

<li>

<ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
</ol>

無序列表：<ul>

<li>

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
</ul>

五、連接標籤：

<a>

屬性：href：須要跳轉的位置

target：是否打開新窗口，_self，本頁面內打開

_blank，新窗口打開

<a href="#" target="_self"> 超連接</a>

六、div和span：

<div>：每個div佔滿一整行，塊級標籤

<div></div>

<span>:文本信息在一行展現，行內標籤，內聯標籤

<span></span>

七、語意化標籤：在html3中爲了提升程序的可讀性，沒有任何樣式

<header></header>

<footer></footer>

七、表格標籤：

<table>定義表格

屬性：width，寬度

border，邊框

cellpadding，內容和單元格距離

cellspacing，單元格之間的距離

bgcolor，背景色

align，對齊方式

<tr>定義行

屬性：bgcolor，背景色

align，對齊方式

<td>定義單元格

屬性：colspan：合併列

rowspan，合併行

<th>定義表頭單元格

<caption>:表格標題

<thead>:表格頭部分

<tbody>:表格體部分

<tfoot>：表格腳部分

<table border="1">
    <caption>這是一個表格</caption>
    <thead></thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    </tbody>
    <tfoot></tfoot>
</table>

八、表單標籤：用於採集用戶輸入的數據，用於和服務器進行交互

<form>：用於定義表單，能夠定義一個範圍，範圍表明採集用戶數據的範圍

屬性：action：指定提交數據的url

method：指定提交方式

分類：一個7種，2種比較經常使用

get：請求參數會在地址欄中顯示

請求參數大小是有限制的

不太安全

post：請求參數不會在地址欄中顯示，會封裝在請求體中

請求參數的大小沒有限制

較爲安全

注意：表單項種的數據想要被提交，必須指定其name屬性

<form></form>

<input>：能夠經過type屬性值，改變表單的樣式

type屬性：一、text，文本輸入框，默認值

<input type="text">

二、password：密碼輸入框

可搭配placeholder屬性：指定提示內容

<input type="password">

三、radio：單選框

<input type="radio">

四、checkbox：複選框

注意：一組內容，name屬性必須同樣，value屬性表示選中的值，checked屬性表示默認值

<input type="checkbox">

補充：label的for屬性與input的id屬性對應後，點擊標籤，自動獲取輸入框的輸入

五、file：文件選擇框

<input type="file">

六、hidden：隱藏域

<input type="hidden">

七、submit：提交按鈕

<input type="submit">

八、button：普通按鈕

<input type="button">

九、image：圖片提交按鈕，src屬性指定圖片的路徑

<input type="image">

<select>：

子元素<option>，指定列表項

<select>
    <option></option>
    <option></option>
    <option></option>

</select>

<textarea>:

屬性：cols：列數

rows：行數

<textarea></textarea>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。