html中td条件显⽰不同颜⾊_学习笔记（HTML）⼀、html简介
超⽂本标记语⾔（HyperText Markup Language），⽹页语⾔
超⽂本：超出⽂本范畴
标记：标签
* html的规范
1、⼀个html⽂件开始标签和结束的标签 <html> </html>
2、html包含两部分内容
（1）<head> 设置相关信息</head>
（2）<body> 显⽰在页⾯上的内容都写在body⾥⾯</body>
3、html的代码不区分⼤⼩写的
4、有些标签，没有结束标签 ，在标签内结束，⽐如换⾏<br/>
* html的操作思想
不同的数据可能需要不同的显⽰效果，使⽤标签把要操作的数据包起来。
通过修改标签的属性值实现标签内数据样式的变化。
⼀个标签相当于⼀个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。例：
<font size="4" color="red">Hello World！</font>
*html中常⽤的标签
⽂字标签和注释标签
* ⽂字标签：修改⽂字的样式
- <font></font>
- 属性：
* size: ⽂字的⼤⼩ 取值范围 1-7，超出了7，默认还是7
* color：⽂字颜⾊
- 两种表⽰⽅式
** 英⽂单词：red
** 使⽤⼗六进制数表⽰ #ffffff : RGB
- 通过⼯具实现不同的颜⾊ #66cc66
* 注释标签
- html的注释 ： <!-- html的注释 -->
*标题标签、⽔平线标签和特殊字符
* 标题标签
- <h1></h1> <h2></h2> .......<h6></h6>
- 从h1到h6，⼤⼩是依次变⼩，同时会⾃动换⾏
textarea中cols表示
* ⽔平线标签
- <hr/>
- 属性
** size: ⽔平线的粗细 取值范围 1-7
** color: 颜⾊
- 代码
<hr size="5" color="red"/>
* 特殊字符
- 想要在页⾯上显⽰这样的内容 <html>：是⽹页的开始！- 需要对特殊字符进⾏转义
* < : <
* > : >
* 空格：  
* & : &
*列表标签
- ⽐如现在显⽰这样的效果
成绩
数学
英语
政治
** <dl> </dl>: 表⽰列表的范围
** 在dl⾥⾯ <dt></dt>: 上层内容
** 在dl⾥⾯ <dd></dd>：下层内容
-
代码
<dl>
<dt>成绩</dt>
<dd>数学</dd>
<dd>英语</dd>
<dd>政治</dd>
</dl>
- 想要在页⾯上显⽰这样的效果
** <ol></ol> : 有序列表的范围
- 属性 type：设置排序⽅式 1(默认) a i
** 在ol标签⾥⾯ <li>具体内容</li>
- 代码
<ol>
<li>数学</li>
<li>英语</li>
<li>政治</li>
</ol>
- 想要在页⾯上显⽰这样的效果
** <ul></ul> : 表⽰⽆序列表的范围
属性： type: 空⼼圆circle 、实⼼圆disc 、实⼼⽅块square ，默认disc 在ul⾥⾯ <li></li>
- 代码
<
*图像标签
* <img src="图⽚的路径"/>
- src: 图⽚的路径
- width：图⽚的宽度
- height：图⽚的⾼度
- alt: 图⽚上显⽰的⽂字，把⿏标移动到图⽚上，停留⽚刻显⽰内容
** 有些浏览器下没有效果
*路径的介绍
* 两类
** 绝对路径
- C:UsersCollinDesktopJava
** 相对路径
- ⼀个⽂件相对于另外⼀个⽂件的位置
- 三种：
** html⽂件和图⽚在⼀个路径下，可以直接写⽂件名称- <img src="1.jpg" alt="这是⼀张图⽚"/>
** 图⽚在html的下层⽬录
在html⽂件中，使⽤img⽂件夹下⾯的a.jpg
-- C:UsersCollinDesktopJava 4.html
-
- C:UsersCollinDesktopJava imga.jpg
*** 在html中使⽤图⽚ 4.html和img在⼀个路径下imga.jpg
** 图⽚在html⽂件的上层⽬录
--- C:UsersCollinDesktopJava code4.html
--- C:UsersCollinDesktopJava c.png
*** html⽂件所在的⽬录和图⽚是⼀个⽬录
** 图⽚和html⽂件是什么关系？
- 图⽚在html的所在⽬录的上层⽬录 Java
** 怎么表⽰上层路径 ../
- ../c.png
** 想要表⽰上层的上层 ../../
*超链接标签
* 链接资源
<a href="链接到资源的路径"> 显⽰在页⾯上的内容 </a> ** href: 链接的资源的地址
** target：设置打开的⽅式 ，默认是在当前页⾯打开
_blank : 在⼀个新窗⼝打开
_self: 在当前页打开 默认
当超链接不需要到任何的地址 在href⾥⾯加#
- <a href="#">这是⼀个超链接2</a>
* 定位资源
** 如果想要定位资源：定义⼀个位置
<a name="top">顶部</a>
** 回到这个位置
<a href="#top">回到顶部</a>
** 引⼊⼀个标签 pre：原样输出
*表格标签
* <table></table>: 表⽰表格的范围
- border：表格线
- bordercolor：表格线的颜⾊
- cellspacing：单元格直接的距离
- width：表格的宽度
- height：表格的⾼度
** 在table⾥⾯ <tr></tr> ⾏
-
设置对齐⽅式 align： left center right
*** 在tr⾥⾯ <td></td> 单元格
- 设置显⽰⽅式 align： left center right
*** 使⽤th也可以表⽰单元格
- 表⽰可以实现居中和加粗
* 代码
<table border="1" bordercolor="blue" cellspacing="0" width="200" height="150"> * 画图分析表格的写法
- ⾸先定义⼀个表格的范围使⽤table
- 定义⼀⾏使⽤ tr
- 定义⼀个单元格使⽤ td
** 操作技巧：
- ⾸先数有多少⾏ ，数每⾏⾥⾯有多少个单元格
** 表格的标题
<caption></caption>
** 合并单元格
- rowspan：跨⾏
** <td rowspan="3">⼈员信息</td>
- colspan：跨列
** <td colspan="3">⼈员信息</td>
<
效果图:
*表单标签

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。