是什么組成了html？html組成元素有哪些？

頁html的組成是由：文字、圖片、音頻、視頻、超鏈接組成。

1-文字由什么組成？

文字標簽在“body”標簽下，由文本標簽比如：標題<h1>~<h6>,段落<p></p>等；

2-圖片怎么顯示的？

圖片標簽img單標簽，也是在“body”標簽下，顯示引用文件；

3-音頻、視頻、標簽

音頻標簽“audio”和視頻標簽“video”，這兩個標簽都是雙標記，引用文件顯示內(nèi)容，本身是一個功能。

4-超鏈接

超鏈接標簽“a href="路徑位置"”是單標記，需要有載體，點擊活著觸發(fā)跳轉(zhuǎn)。

以下是示例：

<body>

<h1>這是標題也是文字</h1>

<p>這是段落，文本，文字</p>
<img src="./image/1auto的副本.gif" alt="300"><br> 這是一個圖片標簽<br><br>

<audio src="./image/yinyue.mp3" controls></audio><br>

這是一段音頻，由音頻標簽讓其顯示<br><br>

<a href="https://www.baidu.com"><br> 這是一個鏈接，點擊夠可以跳轉(zhuǎn)</a>

</body>

</html>

----------------------------------------------------------------------------

下圖是顯示

個人理解，如有錯漏，請留言指正。

TML基礎(chǔ)簡介
超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標準標記語言。您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。

HTML是一個網(wǎng)頁文件的拓展名，和txt、jpg、mp3一樣，是一個文件格。.html文件就是網(wǎng)頁文件。

2.html 的格式化標簽

<!DOCTYPE>
<html>
--html是一個雙標簽開始標簽
<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>
</title> --可能是標題
</head>
<body>--用來存放頁面中的內(nèi)容
</body>
</html> --結(jié)束標簽

DOCTYPE----文檔類型聲明
meta標簽----設(shè)置頁面編碼格式，關(guān)鍵字，以及頁面的描述
<title></title>--------->標題部分
<head></head>------>頁面的頭部分
<body></body>------>頁面的主體部分

2.內(nèi)容標簽

這其中<hr> <br> 是單標簽
<div></div> <span></span> 無意義區(qū)塊容器標簽
eg:
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的網(wǎng)頁標題</h1></div>

HTML標記—注釋標記

<!--注釋語句-->

標題：
<h1>這是一個標題</h1>
<h2>這是一個標題</h2>
<h3>這是一個標題</h3>

段落：
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>

HTML 鏈接

<a >這是一個鏈接</a>
當您點擊 HTML 頁面中的某個鏈接時，對應(yīng)的 <a> 標簽指向萬維網(wǎng)上的一個地址。
一個統(tǒng)一資源定位器(URL) 用于定位萬維網(wǎng)上的文檔。
URL - 統(tǒng)一資源定位器
scheme - 定義因特網(wǎng)服務(wù)的類型。最常見的類型是 http
host - 定義域主機（http 的默認主機是 www）
domain - 定義因特網(wǎng)域名，比如 runoob.com
:port - 定義主機上的端口號（http 的默認端口號是 80）
path - 定義服務(wù)器上的路徑（如果省略，則文檔必須位于網(wǎng)站的根目錄中）。
filename - 定義文檔/資源的名稱

這里需要注意:使用超鏈接做下載,并不是超鏈接完成的下載功能,而是通過超鏈接跳轉(zhuǎn)到了一個有下載功能的頁面。

常見的 URL Scheme

HTML 圖像

alt 屬性用來為圖像定義一串預(yù)備的可替換的文本。

3.HTML屬性

屬性實例:

HTML 鏈接由 <a> 標簽定義。鏈接的地址在 href 屬性中指定：<a >這是一個鏈接</a>

4.HTML 表格

表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。表格的表頭使用 <th> 標簽進行定義。

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

5.HTML 表單

表單是一個包含表單元素的區(qū)域。

表單元素是允許用戶在表單中輸入內(nèi)容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復(fù)選框(checkboxes)等等。

文本域（Text Fields）

文本域通過<input type="text"> 標簽來設(shè)定
當用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時，就會用到文本域
密碼字段
密碼字段通過標簽<input type="password"> 來定義:
<form>
FirstName: <input type="text" name="firstname"><br>
Password: <input type="password" name="pwd">
</form>

單選按鈕（Radio Buttons）

<input type="radio"> 標簽定義了表單單選框選項
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
單選有時需要設(shè)置默認選項,需要設(shè)置checked屬性:
<input type="radio" name="sex" checked ="checked"/>男

復(fù)選框（Checkboxes）

<input type="checkbox"> 定義了復(fù)選框. 用戶需要從若干給定的選擇中選取一個或若干選項。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
多選框一般不需要設(shè)置默認選項,如果要設(shè)置,也是設(shè)置checked屬性

提交按鈕(Submit Button)

<input type="submit"> 定義了提交按鈕.

當用戶單擊確認按鈕時，表單的內(nèi)容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進行相關(guān)的處理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
這里需要注意的是: Submit必須要和form一起使用才能達到效果
action 設(shè)置表單提交參數(shù)路徑
method 當前請求方式(同iOS開發(fā)網(wǎng)絡(luò)請求一樣,get/post)

假如您在上面的文本框內(nèi)鍵入幾個字母，然后點擊確認按鈕，那么輸入數(shù)據(jù)會傳送到 "html_form_action.php" 的頁面。該頁面將顯示出輸入的結(jié)果。

圖片按鈕(使用不多)

Select下拉框

selected默認選項
<select>
<option selected="selected" >選項一</option>
<option>選項二</option>
</select>

Textarea文本域

<textarea></textarea>

6.HTML 列表

HTML 支持有序、無序和定義列表:

無序列表使用 <ul> 標簽
<ul>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。
列表項項使用數(shù)字來標記。
<ol>
<li>第一個列表項</li>
<li>第二個列表項</li>
<li>第三個列表項</li>
</ol>
自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
去除點去除下劃線
a {
text-decoration: none;
}
ul {
list-style: none;
}

7.內(nèi)聯(lián)樣式- 在HTML元素中使用"style" 屬性

HTML樣式實例 - 背景顏色
<body style="background-color:yellow;">
<h2 style="background-color:red;">這是一個標題</h2>
<p style="background-color:green;">這是一個段落。</p>
</body>

HTML 樣式實例 - 字體, 字體顏色，字體大小

我們可以使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義字體的樣式:

HTML 樣式實例 - 文本對齊方式

<h1 style="text-align:center;">居中對齊的標題</h1>

而關(guān)于其他CSS內(nèi)容,這里就簡單介紹一下:

內(nèi)部樣式表

當單個文件需要特別樣式時，就可以使用內(nèi)部樣式表。你可以在<head> 部分通過 <style>標簽定義內(nèi)部樣式表:

<head>
<style type="text/css">
body {background-color:yellow;
}
p {color:blue;}
</style>
</head>

外部樣式表

當樣式需要被應(yīng)用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML 樣式標簽

最后提一下什么是Web安全色?

數(shù)年以前，當大多數(shù)計算機僅支持 256 種顏色的時候，一系列 216 種 Web 安全色作為 Web 標準被建議使用。其中的原因是，微軟和 Mac 操作系統(tǒng)使用了 40 種不同的保留的固定系統(tǒng)顏色（雙方大約各使用 20 種）。

216 跨平臺 web 安全色被用來確保：當計算機使用 256 色調(diào)色板時，所有的計算機能夠正確地顯示所有的顏色。

、HTML基本信息

注釋：

DOCTYPE：就是告訴瀏覽器，我們要使用什么規(guī)范

head：網(wǎng)頁頭部標簽

title：網(wǎng)頁標題
meta：描述性標簽，描述網(wǎng)站的信息，用來做SEO

charset = "UTF-8"
name = "keyword" content = ""關(guān)鍵詞
name = "descrisption" content = ""描述

body：代表網(wǎng)頁主題

二、網(wǎng)頁基本標簽

標題標簽

<h1>一級標簽</h1>一直到6級標簽

段落標簽

<p>段落標簽</p>

換行標簽

<br/> /是閉合的意思，單標簽，閉不閉合都行

水平線標簽

<hr/>

字體樣式標簽

<strong>粗體</strong>
<em>斜體</em>

注釋

特殊字符

空格 ---->一個空格
大于號 >
小于號<
版權(quán)符號©

特殊符號就是 & xxx ;

三、圖像標簽

src 圖像地址必填
alt 圖像的代替文字(找不到圖片的時候顯示) 必填
title 鼠標懸停提示文字
width 圖像的寬度
height 圖像的高度

注意：../ 代表上一級目錄

四、鏈接標簽

文本鏈接

<a href="path" target="目標窗口位置">鏈接文本或圖像</a>

href 鏈接路徑，要跳轉(zhuǎn)帶那個位置必填
target鏈接在哪個窗口打開：常用值_self 當前窗口（默認的）、_blank 新窗口

圖像鏈接：就是嵌套圖片標簽

頁面間鏈接

從一個頁面鏈接到另一個頁面

錨鏈接

第一步需要一個標記使用name做標記
第二步跳轉(zhuǎn)到標記使用#標記
<a name="top" ></a>
<a href="#top"></a>
上面是頁面內(nèi)的跳轉(zhuǎn)

<a name="down"></a>
<a href="第一個頁面的path#down"></a>
頁面間的跳轉(zhuǎn)

功能性鏈接

郵件鏈接：mailto： <a href="mailto:郵箱"></a>點擊后會打開郵箱
qq鏈接：在qq推廣工具里面的

五、行內(nèi)元素和塊元素

塊元素

無論內(nèi)容多少，該元素獨占一行
p、h1-h6

行內(nèi)元素

內(nèi)容撐開寬度、左右都是行內(nèi)元素的可以排在一起
a、strong、em...

六、列表

什么是列表：就是一種展示方式

有序列表

<ol> <li></li> </ol>

無序列表

<ul> <li></li> </ul>

自定義列表

<dl>
    <dt></dt> 標題
    <dd></dd> 選項
    <dd></dd>
    <dd></dd>
</dl>

七、表格

為什么使用表格

簡單通用
結(jié)構(gòu)穩(wěn)定

基本結(jié)構(gòu)

單元格
行
列
跨行
跨列

<table border="1px" 邊框>表格標簽
    <tr>
        <td></td>列標簽
        <td></td>
        <td></td>
    </tr>行標簽 這代表一行
</table>

跨列：使用colspan="夸的列數(shù)" <td colspan="4">

跨行：使用rowspan="夸的行數(shù)" <td rowspan="4">

八、視頻和音頻

視頻元素

video
<video src="path" controls autoplay></video>
src:資源路徑
controls控制條
autoplay自動播放

音頻元素

audio
<audio src="" controls autoplay></audio>

九、頁面結(jié)構(gòu)分析

元素名	描述
header	標題頭部區(qū)域的內(nèi)容(用于頁面或頁面中的一塊區(qū)域)
footer	標記腳部區(qū)域的內(nèi)容（用于整個頁面或頁面的一塊區(qū)域）
section	web頁面中的一塊獨立區(qū)域
atricle	獨立的文章內(nèi)容
aside	相關(guān)內(nèi)容或應(yīng)用(常用于側(cè)邊欄)
nav	導(dǎo)航類輔助內(nèi)容

十、iframe內(nèi)聯(lián)框架

src必填
width
heigth
name標記
name的使用
<iframe src="" name="hello" frameborder="0" width="1000px" heigth="800px"></iframe>

<a href="path" target="hello"></a>
點擊超連接后，會在內(nèi)聯(lián)框架里顯示這個頁面

十一、表單

表單：form

<form method="post|get" action="result.hetml">
    <input />
</form>

method 規(guī)定如何發(fā)送表單數(shù)據(jù)常用psot、get
action 表示向何處發(fā)送表單數(shù)據(jù)，把表單的數(shù)據(jù)發(fā)送給那個地方

get方式提交：我們可以在url中看到我們提交的信息，不安全，但高效

post方式提交：比較安全，可以傳輸大文件

表單元素格式

屬性	說明
type	指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image、button默認為text
name	指定表單元素的名稱必填，用來后臺讀取
value	元素的初試值。type為radio時必須指定一個值
size	指定元素的初始寬度。當type為text時或者password時，表單元素的大小以字符為單位。對于其他類型，寬度以像素為單位
maxlength	type為txet或password時，輸入的最大字符數(shù)
cheaked	type為radio或cheackbox時，指定按鈕是否被選中

單選框

input type="radio"
value 單選框的值
name ：表示組，name一樣一次只能選一個，name不一樣可以選多個
checked默認選中的

多選框

input type="checkbox"
value = "sleep"
name = "hooby"
checked默認選中的
<input type="checkbox" name="sleep" value="slppe" checked/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
多選框的結(jié)果是以數(shù)組的形式返回的

按鈕

<input type="button" name="btn1" value="點擊" />普通按鈕
<input type="image" src ="點擊跳轉(zhuǎn)的path"/>圖片按鈕
<input type="submit"/>提交按鈕
<input type="reset"/>重置按鈕

下拉框

<select name="列表名稱">
    <option value="選項的值" select>中國</option>
    <option value="選項的值">中國</option>
    <option value="選項的值">中國</option>
    <option value="選項的值">中國</option>
    <option value="選項的值">中國</option>
</select>
提交的格式就是列表名稱和value

selected 默認選擇

文本域

<textarea name="name" cols="列數(shù)" rows="行數(shù)">文本內(nèi)容</textarea>

文件域

<input type="file" name="files"/>
<input type="button" value="提交"/>

郵件驗證

<input type="email" name="youjian">

URL

<input type="url" name="url">

數(shù)字驗證

<input type="number" name="num" max="100" min="0" step="10">

滑塊

<input type="range" max="100" min="0">

搜索

<input type="search" name="search">

十二、表單的應(yīng)用

隱藏域 hidden

<input type="text" id="mark" hidden>

只讀 readonly

<input type="text" id="mark" readonly>

禁用 disabled

<input type="text" id="mark" disabled>

增強鼠標可用性

<label for="mark">點擊</label>
<input type="text" id="mark">

十三、表單初級驗證

為什么要進行表單驗證：緩解服務(wù)器壓力、保證數(shù)據(jù)安全

提示信息

placeholder="提示信息" 在輸入框上

非空判斷

required

正則表達式驗證

pattern
<input type="text" name="mail" pattern="正則表達式">

高級驗證使用js

在線咨詢

上一篇：HTML 頁面顯示 XML 數(shù)據(jù)
下一篇：HTML5(七)-SVG基礎(chǔ)入門

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商