Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
TML教程
超文本標(biāo)記語(yǔ)言(英語(yǔ):HyperText Markup Language,簡(jiǎn)稱(chēng):HTML)是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。
您可以使用 HTML 來(lái)建立自己的 WEB 站點(diǎn),HTML 運(yùn)行在瀏覽器上,由瀏覽器來(lái)解析。
在本教程中,您將學(xué)習(xí)如何使用 HTML 來(lái)創(chuàng)建站點(diǎn)。
HTML 很容易學(xué)習(xí)!相信您能很快學(xué)會(huì)它!
本教程包含了數(shù)百個(gè) HTML 實(shí)例。
使用本站的編輯器,您可以輕松實(shí)現(xiàn)在線(xiàn)修改 HTML,并查看實(shí)例運(yùn)行結(jié)果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>孫叫獸的博客</title>
</head>
<body>
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落。</p>
</body>
</html>
HTML 文檔的后綴名
.html
.htm
都可以。
實(shí)例:
<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孫叫獸的博客</title>
</header>
<body>
<h1>這是我的標(biāo)題</h1>
<p>這是我的段落</p>
</body>
</html>
實(shí)例解析
什么是HTML?
標(biāo)簽
<標(biāo)簽>內(nèi)容</標(biāo)簽>
html元素
“HTML 標(biāo)簽” 和 “HTML 元素” 通常都是描述同樣的意思.
但是嚴(yán)格來(lái)講, 一個(gè) HTML 元素包含了開(kāi)始標(biāo)簽與結(jié)束標(biāo)簽,如下實(shí)例:
HTML 元素:
<p>這是一個(gè)段落</p>
web瀏覽器
Web瀏覽器(如谷歌瀏覽器,Internet Explorer,F(xiàn)irefox,Safari)是用于讀取HTML文件,并將其作為網(wǎng)頁(yè)顯示。
瀏覽器并不是直接顯示的HTML標(biāo)簽,但可以使用標(biāo)簽來(lái)決定如何展現(xiàn)HTML頁(yè)面的內(nèi)容給用戶(hù)
html網(wǎng)頁(yè)結(jié)構(gòu)
<html>
<head>
<title>頁(yè)面標(biāo)題</title>
</head>
<body>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落。</p>
<p>這是另外一個(gè)段落。</p>
</body>
</html>
html的版本:
<!DOCTYPE>聲明
<!DOCTYPE>聲明有助于瀏覽器中正確顯示網(wǎng)頁(yè)。
網(wǎng)絡(luò)上有很多不同的文件,如果能夠正確聲明HTML的版本,瀏覽器就能正確顯示網(wǎng)頁(yè)內(nèi)容。
doctype 聲明是不區(qū)分大小寫(xiě)的,以下方式均可:
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
html5
<!DOCTYPE html>
html4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""
http://www.w3.org/TR/html4/loose.dtd">
xhtml1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
中文編碼
目前在大部分瀏覽器中,直接輸出中文會(huì)出現(xiàn)中文亂碼的情況,這時(shí)候我們就需要在頭部將字符聲明為 UTF-8。
下是使用 C# 創(chuàng)建 HTML 文件的代碼示例:
using System;
using System.IO;
namespace CreateHTMLFile
{
class Program
{
static void Main(string[] args)
{
// 設(shè)置 HTML 文件路徑及文件名
string filePath = @"C:\Temp\example.html";
// 創(chuàng)建一個(gè)新的 HTML 文件
using (StreamWriter writer = new StreamWriter(filePath))
{
// 寫(xiě)入 HTML 標(biāo)記
writer.WriteLine("<html>");
writer.WriteLine("<head><title>Example HTML File</title></head>");
writer.WriteLine("<body>");
// 寫(xiě)入主體內(nèi)容
writer.WriteLine("<h1>Hello, World!</h1>");
writer.WriteLine("<p>This is an example HTML file created using C#.</p>");
// 寫(xiě)入 HTML 結(jié)束標(biāo)記
writer.WriteLine("</body>");
writer.WriteLine("</html>");
}
// 輸出成功消息
Console.WriteLine("HTML 文件已創(chuàng)建:{0}", filePath);
}
}
}
此代碼將創(chuàng)建一個(gè)名為 “example.html” 的 HTML 文件,并在其中添加一些基本的元素。你可以根據(jù)需要修改或擴(kuò)展它,以滿(mǎn)足你的具體需求。注意,要?jiǎng)?chuàng)建 HTML 文件,你需要使用 System.IO 命名空間中的 StreamWriter 類(lèi)。該類(lèi)允許你向文件寫(xiě)入文本數(shù)據(jù)。
.表格的制作
1、表格元素–<table>
表格中的行–<tr>
表格中的列–<td>
表格中的表頭–【居中/加粗】
table標(biāo)記的邊框–border
table標(biāo)記的寬度–width
table標(biāo)記的高度–height
table標(biāo)記的水平對(duì)齊方式–align
table標(biāo)記的表格背景色–bgcolor
table標(biāo)記的表格邊框色–bordercolor
table標(biāo)記的表格中的內(nèi)容與邊框之間的距離–cellpadding
table標(biāo)記的表格中的邊框與邊框之間的距離–cellspacing【默認(rèn)是1px】
tr標(biāo)記的align屬性–設(shè)置當(dāng)前行的水平對(duì)齊方式
tr標(biāo)記的bgcolor屬性–設(shè)置當(dāng)前行的背景色
tr標(biāo)記的valign屬性–設(shè)置當(dāng)前行的垂直對(duì)齊方式【top/middle/bottom】
td標(biāo)記的align屬性–設(shè)置當(dāng)前列的水平對(duì)齊方式
td標(biāo)記的bgcolor屬性–設(shè)置當(dāng)前列的背景色
td標(biāo)記的valign屬性–設(shè)置當(dāng)前列的垂直對(duì)齊方式【top/middle/bottom】
合并單元格
水平方向合并單元格–跨列—colspan
以下是計(jì)算器的控制面板代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>計(jì)算器的控制面板</title>
</head>
<body>
<table border="1" cellspacing="10px" cellpadding="20px"
align="center" bgcolor="aliceblue">
<tr><td colspan="5" height="40px" align="right"><font size="7"><b>0</b></font></td></tr>
<tr align="center">
<td>MC</td>
<td>MR</td>
<td>MS</td>
<td>M+</td>
<td>M-</td>
</tr>
<tr align="center">
<td><-</td>
<td>CE</td>
<td>C</td>
<td>+/-</td>
<td>√</td>
</tr>
<tr align="center">
<td>7</td>
<td>8</td>
<td>9</td>
<td>/</td>
<td>%</td>
</tr>
<tr align="center">
<td>4</td>
<td>5</td>
<td>6</td>
<td>*</td>
<td>1/x</td>
</tr>
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
<td>-</td>
<td rowspan="2" bgcolor="yellow">=
</td>
</tr>
<tr align="center">
<td colspan="2">0</td>
<td>.</td>
<td>+</td>
</tr>
</table>
</body>
</html>
看成品:
2. 列表元素
2.1 有序列表
ol—有序列表
li—列表中的每一項(xiàng)【條目】
默認(rèn)的標(biāo)志是有順序的數(shù)字
我們可以通過(guò)ol的type屬性來(lái)修改標(biāo)志
1–有順序的數(shù)字
a–有順序的小寫(xiě)字母
A–有順序的大寫(xiě)字母
i–有順序的小寫(xiě)羅馬數(shù)字
I–有順序的大寫(xiě)羅馬數(shù)字
start屬性設(shè)置書(shū)順序的開(kāi)始值
2.2 無(wú)序列表
ul—無(wú)序列表
li—列表中的每一項(xiàng)【條目】
默認(rèn)的標(biāo)志是實(shí)心點(diǎn)
我們可以通過(guò)ul的type屬性來(lái)修改標(biāo)志
circle–圓形【。】
disc----實(shí)心點(diǎn)[默認(rèn)]
square–正方形
none–沒(méi)有標(biāo)志
2.3 自定義列表
dl—自定義列表
dt—自定義列表的頭
dd—子項(xiàng)目
以下是有序,無(wú)序,和自定義列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<ul type="none">
<li>無(wú)序列表</li>
<li>無(wú)序列表</li>
<li>無(wú)序列表</li>
</ul>
<ol type="A">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<dl>
<dt>自定義列表</dt>
<dt>自定義列表</dt>
<dt>自定義列表</dt>
</dl>
</body>
</html>
3. 表單<form>
主要負(fù)責(zé)采集信息的,可以將采集的信息提交。
form的屬性
action—指定表單數(shù)據(jù)的后端處理程序
method----指定表單數(shù)據(jù)的提交方式【get[默認(rèn)]/post】
get提交數(shù)據(jù)會(huì)將被處理的數(shù)據(jù)跟隨在請(qǐng)求地址之后
被提交的數(shù)據(jù)255個(gè)字符
https://www.baidu.com/s?&wd=html
post提交數(shù)據(jù)會(huì)將被處理的數(shù)據(jù)封裝到http協(xié)議的頭
https://www.baidu.com/s
被提交的數(shù)據(jù)沒(méi)有限制
通常情況下提交文件只能用post
enctype屬性規(guī)定在將表單數(shù)據(jù)發(fā)送到服務(wù)器之前如何對(duì)其進(jìn)行編碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" align="center" cellpadding="20px" cellspacing="0">
<tr>
<td>application/x-www-form-urlencoded</td>
<td>在發(fā)送前對(duì)所有字符進(jìn)行編碼(默認(rèn))。</td>
</tr>
<tr>
<td>multipart/form-data</td>
<td>不對(duì)字符編碼。當(dāng)使用有文件上傳控件的表單時(shí),該值是必需的。
</td>
</tr>
<tr>
<td>text/plain</td>
<td>將空格轉(zhuǎn)換為 "+" 符號(hào),但不編碼特殊字符。</td>
</tr>
</table>
</body>
</html>
表單元素
input 文本框/密碼框/單選按鈕/復(fù)選框…
seletc 下拉列表
textarea 文本域—富文本編輯器
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。