【網頁前端設計Front end】HTML語言基礎.上(看不懂你來打我)

1.HTML文檔的基本結構與語法

<html>
<head><title>一個簡單的HTML實例</title></head>
<body>
<h2 align="center">一個簡單的HUTL示例</h2>
</body>
</html>

在這裏插入圖片描述

2.HTML標記及其屬性

<html>
<head>
	<title>標題名</title>
	<body>
		<p>這是我的第一個段落</p>
	</body>
</head>
</html>

在這裏插入圖片描述

3.段落標記

<html>
<body>
<p>div標記不同段落</p>
<div>段落1</div>
<div>段落2</div>
<div>段落3</div>
<p>span標記同一段</p>
<span>段落1</span>
<spac>段落2</spac>
<span>段落3</span>
</body>
</html>

在這裏插入圖片描述

4.文字標記

<html>
<body>
<head>
</head>
<h1>這是第一段</h1>
<h2>這是第二段</h2>
<h3>這是第三段</h3>
<h4>這是第四段</h4>
</body>
</html>

在這裏插入圖片描述

5.表格標記

<html>
<body>
<table border="1">
	<caption>表格示例</caption>
	<tr>
	<th>label1</th>
	<th>label2</th>
	<th>label3</th>
    </tr>
    <tr>
    <td align="left">left</td>
    <td align="center">center</td>
    <td align="right">right</td>
    </tr>
    <tr>
    <td valign="top">top</td>
    <td>center</td>
    <td valign="bottom">bottom</td>	
    </tr>
</table>
</body>
</html>

在這裏插入圖片描述

<html>
<body>
<table border="1">
	<tr>
		<th>姓名</th>
		<th colspan="2">電話</th>
	</tr>
	<tr>
		<th>張三</th>
		<th>633 77 854</th>
		<th>673 77 855</th>
	</tr>
</table>
</body>
</html>

在這裏插入圖片描述

<html>
<body>
<table border="1">
	<tr>
		<th>姓名</th>
		<th>張三</th>
    </tr>
    <tr>
    	<td rowspan="2"></td>
    	<td>673 77 854</td>
    </tr>
    <tr>
    	<td>673 77 855</td>
    </tr>
</table>
</body>
</html>

在這裏插入圖片描述

6.超鏈標記

<html>
<body>
<h2 id="avio">Avio</h2>
<a href="#avio">what's avio</a>
<a href="biaoji.html#avio">what's avio</a>
</body>
</html>

在這裏插入圖片描述

<html>
<head>
	<h2 id="avio2">avio2</h2>
</head>
</html>

在這裏插入圖片描述

<html>
<body>
<a href="mailto:[email protected]">熱點文本</a>
</body>
</html>

單擊熱點文本,將打開默認的電子郵件程序並自動填寫郵件地址

在這裏插入圖片描述

<html>
<body>
<a href="#記號名">熱點文本</a>
<a name="記號名">目標文本</a>
</body>
</html>

在這裏插入圖片描述

7.圖片

<html>
<body background="TIM截圖20191003162333.png">
	<img src="TIM截圖20191003162740.png" alt="picture">
</body>
</html>

在這裏插入圖片描述
用圖片作爲超鏈接

<a herf="URL">
<img src="圖片文件名">
</a>

8.列表

無序列表標記

<ul tpye="符號類型">
<li>1</li>
</ul>

有序列表標記

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