整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
html圖像
在htmtl中,圖像由<img>標(biāo)簽定義.<img>是空標(biāo)簽,它只包含屬性,并且沒有閉合標(biāo)簽.
要在頁面上顯示圖像,使用源屬性(src).源屬性的值是圖像的url地址(統(tǒng)一資源定位符).
定義圖像的語法是:
<img src="url"/>
url指存儲圖像的位置.
<html>
<head>
<title>first page</title>
</head>
<body>
<img src="logo.png" alt=" "/>
</body>
<html>
●如果圖像無法顯示,則alt屬性用來為圖像定義一串預(yù)備的可替換的文本.alt屬性是必需的.
height(高度)與width(高度)屬性用于設(shè)置圖像的高度與寬度.該屬性值可以以像素或百分比形式指定,默認(rèn)單位為像素
<html>
<head>
<title>first page</title>
</head>
<body>
<img src="logo.png" height="100px" width="100px" alt=" "/>
<!--或者-->
<img src="logo.png" height="80%" width="80%" alt=" "/>
</body>
</html>
●<img>的border屬性規(guī)定圖像周圍的邊框的寬度.默認(rèn)情況下,圖像是沒有邊框的
border屬性的屬性值的單位是像素.表示邊框的寬度
實(shí)例:帶有2個(gè)像素粗邊框的圖像.
<img src="logo.png" height="100px" width="100px" border="2" alt=" " />
二 html鏈接
html使用標(biāo)簽<a>來設(shè)置超文本鏈接.
超鏈接可以是一個(gè)字,一個(gè)詞,或者一組詞,也可以是一幅圖像,你可以點(diǎn)擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個(gè)部分.
在標(biāo)簽<a>中,使用href(hyper text reference)屬性來描述鏈接的目標(biāo)地址
鏈接的html代碼很簡單.格式如下:
<a href="url">鏈接文本</a>
上邊的代碼顯示為:鏈接文本(鏈接文本下面有下劃線)
●使用target屬性,你可以規(guī)定在何處打開鏈接文檔.如果給target屬性賦值_blank,將使鏈接在新窗口或新選項(xiàng)卡中打開.
<a href="url" target="_blank">鏈接文本</a>
三 html列表
無序列表是一個(gè)項(xiàng)目的列表,此列項(xiàng)目使用粗體圓點(diǎn)(典型的小黑圓圈)進(jìn)行標(biāo)記
無序列表使用<ul>標(biāo)簽,與<li>標(biāo)簽一起使用(unordered list)
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
瀏覽器顯示效果如下:
有序列表也是一列項(xiàng)目,列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記.
有序列表始于<ol>標(biāo)簽,每個(gè)列表項(xiàng)目始于<li>標(biāo)簽.
<ol>
<li>咖啡</li>
<li>菜</li>
<li>牛奶</li>
</ol>
運(yùn)行效果如下:
四 html表格
表格由<table>標(biāo)簽定義.
每個(gè)表格均有若干行(由<tr>標(biāo)簽定義,table row),每行被分割為若干單元格(由<td>標(biāo)簽定義,table division)
下面是一個(gè)包含兩行兩列的表格:
<table border="2">
<tr>
<td>阿/td>
<td>平</td>
</tr>
<tr>
<td>加</td>
<td>油</td>
</tr>
</table>
運(yùn)行效果:
篇文章介紹了如何使用CSS實(shí)現(xiàn)一個(gè)獨(dú)特的4色圓圈轉(zhuǎn)動的Loading特效。通過使用CSS的動畫屬性和變換屬性，我們可以創(chuàng)建一個(gè)動態(tài)的Loading特效，使網(wǎng)頁更加生動有趣。本文不僅適用于前端開發(fā)人員，也適合對CSS感興趣的讀者學(xué)習(xí)。
在本文中，我們將探討如何使用CSS實(shí)現(xiàn)這個(gè)特效，以及如何將其應(yīng)用到實(shí)際網(wǎng)頁開發(fā)中。我們還將介紹如何優(yōu)化這個(gè)特效以提高性能和用戶體驗(yàn)。
最后，我們希望這篇文章能夠?qū)ψx者有所幫助，為網(wǎng)頁開發(fā)者提供更多的創(chuàng)意和靈感，同時(shí)也為讀者提供了一些CSS技巧和經(jīng)驗(yàn)。
超文本標(biāo)記語言（Hypertext Markup Language，HTML）通過標(biāo)簽語言來標(biāo)記要顯示的網(wǎng)頁中的各個(gè)部分。一套規(guī)則，瀏覽器認(rèn)識的規(guī)則。
瀏覽器按順序渲染網(wǎng)頁文件，然后根據(jù)標(biāo)記符解釋和顯示內(nèi)容。但需要注意的是，對于不同的瀏覽器，對同一標(biāo)簽可能會有不完全相同的解釋（兼容性）
靜態(tài)網(wǎng)頁文件擴(kuò)展名：.html 或 .htm
圖1
HTML的結(jié)構(gòu)
圖2
<!DOCTYPE html> 告訴瀏覽器使用什么樣的html或者xhtml來解析html文檔
<html></html>是文檔的開始標(biāo)記和結(jié)束標(biāo)記。此元素告訴瀏覽器其自身是一個(gè) HTML 文檔，在它們之間是文檔的頭部<head>和主體<body>。
<head></head>元素出現(xiàn)在文檔的開頭部分。<head>與</head>之間的內(nèi)容不會在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。
<title></title>定義網(wǎng)頁標(biāo)題，在瀏覽器標(biāo)題欄顯示。
<body></body>之間的文本是可見的網(wǎng)頁主體內(nèi)容
html標(biāo)簽格式介紹
圖3
標(biāo)簽的語法：
<標(biāo)簽名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內(nèi)容部分</標(biāo)簽名>
<標(biāo)簽名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />
常用標(biāo)簽
<!DOCTYPE>標(biāo)簽
<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。
作用：聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式。
document.compatMode：
BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。
CSS1Compat：標(biāo)準(zhǔn)模式，瀏覽器使用W3C的標(biāo)準(zhǔn)解析渲染頁面。
這個(gè)屬性會被瀏覽器識別并使用，但是如果你的頁面沒有DOCTYPE的聲明，那么compatMode默認(rèn)就是BackCompat
<head>內(nèi)常用標(biāo)簽
<meta>標(biāo)簽
meta介紹
<meta>元素可提供有關(guān)頁面的元信息（meta-information），針對搜索引擎和更新頻度的描述和關(guān)鍵詞。
<meta>標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。
<meta>提供的信息是用戶不可見的
meta標(biāo)簽的組成：meta標(biāo)簽共有兩個(gè)屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數(shù)值，這些不同的參數(shù)值就實(shí)現(xiàn)了不同的網(wǎng)頁功能。
(1)name屬性: 主要用于描述網(wǎng)頁，與之對應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。
<meta name="keywords" content="meta總結(jié),html meta,meta屬性,meta跳轉(zhuǎn)">
<meta name="description" content="老男孩培訓(xùn)機(jī)構(gòu)是由一個(gè)很老的男孩創(chuàng)建的">
(2)http-equiv屬性：相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確地顯示網(wǎng)頁內(nèi)容，與之對應(yīng)的屬性值為content，content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值。
復(fù)制代碼
<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引號，分別在秒數(shù)的前面和網(wǎng)址的后面)
<meta http-equiv="content-Type" charset=UTF8">
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
復(fù)制代碼
非meta標(biāo)簽
<title>oldboy</title>
<link rel="icon" >
<link rel="stylesheet" href="css.css">
<script src="hello.js"></script>
<body>內(nèi)常用標(biāo)簽
基本標(biāo)簽（塊級標(biāo)簽和內(nèi)聯(lián)標(biāo)簽）
復(fù)制代碼
'''
<hn>: n的取值范圍是1~6; 從大到小. 用來表示標(biāo)題.
<p>: 段落標(biāo)簽. 包裹的內(nèi)容被換行.并且也上下內(nèi)容之間有一行空白.
<b> <strong>: 加粗標(biāo)簽.
<strike>: 為文字加上一條中線.
<em>: 文字變成斜體.
<sup>和<sub>: 上角標(biāo) 和 下角表.
<br>:換行.
<hr>:水平線
特殊字符：
< >；"；©®
'''
復(fù)制代碼
<div>和<span>
復(fù)制代碼
<div></div> ： <div>只是一個(gè)塊級元素，并無實(shí)際的意義。主要通過CSS樣式為其賦予不同的表現(xiàn).
<span></span>： <span>表示了內(nèi)聯(lián)行(行內(nèi)元素),并無實(shí)際的意義,主要通過CSS樣式為其賦予不同的表現(xiàn).
塊級元素與行內(nèi)元素的區(qū)別
所謂塊元素，是以另起一行開始渲染的元素，行內(nèi)元素則不需另起一行。如果單獨(dú)在網(wǎng)頁中插入這兩個(gè)元素，不會對頁面產(chǎn)生任何的影響。
這兩個(gè)元素是專門為定義CSS樣式而生的。
復(fù)制代碼
圖形標(biāo)簽: <img>
復(fù)制代碼
'''
src: 要顯示圖片的路徑.
alt: 圖片沒有加載成功時(shí)的提示.
title: 鼠標(biāo)懸浮時(shí)的提示信息.
width: 圖片的寬
height:圖片的高 (寬高兩個(gè)屬性只用一個(gè)會自動等比縮放.)
'''
在線練習(xí)
復(fù)制代碼
在線練習(xí)
超鏈接標(biāo)簽(錨標(biāo)簽): <a> </a>
什么是超級鏈接？
所謂的超鏈接是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁，也可以是相同網(wǎng)頁上
的不同位置，還可以是一個(gè)圖片，一個(gè)電子郵件地址，一個(gè)文件，甚至是一個(gè)應(yīng)用程序
什么是URL？
復(fù)制代碼
<a href="" target="_blank" >click</a>
href屬性指定目標(biāo)網(wǎng)頁地址。該地址可以有幾種類型：
絕對 URL - 指向另一個(gè)站點(diǎn)（比如 href="http://www.jd.com）
相對 URL - 指當(dāng)前站點(diǎn)中確切的路徑（href="index.htm"）
錨 URL - 指向頁面中的錨（href="#top"）
復(fù)制代碼
<a >點(diǎn)我啊</a>
<a >
<img src="meinv.jpg" alt="美女" title="美女">
</a>
<a href="lesson1.html">點(diǎn)我</a>
錨
列表標(biāo)簽（）
復(fù)制代碼
<ul>: 無序列表 [type屬性：disc(實(shí)心圓點(diǎn))(默認(rèn))、circle(空心圓圈)、square(實(shí)心方塊)]
<ol>: 有序列表
<li>:列表中的每一項(xiàng).
<dl> 定義列表
<dt> 列表標(biāo)題
<dd> 列表項(xiàng)
復(fù)制代碼
例子
表格標(biāo)簽: <table>
表格概念
表格
表格由 <table> 標(biāo)簽來定義。每個(gè)表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
表格最重要的目的是顯示表格類數(shù)據(jù)。表格類數(shù)據(jù)是指最適合組織為表格格式（即按行和列組織）的數(shù)據(jù)。
表格的基本結(jié)構(gòu)：
復(fù)制代碼
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
復(fù)制代碼
效果如下
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
屬性 （大家可以私信：久伴領(lǐng)取學(xué)習(xí)資料）
功能：表單用于向服務(wù)器傳輸數(shù)據(jù)，從而實(shí)現(xiàn)用戶與Web服務(wù)器的交互
表單能夠包含input系列標(biāo)簽，比如文本字段、復(fù)選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label標(biāo)簽。
表單屬性
action: 表單提交到哪.一般指向服務(wù)器端一個(gè)程序,程序接收到表單提交過來的數(shù)據(jù)（即表單元素值）作相應(yīng)處理，比如https://www.sogou.com/web
method: 表單的提交方式 post/get默認(rèn)取值就是get
復(fù)制代碼
屬性 描述
accept-charset 規(guī)定在被提交表單中使用的字符集（默認(rèn)：頁面字符集）。
action 規(guī)定向何處提交表單的地址（URL）（提交頁面）。
autocomplete 規(guī)定瀏覽器應(yīng)該自動完成表單（默認(rèn)：開啟）。
enctype 規(guī)定被提交數(shù)據(jù)的編碼（默認(rèn)：url-encoded）。
method 規(guī)定在提交表單時(shí)所用的 HTTP 方法（默認(rèn)：GET）。
name 規(guī)定識別表單的名稱（對于 DOM 使用：document.forms.name）。
novalidate 規(guī)定瀏覽器不驗(yàn)證表單。
target 規(guī)定 action 屬性中地址的目標(biāo)（默認(rèn)：_self）。
復(fù)制代碼
復(fù)制代碼
何時(shí)使用 GET？
您能夠使用 GET（默認(rèn)方法）：
如果表單提交是被動的（比如搜索引擎查詢），并且沒有敏感信息。
當(dāng)您使用 GET 時(shí)，表單數(shù)據(jù)在頁面地址欄中是可見的：
action_page.php?firstname=Mickey&lastname=Mouse
注釋：GET 最適合少量數(shù)據(jù)的提交。瀏覽器會設(shè)定容量限制。
何時(shí)使用 POST？
您應(yīng)該使用 POST：
如果表單正在更新數(shù)據(jù)，或者包含敏感信息（例如密碼）。
POST 的安全性更加，因?yàn)樵陧撁娴刂窓谥斜惶峤坏臄?shù)據(jù)是不可見的。
復(fù)制代碼
表單元素
基本概念：
HTML表單是HTML元素中較為復(fù)雜的部分，表單往往和腳本、動態(tài)頁面、數(shù)據(jù)處理等功能相結(jié)合，因此它是制作動態(tài)網(wǎng)站很重要的內(nèi)容。
表單一般用來收集用戶的輸入信息
表單工作原理：
訪問者在瀏覽有表單的網(wǎng)頁時(shí)，可填寫必需的信息，然后按某個(gè)按鈕提交。這些信息通過Internet傳送到服務(wù)器上。
服務(wù)器上專門的程序?qū)@些數(shù)據(jù)進(jìn)行處理，如果有錯(cuò)誤會返回錯(cuò)誤信息，并要求糾正錯(cuò)誤。當(dāng)數(shù)據(jù)完整無誤后，服務(wù)器反饋一個(gè)輸入完成的信息
<input>系列標(biāo)簽
<input> 元素根據(jù)不同的 type 屬性，可以變化為多種形態(tài)。
復(fù)制代碼
'''
<1> 表單類型
type: text 文本輸入框 供文本輸入的單行輸入字段
password 密碼輸入框 定義密碼字段：
radio 單選框
checkbox 多選框
submit 提交按鈕 定義提交表單數(shù)據(jù)至表單處理程序的按鈕。
表單處理程序（form-handler）通常是包含處理輸入數(shù)據(jù)的腳本的服務(wù)器頁面。
在表單的 action 屬性中規(guī)定表單處理程序（form-handler）：
button 按鈕(需要配合js使用.) button和submit的區(qū)別？<button> 元素定義可點(diǎn)擊的按鈕：
file 提交文件：form表單需要加上屬性enctype="multipart/form-data"
上傳文件注意兩點(diǎn)：請求方式必須是post enctype="multipart/form-data"
<2> 表單屬性
name: 表單提交項(xiàng)的鍵.
注意和id屬性的區(qū)別：name屬性是和服務(wù)器通信時(shí)使用的名稱；
而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端編程，而在css和javascript中使用的
value: 表單提交項(xiàng)的值.對于不同的輸入類型，value 屬性的用法也不同：
type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "image" - 定義與輸入相關(guān)聯(lián)的值
radio 定義單選按鈕。 checked屬性 默認(rèn)選中
checkbox 定義復(fù)選框。 checked屬性，默認(rèn)選中
readonly: 只讀.readonly 屬性規(guī)定輸入字段為只讀（不能修改）
readonly 屬性不需要值。它等同于 readonly="readonly"。
text 和 password
<input type="text" name="firstname" value="John" readonly>
disabled: 對所用input都好使. '''
復(fù)制代碼
select標(biāo)簽
<select> 元素定義下拉列表：
復(fù)制代碼
'''
<select> 下拉選標(biāo)簽屬性
name:表單提交項(xiàng)的鍵.
size：選項(xiàng)個(gè)數(shù)
multiple：multiple
<optgroup>為每一項(xiàng)加上分組
<option> 下拉選中的每一項(xiàng) 屬性：
value:表單提交項(xiàng)的值.
selected: selected下拉選默認(rèn)被選中
'''
復(fù)制代碼
<textarea> 多行文本框
<textarea> 元素定義多行輸入字段（文本域）：
復(fù)制代碼
'''
<form id="form1" name="form1" method="post" action="">
<textarea cols=“寬度” rows=“高度” name=“名稱”>
默認(rèn)內(nèi)容
</textarea>
</form>
'''
復(fù)制代碼
<label>標(biāo)簽
定義：<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。
說明：
1 label 元素不會向用戶呈現(xiàn)任何特殊效果。
2 <label> 標(biāo)簽的 for 屬性值應(yīng)當(dāng)與相關(guān)元素的 id 屬性值相同。
復(fù)制代碼
'''
<form method="post" action="">
<label for=“username”>用戶名</label>
<input type=“text” name=“username” id=“username” size=“20” />
</form>
'''
復(fù)制代碼
<fieldset>標(biāo)簽
<fieldset> 元素組合表單中的相關(guān)數(shù)據(jù)
<legend> 元素為 <fieldset> 元素定義標(biāo)題。
復(fù)制代碼
'''
<fieldset>
<legend>登錄吧</legend>
<input type="text">
</fieldset>
'''
復(fù)制代碼
例子
HTML5 表單元素
HTML5 增加了如下表單元素：
<datalist>
<keygen>
<output>
注釋：默認(rèn)地，瀏覽器不會顯示未知元素。新元素不會破壞您的頁面。
HTML5 <datalist> 元素
<datalist> 元素為 <input> 元素規(guī)定預(yù)定義選項(xiàng)列表。
用戶會在他們輸入數(shù)據(jù)時(shí)看到預(yù)定義選項(xiàng)的下拉列表。
<input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性。
實(shí)例
通過 <datalist> 設(shè)置預(yù)定義值的 <input> 元素：
復(fù)制代碼
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
復(fù)制代碼
I can feel you forgetting me。最后你覺得我們的文章對你有幫助，歡迎關(guān)注我，可以私信我：久伴，領(lǐng)取學(xué)習(xí)資料，在評論下方可以關(guān)注我的學(xué)習(xí)群，你可以隨時(shí)在上面向我們提問，把你在學(xué)習(xí)前端過程中所遇到的問題發(fā)給我們。我們每天都會按時(shí)回復(fù)大家的每一個(gè)問題，希望久伴可以伴隨你從入門到專家。
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
