HTML學習筆記01(標題,註釋,段落,文本格式化,鏈接,換行,分割線,頭部信息,插入圖片,表格)

超文本標記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用於創建網頁的標準標記語言。
這是一個系列,會持續更新

1.標題

HTML5共有6個級別的標題,h1定義最大標題,h6定義最小標題。

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>    
<h1>一級標題</h1>    
<h2>二級標題</h2>    
<h3>三級標題</h3>    
<h4>四級標題</h4>    
<h5>五級標題</h5>    
<h6>六級標題</h6>
</body>
</html>

在這裏插入圖片描述

2.註釋

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Document</title>
</head>
<body>    
<!--這是一個    註釋-->
</body>
</html>

3.段落

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Document</title>
</head>
<body>    
<p>這是一個段落</p>    
<p>這是另一個段落</p>
</body>
</html>

在這裏插入圖片描述

4.文本格式化

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Document</title>
</head>
<body>    
<b>粗體</b>    
<em>着重文字</em>    
<i>斜體</i>    
<small>小號字</small>    
<strong>加重語氣</strong>    
<sub>下標字</sub>    
<sup>上標字</sup>    
<ins>插入字</ins>    
<del>刪除字</del>
</body>
</html>

在這裏插入圖片描述

5.鏈接

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Document</title>
</head>
<body>    
<a href="https://www.baidu.com">百度</a>
</body>
</html>

6.換行、分割線

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Document</title>
</head>
<body>    
<p>第一行<br>第二行</p>    
<p>分割線</p><hr>    
<p>分割線</p>
</body>
</html>

在這裏插入圖片描述

7.頭部信息

<head> 元素包含了所有的頭部標籤元素。在
<head>元素中你可以插入腳本(scripts), 樣式文件(CSS),及各種meta信息。
可以添加在頭部區域的元素標籤爲: <title>, <style>, 
<meta>, <link>,  
<script>, <noscript>, and <base>.
<head>定義了文檔的信息
<title>定義了文檔的標題
<base>定義了頁面鏈接標籤的默認鏈接地址
<link>定義了一個文檔和外部資源之間的關係
<meta>定義了HTML文檔中的元數據
<script>定義了客戶端的腳本文件
<style>定義了HTML文檔的樣式文件

8.插入圖片

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Document</title>
</head>
<body>    
<p>插入的圖片</p>    
<img src="加油.gif" alt="come on!">
</body>
</html>

在這裏插入圖片描述

9.表格

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Document</title>    
<style>        
table{            
height: 5cm;            
width: 10cm;            
text-align: center;            
color: blue;            
border-color: aquamarine;        
}    
</style><!--設置表格大小,文字位置,顏色-->
</head>
<body>        
<table border="1">        
<caption>student data</caption><!--表格名稱-->        
<tr><th>name</th><th>age</th></tr><!--表頭-->        
<tr><td>tom</td><td>18</td></tr>    
</table>
</body>
</html>

在這裏插入圖片描述
align可以設置位置,left:居左;right:居右;center:居中
height:高度;width:寬度
在stytle中可以設置相關屬性。

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