iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0
自我挑戰組

從零開始前端學習(HTML、CSS、JavaScript) 系列 第 1

Day 01 HTML<常用標籤>

  1. 標題標籤**

<h1> - <h6> (一級標題 - 六級標題)

文字粗體與大小 從h1為最粗最大 至h6為最細最小

標題標籤範例

2.分段標籤&換行標籤

<p> 分段標籤 主要拿來進行文字分段 </p> 
<br> 文字換行使用

3. 文字標籤

<strong> - </strong> or <b> - </b> (文字粗體)

<em> - </em> or <i> - </i> (文字斜體)

<del> - </del> or <s> - </s> (給文字添加刪除線)

<ins> - </ins> or <u> - </u> (給文字添加下劃線)

文字標籤範例

4. 區塊(盒子)標籤
此標籤為用來裝內容的區塊,主要使用來配置版面

<div> - </div>
默認為塊狀元素(block),一般來說一行只能有一個塊狀標籤
<span> - <span>
默認為行內元素(inline),一行可以有多個span標籤

區塊標籤範例

5. 圖片標籤
此標籤是用來插入圖片 src後添加欲插入圖片的文件路徑。

<img src = "圖片路徑">

code後面可添加其他屬性賦予不同功能:

alt 替換文本,當圖片不能顯示時出現的文字 EX:alt="此圖片目前顯示不出"
title 提示文本,滑鼠放到圖像上會顯示的文字 EX: title="圖片細節"
width 設置圖片的寬度 EX: width:500px
height 設置圖片的高度 EX: height:500px

<img src="圖片路徑" alt="此圖片目前顯示不出" title="圖片細節" width="500px" height="500px"">

6.超連結標籤
此標籤是用來添加超連接 使點擊後可以進行跳轉到其他頁面

<a href="欲跳轉的網址" target="網址跳轉後的方式"> 欲顯示的文字...


下一篇
Day 02 HTML<表格標籤>
系列文
從零開始前端學習(HTML、CSS、JavaScript) 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言