“常用属性”的版本间的差异

来自CloudWiki
跳转至： 导航， 搜索
（创建页面，内容为“==标签的属性 *在HTML的开始标签中可以放置各种属性，使用属性后需要设置属性值（要求按照标准对所有属性值使用双引号定…”）
 
（→‎水平线hr属性设置）
 
（未显示5个用户的14个中间版本）
第1行： 第1行：
−
==标签的属性
+
==标签的属性==
−
*在HTML的开始标签中可以放置各种属性，使用属性后需要设置属性值（要求按照标准对所有属性值使用双引号定界），如：
+
*在HTML的开始标签中可以放置各种属性，
 +
*使用属性后需要设置属性值（要求按照标准对所有属性值使用双引号定界）
 +
*属性的作用是为元素设置一定的格式，如下图就将body元素的背景颜色设置为绿色：
 
[[文件:1-14.png]]
 
[[文件:1-14.png]]
−
==属性的设置
+
 
 +
==属性的设置==
 
===body属性设置===
 
===body属性设置===
 +
*bgcolor---定义主体颜色
 +
*text----定义文本颜色
 +
*举例：
 +
**<nowiki><body bgcolor="green">将body元素的背景颜色设为绿色</body></nowiki>
 +
**<nowiki><body text=“red”>将body标签中的文本文字设为红色</body></nowiki>
 +
*'''动手实践'''：将以下代码粘贴到[http://www.w3school.com.cn/tiy/t.asp?f=html_intro W3C]在线测试器上:
 +
<nowiki><!doctype html>
 +
<html>
 +
    <head>
 +
        <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的属性设置主要是用Align属性设置一下对齐方式：
 +
<nowiki>
 +
<h1 align="center">中间对齐</h1>
 +
<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标签可以设置下列属性：粗细，对齐方式，宽度等。
 +
*如设置水平线粗细为2，对齐方式为中央对齐，宽度为整个屏幕的75%，就可以这样写：
 +
<nowiki><hr size="2"  align="center"  width="75%" /></nowiki>
 +
*'''试一试'''：为刚才代码中的水平线添加以上属性。
 +
*相对取值单位和绝对取值单位：
 +
注意，这里也可以将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元素的背景颜色设置为绿色：

1-14.png

属性的设置

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>

返回 网页设计与开发

取自“http://www.openbrains.net/mediawiki/index.php?title=常用属性&oldid=516”