HTML基礎簡介、內容標簽、屬性、表格表單

TML基礎簡介
超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。

HTML是一個網頁文件的拓展名，和txt、jpg、mp3一樣，是一個文件格。.html文件就是網頁文件。

2.html 的格式化標簽

<!DOCTYPE>
<html>
--html是一個雙標簽開始標簽
<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>
</title> --可能是標題
</head>
<body>--用來存放頁面中的內容
</body>
</html> --結束標簽

DOCTYPE----文檔類型聲明
meta標簽----設置頁面編碼格式，關鍵字，以及頁面的描述
<title></title>--------->標題部分
<head></head>------>頁面的頭部分
<body></body>------>頁面的主體部分

2.內容標簽

這其中<hr> <br> 是單標簽
<div></div> <span></span> 無意義區塊容器標簽
eg:
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的網頁標題</h1></div>

HTML標記—注釋標記

<!--注釋語句-->

標題：
<h1>這是一個標題</h1>
<h2>這是一個標題</h2>
<h3>這是一個標題</h3>

段落：
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>

HTML 鏈接

<a >這是一個鏈接</a>
當您點擊 HTML 頁面中的某個鏈接時，對應的 <a> 標簽指向萬維網上的一個地址。
一個統一資源定位器(URL) 用于定位萬維網上的文檔。
URL - 統一資源定位器
scheme - 定義因特網服務的類型。最常見的類型是 http
host - 定義域主機（http 的默認主機是 www）
domain - 定義因特網域名，比如 runoob.com
:port - 定義主機上的端口號（http 的默認端口號是 80）
path - 定義服務器上的路徑（如果省略，則文檔必須位于網站的根目錄中）。
filename - 定義文檔/資源的名稱

這里需要注意:使用超鏈接做下載,并不是超鏈接完成的下載功能,而是通過超鏈接跳轉到了一個有下載功能的頁面。

常見的 URL Scheme

HTML 圖像

alt 屬性用來為圖像定義一串預備的可替換的文本。

3.HTML屬性

屬性實例:

HTML 鏈接由 <a> 標簽定義。鏈接的地址在 href 屬性中指定：<a >這是一個鏈接</a>

4.HTML 表格

表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。表格的表頭使用 <th> 標簽進行定義。

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

5.HTML 表單

表單是一個包含表單元素的區域。

表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。

文本域（Text Fields）

文本域通過<input type="text"> 標簽來設定
當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域
密碼字段
密碼字段通過標簽<input type="password"> 來定義:
<form>
FirstName: <input type="text" name="firstname"><br>
Password: <input type="password" name="pwd">
</form>

單選按鈕（Radio Buttons）

<input type="radio"> 標簽定義了表單單選框選項
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
單選有時需要設置默認選項,需要設置checked屬性:
<input type="radio" name="sex" checked ="checked"/>男

復選框（Checkboxes）

<input type="checkbox"> 定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
多選框一般不需要設置默認選項,如果要設置,也是設置checked屬性

提交按鈕(Submit Button)

<input type="submit"> 定義了提交按鈕.

當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
這里需要注意的是: Submit必須要和form一起使用才能達到效果
action 設置表單提交參數路徑
method 當前請求方式(同iOS開發網絡請求一樣,get/post)

假如您在上面的文本框內鍵入幾個字母，然后點擊確認按鈕，那么輸入數據會傳送到 "html_form_action.php" 的頁面。該頁面將顯示出輸入的結果。

圖片按鈕(使用不多)

Select下拉框

selected默認選項
<select>
<option selected="selected" >選項一</option>
<option>選項二</option>
</select>

Textarea文本域

<textarea></textarea>

6.HTML 列表

HTML 支持有序、無序和定義列表:

無序列表使用 <ul> 標簽
<ul>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。
列表項項使用數字來標記。
<ol>
<li>第一個列表項</li>
<li>第二個列表項</li>
<li>第三個列表項</li>
</ol>
自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
去除點去除下劃線
a {
text-decoration: none;
}
ul {
list-style: none;
}

7.內聯樣式- 在HTML元素中使用"style" 屬性

HTML樣式實例 - 背景顏色
<body style="background-color:yellow;">
<h2 style="background-color:red;">這是一個標題</h2>
<p style="background-color:green;">這是一個段落。</p>
</body>

HTML 樣式實例 - 字體, 字體顏色，字體大小

我們可以使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義字體的樣式:

HTML 樣式實例 - 文本對齊方式

<h1 style="text-align:center;">居中對齊的標題</h1>

而關于其他CSS內容,這里就簡單介紹一下:

內部樣式表

當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在<head> 部分通過 <style>標簽定義內部樣式表:

<head>
<style type="text/css">
body {background-color:yellow;
}
p {color:blue;}
</style>
</head>

外部樣式表

當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。

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

HTML 樣式標簽

最后提一下什么是Web安全色?

數年以前，當大多數計算機僅支持 256 種顏色的時候，一系列 216 種 Web 安全色作為 Web 標準被建議使用。其中的原因是，微軟和 Mac 操作系統使用了 40 種不同的保留的固定系統顏色（雙方大約各使用 20 種）。

216 跨平臺 web 安全色被用來確保：當計算機使用 256 色調色板時，所有的計算機能夠正確地顯示所有的顏色。

篇我們學習CSS列表。

對于列表，大家并不陌生。比如下面的無序列表和有序列表。

在 HTML 中，最常用的兩種列表的類型就是無序列表和有序列表，使用 ol 和 ul 元素實現。列表項通過列表元素屬性，實現空心實心圓點和數字字母等不同的形式。

在 CSS 中，列表屬性允許我們為有序列表、無序列表設置不同的列表項標記，甚至可以使用一個圖像，還可以為列表和列表項添加背景顏色。

應用 list-style-type 屬性設置不同的列表項標記。屬性值有很多，

比如：

circle 空心圓點，

disc 實心圓點，

square 小方點，

decimal 數字，

upper-roman 大寫羅馬字母，

lower-alpha 小寫字母等等。

舉個例子。

創建創建 css-list.html 文件和 list-style.css 文件。打開 html 文件，構建基礎代碼，使用 emmet 命令：小括號 ul 大于 li 乘以3 再乘以3 (ul>li*3)*3。回車，創建了三組無序列表。給三個 ul 元素添加 class 屬性，值分別為 a，b，c。給每個列表項填入一些文本。

HTML
<body>
  <ul class="a">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
  <ul class="b">
    <li>Vue</li>
    <li>React</li>
    <li>小程序</li>
  </ul>
  <ul class="c">
    <li>大前端</li>
    <li>前端架構</li>
  </ul>

  <ol class="d">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ol>
  <ol class="e">
    <li>Vue</li>
    <li>React</li>
    <li>小程序</li>
  </ol>
  <ol class="f">
    <li>大前端</li>
    <li>前端架構</li>
  </ol>
</body>

拷貝這三組無序列表，將 ul 元素名稱修改為 ol，三個 class 值改為 d，e，f。

打開 css 文件，定義選擇器 ul.a，聲明樣式 list-style-type: circle，設置列表項標記為空心圓點。拷貝兩組樣式，修改選擇器 ul.b，ul.c。修改 list-style-type 屬性值分別為 disc，實心圓點，square 小方點。

無序列表效果就做好了！

定義選擇器 ol.d，聲明樣式 list-style-type: decimal，設置列表項標記為數字。拷貝兩組樣式，修改選擇器 ol.e，ol.f。修改 list-style-type 屬性值分別為 upper-roman，大寫羅馬字母，lower-alpha 小寫字母。

有序列表也實現了！

CSS
ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: disc;
}

ul.c {
  list-style-type: square;
}

ol.d {
  list-style-type: decimal;
}

ol.e {
  list-style-type: upper-roman;
}

ol.f {
  list-style-type: lower-alpha;
}

有關更多的 list-style-type，大家參照這個案例。

list-style-image 屬性指定了一個圖像作為列表項的標記。屬性值為 url 小括號，括號里寫入圖片的路徑 url('./xxx.gif') 。

舉個例子。

在 html 里，拷貝第一組 ul，將 class 的值改為 g。在 css 里，定義選擇器 ul.g，聲明樣式屬性 list-style-image，值為 url 小括號，圖片路徑為當前目錄下的 purple.gif。

看看效果，列表項用圖片標記了！

除了更換列表項的標記，還可以設置標記的位置，通過 list-style-position 屬性來實現。這個屬性的值有兩個：outside，表示標記在列表項之外。inside，表示標記在列表項內部。

舉個例子。

在 html 里添加一個 h3 元素，填入一些文本。ul 點 h 大于 li 乘以 3 ul.h>li*3，創建一個無序列表，填入一些文本。拷貝這組列表，將 class 值改為 i。

在 css 里定義 ul.h 選擇器，聲明樣式 list-style-position: outside。定義 ul.i 選擇器，聲明樣式 list-style-position: inside。

仔細觀察列表項標記的位置，如果這里畫一條線，就一目了然了，outside，標記在列表內容的左側，也是默認的位置。inside，標記在列表內容里面。

有時，我們不希望顯示列表項標記，此時可以應用 list-style-type: none 來去掉他們。

再復制一組這個列表，將 class 值修改為 j。再定義選擇器 ul.j，聲明樣式 list-style-type: none。

我們看，列表項標記消失了。

同樣，列表屬性也可以使用簡寫——list-style，被用來在一個聲明中，設置所有的列表屬性。屬性值按照 list-style-type list-style-position list-style-image 順序來書寫，某個值缺省的話，就使用它的默認值。

復制兩份列表，修改 class 值分別為 k，l （這個是艾奧）。

HTML
<ul class="k">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<ul class="l">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

定義選擇器 ul.k，聲明樣式 list-style: square inside url("purple.gif")。再定義選擇器 ul.l，聲明樣式 list-style: none。

這樣的簡寫，同樣可以定義列表項的標記樣式，方便快捷。

我們還可以用顏色來裝飾列表，使它們看起來更有趣。添加到 ol 或 ul 標簽的任何樣式都會影響整個列表，而添加到 li 標簽的屬性只會影響單個列表項。

在 html 中再復制兩組列表，修改 class 的值分別為 m，n。

HTML
<ul class="m">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>

  <ol class="n">
    <li>Vue</li>
    <li>React</li>
    <li>小程序</li>
  </ol>

定義 ul.m 選擇器，聲明樣式：background: #3399ff，padding: 20px。

定義 ol.n 選擇器，聲明樣式：background: #ff9999，padding: 20px。

定義 ul.m li 選擇器，聲明樣式：background: #cce5ff，color: darkblue，margin: 5px。

定義 ol.n li 選擇器，聲明樣式：background: #ffe5e5，color: darkred，padding: 5px，margin-left: 35px。

這樣，列表就裝飾好了！

這里用到的 padding 和 margin 屬性，給元素添加內外邊距，我們在后面的課程里還會詳細的研究。

CSS
ul.m {
  background: #3399ff;
  padding: 20px;
}

ol.n {
  background: #ff9999;
  padding: 20px;
}

ul.m li {
  background: #cce5ff;
  color: darkblue;
  margin: 5px;
}

ol.n li {
  background: #ffe5e5;
  color: darkred;
  padding: 5px;
  margin-left: 35px;
}

文章配套視頻鏈接：https://www.bilibili.com/video/BV1oU4y1278g?p=73

本文中，我們將討論無序列表，在制作現代網站和應用程序時，無序列表的發展是不可避免的。

你是否做了很多很多名單的粉絲？我也不是。但是，這里我們不是在談論家務或購物清單。我們正在討論制作現代網站和應用程序時不可避免的有序和無序列表。

如前所述，在HTML和CSS中創建列表時，有兩種類型：有序和無序。在有序列表的情況下，存在數字。另一方面，在無序列表的情況下，不存在計數，這就是為什么這些類型的列表的通用名稱是項目符號列表。

使用列表時，正確格式化文本非常重要。

本文的重點將放在無序列表上，以及子彈的類型和屬性。

無序列表使用

<ul></ul>

標簽。我們來看一個簡單的例子。

HTML

<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<ul>

類型屬性

該類型屬性可以被用來確定哪個子彈的類型將在列表中被使用。該屬性可以由三個不同的值組成：

Circle
Disc
Square

可以在<ul></ul>or <li></li>元素上設置項目符號類型，這意味著您可以在整個列表中設置樣式，或者單獨設置每個列表項目的樣式。

需要知道的是在創建列表時使用哪種字體大小。

Bullet樣式

為了改變項目符號樣式，可以使用兩個屬性。該列表樣式類型屬性或列表樣式。不同的是，通過使用第二個，我們可以同時更改多個屬性。但我們會在稍后討論。

CSS

.ul { list-style-type: square; }

這里我們看到列表樣式設置為square。

使用自定義圖像

借助CSS的強大功能，可以使用自定義圖像作為子彈。通常，它是一個簡單的小圖標。為此，我們使用list-style-image。

CSS

ul { list-style-image: url(‘images/sample-bullet.png’); }

Bullet位置

我們也可以通過使用list-style-position屬性來設置項目符號的位置。它可以有兩個值：外部和內部。

CSS

ul { list-style-position: outside; }

CSS

ul { list-style-position: inside; }

第一張圖片顯示的是設置為外部的值，第二張圖片的值設置為內部。

將值設置為外部時，表示子彈將位于列表項之外。并且，將值設置為內部時，子彈將位于列表項內。

不要忘記給列表一些樣式。

如果這種造型不夠，可以改變項目符號的顏色。

合并屬性

如前所述，您可以通過設置列表樣式來組合多個屬性。

CSS

ul { list-style: square inside url("element.gif"); }

通過這個簡寫，我們同時設置了列表式樣式，列表式樣位置和列表式樣圖像。

概要

開發網站和應用程序時經常使用列表，所以您應該始終知道如何設計它們。我希望這個簡短的解釋能幫助你的項目。

在線咨詢

上一篇：手把手教你使用Python網絡爬蟲獲取B站視頻選集內容（附源碼）
下一篇：web常用編程語言對比排行

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML基礎簡介、內容標簽、屬性、表格表單

類型屬性

Bullet樣式

使用自定義圖像

Bullet位置

合并屬性

概要

您的項目需求