HTML學習---基礎語法

一、開發工具

Hbuilder

軟件直接註冊就可以

在這裏插入圖片描述

二、基本語法

1.ctrl+/ 註釋

		<!--超鏈接,href是連接的屬性-->

2.ctrl+s 保存

3.HTML文檔

<html>
<body>

<h1>我的第一個標題</h1>

<p>我的第一個段落。</p>

</body>
</html>
<html> 與 </html> 之間的文本描述網頁
<body> 與 </body> 之間的文本是可見的頁面內容
<h1> 與 </h1> 之間的文本被顯示爲標題,可以從h1--h6
<p> 與 </p> 之間的文本被顯示爲段落

4.段落

		<p style="color:red">Hello , this is my page!</p>

輸出字體爲紅色

5.超鏈接

		<a href="http://www.baidu.com">百度一下,你就是SD</a>

href是連接的屬性

在網頁上的顯示效果:

點擊後跳轉到你選擇的http://www.baidu.com。如果href="",則會刷新當前頁面

6.插入圖片

首先需要將圖片放置在img文件夾下
在這裏插入圖片描述

		<img src="img/u=192422651,1443365817&fm=26&gp=0.jpg" width="10%" alt="你的網真垃圾" title="全網最低"/>

img標籤,其中width也可以表示爲width=“650px”;表示650像素,alt表示照片沒有刷新出來時顯示的內容,title顯示鼠標移動到圖片上時顯示的文字

這邊使用的是寡姐圖片
在這裏插入圖片描述

7.換行

<br />

8.水平分割線

<hr />

9.HTML表格

<table border="1" cellpadding="0px" cellspacing="0px">
			<tr>
				<th colspan="2">id and name</th>
				<!--<th>idname</th>-->
				<th>idgrade</th>
				<th>age</th>
			</tr>
			
			<tr>
				
				<td>1</td>
				<td>寡姐</td>
				<td rowspan="3">大一</td>
				<td>18</td>
				
			</tr>
			
			<tr>
				<td>2</td>
				<td>雷神</td>
				<!--<td>大一</td>-->
				<td>22</td>
				
			</tr>
			
			<tr>
				<td>3</td>
				<td>緋紅女巫</td>
				<!--<td>大二</td>-->
				<td>18</td>
				
			</tr>
		</table>

做成的表格樣子:

colspan="2"合併列
rowspan="3"合併行
border=“1” cellpadding=“0px” cellspacing="0px"邊框寬度,及將雙線邊框合併爲單線
th 加粗

10.列表

10.1無序列表

<!--無序列表-->
		<ul type="square">
			<li><a href="">學生管理</a></li>
			<li>老師管理</li>
			<li>班級管理</li>
			<li>系統管理</li>
		</ul>

在這裏插入圖片描述

10.2有序列表

<!--有序列表-->
		<ol type="1">
			<li>圖書</li>
			<li>音樂</li>
			<li>電影</li>
			<li>遊戲</li>
		</ol>

在這裏插入圖片描述

10.3定義列表

		<dl>
			<dt>Coffee</dt>
			<dd>可以喝的</dd>
			<dt>Food</dt>
			<dd>可以吃的</dd>
		</dl>

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章