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