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小时内与您取得联系。

整合营销服务商