中億豐建設(shè)集團(tuán)股份有限公司網(wǎng)站百度競(jìng)價(jià)是什么工作
目錄
HTML概述
HTML結(jié)構(gòu)
HTML標(biāo)簽語(yǔ)法
基本標(biāo)簽
標(biāo)題標(biāo)簽
換行標(biāo)簽
段落標(biāo)簽
文本格式化標(biāo)簽
特殊符號(hào)
div和span標(biāo)簽
超鏈接標(biāo)簽
錨點(diǎn)
img標(biāo)簽
列表標(biāo)簽
表格標(biāo)簽
表單標(biāo)簽
HTML概述
-
HTML，即超文本標(biāo)記語(yǔ)言（HyperText Markup Language ]），由SGML (標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言) 發(fā)展而來，也叫web頁(yè)面。擴(kuò)展名是 .html 或是 .htm 。
-
HTML，是一種用來制作網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。超文本，指的就是超出普通文本范疇的文檔，可以包含文本、圖片、視頻、音頻、鏈接等元素。
-
HTML 不是一種編程語(yǔ)言，而是一種寫給網(wǎng)頁(yè)瀏覽器、具有描述性的標(biāo)記語(yǔ)言。
自1990年以來HTML就一直被用作WWW（World Wide Web的縮寫，也可簡(jiǎn)寫WEB，中文叫做萬(wàn)維網(wǎng)）的信息表示語(yǔ)言，使用HTML語(yǔ)言描述的文件，需要通過網(wǎng)頁(yè)瀏覽器顯示出效果。用戶在訪問網(wǎng)頁(yè)時(shí)，是把服務(wù)器的HTML文檔下載 到本地客戶設(shè)備中，然后通過本地客戶設(shè)備的瀏覽器將文檔按順序解釋渲染成對(duì)應(yīng)的網(wǎng)頁(yè)效果。
網(wǎng)頁(yè)本身是一種文本文件，通過在文本文件中添加各種各樣的標(biāo)記標(biāo)簽，可以告訴瀏覽器如何顯示標(biāo)記中的代表的內(nèi)容，如：HTML中有的標(biāo)簽可以告訴瀏覽器要把字體放大，就像word一樣，也有的標(biāo)簽可以告訴瀏覽器顯示指定的圖片，還有的標(biāo)簽可以告訴瀏覽器把內(nèi)容居中或者傾斜等等。
每一個(gè)HTML標(biāo)簽代表的意義都不一樣。同樣，他們?cè)跒g覽器中表現(xiàn)出來的外觀也是不一樣的。
HTML結(jié)構(gòu)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>
1、<!DOCTYPE html> 告訴瀏覽器使用什么樣的html或者xhtml來解析html文檔
2、<html></html>是文檔的開始標(biāo)記和結(jié)束標(biāo)記。此元素告訴瀏覽器其自身是一個(gè) HTML文檔，在它們之間是文檔的頭部<head>和主體<body>。
3、<head></head>元素出現(xiàn)在文檔的開頭部分。<head>與</head>之間的內(nèi)容不會(huì)在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。
4、<title></title>定義網(wǎng)頁(yè)標(biāo)題，在瀏覽器標(biāo)題欄顯示。
5、<meta charset="UTF-8"> 聲明編碼方式用utf8
6、<body></body>之間的文本是可見的網(wǎng)頁(yè)主體內(nèi)容
HTML標(biāo)簽語(yǔ)法
<標(biāo)簽名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內(nèi)容部分</標(biāo)簽名>
<標(biāo)簽名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />1、HTML標(biāo)簽是由尖括號(hào)包圍的特定關(guān)鍵詞
2、標(biāo)簽分為閉合和自閉合兩種標(biāo)簽
3、HTML不區(qū)分大小寫
4、標(biāo)簽可以有若干個(gè)屬性,也可以不帶屬性,比如<head>就不帶任何屬性
5、標(biāo)簽可以嵌套,但是不可以交叉嵌套
基本標(biāo)簽
標(biāo)題標(biāo)簽
<h1>標(biāo)題1</h1>
<h2>標(biāo)題2</h2>
<h3>標(biāo)題3</h3>
<h4>標(biāo)題4</h4>
<h5>標(biāo)題5</h5>
<h6>標(biāo)題6</h6>換行標(biāo)簽
悟道休言天命，<br>
修行勿取真經(jīng)。<br>
一悲一喜一枯榮，<br>
哪個(gè)前生注定？段落標(biāo)簽
<p>菩提本無(wú)樹，</p>
<p>明鏡亦非臺(tái)。</p>
<p>本來無(wú)一物，</p>
<p>何處惹塵埃。</p>文本格式化標(biāo)簽
HTML提供了一系列的用于格式化文本的標(biāo)簽，可以讓我們輸出不同外觀的元素，比如粗體和斜體字。如果需要在網(wǎng)頁(yè)中，需要讓某些文本內(nèi)容展示的效果豐富點(diǎn)，可以使用以下的標(biāo)簽來進(jìn)行格式化。
<b>定義粗體文本</b><br />
<strong>定義粗體文本方式2</strong><br />
<em>定義斜體字</em><br />
<i>定義斜體字方式2</i><br />
<del>定義刪除文本</del><br />特殊符號(hào)
® ©® 表示注冊(cè)商標(biāo)符號(hào)（Registered Trademark Symbol），它用于標(biāo)識(shí)已注冊(cè)的商標(biāo)。它通常用于產(chǎn)品、服務(wù)或其他商業(yè)實(shí)體的商標(biāo)標(biāo)識(shí)。
表示空格符號(hào)（Non-Breaking Space），它用于在HTML和XML等標(biāo)記語(yǔ)言中插入一個(gè)空格，但該空格不會(huì)被瀏覽器或解析器忽略，而是被保留并顯示。
© 表示版權(quán)符號(hào)（Copyright Symbol），它用于表示作品的版權(quán)所有者。它通常用于文本、音樂、影片等創(chuàng)作作品的版權(quán)聲明。
div和span標(biāo)簽
<div>只是一個(gè)塊級(jí)元素，并無(wú)實(shí)際的意義。主要通過CSS樣式為其賦予不同的表現(xiàn).
<span>表示了內(nèi)聯(lián)行(行內(nèi)元素),并無(wú)實(shí)際的意義,主要通過CSS樣式為其賦予不同的表現(xiàn)塊級(jí)元素與行內(nèi)元素的區(qū)別所謂塊元素，是以另起一行開始渲染的元素，行內(nèi)元素則不需另起一行。如果單獨(dú)在網(wǎng)頁(yè)中插入這兩個(gè)元素，不會(huì)對(duì)頁(yè)面產(chǎn)生任何的影響。這兩個(gè)元素是專門為定義CSS樣式而生的。
超鏈接標(biāo)簽
超鏈接是瀏覽者和服務(wù)器的交互的主要手段，也叫超級(jí)鏈接或a鏈接，是網(wǎng)頁(yè)中指向一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是網(wǎng)頁(yè)、網(wǎng)頁(yè)中的具體位置、圖片、郵件地址、文件、應(yīng)用程序等。
超鏈接是網(wǎng)頁(yè)中最重要的元素之一。一個(gè)網(wǎng)站的各個(gè)網(wǎng)頁(yè)就是通過超鏈接關(guān)聯(lián)起來的，用戶通過點(diǎn)擊超鏈接可以從一個(gè)網(wǎng)頁(yè)跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)。
幾乎可以在所有的網(wǎng)頁(yè)中找到鏈接。點(diǎn)擊鏈接可以從一張頁(yè)面跳轉(zhuǎn)到另一張頁(yè)面。例如,在閱讀某個(gè)網(wǎng)站時(shí)，遇到一個(gè)不認(rèn)識(shí)的英文，你只要在這個(gè)單詞上單擊一下，即可跳轉(zhuǎn)到它的翻譯頁(yè)面中，看完單詞的解釋后點(diǎn)一下返回按鈕，又可繼續(xù)閱讀，這就是超鏈接的常見用途。還有經(jīng)常到購(gòu)物網(wǎng)站中去，我們都是在百度搜索，然后點(diǎn)擊對(duì)應(yīng)的搜索項(xiàng)進(jìn)入到對(duì)應(yīng)的購(gòu)物網(wǎng)站的，這也是超鏈接的作用。超鏈接的屬性：
| 屬性 | 值 | 描述 |
|---|---|---|
| href | 網(wǎng)絡(luò)鏈接 [ 例如: 百度一下，你就知道 ] 本地鏈接 [ 例如：F:\html\index.html ] | 規(guī)定鏈接的跳轉(zhuǎn)目標(biāo) |
| title | 百度 | 鏈接的提示信息 |
| target | _blank [ 在新建窗口中打開網(wǎng)頁(yè) ] _self [ 默認(rèn)值，覆蓋自身窗口打開網(wǎng)頁(yè) ] _parent [ 在父級(jí)框架中打開網(wǎng)頁(yè) ] _top [ 在頂級(jí)框架中打開網(wǎng)頁(yè) ] framename [ 在指定的框架中打開網(wǎng)頁(yè)] | 與前面四項(xiàng)固定值不同，framename是泛指，并不是這個(gè)值，這點(diǎn)將在后面框架部分內(nèi)容中詳細(xì)介紹，這里可以暫時(shí)先略過 |
1、href是超鏈接最重要的屬性，規(guī)定了用戶點(diǎn)擊鏈接以后的跳轉(zhuǎn)目標(biāo)，這個(gè)目標(biāo)可以是 網(wǎng)絡(luò)連接，也可以是本地連接。
2、網(wǎng)絡(luò)鏈接指的是依靠網(wǎng)絡(luò)來進(jìn)行關(guān)聯(lián)的地址，一般在地址前面是以 http://或者h(yuǎn)ttps://這樣開頭的，如果沒有網(wǎng)絡(luò)，則用戶點(diǎn)擊了超鏈接也無(wú)法訪問對(duì)應(yīng)的目標(biāo)。
3、本地鏈接跳轉(zhuǎn)指的是本地計(jì)算機(jī)的地址，一般在地址前面是以 file:///開頭或直接以 C:/、D:/、E:/開頭的，不需要經(jīng)過網(wǎng)絡(luò)。
4、如果href的值留空，則默認(rèn)是跳轉(zhuǎn)到當(dāng)前頁(yè)面，也就是刷新當(dāng)前頁(yè)面。
錨點(diǎn)
錨點(diǎn)( anchor )是超鏈接的一種應(yīng)用，也叫命名錨記，錨點(diǎn)可以像一個(gè)定位器一樣，可以實(shí)現(xiàn)頁(yè)面內(nèi)的鏈接跳轉(zhuǎn)，運(yùn)用相當(dāng)普遍。例如，我們有一個(gè)網(wǎng)頁(yè)，由于內(nèi)容太多，導(dǎo)致頁(yè)面很長(zhǎng)，而且里面的內(nèi)容，可以分為N個(gè)部分。這樣的話，我們就可以在網(wǎng)頁(yè)的頂部設(shè)置一些錨點(diǎn)，這樣便可以方便瀏覽者點(diǎn)擊相應(yīng)的錨點(diǎn)，到達(dá)本頁(yè)內(nèi)相應(yīng)的位置，而不必在一個(gè)很長(zhǎng)的網(wǎng)頁(yè)里自行尋找。又例如，我們頁(yè)面中，有個(gè)鏈接需要跳轉(zhuǎn)到另一個(gè)頁(yè)面的中間或者腳部去，這時(shí)候也可以運(yùn)用上錨點(diǎn)技術(shù)來解決這個(gè)問題。
<!DOCTYPE HTML>
<html lang="en-US"><head><title>錨點(diǎn)的使用</title></head><body><a href="#i1">第一章</a><a href="#i2">第二章</a><a href="#i3">第三章</a><div id="i1"><p>第一章內(nèi)容</p></div><div id="i2"><p>第二章內(nèi)容</p></div><div id="i3"><p> 第三章內(nèi)容</p></div></body>
</html>img標(biāo)簽
在HTML中，圖像由<img>標(biāo)簽定義的，它可以用來加載圖片到html網(wǎng)頁(yè)中顯示。網(wǎng)頁(yè)開發(fā)過程中，有三種圖片格式被廣泛應(yīng)用到web里，分別是 jpg、png、gif。
img標(biāo)簽的屬性：
/*
src屬性：指定圖像的URL地址，是英文source的簡(jiǎn)寫，表示引入資源。src的值可以是本地計(jì)算機(jī)存儲(chǔ)的圖片的地址，也可以是網(wǎng)絡(luò)上外部網(wǎng)站的圖片的地址。如果src的值不正確，那么瀏覽器就無(wú)法正確的圖片，而是顯示一張裂圖。alt屬性：指定圖像無(wú)法顯示時(shí)的替換文本。當(dāng)圖像顯示錯(cuò)誤時(shí)，在圖像位置上顯示alt的值。如上所示，就是谷歌瀏覽器中，引入圖像失敗后，顯示了替換文本。alt屬性一般 作為SEO優(yōu)化的手段之一，所以，使用了img標(biāo)簽就需要加上alt屬性。
width屬性： 指定引入圖片的顯示寬度。
height屬性：指定引入圖片的顯示高度。
border屬性：指定引入圖片的邊框?qū)挾?#xff0c;默認(rèn)為0。
title屬性：懸浮圖片上的提示文字
*/點(diǎn)擊圖片跳轉(zhuǎn)可以配合a標(biāo)簽使用
<a><img src="" alt=""></a>列表標(biāo)簽
<ul type="square"><li>item1</li><li>item2</li><li>item3</li></ul><ol start="100"><li>item1</li><li>item2</li><li>item3</li></ol>表格標(biāo)簽
在HTML中使用table來定義表格。網(wǎng)頁(yè)的表格和辦公軟件里面的xls一樣，都是有行有列的。HTML使用tr標(biāo)簽定義行，使用td標(biāo)簽定義列。
語(yǔ)法：
<table border="1"><tr><td>單元格的內(nèi)容</td>……</tr>……
</table>1、<table>和</table>表示一個(gè)表格的開始和結(jié)束。一組<table>...</table>表示一個(gè)表格。
2、border用于設(shè)置整個(gè)表格的邊框?qū)挾?#xff0c;默認(rèn)為0，表示不顯示邊框。
3、<tr>和</tr>表示表格中的一行的開始和結(jié)束。一組<tr>...</tr>，一個(gè)表格可以有多行。通過計(jì)算table標(biāo)簽中包含多少對(duì)tr子標(biāo)簽即可知道一個(gè)表格有多少行。
4、<td>和</td>表示表格中的一個(gè)單元格的開始和結(jié)束。通過計(jì)算一個(gè)tr里面包含了多少對(duì)td自標(biāo)簽即可知道一個(gè)表格有多少列，多少的單元格了。
table屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| width | px、% | 規(guī)定表格的寬度。 |
| height | px、% | 規(guī)定表格的高度。 |
| align | left、center、right | 規(guī)定表格相對(duì)周圍元素的對(duì)齊方式。 |
| bgcolor | rgb(x,x,x)、#xxxxxx、colorname | 規(guī)定表格的背景顏色。 |
| background | url | 規(guī)定表格的背景圖片。 |
| border | px | 規(guī)定表格邊框的寬度。 |
| cellpadding | px、% | 規(guī)定單元格邊框與其內(nèi)容之間的空白。 |
| cellspacing | px、% | 規(guī)定單元格之間的空隙。 |
td屬性
表格中除了行元素以外，還有單元格，單元格的屬性和行的屬性類似。td和th都是單元格。
| 屬性 | 值 | 描述 |
|---|---|---|
| height | px、% | 規(guī)定單元格的高度。 |
| width | px、% | 規(guī)定單元格的寬度。 |
| align | left、center、right | 規(guī)定單元格內(nèi)容的對(duì)齊方式。 |
| valign | top、middle、bottom | 規(guī)定單元格內(nèi)容的垂直對(duì)齊方式。 |
| bgcolor | rgb(x,x,x)、#xxxxxx、colorname | 規(guī)定單元格的背景顏色。 |
| background | url | 規(guī)定單元格的背景圖片。 |
| rowspan | number | 規(guī)定單元格合并的行數(shù) |
| colspan | number | 規(guī)定單元格合并的列數(shù) |
表單標(biāo)簽
表單主要是用來收集客戶端提供的相關(guān)信息，提供了用戶數(shù)據(jù)錄入的方式，有多選、單選、單行文本、下拉列表等輸入框，便于網(wǎng)站管理員收集用戶的數(shù)據(jù)，是Web瀏覽器和Web服務(wù)器之間實(shí)現(xiàn)信息交流和數(shù)據(jù)傳遞的橋梁.
表單被form標(biāo)簽包含，內(nèi)部使用不同的表單元素來呈現(xiàn)不同的方式來供用戶輸入或選擇。當(dāng)用戶輸入好數(shù)據(jù)后，就可以把表單數(shù)據(jù)提交到服務(wù)器端。
一個(gè)表單元素有三個(gè)基本組成部分：
-
表單標(biāo)簽，包含了表單處理程序所在的URL以及數(shù)據(jù)提交到服務(wù)器的方法等表單信息。
-
表單域，包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等表單控件。
-
表單按鈕，包括提交按鈕、復(fù)位按鈕和一般按鈕，用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。
在HTML中創(chuàng)建表單用form標(biāo)簽。每個(gè)表單都可以包含一到多個(gè)表單域或按鈕。form標(biāo)簽屬性：
| 屬性 | 值 | 描述 |
|---|---|---|
| action | 訪問服務(wù)器地址 | 服務(wù)器端表單處理程序的URL地址 |
| method | post、get[默認(rèn)值] | 表單數(shù)據(jù)的提交方法 |
| target | 參考超鏈接的target屬性 | 表單數(shù)據(jù)提交時(shí)URL的打開方式 |
| enctype | application/x-www-form-urlencoded[默認(rèn)值] multipart/form-data [用于文件上傳] text/plain [用于純文本數(shù)據(jù)發(fā)送] | 表單提交數(shù)據(jù)時(shí)的編碼方式 |
<h3>用戶注冊(cè)</h3><form action="http://127.0.0.1:8800" method="get"><p><label for="user">姓名</label>： <input type="text" name="user" id="user"></p><p>密碼： <input type="password" name="pwd"></p><p>愛好：<input type="checkbox" name="hobby" value="basketball">籃球<input type="checkbox" name="hobby" value="football">足球<input type="checkbox" name="hobby" value="shuangseqiu" checked>雙色球</p><p>性別：<input type="radio" name="gender" value="men">男<input type="radio" name="gender" value="female">女<input type="radio" name="gender" value="qita">其他</p><p>生日：<input type="date" name="birth"></p><p>籍貫：<select name="province" id="" multiple size="2"><option value="">廣東省</option><option value="" selected>山東省</option><option value="">河北省</option></select></p><p><textarea name="" id="" cols="30" rows="10" placeholder="個(gè)人簡(jiǎn)介"></textarea></p><div><p><input type="reset" value="重置"></p><p><input type="button" value="普通按鈕"></p><p><button>普通按鈕</button></p><p><input type="submit" value="提交"></p></div></form>