HTML DOM td/th 對象

td 對象

td 對象代表了 HTML 中數據單元。

在 HTML 表格中每個 <td> 標簽都會創建一個 td 對象。

th 對象

th 對象代表了 HTML 標準中的表頭單元。

HTML 中每個 <th> 標簽都會創建一個 th 對象。

td/th 對象屬性

W3C: W3C 標準。

屬性	描述	W3C
abbr	設置或返回單元格中內容的縮寫版本。	Yes
align	已廢棄。設置或返回單元格內部數據的水平排列方式。	D
axis	設置或返回相關單元格的一個逗號分隔的列表。	Yes
background	已廢棄。設置或返回表格的背景圖片。	D
bgColor	已廢棄。設置或返回表格的背景顏色	D
cellIndex	返回單元格在某行的單元格集合中的位置。	Yes
ch	設置或返回單元格的對齊字符。	Yes
chOff	設置或返回單元格的對齊字符的偏移量。	Yes
colSpan	單元格橫跨的列數。	Yes
headers	置或返回 header-cell 的 id 值。	Yes
height	已廢棄。設置或返回數據單元的高度	D
noWrap	已廢棄。 nowrap 屬性規定表格單元格中的內容不換行。	D
rowSpan	設置或返回單元格可橫跨的行數。	Yes
vAlign	設置或返回表格單元格內數據的垂直排列方式。	Yes
width	已廢棄。設置或返回單元格的寬度。	D

標準屬性和事件

td/th 對象同樣支持標準的屬性和事件。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

礎準備

我使用的是Hbuilder編輯器，在hbuilder中創建一個HTML文件。

在hbuilder中運行HTML文件

效果

HTML文檔結構

<!DOCTYPE html>
<html>
	<head>
		<!--網頁的頭部 -->
	</head>
	<body>
		<!--網頁內容 -->
	</body>
</html>

<!-- -->   用于注釋代碼

HTML常用標簽

基礎標簽

html 最外層的元素
head 網頁的頭部
title 網頁的標題
body 網頁內容

文本格式化

i/em 斜體
strong 加粗
q 引用
blockquote 長引用
code 元素定義編程代碼示例

<i>武漢，加油！</i>
<em>湖北,加油！</em>

<strong>武漢，加油！</strong>

<q>HX是輕量編輯器和強大IDE的完美結合體。敏捷的性能，清爽的界面，強大的功能和于一身。</q>

<blockquote>
  HX是輕量編輯器和強大IDE的完美結合體。敏捷的性能，清爽的界面，強大的功能和于一身。
</blockquote>

<code>var a = 1 </code>

實驗效果

標題段落

h1-h6 表示標題數字越大字體越小
p 段落標簽
hr 水平分割線
br 換行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用標題和段落</title>
	</head>
	<body>
		
		<!-- 標題-->
		<h1>武漢加油！</h1>
		<h2>武漢加油！</h2>
		<h3>武漢加油！</h3>
		
		<h4>武漢加油！</h4>
		<h5>武漢加油！</h5>
		<h6>武漢加油！</h6>
		
		<!--段落標簽-->
		<p>武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！</p>
	
	    <hr > <!--水平分割線-->
		<p>武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！</p>

<!-- 換行符-->
武漢加油！武漢加油！武漢加油！武漢加油！
<br>武漢加油！武漢加油！武漢加油！
        
	</body>
</html>

塊元素

div 盒子
span 功能和div類似，span可以用來裝一小段文字和div的區別就是在一行內顯示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03</title>
	</head>
	<body>
		
		<i style="background-color: blue;">武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ </i>
		
		<div style="background-color: aqua;">
			武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！
		</div>
		<div style="background-color: aqua;">
			武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！
		</div>
		
		<span style="background-color: blue;">
			武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！
		</span>
		<span style="background-color: blue;">
			武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！
		</span>
	</body>
</html>

最終效果

圖片

img
img標簽必須加上 src屬性才能把圖像展示出來
alt屬性：當圖片沒有辦法顯示的時候用來提示用戶的文字
title屬性：當鼠標移動到圖片的時候，用來提示用戶的文字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用圖片</title>
	</head>
	<body>
		hello
		
		<img src="images/02.png" alt="風景圖" title="測試圖片" >
	</body>
</html>

鏈接

a標簽超鏈接
href屬性：超鏈接的地址
target屬性：_blank 表示新建一個瀏覽器標簽頁來顯示超鏈接的內容，不會覆蓋原來的網頁_parentsearchtop

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<a href="http://www.baidu.com" target="_blank">百度一下</a>
		<a href="http://www.baidu.com" target="_parent">百度一下</a>
	    <a href="http://www.baidu.com" target="_search">百度一下</a>
		<a href="http://www.baidu.com" target="_top">百度一下</a>
	
	</body>
</html>

列表

ol 有序列表
ul 無序列表
li 列表項
type 定義類型
disc 實體圓點
circle 空心圓
square 實體方形
a 小寫字母（有序）
A 大寫字母（有序）
默認數字（有序）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
		
		
		<!--有序列表-->
		
		<ol type="1"> 
			<li>北京</li>
			<li>上海</li>
		</ol>
		
		
		<ol type="A">
			<li>北京</li>
			<li>上海</li>
		</ol>
		
		<ol type="a">
			<li>北京</li>
			<li>上海</li>
		</ol>
		
		
		<!-- 無序列表-->
		<ul type="disc">
			<li>北京</li>
			<li>上海</li>
		</ul>
		<ul type="circle">
			<li>北京</li>
			<li>上海</li>
		</ul>
		
		<ul type="square">
			<li>北京</li>
			<li>上海</li>
		</ul>
		
		
	</body>
</html>

表格

tablecaption 表格標題
th 表頭
tr 行
td 單元格

、系統結構：

① B/S架構：Browser/Server（瀏覽器/服務器的交互形式。）

Browser支持的語言：HTML、CSS、JavaScript；S是服務器端Server支持的語言有：C、C++、Java等
B/S架構系統有什么優點和缺點？ 優點：升級方便，只升級服務器代碼即可，維護成本低。缺點：速度慢、體驗不好、界面不炫酷
企業大部分使用B/S架構
B/S架構的系統代表有：京東、百度、天貓等

② C/S架構：Client/Server（客戶端/服務器的交互形式。）

C/S架構的優點和缺點？
優點：速度快、體驗好、界面炫酷（娛樂性多數是C/S架構）
缺點：升級麻煩、維護成本較高。
C/S架構的系統代表有：QQ、微信、支付寶等

2、 HTML概述

① 什么是HTML？② 怎么開發HTML？③ 怎么運行HTML?

① HTML：Hyper Text Markup Language（超文本標記語言）

?由大量的標簽組成，每一個標簽都有開始標簽和結束標簽。

?超文本：圖片、聲音、視頻等

② HTML開發使用普通的文本編輯器就行，創建擴展名是.html或.htm

?編輯器有：HBuilder、vscode等

③ 直接采用瀏覽器打開HTML文件就能運行

④ HTML是誰制定的？

④ W3C：世界萬維網聯盟

?W3C制定了HTML的規范：每個瀏覽器生產廠家都會遵守規范。HTML也會按照規范去寫代碼

?HTML規范目前最高的版本是：HTML5.0，簡稱H5

?我們現在主要學的HTML4.0（基本用法）

為了方便中國Web前端程序員開發，提供了大量幫助文檔。為開發提供方便。

?w3school：先出現的，和W3C無關

?w3cschool：后出現的，和W3C無關

?W3C制定了很多規范：HTML/XML/http協議/https協議……

3、第一個HTML

4、基本標簽

p：段落標記
h1~h6：標題字，與word的標題字相同
br：換行標記（獨目標記）
hr：橫線（獨目標記）
color：橫線顏色
width：橫線寬度（可以px和%）
pre：預留格式
del：刪除字
ins：插入字（有下劃線）
b：粗體字
i：斜體字
sup：上標
sub：下標
font：字體標簽
color：字體顏色
size：字體大小（1~7）

頁面效果圖：

5、實體符號：為了避免和標簽沖突，所以需要使用實體符號

<：<
>：>
空格：
注：html中按多個空格鍵，在網頁中只顯示一個空格。

6、HTML表格

table：表格
tr：行
td：列
th：列（比td加粗居中）
合并行：rowspan（一個格占兩個位置）
注：row合并的時候，刪除下面的單元格
合并列：colspan（一個格占兩個位置）
注：col合并的時候，刪除哪個沒有要求

7、thead、tbody、tfoot標簽

thead、tbody、tfoot不是必須的，便于后期JS編寫。

8、body的背景顏色和背景圖片

bgcolor：背景色
background：背景圖片
背景圖片在背景色的上面

9、img標簽

src：圖片的路徑
只設置width，height會等比例縮放
只設置height，不起作用
title：鼠標懸停時顯示的信息
alt：設置圖片加載失敗時顯示的提示信息

10、超鏈接或熱鏈接

href：hot references 熱引用；
后面一定是一個資源的地址。
后面的路徑可以是絕對路徑也可以是相對路徑，可以是網絡某個資源的路徑。
target：
_blank：新窗口
_self：當前窗口（默認）
_top：頂級窗口
_parent：父級窗口

超鏈接的作用：

通過超鏈接可以從瀏覽器向服務器發送請求。

11、request與response的概念

request：瀏覽器向服務器發送數據（請求）
B --》S
response：服務器向瀏覽器發送數據（響應）
S--》B

12、列表

有序列表：ol
type：1、A、a、I、i
無序列表：ul
type：circle（○）、square（□）、disc（●）

13、表單（重點）

action：寫提交的URL地址
method：默認get；還有post
表單有什么用？
答：收集用戶的信息。表單展現之后，用戶填寫表單，點擊提交。（submit）
怎么畫一個表單？
答：用form標簽
一個網頁可以有多個表單form
表單最終是需要提交數據給服務器的，form標簽有一個action屬性，這個屬性用來指定服務器地址。
action屬性用來指定數據提交給哪個服務器
action屬性和超鏈接中的href屬性一樣。都可以向服務器發送請求（request）
http://192.168.111.3:8080/oa/save 這是請求路徑，
表單提交數據最終提交給192.168.111.3機器上的8080端口對應的軟件。
input中的type取值:
radio：單選控件
checkbox：多選控件
submit：提交控件
reset：重置控件
button：普通控件
text：文本控件
password：密碼控
file：文件控件
上傳文件專用
hidden：隱藏域
網頁上看不到，但是表單提交的時候數據會自動提交給服務器。
input中的value屬性用來指定按鈕上顯示的文本信息。
超鏈接a與表單form的區別？
答：表達form可以收集信息，而超鏈接a無法收集信息。
表單提交里面的按鈕input中屬性必須定義name，不然提交不了。
表單是以什么格式提交數據給服務器的？
格式：action?name=value&name=value&name=value..
HTTP協議規定的，必須以這種格式提交給服務器
java中String split('&');
重點強調：表單項寫了name屬性的，一律會提交給服務器。不想提交就不要寫name屬性。
文本框和密碼框的value不需要程序員指定，用戶輸入什么value就是什么。
當name沒有寫的時候，該項不會提交給服務器
但是當value沒有寫的時候，value的默認值是空字符串"",將空字符串提交給服務器。java代碼得到的是：String s = "";

效果圖：

地址欄提交的信息：

?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我沒有value屬性；&position=ln&myFile=&myHidden=

14、表單的說明：

① 用戶手動輸入的文本框，都不需要給value賦值
② textarea沒有value屬性
③ radio、checkbox默認選項需要使用，checked="checked"（簡寫：checked）
④ select中的option屬性：? selected="selected" 為默認選中 ?size：顯示條目數量
multiple="multiple" 支持多選(select的屬性)
⑤ input的屬性
readonly和disabled：
都是只讀不能修改
數據不會提交
maxlength：設置文本框中輸入的字符數量。

15、HTML中的結點

在HTML文檔中，任何元素（結點）都有id屬性，id屬性是該節點的唯一標識。所以在同一個HTML文檔中id值不能重復。
注意：表單提交數據的時候，只和name有關系，和id無關
id有什么作用？
javascript語言：可以對HTML文檔中的任何節點進行增刪改操作。
獲取節點時，通常通過id來獲取節點
HTML文檔是一棵樹，樹上有很多節點，每一個節點都有唯一的id（DOM樹）

16、div和span

div和span有什么用？
div和span都可以稱為圖層。
有什么用？
圖層的作用為了保證頁面可以靈活的布局。
div和span是可以定位的，只要定下div的左上角的x軸和y軸坐標即可。
div和span的區別？
di獨占一行
span不會獨占一行

在線咨詢

上一篇：程序員必收藏：程序員常用英語詞匯匯總，讓面試工作均快人一步！
下一篇：JavaScript 設置列表選項(li)可刪除

您的項目需求

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

整合營銷服務商