276
HTML +CSS 标记语言主要属性
HTML
<body>标记的主要属性：
*bgcolor:设置页面背景颜色，如：bgcolor=”#CCFFCC”
*background:设置页面背景图片，如：background=”images/bg.gif” *bgproperties=”fixed”:使背景图片不随着滚动条的滚动而滚动 *text:设置文档正文的文字颜色，如：text=”#FF6666”
分段标记：<p>段落文字<p>正文标题：<h1>1号正文标题文字<h1>
<h2>2号正文标题文字<h2> <h3>3号正文标题文字<h3> <h4>4号正文标题文字<h4> <h5>5号正文标题文字<h5> 水平分隔线：<hr>
注释标记：<!—注释文字-->
文档头部信息： <title>:设置窗口标题
<link>:建立到外部文件（主要是CSS外部样式表）的链接 <link rel=”stylesheet” href=”mystyle01.css” type=”text/css”> <style>:设置网页的内部样式表
<meta>:设置当前页面的元数据信息
文本格式： <b>:粗体 <i>:斜体
<del>:文字中部划线表示删除 <ins>:文字下划线表示填充内容 <sub>:下标 <sup>:上标
<pre>:原样显示，保留空格和换行
字体：
<font>标记的属性： Face:设置字体类型 Size:设置字体大小 Color:设置字体颜色
列表： 有序列表： <ol type=”a”> <li>列表条目</li> <li>列表条目</li>
</ol>
无序列表： <ul> <li>列表条目</li> <li>列表条目</li> </ul>
表单：
<form action=”https://www.v512.com/bbs/login.jsp” method=”post”> 用户名：<input type=”text” name=”username”><br> 密码：<input type=”password” name=”psw”><br> <input type=”submit” value=”提交”> <input type=”reset” value=”重置”> </form>
action中的信息表示表单信息将提交到何处
method 中的信息表示表单信息上传到服务器的方式 表单组建：
单行文本输入框：<input type=”text” name=”age” value=”0”> 密码输入框：<input type=”password” name=”psw”>
单选按钮：<input type=”radio” name=”gender” value=”male” checked>男 <input type=”radio” name=”gender” value=”female”>女 提交按钮：<input type=”submit” name=”submit” value=”提交”>
CSS
Cascading Style Sheets
内嵌样式（Inline Style）：以属性的形式直接在HTML标记中给出，用于设置该标记所定义信
息的现实效果
内嵌样式只对其所在的标记有效
<body style=”background-color;#coffee;”> <P style=”font-size:16px;color:red”>第一段文字</p> <P style=”font-size:italic;font-size:20px;color:#bb22cc”>第二段文字</p> </body>
内部样式表（Internal Style Sheet）
在HTML页面的头信息元素<head>中给出，可以同时设置多个标记所定义信息的现实效果 内部样式表只对所在的网页有效 <html>
<head> <style type=”text/css”> body{background-color:#coffee}
p.mystyle{font-size:20px;color:ble}}
p.mystyle{font-size:40px;color:#dd44aa;text-align:center} </style> </head> <body>
<p class=”mystyle1”>第一段文字</p> <p class=”mystyle1”>第二段文字</p> </body> </html>
外部样式表（External Style Sheet）
外部样式表将样式设置保存到独立的外部文件中，然后在要使用这些样式的HTML页面中进行引用
外部样式表为纯文本文件，后缀“.css” 外部样式表可被应用到多个页面中 m1.css如下：
body{background-color:#coffee} p.mystyle{font-size:20px;color:ble}}
p.mystyle{font-size:40px;color:#dd44aa;text-align:center} ex.html如下： <html>
<head><link href=”m1.css” rel=”stylesheet” type=”text/css”></head>
<body> <p class=”mystyle1”>第一段文字</p> <p class=”mystyle1”>第二段文字</p> </body> </html>
样式的优先级：内嵌样式、内部样式表、外部样式表、浏览器缺省样式
CSS基本语法：
CSS样式主要由三部分组成：选择器、属性名、属性值 例如：
P{color:#1166cc}
h2{text-align:center; color:red}
p.mystyle1{font-size:20px; color:blue}
DIV标记
DIV（division）是一个HTML标记，用于表示一块可现实HTML信息的区域 如果不适用任何CSS样式设置的话，div标记的效果与分段标记p基本相同 <div>第一段文字</div>
<div align=”center”>第二段文字</div>
使用CSS+DIV可以实现结构化的页面布局
最后更新：2017-04-03 14:54:00