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