“常用属性”的版本间的差异
来自CloudWiki
(→标签的属性) |
|||
第10行: | 第10行: | ||
*text----定义文本颜色 | *text----定义文本颜色 | ||
*举例: | *举例: | ||
− | **<nowiki><body bgcolor | + | **<nowiki><body bgcolor="green">将body元素的背景颜色设为绿色</body></nowiki> |
**<nowiki><body text=“red”>将body标签中的文本文字设为红色</body></nowiki> | **<nowiki><body text=“red”>将body标签中的文本文字设为红色</body></nowiki> | ||
*'''动手实践''':将以下代码粘贴到[http://www.w3school.com.cn/tiy/t.asp?f=html_intro W3C]在线测试器上: | *'''动手实践''':将以下代码粘贴到[http://www.w3school.com.cn/tiy/t.asp?f=html_intro W3C]在线测试器上: | ||
第18行: | 第18行: | ||
<title>我的项目</title> | <title>我的项目</title> | ||
</head> | </head> | ||
− | <body bgcolor | + | <body bgcolor="yellow"> |
<h2>我的项目</h2> | <h2>我的项目</h2> | ||
<hr /> | <hr /> | ||
第27行: | 第27行: | ||
*颜色属性值可以为以下三种(有些情况不支持) | *颜色属性值可以为以下三种(有些情况不支持) | ||
<nowiki>规定颜色值为颜色名称的字体颜色:<body bgcolor="black"> | <nowiki>规定颜色值为颜色名称的字体颜色:<body bgcolor="black"> | ||
− | 规定颜色值为十六进制值的字体颜色:<body bgcolor="# | + | 规定颜色值为十六进制值的字体颜色:<body bgcolor="#FFFFDF">。 |
规定颜色值为 rgb 代码的字体颜色:<body bgcolor="rgb(0,0,0)"></nowiki> | 规定颜色值为 rgb 代码的字体颜色:<body bgcolor="rgb(0,0,0)"></nowiki> | ||
不同颜色的十六进制代码可以从[http://www.divcss5.com/html/h636.shtml 这里]查询 | 不同颜色的十六进制代码可以从[http://www.divcss5.com/html/h636.shtml 这里]查询 | ||
− | *'''试一试''':将刚才代码中的bgcolor值替换成你查到的十六进制颜色编码,如 bgcolor="# | + | *'''试一试''':将刚才代码中的bgcolor值替换成你查到的十六进制颜色编码,如 bgcolor="#FFFFDF": |
*[http://www.w3school.com.cn/tiy/t.asp?f=html_back_img 好的背景颜色] [http://www.w3school.com.cn/tiy/t.asp?f=html_back_imgbad 差的背景颜色] | *[http://www.w3school.com.cn/tiy/t.asp?f=html_back_img 好的背景颜色] [http://www.w3school.com.cn/tiy/t.asp?f=html_back_imgbad 差的背景颜色] | ||
第46行: | 第46行: | ||
<title>我的项目</title> | <title>我的项目</title> | ||
</head> | </head> | ||
− | <body bgcolor | + | <body bgcolor="#FFFFDF"> |
<h2 align="center">我的项目</h2> | <h2 align="center">我的项目</h2> | ||
<hr /> | <hr /> | ||
第68行: | 第68行: | ||
<title>我的项目</title> | <title>我的项目</title> | ||
</head> | </head> | ||
− | <body bgcolor | + | <body bgcolor="#FFFFDF"> |
<h2 align="center">我的项目</h2> | <h2 align="center">我的项目</h2> | ||
<hr size="2" align="center" width="75%" /> | <hr size="2" align="center" width="75%" /> |
2017年10月1日 (日) 05:20的版本
标签的属性
- 在HTML的开始标签中可以放置各种属性,
- 使用属性后需要设置属性值(要求按照标准对所有属性值使用双引号定界)
- 属性的作用是为元素设置一定的格式,如下图就将body元素的背景颜色设置为绿色:
属性的设置
body属性设置
- bgcolor---定义主体颜色
- text----定义文本颜色
- 举例:
- <body bgcolor="green">将body元素的背景颜色设为绿色</body>
- <body text=“red”>将body标签中的文本文字设为红色</body>
- 动手实践:将以下代码粘贴到W3C在线测试器上:
<!doctype html> <html> <head> <title>我的项目</title> </head> <body bgcolor="yellow"> <h2>我的项目</h2> <hr /> <p>欢迎来到我的项目,欢迎各位大神洽谈合作!</p> </body> </html>
- 颜色属性值可以为以下三种(有些情况不支持)
规定颜色值为颜色名称的字体颜色:<body bgcolor="black"> 规定颜色值为十六进制值的字体颜色:<body bgcolor="#FFFFDF">。 规定颜色值为 rgb 代码的字体颜色:<body bgcolor="rgb(0,0,0)"> 不同颜色的十六进制代码可以从这里查询
p和h属性设置
- p和h的属性设置主要是用Align属性设置一下对齐方式:
<h1 align="center">中间对齐</h1> <p align=“right”>右对齐</p> <h2 align=“left">左对齐</h2>
- 动手实践:在W3C测试器上,为刚才的代码添加align属性:
<!doctype html> <html> <head> <title>我的项目</title> </head> <body bgcolor="#FFFFDF"> <h2 align="center">我的项目</h2> <hr /> <p align="center">欢迎来到我的项目,欢迎各位大神洽谈合作!</p> </body> </html>
- 可以看到h2标签和p标签所代表的元素都到页面中央来了。
水平线hr属性设置
- 水平线hr标签可以设置下列属性:粗细,对齐方式,宽度等。
- 如设置水平线粗细为1,对齐方式为中央对齐,宽度为整个屏幕的75%,就可以这样写:
<hr size="2" align="center" width="75%" />
- 试一试:为刚才代码中的水平线添加以上属性。
- 相对取值单位和绝对取值单位:
注意,这里也可以将width属性设置为以像素(px)为单位的,如width="500px",但是这样是绝对取值单位,不能适应于大小不同的屏幕 最好还是用75%这样的相对取值单位,75%的意思是水平线长度占整个屏幕的75%
本节最终源代码
<!doctype html> <html> <head> <title>我的项目</title> </head> <body bgcolor="#FFFFDF"> <h2 align="center">我的项目</h2> <hr size="2" align="center" width="75%" /> <p align="center">欢迎来到我的项目,欢迎各位大神洽谈合作!</p> </body> </html>
返回 网页设计与开发