Java 0基礎入門（Html標簽的使用）

一篇：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.圖像標簽

基本用法：

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.文字布局--內容分隔標簽

用于在頁面上繪制水平線

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.文字布局--項目列表和編號（有序列表）

<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.文字布局--項目列表和編號（無序列表）

<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 name="helpme">新人上路指南</a>

（2）其它頁跳轉（定位到1.html這種不是本頁面的，a標簽name值為t2的內容處）

<!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>

指定超鏈接在何處打開目標 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. 使用text-align:justify

text-align:justify 屬性是全兼容的，使用它實現兩端對齊，需要注意在模塊之間添加[空格/換行符/制表符]才能起作用，同樣，實現文本對齊也是需要在字與字之間添加[空格/換行符/制表符]才能起作用

/*
說明：
1.IE中要實現塊內單行兩端對齊需要使用其私有屬性text-align-last:justify配合，text-align-last 要生效，必須先定義text-align 為justify
2.line-height:0 解決標準瀏覽器容器底部多余的空白
*/
.content{
text-align:justify;
text-align-last:justify;
line-height:0;
height:44px;
}
/*
說明：
模塊使用[換行符]或[空格符]后，webkit瀏覽器中會引起最后一個模塊有多余空白，使用font-size:0可清除該空格
*/
@media all and (-webkit-min-device-pixel-ratio:0){
.content{
font-size:0;
}
}
/*
說明：
1.text-align-last:justify 目前只有IE支持，標準瀏覽器需要使用 .demo:after 偽類模擬類似效果
2.opera瀏覽器需要添加 vertical-align:top 才能完全解決底部多余的空白
*/
.content:after{
display:inline-block;
overflow:hidden;
width:100%;
height:0;
content:'';
vertical-align:top;
}

且子類必須是inline-block元素

-------------------------------------------------------------------------------

2. 使用box-pack:justify

父類容器css:
.content{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
}

且子類必須是block元素

-------------------------------------------------------------------------------

3. 使用column(多列布局)

/*
說明：
1.column-count定義了對象的列數
2.column-gap定義了對象中列與列的間距

父類容器css:
.content {
-webkit-column-count: 2;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}
且子類必須是block元素

文/丁向明

做一個有博客的web前端自媒體人，專注web前端開發，關注用戶體驗，加我qq/微信交流：6135833

http://dingxiangming.com

個字和4個字如果想對齊，很多人會用 (空格)去調整；

今天我告訴大家一個好方法：

一：前提是需要給這個標簽寬度

二：text-align:justify;text-align-last:justify; 在所用的標簽的css里加上這幾個屬性，就ok了

這里我用的是p標簽

最后的效果圖

在線咨詢

上一篇：link vs @import：CSS 引入方式大PK，誰才是你的最佳選擇？
下一篇：一個開源的HTML5流媒體播放器

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Java 0基礎入門 （Html標簽的使用）

您的項目需求

Java 0基礎入門（Html標簽的使用）