首頁 > 開發者 > 網站開發

【2017-03-20】HTML基礎知識，標記，表格，表格嵌套及布局，超連結

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：控制   字母   劃線   idt   font   enter   輸入   字型大小   超越   

一、HTML  網站（網站）,網頁基礎知識

HTML是一門程式設計語言的名字：超文字標記語言 (HTML)

可以理解為：超越了文本的範疇，可以有圖片、視頻、音頻、動畫特效等其他內容，用標記的方法進行編程的電腦語言

基本格式：

<html>

<title>標題名稱</title>

<head>

網頁渲染，特效

</head>

<body>

  網頁內容

</body>

</html>

 

二、標記

添加註釋：<!--注釋內容-->

1.文字標記

文字加粗：<b>文字</b>   或  <strong>文字<strong>

文字傾斜：<i>文字</i>

文字底線：<u>文字</u>

文字顏色，字型大小，字型：<font color=""  size=""  face="">文字</font> 

color可以為顏色的英文名稱，也可以為色號，即#+(A-F)之間任意3個字母      (http://tool.oschina.net/commons?type=3)

size=1-7其中一個數字   1最小，7最大

face直接寫字型的中文名稱即可

2.圖片標記

<img src="圖片路徑" width="寬度" height="高度" title="標籤">   （圖片最好和HTML檔案放在一個同一個檔案夾，方便操作）   ../  向上一層

title是圖片標籤,顯示效果：將滑鼠放置到圖片上會顯示該圖片對應的標籤的內容

如果想將圖片等比放大或縮小隻需控制寬度或者高度其中一項即可

寬度和高度可以為數值，也可以為%，width=100%即為將圖片左右平鋪，height=100%即為將圖片上下平鋪

3、常用標記

&nbsp;   --空格

<br/>    --換行

<p>段落內容<p>    --段落上下會各空一行

 

三、表格

1.基本格式

<table>                           --表格

   <tr>                            --行

      <td></td>                --儲存格

      <td></td>

      <td></td>

   </tr>

   <tr>

      <td></td>

      <td></td>

   </tr>

</table>

表示建立一個表格，第一行有3個儲存格，第二行有2個儲存格

2.屬性

border=""     --邊框粗細，0或1

width=""       --寬度，   px或%

height=""      --高度，   px或%

align=""        --水平排列格式，center/left/right

valign=""       --垂直排列格式，center/top/bottom

bgcolor=""   　   --背景色

background=""    --背景圖片

cellspacing=""      --儲存格之間的間距  外間距

cellpadding=""     --儲存格與內容的間距    內間距

3.去掉瀏覽器介面中表格四周的空白邊框

在<head></head>輸入如下代碼：

<style type="text/css">

*{

padding:0px;

margin:0px;

}

</style>

 

四、超連結

<a href="連結地址">圖片/文字</a>     --點擊圖片/文字直接從本頁面跳轉到連結頁面

註：連結地址如果是本地地址，填寫相對路徑即可；連結地址如果是公用網址，則必須加http://

<a href="連結地址" target="_blank">圖片/文字</a>    --點擊圖片/文字，會建立網頁跳轉到連結頁面

【2017-03-20】HTML基礎知識，標記，表格，表格嵌套及布局，超連結

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More