整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
TML 背景
設(shè)置背景顏色<body bgcolor="#000000">
設(shè)置背景圖片<body background="bg.jpg">
設(shè)置頁面文字顏色<body text="#cccccc">
顏色屬性值有三種值的格式
1，英文單詞，比如 red , yellow ,green …
<body bgcolor="yellow">
2, 十六進制表示方式，#開頭，6個十六進制的字符或數(shù)字 組合
比如：#FFFFFF，#000000，#CCCAAA，#22BCAD
十六進制： 0-9 和 a-f
3, RGB模式，紅 0-255，綠 0-255，藍 0-255
比如： RGB(120,33,234)
HTML 表單
表單是一個包含表單元素的區(qū)域。
表單能夠包含 input 元素，textarea、select、fieldset、legend 和 label 元素。
表單使用標(biāo)簽（<form>）定義。
表單用于向服務(wù)器傳輸數(shù)據(jù)。
表單的結(jié)構(gòu)
<form name="form1" action="URL" method="get">
用戶名：<input type="text" name="uname" />
密 碼：<input type="password" name="passwd" />
</form>
屬性說明
name表單的名稱
action表單提交地址
method表單數(shù)據(jù)提交的方式 （get ,post）
enctypeMIME類型
target打開方式
input標(biāo)簽
屬性說明
typeinput元素類型
nameinput 元素的名稱
valueinput 元素的值
sizeinput 元素的寬度
readonly是否只讀
maxlength輸入字符的最大長度
disabled是否禁用
1.文本框
<input type="text" name="username" value="" />
2.密碼框
<input type="password" name="passwd"/>
3.單選按鈕
<input type="radio" name="sex"value="1"checked="checked" />男
<input type="radio" name="sex"value="0"/>女
4.復(fù)選框
<input type="radio" name="sex"value="1"checked="checked" />男
<input type="radio" name="sex"value="0"/>女
<input type="checkbox"name="love"value="music" checked="checked"/> 聽音樂
<input type="checkbox"name="love" value="movie"/> 看電影
<input type="checkbox"name="love" value="game"/> 玩游戲
5.按鈕
<input type="button" name="btn" value="確定"/>
<input type="submit" name="comit" value="提交"/>
<input type="reset" name="reset" value="重寫"/>
<input type="image" name="img_btn" src="btn.gif"/>
6. 隱藏域
隱藏域用于在程序發(fā)送沒有必要讓用戶看到特定值的時候使用。
<input type="hidden" name="uid" value="10"/>
7. 上傳文件
<input type="file" name="photo"/>
注：利用這項功能時，在 form 標(biāo)簽中要指定method屬性。要把method 指定為post, enctype屬性指定為 multipart/form-data。
<textarea> 多行文本框
<textarea name="content" rows="5" cols="50"> </textarea>
屬性說明
name元素的名稱
rows指定文本框的高度
cols指定文本框的寬度
select下拉列表框
<select name="city">
<option value="0">請選擇</option
<option value="bj">北京</option>
<option value="gz">廣州</option>
</select>
屬性說明
name下拉列表框的名稱
size下拉列表框的顯示行數(shù)
multiple是否多選
disabled是否禁用
selected設(shè)置默認選中的選項
value選項的值
optgroup標(biāo)簽
optgroup 元素用于組合選項 。
屬性說明
label指定組合選項名稱
fieldset標(biāo)簽
fieldset 標(biāo)簽作用是把表單中元素組合起來
<fieldset>
<legend></legend> length為字符長度
<form></form>
</fieldset>
label標(biāo)簽
lable 標(biāo)簽的作用是將輸入項或選項及其標(biāo)簽文字關(guān)聯(lián)起來。
<input type="radio" name="sex" value="1" id="male" />
<label for="male">男</label>
<input type="radio" name="sex" value="0" id="female" />
<label for="female">女</label>
TML作為一種用來描述網(wǎng)頁的語言，是制作網(wǎng)頁必不可少的，但HTML 不是一種編程語言，而是一種標(biāo)記語言 (markup language），本著為了更好的了解大數(shù)據(jù)開發(fā)的基礎(chǔ)，今天就帶著大家更進一步的了解HTML的使用，HTML的表格與表單。
1.HTML表格
表格由 <table> 標(biāo)簽來定義。每個表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。表格的作用就不言而喻了，讓看起來更簡潔直觀有序性。
下面給大家?guī)硪恍┏Ｓ玫臉?biāo)簽：
<table> 表格的最外層容器
<tr> 定義表格行
<th> 定義表頭
<td> 定義表格單元
<caption>定義表格表題
<width>:寬度。可以用像素或百分比表示。 常用960像素。
<border>：邊框，常用值為0。
<cellpadding>：內(nèi)容跟邊框的距離，常用值為0。
<cellspacing>：單元格與單元格之間的間距，常用值為0。
<algin>：對齊方式。
<bgcolor>：背景色。
<background>：背景圖片。
<align>: 一行內(nèi)容的水平對齊方式。
<valign>: 一行內(nèi)容的垂直對齊方式。
<height>：行高。
創(chuàng)建表格
在HTML網(wǎng)頁中，要想創(chuàng)建表格，就需要使用表格相關(guān)的標(biāo)簽。
創(chuàng)建表格的基本語法：
<table>
<tr>
<td>單元格內(nèi)的文字</td>
...
</tr>
...
</table>
舉個例子
其中：table用于定義一個表格標(biāo)簽。
tr標(biāo)簽 用于定義表格中的行，必須嵌套在 table標(biāo)簽中。
td 用于定義表格中的單元格，必須嵌套在<tr></tr>標(biāo)簽中。
字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。
再比如說我們可以建立個有顏色的格子，如下圖
表格的作用除了可以顯示一個表格外，有的時候還可以用于輔助排版。但現(xiàn)在都不怎么使用了，因為時代的進步，以前的表格排版的網(wǎng)頁已經(jīng)被淘汰了。
2. HTML表單
關(guān)于表單的制定，因為在瀏覽器中輸入的內(nèi)容都必須要經(jīng)過網(wǎng)絡(luò)提交到服務(wù)器端再處理，所以需要把所有的控件都包含在一個form表單控件中，然后一次提交給服務(wù)器，再由服務(wù)器處理用戶提交的數(shù)據(jù)。
HTML 支持有序列表(有序列表是一列項目，列表項目使用數(shù)字進行標(biāo)記。
有序列表始于 <ol> 標(biāo)簽。每個列表項始于 <li> 標(biāo)簽。)無序列表(無序列表也是一個項目的列表，此列項目使用粗體圓點“典型的小黑圓圈“進行標(biāo)記。)和定義列表(自定義列表不僅僅是一列項目，而是項目及其注釋的組合。自定義列表以 <dl> 標(biāo)簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。)。
表單常用標(biāo)簽：
form: 表單的最外層容器
input: 用于搜集用戶信息,根據(jù)不同的type屬性值,展示不同的控件
Text：普通的文本輸入框
Password：密碼輸入框
Checkbox：復(fù)選框
Radio：單選框
File：上傳文件
Submit：提交按鈕
Reset：重置按鈕
Cols：列
Rows：行
注意事項：
<form id="" name="" method="post/get" action="負責(zé)處理的服務(wù)端">--輸入系統(tǒng)時，必須有
Name ：定義表單的名稱；
Method: 定義表單結(jié)果從瀏覽器傳送到服務(wù)器的方式，默認參數(shù)為：get
Action ：用來指定表單處理程序的位置(服務(wù)器端腳本處理程序）
Fieldset：把表單分組；
Legend：分組名稱。
id不可重復(fù)，name可重復(fù)，get提交有長度限制，并且編碼后的內(nèi)容在地址欄可見，post提交沒有長度限制，且編碼后內(nèi)容不可見。
舉個例子
<form action="login.asp" method="post">
<label>用戶名: </label><input type="text" name="username" />
<label>密碼: </label><input type="password" name="password" />
</form>
得到結(jié)果如圖
本期的內(nèi)容比較多，大家可以在平日里多加練習(xí)，這是大數(shù)據(jù)開發(fā)基礎(chǔ)的重要部分，做到能更熟練，更準(zhǔn)確，希望大家能有所進步。
顏色屬性被用來設(shè)置文字的顏色。
顏色是通過CSS最經(jīng)常的指定：
一個網(wǎng)頁的文本顏色是指在主體內(nèi)的選擇：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=no">
<title>項目</title>
<style>
body {
color: blue;
}
h1 {
color: #00ff00;
}
h2 {
color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<h2>hello world</h2>
<h1>welcome to CaoZhou</h1>
</body>
</html>注：對于W3C標(biāo)準(zhǔn)的CSS：如果你定義了顏色屬性，你還必須定義背景色屬性。
文本排列屬性是用來設(shè)置文本的水平對齊方式。
文本可居中或?qū)R到左或右,兩端對齊。
當(dāng)text-align設(shè)置為"justify"，每一行被展開為寬度相等，左，右外邊距是對齊（如雜志和報紙）。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}
</style>
</head>
<body>
<p class="date">2015 年 3 月 14 號</p>
<p class="main"> 從前有個書生，和未婚妻約好在某年某月某日結(jié)婚。到那一天，未婚妻卻嫁給了別人。書生受此打擊， 一病不起?！ ∵@時，路過一游方僧人，從懷里摸出一面鏡子叫書生看。書生看到茫茫大海，一名遇害的女子一絲不掛地躺在海灘上。路過一人， 看一眼，搖搖頭，走了。又路過一人，將衣服脫下，給女尸蓋上，走了。再路過一人，過去，挖個坑，小心翼翼把尸體掩埋了?！ ∩私忉尩?， 那具海灘上的女尸，就是你未婚妻的前世。你是第二個路過的人，曾給過他一件衣服。她今生和你相戀，只為還你一個情。但是她最終要報答一生一世的人，是最后那個把她掩埋的人，那人就是他現(xiàn)在的丈夫。書生大悟，病愈。
</p>
<p><b>注意：</b> 重置瀏覽器窗口大小查看 "justify" 是如何工作的。</p>
</body>
</html>text-decoration 屬性用來設(shè)置或刪除文本的裝飾。
從設(shè)計的角度看 text-decoration屬性主要是用來刪除鏈接的下劃線：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.none {}
.del {
text-decoration: none;
}
</style>
</head>
<body>
<p>原來的樣子</p>
<a href="#" class="none">wwwwwwwwwwwwwwwwww</a>
<p>去掉下劃線</p>
<a href="#" class="del">wwwwwwwwwwwwwwwwwwwww</a>
</body>
</html>也可以這樣裝飾文字：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=no">
<title>項目</title>
<style>
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>注：不建議強調(diào)指出不是鏈接的文本，因為這常?；煜脩?。
text-transform文本轉(zhuǎn)換屬性是用來指定在一個文本中的大寫和小寫字母。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=no">
<title>項目</title>
<style>
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>text-indent文本縮進屬性是用來指定文本的第一行的縮進。
p {text-indent:50px;}增加或減少字符之間的空間。
<style>
h1 {
letter-spacing:2px;
}
h2 {
letter-spacing:-3px;
}
</style>指定在一個段落中行之間的空間。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=no">
<title>項目</title>
<style>
p.small {
line-height: 70%;
}
p.big {
line-height: 200%;
}
</style>
</head>
<body>
<p>
This is a paragraph with a standard line-height.<br> This is a paragraph with a standard line-height.<br> The default line height in most browsers is about 110% to 120%.<br>
</p>
<p class="small">
This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br>
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br>
</p>
</body>
</html>增加一個段落中的單詞之間的空白空間。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=no">
<title>項目</title>
<style type="text/css">
p {
word-spacing: 30px;
}
</style>
</head>
<body>
<p>
This is some text. This is some text.
</p>
</body>
</html>設(shè)置文本的垂直對齊圖像。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=no">
<title>項目</title>
<style>
img{
width: 200px;
height: 100px;
}
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
}
</style>
</head>
<body>
<p>An <img src="img/logo.png" /> image with a default alignment.</p>
<p>An <img class="top" src="img/logo.png" /> image with a text-top alignment.</p>
<p>An <img class="bottom" src="img/logo.png" /> image with a text-bottom alignment.</p>
</body>
</html>設(shè)置文本陰影。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=no">
<title>項目</title>
<style>
h1{
text-shadow: 2px 2px #FF0000;
}
</style>
</head>
<body>
<h1>Text-shadow effect</h1>
</body>
</html>本文主要介紹了CSS文本樣式實際應(yīng)用中應(yīng)該如何去操作，通過講解文本中對應(yīng)的屬性去改變文本的表現(xiàn)形式。使用豐富的效果圖的展示，能夠更直觀的看到運行的效果，能夠更好的理解。使用Html語言，代碼結(jié)構(gòu)更佳的清晰，能夠幫助你更好的學(xué)習(xí)。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
