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