肖sir_html之A鏈接標(biāo)簽認(rèn)識(shí)（2）

接標(biāo)簽

定義：從一個(gè)網(wǎng)頁指向另一個(gè)網(wǎng)頁的目的地，

有四種類型：

（1）鏈接覆蓋原有的鏈接

（2）新開一個(gè)窗口

（3）圖片鏈接

（4）死鏈接

html:

<!doctype html>

<head>

</head>

<body>

</body>

</html>

挑戰(zhàn)30天在頭條寫日記#

HTML是一種用于創(chuàng)建網(wǎng)頁結(jié)構(gòu)和內(nèi)容的標(biāo)記語言，其中包含了許多標(biāo)簽，可以用于排版、布局和展示內(nèi)容。本文將詳細(xì)介紹HTML中的<tr>和<td>標(biāo)簽的使用方法，并通過示例展示如何創(chuàng)建表格。

1. <tr>標(biāo)簽的作用： <tr>標(biāo)簽代表HTML表格中的一行（行數(shù)據(jù)），它可以包含一個(gè)或多個(gè)<td>元素作為單元格。

2. <td>標(biāo)簽的作用： <td>標(biāo)簽用于定義表格中的一個(gè)單元格（列數(shù)據(jù)），可以包含文本、圖像、鏈接等內(nèi)容。

3. 如何使用<tr>和<td>： 在使用<tr>和<td>標(biāo)簽時(shí)，首先需要?jiǎng)?chuàng)建一個(gè)<table>元素作為表格的容器，然后在其中嵌套<tr>和<td>標(biāo)簽，如下所示：

htmlCopy code<table>
  <tr>
    <td>單元格1</td>
    <td>單元格2</td>
  </tr>
  <tr>
    <td>單元格3</td>
    <td>單元格4</td>
  </tr>
</table>

4. 表格樣式： 可以使用CSS來為表格添加樣式，如設(shè)置邊框、背景顏色等。以下是一個(gè)簡(jiǎn)單的示例：

htmlCopy code<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
</style>

5. 示例應(yīng)用： 以下示例演示了如何使用<tr>和<td>標(biāo)簽創(chuàng)建一個(gè)包含姓名、年齡和城市的簡(jiǎn)單表格：

htmlCopy code<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
    }
  </style>
</head>
<body>

<table>
  <tr>
    <td>姓名</td>
    <td>年齡</td>
    <td>城市</td>
  </tr>
  <tr>
    <td>張三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>28</td>
    <td>廣州</td>
  </tr>
</table>

</body>
</html>

6. 書籍參考：

"HTML and CSS: Design and Build Websites" by Jon Duckett
"Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics" by Jennifer Niederst Robbins

7. 總結(jié)： 通過本文的介紹，我們了解了HTML中<tr>和<td>標(biāo)簽的基本用法，以及如何創(chuàng)建簡(jiǎn)單的表格和添加樣式。使用這些標(biāo)簽，我們可以輕松地創(chuàng)建具有結(jié)構(gòu)和內(nèi)容的網(wǎng)頁表格，提升頁面的可讀性和可視性。

言

如果網(wǎng)頁只有一種顏色，那是非常可怕的，顏色的設(shè)置豐富了網(wǎng)頁，就如同多彩繽紛的世界。

在了解css顏色之前，我們回顧下計(jì)算機(jī)是如何顯示顏色的？計(jì)算機(jī)根據(jù)色光三原色的原理通過各種算法來顯示顏色。

css 顏色 —— color

網(wǎng)頁中使用顏色關(guān)鍵字、16進(jìn)制字符、rgb、rgba等表示紅，綠，藍(lán)三種顏色混合色，如下示例,幾種寫法都是指同一個(gè)顏色（紅色）：

color：red;
color: #ff0000;
color: rgb(255,0,0)
color: rgba(255,0,0,1)

對(duì)于16進(jìn)制形式，每2位表示一個(gè)顏色，從左到右分別是紅、綠、藍(lán)，每種顏色取值從00 到 FF。

如下示例：

color: #000000; /*黑色*/
color: #ffffff; /*白色*/
color: #ff0000; /*紅色*/
color: #00ff00; /*綠色*/
color: #0000ff; /*藍(lán)色*/

對(duì)于rgb的表示法，由三個(gè)參數(shù)組成，分別是紅、綠、藍(lán)，每種顏色取值從0 到 255。

如下示例：

color: rgb(0,0,0); /*黑色*/
color: rgb(255,255,255); /*白色*/
color: rgb(255,0,0); /*紅色*/
color: rgb(0,255,0); /*綠色*/
color: rgb(0,0,255); /*藍(lán)色*/

紅，綠，藍(lán)值從0到255的結(jié)合，給出了總額超過1600多萬不同的顏色（256 × 256 ×256）。

但是現(xiàn)代大多數(shù)顯示器能夠顯示至少16384種顏色。所以在使用顏色時(shí)要格外注意，避免設(shè)置不能夠顯示的顏色，可以參考網(wǎng)頁安全色：https://www.w3school.com.cn/cssref/css_colors.asp。

顏色除了有三原色紅綠藍(lán)組成，還有亮度層級(jí)，如下圖：

rgba 中的a是指透明度，這個(gè)是css3新增加的屬性，通過rgba可以設(shè)置更加漂亮的顏色。

css 背景 —— background

通過background屬性可以設(shè)置元素的背景色、背景圖片，語法如下：

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

background 在一個(gè)聲明中設(shè)置所有的背景屬性，可以在這里設(shè)置如下屬性：

background-color —— 背景顏色。
background-image —— 使用的背景圖像
background-position —— 背景圖像的位置
background-size —— 背景圖片的大小
background-repeat —— 如何重復(fù)背景圖像
background-origin —— 背景圖片的定位區(qū)域
background-clip —— 背景的繪制區(qū)域
background-attachment —— 背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)。

各值之間用空格分隔，不分先后順序。可以只有其中的某些值，例如 background：＃FF0000 url(img.png)是允許的，但至少有一個(gè)值。

建議使用background 簡(jiǎn)寫屬性，這樣可以更好地兼容較老的瀏覽器，少寫很多代碼，當(dāng)然你也可以分開使用，比如：

background-color: #ff0000;
background-image: url(img.png);
background-repeat: no-repeat;
background-size: 100% auto;

1、背景顏色 —— background-color

background-color 和之前講的的color 一樣，可以使用16進(jìn)制、rgb、rgba等設(shè)置顏色。如下實(shí)例：

<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
</style>
</head>
<body>
<h1>背景色1</h1>
<h2>背景色2</h2>
<p>背景色3</p>
<p class="no2">背景色4</p>
</body>
</html>

如下圖顯示：

注意：background-color: transparent; 指透明色，不顯示任何顏色。

2、背景圖片的使用——background-image

給html元素添加背景圖片，在早期網(wǎng)頁制作中被廣泛應(yīng)用，如今已不建議大量使用。如下實(shí)例：

body {background-image:url(/static/bg.gif);}

這里使用了一個(gè)125*125大小的圖片，如下：

但是你會(huì)發(fā)現(xiàn)，整個(gè)網(wǎng)頁鋪滿了圖片，上面的代碼默認(rèn)會(huì)鋪滿整個(gè)頁面從左到右，從上到下。如果不想被平鋪，可以使用background-repeat 設(shè)置。

背景圖片同時(shí)可以設(shè)置多個(gè)背景圖片，如下：

background-image: url(/statics/bg1.gif), url(/statics/bg2.gif);

多個(gè)圖像以逗號(hào)隔開，在頁面中多個(gè)圖片會(huì)疊加顯示，第一張圖片顯示在最頂端。

如下效果：

3、背景重復(fù)方式 —— background-repeat

它有如下幾個(gè)屬性：

repeat	默認(rèn)。背景圖像將在垂直方向和水平方向重復(fù)。
repeat-x	背景圖像將在水平方向重復(fù)。
repeat-y	背景圖像將在垂直方向重復(fù)。
no-repeat	背景圖像不重復(fù)。
inherit	從父元素繼承 background-repeat 屬性的設(shè)置。

實(shí)例如下：

4、背景圖的位置 —— background-position

背景圖片默認(rèn)顯示在左上角，語法如下：

background-position: x y; // x 距離左邊距離，y距離頂部距離

如果要改變它的位置，可以使用關(guān)鍵字：top、bottom、left、right 和 center；或者使用長(zhǎng)度值，如 100px 或 5cm；也可以使用百分?jǐn)?shù)值。

x 可以取值百分比| 數(shù)值| left | center | right。

y 可以取值百分比| 數(shù)值| top| center | bottom。

當(dāng)只設(shè)置一個(gè)值的時(shí)候，另一個(gè)會(huì)缺省為 center。

使用關(guān)鍵字，將背景圖片水平居中，垂直居中：

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;

使用百分比%：

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50% 50%;

50% 50% 等同于 center center，顯示效果和上圖一樣。

還可以使用具體數(shù)值，比如 px、em、cm等。

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50px 50px;

顯示效果如下：

5、背景圖相對(duì)于容器的基準(zhǔn)點(diǎn) —— background-origin

就是設(shè)置背景圖片相對(duì)于html元素什么位置作為初始坐標(biāo)點(diǎn)，語法：

background-origin: padding-box|border-box|content-box;

幾種值得含義：

padding-box	背景圖像相對(duì)填充框的位置
border-box	背景圖像相對(duì)邊界框的位置
content-box	背景圖像相對(duì)內(nèi)容框的位置

如下實(shí)例：

6、背景圖片大小 —— background-size

默認(rèn)會(huì)顯示背景圖原始尺寸，可以通過此屬性設(shè)置背景圖片在元素上的大小，語法：

background-size: width height;

寬度和高度可以使用數(shù)值、百分比%、cover 及 contain ;

數(shù)值：可以使用任何單位的數(shù)字，比如 px、em、cm等。如果設(shè)置一個(gè)值，第二個(gè)為"auto(自動(dòng))"。

百分比%：相對(duì)于其所在html原始寬度和高度，如果設(shè)置一個(gè)值，第二個(gè)為"auto(自動(dòng))"。

cover：把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。

contain：把背景圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。

如下示例：

7、背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)

background-attachment 屬性有以下幾個(gè)值：

scroll	背景圖片隨頁面的其余部分滾動(dòng)。這是默認(rèn)
fixed	背景圖像是固定的
inherit	指定background-attachment的設(shè)置應(yīng)該從父元素繼承
local	背景圖片隨滾動(dòng)元素滾動(dòng)

如設(shè)置一個(gè)固定的背景圖片，不跟隨頁面滾動(dòng)：

background-attachment:fixed;

滾動(dòng)滾動(dòng)條，會(huì)發(fā)下背景圖片始終固定在屏幕那個(gè)位置。

8、背景繪制區(qū)域 —— background-clip

語法如下：

background-clip: border-box|padding-box|content-box;

border-box	默認(rèn)值。背景繪制在邊框方框內(nèi)（剪切成邊框方框）。
padding-box	背景繪制在襯距方框內(nèi)（剪切成襯距方框）。
content-box	背景繪制在內(nèi)容方框內(nèi)（剪切成內(nèi)容方框）。

這個(gè)屬性類似于 background-origin ，只不過它會(huì)裁剪背景圖片，如下示例：

9、背景層的混合模式 —— background-blend-mode

所謂混合模式就是將圖片與顏色或圖片與圖片進(jìn)行混合，語法：

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

屬性值：

示例如下：

正常模式

luminosity 亮度模式

color 顏色模式

其它模式可以自己試試，看下有什么區(qū)別。

到此，我們了解了顏色和背景的使用方法，尤其是背景的使用，由于它的屬性很多，可以簡(jiǎn)寫也可以分開寫，要想完全掌握，還得多練習(xí)，每種屬性進(jìn)行組合使用看看其效果。

一般建議使用 background 簡(jiǎn)寫方式，主要是可以少寫很多代碼。以上介紹難免有誤，或不齊全，歡迎指出錯(cuò)誤，并補(bǔ)充。

上篇：前端入門——css鏈接樣式

在線咨詢

上一篇：英語國際音標(biāo)簡(jiǎn)明教程（IPA），附：語音練習(xí)方法+語音練習(xí)材料
下一篇：插電混動(dòng)汽車+html頁面中如何引入html

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

肖sir_html之A鏈接標(biāo)簽認(rèn)識(shí)（2）

言

css 顏色 —— color

css 背景 —— background

您的項(xiàng)目需求