整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
一篇：Java 0基礎(chǔ)入門(mén)（初識(shí)Html）
1.文本相關(guān)標(biāo)簽--標(biāo)題標(biāo)簽
<h#></h#>:一般用來(lái)創(chuàng)建各級(jí)不同的標(biāo)題，其中#的值可以為1-6中的值
代碼<h1>Hello Java</h1>
<h2>Hello Java</h2>
<h3>Hello Java</h3>
<h4>Hello Java</h4>
<h5>Hello Java</h5>
<h6>Hello Java</h6>
<h7>Hello Java</h7>代碼請(qǐng)放在body中，然后再運(yùn)行。
還不清楚Html結(jié)構(gòu)的，請(qǐng)看上一篇文章。
運(yùn)行結(jié)果如下：
標(biāo)題標(biāo)簽運(yùn)行結(jié)果
字體大小隨著#值變大而變小
h標(biāo)簽會(huì)自動(dòng)換行
當(dāng)#的值超過(guò)6以后，就直接顯示成了普通文本。
2.文本相關(guān)標(biāo)簽--特殊符號(hào)
空格
小于(<) <
大于(>) >
版權(quán)號(hào)(? ) ?
注冊(cè)符(?) ?
3.文本相關(guān)標(biāo)簽--行的控制
段落標(biāo)簽<p>xxx</p>
相當(dāng)于在頁(yè)面中預(yù)留了一行空行，xxx是你在這個(gè)空行中填寫(xiě)的內(nèi)容
換行標(biāo)簽<br>
ps：注意標(biāo)簽分為成對(duì)出現(xiàn)的和自閉合標(biāo)簽，書(shū)寫(xiě)時(shí)要注意規(guī)范
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<h1>是一級(jí)標(biāo)題
</p>
<p>
<h2>是二級(jí)標(biāo)題
</p>
<h3>是三級(jí)標(biāo)題
<br>
<h4>是四級(jí)標(biāo)題
</body>
</html>3.圖像標(biāo)簽
基本用法：
<img src="img1.jpg" width="100px" height="200px" alt=”” title=””/>
src--圖片的路徑(相對(duì)路徑的寫(xiě)法../)
width--圖片顯示時(shí)的寬度（不一定是實(shí)際），像素為單位，px可以不寫(xiě)
height--圖片顯示時(shí)的高度（不一定是實(shí)際），像素為單位，px可以不寫(xiě)
alt，title--鼠標(biāo)放在圖片上顯示的文字，幾乎每個(gè)標(biāo)簽都可以加這兩個(gè)屬性，圖片不存在時(shí)，圖片位置顯示設(shè)定的文字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
src屬性：當(dāng)前圖片的路徑
路徑：
(1)絕對(duì)路徑:一個(gè)完整的路徑，從ip開(kāi)始到文件名結(jié)束
(2)相對(duì)路徑:要引用的圖片資源相對(duì)于當(dāng)前頁(yè)面的路徑
width屬性：顯示的寬度
heigth屬性:顯示的高度
1.如果只給定寬度或高度，那么另外一個(gè)高度或?qū)挾鹊闹? 會(huì)根據(jù)原圖的寬高比進(jìn)行自動(dòng)計(jì)算
2.如果同時(shí)給定了寬度和高度，并且不符合原圖的比例，
那么就會(huì)失真
-->
<!--絕對(duì)路徑-->
<img src="http://zt.tgbus.com/ff15coming/assets/images/bg_02.jpg" width="500px"/>
<!--相對(duì)路徑，圖片和文件在同一目錄下-->
<img src="001.jpg" height="300px"/>
<!--相對(duì)路徑，圖片所在的目錄和頁(yè)面同一級(jí)-->
<img src="img/002.jpg" width="100px" height="500px"/>
<!--
alt/title:
（1）鼠標(biāo)放在對(duì)應(yīng)圖片上時(shí)能夠顯示出對(duì)應(yīng)的說(shuō)明性文字
（2）當(dāng)圖片不存在時(shí)，會(huì)在原來(lái)顯示圖片的地方加上說(shuō)明性文字
（3）alt/title在不同瀏覽器中可能有兼容性問(wèn)題，所以一起寫(xiě)，作用是一樣的
（4）后面學(xué)習(xí)的標(biāo)簽中都可以加上這兩個(gè)屬性，來(lái)作為鼠標(biāo)放上去時(shí)的說(shuō)明
-->
<img src="img/002.jpg" alt="圖片002" title="圖片002"/>
<img src="img1111/002.jpg" alt="圖片002" title="圖片002"/>
</body>
</html>4.文字布局--內(nèi)容分隔標(biāo)簽
用于在頁(yè)面上繪制水平線
<hr size="5" color="red" width="300" align="left">
<hr size="10" color="black" width="200">
<hr size="5" color="#0000FF" width="50%" align="right">
size--線的厚度
color--線的顏色，顏色的寫(xiě)法支持多種形式
width--線的寬度
align--對(duì)齊方式（盡可能使用后面學(xué)習(xí)的CSS樣式來(lái)對(duì)齊）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
第一行
<!--分隔標(biāo)簽-->
<hr/>
第二行
<!--
size:線的厚度
color：線的顏色
align：對(duì)齊方式 left right
width：線的寬度（像素，相對(duì)于外部元素寬度的百分比）
-->
<hr size="5" color="red" width="300" align="left"/>
<hr size="5" color="#FF1493" width="30%" align="right"/>
<hr color="#D84D2A" />
</body>
</html>
5.文字布局--項(xiàng)目列表和編號(hào)（有序列表）
<ol type="1">
<li>填寫(xiě)信息</li>
<li>收電子郵件</li>
<li>注冊(cè)成功</li>
</ol>
type值：(改變序號(hào)類(lèi)型）
1：效果1，2，3，4……
a：效果a，b，c，d
A：效果A，B，C，D
i：效果i，ii，iii，iv，v
I：效果I，II，III，IV，V
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
type屬性：
1 阿拉伯?dāng)?shù)字作為序號(hào)
a 小寫(xiě)字母作為序號(hào)
A 大寫(xiě)字母作為序號(hào)
i 羅馬數(shù)字的小寫(xiě)形式
I 羅馬數(shù)字的大寫(xiě)形式
-->
<ol type="I">
<li>第一項(xiàng)</li>
<li>第二項(xiàng)</li>
<li>第三項(xiàng)</li>
<li>第四項(xiàng)</li>
<li>第五項(xiàng)</li>
<li>第六項(xiàng)</li>
</ol>
</body>
</html>6.文字布局--項(xiàng)目列表和編號(hào)（無(wú)序列表）
<ul type="circle">
<li>如何激活會(huì)員名？</li>
<li>如何注冊(cè)淘寶會(huì)員？</li>
<li>注冊(cè)時(shí)密碼設(shè)置有什么要求？</li>
<li>支付寶認(rèn)證</li>
</ul>
type值：
disc：效果——實(shí)心黑色小圓點(diǎn)
square：效果——實(shí)心黑色小方塊
circle：效果——空心小圓點(diǎn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
type屬性取值：
circle：空心圈
disc：實(shí)心圓
square：正方形
-->
<ul type="circle">
<li>第一項(xiàng)</li>
<li>第二項(xiàng)</li>
<li>第三項(xiàng)</li>
<li>第四項(xiàng)</li>
<li>第五項(xiàng)</li>
<li>第六項(xiàng)</li>
</ul>
</body>
</html>
7.預(yù)格式文本標(biāo)簽
pre：pre 元素可定義預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符。而文本也會(huì)呈現(xiàn)為等寬字體。
<pre> 標(biāo)簽的一個(gè)常見(jiàn)應(yīng)用就是用來(lái)表示計(jì)算機(jī)的源代碼
8.頁(yè)面鏈接
<a> 標(biāo)簽定義超鏈接，用于從一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面。最重要的是href屬性，用于指定要跳轉(zhuǎn)的頁(yè)面的路徑。
相對(duì)路徑:指定從根目錄到文件的完整路徑。
絕對(duì)路徑:指定相對(duì)于當(dāng)前文件的文件位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
<a></a>:頁(yè)面鏈接
如果沒(méi)有給定href屬性，那么a標(biāo)簽之間的內(nèi)容以普通文本方式顯示
href:用來(lái)指定當(dāng)前鏈接要跳轉(zhuǎn)的路徑
路徑可以是相對(duì)路徑也可以是絕對(duì)路徑
-->
<a href="http://www.baidu.com" >百度</a>
<a href="圖像標(biāo)簽.html">圖像標(biāo)簽</a>
<!--圖片鏈接-->
<a href="http://zt.tgbus.com/ff15coming/">
<img src="http://zt.tgbus.com/ff15coming/assets/images/bg_02.jpg" width="500px"/>
</a>
<!--
阻止鏈接的跳轉(zhuǎn)行為
-->
<a href="#">淘寶</a>
<!--了解-->
<a href="javascript：void(0);">京東</a>
</body>
</html>
使用a標(biāo)簽制作錨點(diǎn)，實(shí)現(xiàn)跳轉(zhuǎn)到頁(yè)面指定位置
（1）本頁(yè)跳轉(zhuǎn)（頁(yè)面很長(zhǎng)，內(nèi)容很多，點(diǎn)擊a標(biāo)簽內(nèi)容，迅速定位到你要找的內(nèi)容）
<!--定義a標(biāo)簽，跳轉(zhuǎn)到指定錨點(diǎn)-->
<a href="#helpme">[新人上路]</a>
<!--定義一個(gè)錨點(diǎn)，給定name屬性-->
<a name="helpme">新人上路指南</a>
（2）其它頁(yè)跳轉(zhuǎn)（定位到1.html這種不是本頁(yè)面的，a標(biāo)簽name值為t2的內(nèi)容處）
<a href="1.html#t2">[新人上路]</a>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.定義要進(jìn)行點(diǎn)擊的鏈接
-->
<a href="#position1">位置1</a>
<a href="#position2">位置2</a>
<a href="#position3">位置3</a>
<!--
2.要跳轉(zhuǎn)的位置
-->
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="position1">位置1</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="position2">位置2</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="position3">位置3</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
使用a標(biāo)簽打開(kāi)電子郵件發(fā)送窗口
這個(gè)方法是調(diào)用outlook客戶(hù)端，現(xiàn)在已經(jīng)很少用了！
在href前面加上mailto前綴，后面跟合法的郵箱地址
<a href="mailto:429661318@qq.com">
發(fā)送郵件
</a>
指定超鏈接在何處打開(kāi)目標(biāo) URL
在href屬性存在的情況下，指定target屬性
_blank：在空白頁(yè)打開(kāi)
_self：直接在本頁(yè)打開(kāi)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
target屬性：指定頁(yè)面的打開(kāi)的地方
_self:在當(dāng)前頁(yè)打開(kāi)
_blank:在空白頁(yè)打開(kāi)
-->
<a href="http://www.baidu.com" target="_self">在當(dāng)前頁(yè)打開(kāi)</a>
<a href="http://www.baidu.com" target="_blank">在空白頁(yè)打開(kāi)</a>
</body>
</html>標(biāo)簽的學(xué)習(xí)就到這，下一篇會(huì)介紹表單、表單元素的寫(xiě)法。喜歡的可以關(guān)注下，謝謝??！
下一篇：Java 0基礎(chǔ)入門(mén) （Html表單、表單元素）
、 用戶(hù)如何瀏覽網(wǎng)頁(yè)
要盡可能留住用戶(hù)、吸引用戶(hù)訪問(wèn)網(wǎng)頁(yè)，須注意以下幾點(diǎn)：
1、 盡量按照用戶(hù)習(xí)慣進(jìn)行網(wǎng)站設(shè)計(jì)；轉(zhuǎn)載于佛山鎬站網(wǎng)https://www.foshanhaozhan.com/seotg/761.html
2、 頁(yè)面必須有層次感，必要的文字要做一下突出的表現(xiàn)（例：加粗、文字變大或變顏色）；
3、 新聞或產(chǎn)品的一些內(nèi)容，覺(jué)得首頁(yè)沒(méi)必要放那么多，但又想要讓用戶(hù)知道后面還有的話，最好加一個(gè)更多，并把這個(gè)做一個(gè)修飾，讓用戶(hù)知道后面還有東西。
二、關(guān)于導(dǎo)航的設(shè)計(jì)
導(dǎo)航是網(wǎng)站最重要的部分，如果在網(wǎng)站上找不到方向，用戶(hù)就不會(huì)使用你的網(wǎng)站。
1、 網(wǎng)站的logo一般都在網(wǎng)站的左側(cè)的最上方，那也是用戶(hù)瀏覽網(wǎng)頁(yè)第一眼會(huì)看的地方；
2、 網(wǎng)站的導(dǎo)航條我們要注意以下幾個(gè)問(wèn)題。
(1) 網(wǎng)站首頁(yè)必須給做成一個(gè)活的鏈接，讓客戶(hù)可以點(diǎn)擊回到網(wǎng)站的首頁(yè)上面去；
(2) 如果網(wǎng)站一個(gè)產(chǎn)品的網(wǎng)站的話，一定要把產(chǎn)品的優(yōu)點(diǎn)列好，一一的描述出來(lái)，讓用戶(hù)更好的了解；
(3) 網(wǎng)站的聯(lián)系方式也要在導(dǎo)航的上面放一個(gè)，讓用戶(hù)知道你的電話，也讓他方便來(lái)找你。
三、網(wǎng)站的布局要合理
如果網(wǎng)站不能讓用戶(hù)很快的找到自己所需要的內(nèi)容那么就要重新調(diào)整網(wǎng)站的內(nèi)容結(jié)構(gòu)；使用戶(hù)很快的查到自己所要找的內(nèi)容。
四、網(wǎng)站經(jīng)常更新
網(wǎng)站設(shè)計(jì)的好自然會(huì)吸引用戶(hù)來(lái)看，但卻不能讓用戶(hù)長(zhǎng)期來(lái)訪問(wèn)自己的網(wǎng)站，要想長(zhǎng)期的吸引用戶(hù)必須靠網(wǎng)站的內(nèi)容來(lái)吸引；所以我們必須經(jīng)常更新網(wǎng)站的內(nèi)容，來(lái)使用戶(hù)長(zhǎng)期來(lái)訪問(wèn)。
五、網(wǎng)站的實(shí)用性
一個(gè)網(wǎng)站是否讓用戶(hù)來(lái)體驗(yàn)，那要取決于這個(gè)網(wǎng)站的實(shí)用性；如果網(wǎng)站設(shè)計(jì)得再好，內(nèi)容不怎么樣，那用戶(hù)還是不會(huì)過(guò)多的去看；所以，一個(gè)好的網(wǎng)站讓用戶(hù)一眼就能看到。
六、框架結(jié)構(gòu)
有些搜索引擎（如FAST）是不支持框架結(jié)構(gòu)的，他們的“蜘蛛”程序無(wú)法閱讀這樣的網(wǎng)頁(yè)。
于網(wǎng)站到底應(yīng)該使用絕對(duì)路徑還是相對(duì)路徑呢？在解決這個(gè)問(wèn)題之前我們先簡(jiǎn)單的了解一下他們的概念。
SEO絕對(duì)路徑與相對(duì)路徑
絕對(duì)路徑：包含域名的完整地址。
相對(duì)路徑：不包含域名，被鏈接頁(yè)面相對(duì)于當(dāng)前頁(yè)面的相對(duì)地址。
舉例說(shuō)明：
a頁(yè)面url：http://www.baidu.com/pagea.html
b頁(yè)面url：http://www.baidu.com/pageb.html
如果a頁(yè)面鏈接到b頁(yè)面 <a href="../pageb.html"> 使用這樣的形式，那么
<a href="../pageb.html"> 就是相對(duì)路徑
如果使用完整的url <a > ，那么
<a > 就是絕對(duì)路徑
那么使用絕對(duì)地址還是相對(duì)地址呢？對(duì)SEO有什么影響？其實(shí)這里沒(méi)有絕對(duì)的答案。不過(guò)，兩者各有優(yōu)缺點(diǎn)。
相對(duì)路徑
1、優(yōu)點(diǎn)
內(nèi)容移動(dòng)時(shí)，其他頁(yè)面上的連接不用更新
可以節(jié)省代碼量
在測(cè)試服務(wù)器上測(cè)試相對(duì)容易
2、缺點(diǎn)
頁(yè)面移動(dòng)位置，里面的連接可能需要改動(dòng)
搜索引擎解析url時(shí)可能出錯(cuò)，不能正確讀取頁(yè)面上的連接url
被抄襲和采集對(duì)網(wǎng)站沒(méi)有任何好處，現(xiàn)在很多采集軟件可以自動(dòng)識(shí)別絕對(duì)路徑和相對(duì)路徑，所以使用絕對(duì)地址有助于自己的連接也被抄到采集站上，某些情況是有效的
絕對(duì)路徑
1、優(yōu)點(diǎn)
內(nèi)容被抄襲、采集時(shí)，抄襲者較懶或者不知道的情況下，頁(yè)面的連接會(huì)一起抄襲過(guò)去，絕對(duì)路徑還會(huì)指向你的網(wǎng)站，可以增加網(wǎng)站外鏈權(quán)重
利于預(yù)防和解決網(wǎng)址規(guī)范化問(wèn)題。
站點(diǎn)存在RSS輸出時(shí)，內(nèi)容會(huì)被一些Feed聚合網(wǎng)站抓取顯示，頁(yè)面里指向原網(wǎng)站的url會(huì)被保留
2、缺點(diǎn)
增加代碼量，如果連接數(shù)量大時(shí)，相對(duì)于相對(duì)路徑多出來(lái)的字節(jié)可能是html文件變大
不好在測(cè)試服務(wù)器進(jìn)行測(cè)試，出非鏈接是動(dòng)態(tài)插入的形式。因?yàn)殒溄又苯又赶蛘嬲挠蛎鹵rl，而不是測(cè)試服務(wù)器上的url
如果鏈接不是動(dòng)態(tài)插入，移動(dòng)頁(yè)面將比較困難。因?yàn)?，?yè)面的位置發(fā)生變化，其他頁(yè)面鏈向本頁(yè)面的鏈接可能無(wú)法跟隨變化，還指向原來(lái)的已經(jīng)編碼的絕對(duì)路徑
其實(shí)，建立在正確解析url的前提下，絕度路徑與相對(duì)路徑對(duì)排名沒(méi)有任何影響。
文章來(lái)源：微信公眾號(hào)：七棵松運(yùn)營(yíng)|公眾號(hào)ID:qksong7
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
