整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML 支持有序、無序和定義列表:
HTML 列表
有序列表
| 無序列表
|
本例演示無序列表。無序列表
有序列表
本例演示有序列表。
HTML無序列表
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表使用 <ul> 標簽
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
瀏覽器顯示如下：
Coffee
Milk
HTML 有序列表
同樣，有序列表也是一列項目，列表項目使用數字進行標記。 有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。
列表項項使用數字來標記。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
瀏覽器中顯示如下：
Coffee
Milk
HTML 自定義列表
自定義列表不僅僅是一列項目，而是項目及其注釋的組合。
自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
瀏覽器顯示如下：
Coffee
- black hot drink
Milk
- white cold drink
注意事項 - 有用提示
提示: 列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
更多實例
不同類型的有序列表
本例演示不同類型的有序列表。
不同類型的無序列表
本例演示不同類型的無序列表。
嵌套列表
本例演示如何嵌套列表。
嵌套列表 2
本例演示更復雜的嵌套列表。
自定義列表
本例演示一個定義列表。
HTML 列表標簽
| 標簽 | 描述 |
|---|---|
| <ol> | 定義有序列表 |
| <ul> | 定義無序列表 |
| <li> | 定義列表項 |
| <dl> | 定義定義列表 |
| <dt> | 自定義列表項目 |
| <dd> | 定義自定列表項的描述 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
所謂超文本，有2層含義：
標題標簽 <hx></hx>
段落標簽 <p></p>
水平線標簽 <hr />
換行標簽 <br/>
無語義標簽 <div></div> 和 <span></span> 注:這兩個標簽在后期經常使用文本格式化標簽
<b></b>和<strong></strong> 文字加粗
<i></i>和<em></em> 斜體
<s></s>和<del></del> 加刪除線
<u></u>和<ins></ins> 加下劃線圖片標簽
<img src="圖像URL" /> src 圖像路徑 圖像標簽 <img src="圖像URL" /> 該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標簽的必需屬性。
屬性:
alt 文本,圖像不顯示時顯示文字<img src="" alt="">
title 文本,鼠標懸停時顯示內容<img src="cz.jpg" title="文本" />
width 圖像寬度<img src="cz.jpg" width="300" height="300" />
height 圖像高度<img src="cz.jpg" width="300" height="300" />
border 設置圖像邊框寬度<img src="cz.jpg" border="3" />
鏈接標簽
<a href="#" target="目標窗口的彈出方式">文本或圖像</a>屬性：
href (鏈接地址)必須寫 | 用于指定鏈接目標的url地址，（必須屬性）當為標簽應用href屬性時，它就具有了超鏈接的功能 | 1. 外部鏈接 需要添加 http:// www.baidu.com | ||
target (默認當前窗口打開,可新建窗口打開) | 用于指定鏈接頁面的打開方式，其取值有self和blank兩種，其中_self為默認值，__blank為在新窗口中打開方式。 |
錨點標簽
id="" | 錨點定位 | 通過創建錨點鏈接，用戶能夠快速定位到目標內容。 | <h3 id="two">第2集</h3> | 使用相應的id名標注跳轉目標的位置。 (找目標) |
base標簽
<base target="_blank" /> | base 可以設置整體鏈接的打開狀態 | base 寫到 <head> </head> 之間 |
預格式化標簽
<pre>文本</pre> | 標簽可定義預格式化的文本。 | 所謂的預格式化文本就是 ，按照我們預先寫好的文字格式來顯示頁面， 保留空格和換行等。 |
表格標簽
<table> 定義表格標簽 | border | 設置表格邊框(默認border="0"無邊框) | <table> |
cellspacing | 設置單元格與單元格之間的空白間距 (默認2像素) | ||
cellpadding | 設置單元格內容與單元格邊框之間的空白間距 (默認1像素) | ||
width | 設置表格的寬度 | ||
height | 設置表格的高度 | ||
align | 設置表格在網頁中的水平對齊方式 (三個屬性:left左 center中 right右 ) | align="center" align="right" | |
caption | caption 元素定義表格標題，通常這個標題會被居中且顯示于表格之上。 | <caption>個人信息表</caption> | |
rowspan="合并單元格的個數" | 跨行合并 | 合并的順序我們按照 先上 后下 先左 后右 的順序 | |
colspan="合并單元格的個數" | 跨列合并 | <td colspan="3"> </td> | |
<caption></caption> | 表格標題標簽 | ||
<tr></tr><td></td> | 標簽，他就像一個容器，可以容納所有的元素 | <tr><td></td></tr> | |
<th><td> | 一般表頭單元格位于表格的第一行或第一列，并且文本加粗居中 | <th><td></td></th> | |
<thead> 于定義表格的頭部。用來放標題之類的東西。<thead> 內部必須擁有 <tr> 標簽！ | 以上標簽都是放到table標簽中。 | 更好的給表格劃分結構 | |
<tbody> 用于定義表格的主體。放數據本體 。 | 以上標簽都是放到table標簽中。 | ||
<tfoot>放表格的腳注之類。 | 以上標簽都是放到table標簽中。 |
列表標簽
列表(ul里面只能包含li ,li里面可以包含標簽) | <ul><li></li></ul> | 無序列表 | 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。 | 里面只能包含li 沒有順序，我們以后布局中最常用的列表 | ||
<ol><li></li></ol> | 有序列表 | 所有特性基本與ul 一致。 但是實際中比 無序列表 用的少很多。 | 里面只能包含li 有順序， 使用情況較少 | |||
<dl> | 自定義列表 | 里面有2個兄弟， dt 和 dd |
input控件
<input type="屬性值" value="你好"> | text | 單行文本輸入框 | |
password | 密碼輸入框 | ||
radio | 單選按鈕 | ||
checkbox | 復選按鈕 | ||
button | 普通按鈕 | ||
submit | 提交按鈕 | ||
reset | 重置按鈕 | ||
image | 圖像形式的提交按鈕 | ||
file | 文本域 | ||
name | 由用戶自定義 | 控件的名稱 | 用戶名:<input type="text" name=“username” /> |
value | 由用戶自定義 | input控件中的默認問本值 | 用戶名:<input type="text" name="username" value="請輸入用戶名"> |
size | 正整數 | input控件在頁面中的顯示寬度 | |
checked 默認被選中 | checked | 定義選擇控件默認被選中的項 | <input type="radio" name="sex" value="女" />女 |
maxlength | 正整數 | 控件允許輸入的最多字符數 |
<label> </label>
<label> 用戶名： <input type="radio" name="usename" value="請輸入用戶名"> </label> | 第一種用法就是用label直接包括input表單。 | 當我們鼠標點擊 label標簽里面的文字時， 光標會定位到指定的表單里面 | |
<label for="sex">男</label> | 第二種用法 for 屬性規定 label 與哪個表單元素綁定。 | 當我們鼠標點擊 label標簽里面的文字時， 光標會定位到指定的表單里面 |
文本域
<textarea >文本內容</textarea> | 通過textarea控件可以輕松地創建多行文本輸入框. | cols="每行中的字符數" rows="顯示的行數" 我們實際開發不用 | <textarea > 文本內容</textarea> |
select下拉列表
<select> | 在option 中定義selected =" selected "時，當前項即為默認選中項。 |
form表單域
<form action="url地址" method="提交方式" name="表單名稱"> | action 屬性值:url地址 | 用于指定接收并處理表單數據的服務器程序的url地址。 |
method 屬性值:get/post | 用于設置表單數據的提交方式，其取值為get或post。 | |
name 屬性值:名稱 | 用于指定表單的名稱，以區分同一個頁面中的多個表單。 |
以上標簽基本包含了前端開發所需常用標簽.來自本人,黑馬程序員.傳智播客學習筆記.
以下是個人筆記整理,需要請關注私信我.
希望本人筆記能對各位有所幫助.
前端不難,難的在于東西多和雜.每天努力學習一點點,不放棄.
天為大家帶來了HTML中的表格與列表、塊及類與ID的基礎知識，首先為大家介紹的是HTML中的表格與列表。
一、HTML中的表格與列表：
相信大家都知道在office、Excel等辦公軟件中如何制作表格，那大家知道如何在網頁上制作表格呢？同時網頁上面的注冊和登陸表又是怎么制作出來的呢？今天將會為大家詳細講解。
1、表格：
① 了解<table>標簽
在網頁上的表格制作是用<table>標簽來定義的。
② table中的<tr>和<td>標簽
l 每個表格有若干行，即用<tr>標簽來定義。
l 每行被分割為若干單元格，即用<td>標簽來定義。
示例圖
運行結果：
③ 在<table>元素中添加border屬性就可以顯示邊框，示例：
運行結果：
④ 表單的表格用<th>標簽表示，示例：
運行結果：
2、列表
列表分為無序列表、有序列表和定義列表
① 無序列表
l 無序列表是一個項目的列表，此列表項目使用粗體圓點進行標記。
l 無序列表始于<ul>標簽，每個列表始于<li>，示例：
運行結果：
l 在<ul>標簽中使用type屬性可以改變列表前面的符號，示例：
運行結果：
② 有序列表
l 與無序列表不同的是，有序列表使用的是<ol>標簽，示例：
運行結果：
在<ol>標簽中添加type屬性，可以改變列表前面的符號，示例：
運行結果：
③ 定義列表
l 定義列表就是自定義列表，是項目及其注釋的組合。
l 自定義列表以<dl>標簽開始，每個自定義列表項以<dt>開始，每個自定義列表項的定義以<dd>開始，示例：
運行結果：
二、HTML中的塊：
1、大多數HTML元素被定義為塊級元素或內聯元素
① 塊級元素在瀏覽器顯示時，通常以新行來開始（和結束），例如：<h1>、<p>、<ul>、<table>等。
② 內聯元素在顯示時通常不會以新行開始，例如：<b>、<td>、<a>、<img>等。
2、HTML中的<div>元素
HTML<div>元素是塊級元素，是可以組合其他HTML元素的容器，簡單來說<div>元素一般被用在HTML布局上面，示例：
運行結果：
3、HTML中的<span>元素
HTML<span>元素是內聯元素可用作文本的容器，當與css一同使用時，<span>元素可用于為部分文本設置樣式屬性，示例：
運行結果：
三、HTML中的CLASS和ID:
在上面的示例中我們有看到id標簽，在學習過程中很多人搞不懂class類和id標簽的區別，現在開始教大家如何區分class類和id標簽。
CLASS:
1、Class就我們口中所說的類
2、在css中引用時以“.”開頭，并且可以被多個元素調用，例如：
3、在使用中，可以先設置出一個樣式，然后被多個元素引用。
ID:
1、id是一種標簽
2、在css中引用時以“#”開頭，只能定義一個元素，例如：
3、在使用時，只能先確定一個元素，然后才能設置其樣式，無法被其它元素引用，是唯一的標簽。
希望大家能夠從這篇文章學習到HTML的部分知識~
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
