標(biāo)簽

????????標(biāo)簽的分類

????????按結(jié)構(gòu)分，html標(biāo)簽可以分為單標(biāo)簽和雙標(biāo)簽。

? ? ? ? 單標(biāo)簽

????????由一個(gè)標(biāo)簽組成。例如：

<br/>
<hr/>
<img/>

? ? ? ? 雙標(biāo)簽

????????由開始標(biāo)簽和結(jié)束標(biāo)簽兩部分構(gòu)成，例如：

<a></a>
<h></h>
<p></p>
<div></div>

? ? ? ? 按照屬性分，標(biāo)簽還可以分為塊級(jí)標(biāo)簽和行內(nèi)標(biāo)簽，行內(nèi)標(biāo)簽又叫做內(nèi)聯(lián)標(biāo)簽。

????????塊級(jí)標(biāo)簽和行內(nèi)標(biāo)簽的區(qū)別

????????塊元素，是以另起一行開始渲染的元素，行內(nèi)元素則不需另起一行。

? ? ? ? 標(biāo)簽的兩個(gè)重要屬性

? ? ? ? id值

????????相當(dāng)于是人的身份證，一個(gè)文檔中，id值不能夠重復(fù)，必須唯一。

????????class值

????????是可以有多個(gè)的，一個(gè)標(biāo)簽可以有多個(gè)class值，一個(gè)class值也可以被多個(gè)標(biāo)簽擁有。

? ? ? ? 標(biāo)簽的嵌套

• ????????標(biāo)簽之間是可以互相嵌套的，標(biāo)簽套標(biāo)簽；
• ????????塊兒級(jí)元素是可以嵌套所有的標(biāo)簽的；
• ????????p標(biāo)簽不能夠嵌套塊兒級(jí)元素，但是它可以嵌套行內(nèi)元素；
• ????????行內(nèi)元素只能嵌套行內(nèi)元素，不能夠嵌套塊兒級(jí)元素，非寫了嵌套，也不報(bào)錯(cuò)，只不過是沒有效果。

html常用標(biāo)簽

????????div標(biāo)簽與span標(biāo)簽

????????div標(biāo)簽用來定義一個(gè)塊級(jí)元素，一般用在占位置布局；span標(biāo)簽用來定義內(nèi)聯(lián)(行內(nèi))元素，一般用在占文本布局。它們并無實(shí)際的意義，主要通過CSS樣式為其賦予不同的表現(xiàn)。

????????img標(biāo)簽

? ? ? ? img標(biāo)簽的寫法：

<img src="圖片的路徑" alt="圖片未加載成功時(shí)的提示" title="鼠標(biāo)懸浮時(shí)提示信息" width="寬" height="高(寬高兩個(gè)屬性只用一個(gè)會(huì)自動(dòng)等比縮放)">

? ? ? ? 說明：src中可以寫內(nèi)部的圖片地址，也可以寫外鏈的地址 。

????????a標(biāo)簽

????????a標(biāo)簽的功能

? ? ? ? a標(biāo)簽指的是超鏈接標(biāo)簽，所謂的超鏈接是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是一個(gè)圖片，一個(gè)電子郵件地址，一個(gè)文件，甚至是一個(gè)應(yīng)用程序。

????????a標(biāo)簽的寫法

<a  target="_blank" >點(diǎn)我</a>

????????a標(biāo)簽的href屬性

????????href屬性指定目標(biāo)網(wǎng)頁地址。該地址可以有幾種類型：

• ????????絕對(duì)URL - 指向另一個(gè)站點(diǎn)（比如 href="http://www.jd.com）
• ????????相對(duì)URL - 指當(dāng)前站點(diǎn)中確切的路徑（href="index.htm"）
• ????????錨URL - 指向頁面中的錨（href="#top"）?

????????a標(biāo)簽的target屬性

• ????????_blank表示在新標(biāo)簽頁中打開目標(biāo)網(wǎng)頁
• ????????_self表示在當(dāng)前標(biāo)簽頁中打開目標(biāo)網(wǎng)頁?

????????列表標(biāo)簽

? ? ? ? 列表分為無序列表、有序列表和標(biāo)題列表。

????????無序列表

? ? ? ? 無序列表的寫法

<ul type="disc">
  <li>第一項(xiàng)</li>
  <li>第二項(xiàng)</li>
</ul>

????????無序列表的type屬性

1. disc（實(shí)心圓點(diǎn)，默認(rèn)值）

• circle（空心圓圈）
• square（實(shí)心方塊）
• none（無樣式

????????有序列表

<ol type="1" start="2">
  <li>第一項(xiàng)</li>
  <li>第二項(xiàng)</li>
</ol>

????????有序列表的type屬性:

• 1 數(shù)字列表，默認(rèn)值
• A 大寫字母
• a 小寫字母
• Ⅰ大寫羅馬
• ⅰ小寫羅馬

????????標(biāo)題列表

<dl>
  <dt>標(biāo)題1</dt>
  <dd>內(nèi)容1</dd>
  <dt>標(biāo)題2</dt>
  <dd>內(nèi)容1</dd>
  <dd>內(nèi)容2</dd>
</dl>

????????表格標(biāo)簽

????????表格是一個(gè)二維數(shù)據(jù)空間，一個(gè)表格由若干行組成，一個(gè)行又有若干單元格組成，單元格里可以包含文字、列表、圖案、表單、數(shù)字符號(hào)、預(yù)置文本和其它的表格等內(nèi)容。
表格最重要的目的是顯示表格類數(shù)據(jù)。表格類數(shù)據(jù)是指最適合組織為表格格式（即按行和列組織）的數(shù)據(jù)。

????????表格的基本結(jié)構(gòu)

<table>
  <thead>
  <tr>
    <th>序號(hào)</th>
    <th>姓名</th>
    <th>愛好</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>jason</td>
    <td>杠娘</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Yuan</td>
    <td>日天</td>
  </tr>
  </tbody>
</table>

????????表格的屬性

• border: 表格邊框.
• cellpadding: 內(nèi)邊距
• cellspacing: 外邊距.
• width: 像素 百分比.（最好通過css來設(shè)置長(zhǎng)寬）
• rowspan: 單元格豎跨多少行
• colspan: 單元格橫跨多少列（即合并單元格

????????form表單

????????表單用于向服務(wù)器傳輸數(shù)據(jù)，從而實(shí)現(xiàn)用戶與Web服務(wù)器的交互，表單能夠包含input系列標(biāo)簽，比如文本字段、復(fù)選框、單選框、提交按鈕等等，表單還可以包含textarea、select、fieldset和 label標(biāo)簽。

????????表單屬性

????????表單元素

????????基本概念

????????HTML表單是HTML元素中較為復(fù)雜的部分，表單往往和腳本、動(dòng)態(tài)頁面、數(shù)據(jù)處理等功能相結(jié)合，因此它是制作動(dòng)態(tài)網(wǎng)站很重要的內(nèi)容。

????????所以表單一般用來收集用戶的輸入信息。

????????表單工作原理

????????訪問者在瀏覽有表單的網(wǎng)頁時(shí)，可填寫必需的信息，然后按某個(gè)按鈕提交。這些信息通過Internet傳送到服務(wù)器上。
????????服務(wù)器上專門的程序?qū)@些數(shù)據(jù)進(jìn)行處理，如果有錯(cuò)誤會(huì)返回錯(cuò)誤信息，并要求糾正錯(cuò)誤。當(dāng)數(shù)據(jù)完整無誤后，服務(wù)器反饋一個(gè)輸入完成的信息。? ??

css及選擇器

????????css介紹

????????CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。當(dāng)瀏覽器讀到一個(gè)樣式表，它就會(huì)按照這個(gè)樣式表來對(duì)文檔進(jìn)行格式化（渲染）。

????????每個(gè)CSS樣式由兩個(gè)組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每個(gè)聲明之后用分號(hào)結(jié)束。

? ? ? ? css注釋

/*這是注釋*/

????????css的引入方式

????????行內(nèi)樣式

????????行內(nèi)式是在標(biāo)記的style屬性中設(shè)定CSS樣式。

<p style="color: red">Hello world.</p>

????????內(nèi)部樣式

????????行內(nèi)式是在標(biāo)記的style屬性中設(shè)定CSS樣式。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

????????外部樣式

????????將css寫在一個(gè)單獨(dú)的文件中，然后在頁面進(jìn)行引入。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

????????基本選擇器

????????id選擇器

#i1 {
  background-color: red;
}

????????類選擇器

.c1 {
  font-size: 14px;
}
p.c1 {
  color: red;
}

????????元素選擇器

p {color: "red";}

????????通用選擇器

* {
  color: white;
}

????????組合選擇器

????????后代選擇器

????????li內(nèi)部的a標(biāo)簽設(shè)置字體顏色

li a {
  color: green;
}

????????兒子選擇器

div>p {
  font-family: "Arial Black", arial-black, cursive;
}

????????毗鄰選擇器

div+p {
  margin: 5px;
}

????????弟弟選擇器

#i1~p {
  border: 2px solid royalblue;
}

? ? ? ? 屬性選擇器

????????用于選取帶有指定屬性的元素

p[title] {
  color: red;
}

????????用于選取帶有指定屬性和值的元素文章來源地址http://www.zghlxwxcb.cn/news/detail-732705.html

p[title="213"] {
  color: green;
}

到了這里，關(guān)于第45天：標(biāo)簽的分類和重要屬性及常用標(biāo)簽、css介紹及選擇器的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！