整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
大家在瀏覽網(wǎng)頁的時(shí)候，是否思考過這樣一個(gè)問題：怎樣才能制作出一個(gè)網(wǎng)頁呢？制作出一個(gè)網(wǎng)頁是很簡單的，只要知道什么是HTML并掌握HTML的基礎(chǔ)知識(shí)就可以制作出一個(gè)簡單的網(wǎng)頁，今天我就為講解HTML的入門及結(jié)構(gòu)組成。
一、什么是HTML?
1、在我們開始學(xué)習(xí)HTML之前我們需要知道什么是HTML？
HTML的全稱為Hyper Text Markup Language，中文名稱為超文本標(biāo)記語言，閱覽方式為網(wǎng)頁瀏覽器，同時(shí)HTML也被稱為網(wǎng)頁。
2、一個(gè)簡單的HTML文檔
二、HTML編輯器
我們?cè)诳梢允褂肨XT文本文檔或者專業(yè)的HTML編輯器來編輯HTML。
1、記事本
① 創(chuàng)建一個(gè)TXT文本
② 輸入HTML代碼
③ 點(diǎn)擊文件—另存為—輸入名稱+“html”的后綴名即可得到你的第一個(gè)HTML文件。
④ 然后雙擊這個(gè)文件運(yùn)行。
運(yùn)行結(jié)果
2、專業(yè)編輯器
① Sublime Text
② HBuilder
③ Adobe Dreamweaver
④ CoffeeCup HTML Editor
這其中我比較推薦HBuilder這款編輯器，界面簡單，編輯起來很快。
三、HTML的組成部分
在上面的案例中我們可以看到HTML是由頭部（head）和身體（body）所組成的。
1、頭部（head）
通常包含標(biāo)題（title），也就是一個(gè)網(wǎng)頁的名稱
網(wǎng)頁標(biāo)題
2、身體（body）
body的部分是整個(gè)網(wǎng)頁的重要內(nèi)容部分，讓人一眼就瀏覽到這個(gè)網(wǎng)頁的內(nèi)容，可以插入文本、圖片、多媒體等內(nèi)容。
四、HTML元素
l HTML元素是指以開始標(biāo)簽起始，以結(jié)束標(biāo)簽終止的元素：元素內(nèi)容即為開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容。
l <head></head>、<body></body>、<p></p>、<h1></h2>等這些都是HTML元素，在上面的案例中就有六個(gè)元素。
l 也有部分元素只有開始標(biāo)簽，例如<br>,以開始標(biāo)簽的結(jié)束而結(jié)束。
五、HTML的屬性
l 一般來說HTML的屬性就是HTML元素的屬性，屬性可以在元素中添加附加信息。
l 屬性總是以名稱/值對(duì)的形式出現(xiàn)，比如：name=”value”。
l 屬性一般描述于開始標(biāo)簽。
l style中會(huì)有更多的屬性。
六、HTML格式化
HTML可定義很多供格式化輸出的元素，比如粗體字和斜體字。
HTML文本格式化標(biāo)簽
標(biāo)簽 | 描述 |
<b> | 定義粗體文本 |
<em> | 定義著重文字 |
<i> | 定義斜體字 |
<small> | 定義小號(hào)字 |
<strong> | 定義加重語氣 |
<sub> | 定義下標(biāo)字 |
<sup> | 定義上標(biāo)字 |
<ins> | 定義插入字 |
<del> | 定義刪除字 |
運(yùn)行結(jié)果示意圖
HTML“計(jì)算機(jī)輸出”標(biāo)簽
標(biāo)簽 | 描述 |
<code> | 定義計(jì)算機(jī)代碼 |
<kdd> | 定義鍵盤碼 |
<samp> | 定義計(jì)算機(jī)代碼樣本 |
<var> | 定義變量 |
<pre> | 定義預(yù)格式文本 |
HTML引文、引用及標(biāo)簽定義
標(biāo)簽 | 描述 |
<abbr> | 定義縮寫 |
<address> | 定義地址 |
<bdo> | 定義文字方向 |
<blockquote> | 定義長的引用 |
<q> | 定義短的引用語 |
<cite> | 定義引用、引證 |
<dfn> | 定義一個(gè)定義項(xiàng)目 |
七、HTML超鏈接
超鏈接可以是圖片、文字、多媒體也可以是一個(gè)網(wǎng)址
示例：
結(jié)果：
點(diǎn)擊帶有下劃線的兩個(gè)字就可以進(jìn)入某度的網(wǎng)站
八、HTML CSS
1、CSS是一種層疊樣式表，可以修飾html元素的樣式并可以精確地進(jìn)行排版
2、CSS有三種方式：
l 內(nèi)部樣式，在HTML元素中使用“style”屬性
l 內(nèi)部樣式表，在頭部<head>區(qū)域使用<style>元素來包含CSS
l 外部引用，引用帶有后綴css的文件，示例：
html文檔
css文檔
如果你看到了這里，就說明你已經(jīng)打開了制作網(wǎng)頁的大門啦~
多朋友在準(zhǔn)備學(xué)習(xí)編程時(shí)總會(huì)發(fā)現(xiàn)，選擇有前端后端，還有Java，Python等，看得人眼花繚亂，不知如何選擇。
也有的朋友認(rèn)為HTML就是前端，前端就是HTML，那么實(shí)際真的如此嗎？這就要從前端和HTML的定義開始了。
前端是什么？這個(gè)其實(shí)不難理解，簡單來說，就是瀏覽器上我們?yōu)g覽所看到的網(wǎng)頁。那么前端開發(fā)到底是做什么的呢？
通俗來講，主要分為三個(gè)方面，一是網(wǎng)頁的制作，二是移動(dòng)端以及PC端軟件的制作，最后是游戲。沒錯(cuò)，就是游戲，可能許多人并不知道50%的游戲都是由前端去開發(fā)實(shí)現(xiàn)的，比如說一刀九九九的頁游。
前端開發(fā)需要掌握的技術(shù)有HTML、CSS、Javascript等，所以HTML并不是前端，前端只是前端開發(fā)技術(shù)的一種。而我們一般進(jìn)行前端開發(fā)時(shí)用到的軟件有vsCode（專業(yè)級(jí)）
webstrom、hbuilder（企業(yè)級(jí)），Dreamweaver（小白入門級(jí)）。
很多人以為HTML是編程語言的一種，其實(shí)它是一種標(biāo)記語言，而HTML的中文譯名就是超文本標(biāo)記語言，不過因?yàn)樘L，大家還是叫它HTML。
編程語言大家會(huì)比較熟悉，至于標(biāo)記語言，相信不少朋友都是第一次聽到。標(biāo)記語言是一套標(biāo)記標(biāo)簽，而HTML是使用標(biāo)記標(biāo)簽來描述網(wǎng)頁，因?yàn)镠TML文檔包含了HTML標(biāo)簽及文本內(nèi)容，所以HTML文檔也叫做web 頁面。
了解更多
注釋：<!-- -->
DOCTYPE：就是告訴瀏覽器，我們要使用什么規(guī)范
head：網(wǎng)頁頭部標(biāo)簽
body：代表網(wǎng)頁主題
標(biāo)題標(biāo)簽
段落標(biāo)簽
換行標(biāo)簽
水平線標(biāo)簽
字體樣式標(biāo)簽
注釋
特殊字符
特殊符號(hào)就是 & xxx ;
<img src="path" alt="文字" title="text" width="x" heigth="y" />
注意：../ 代表上一級(jí)目錄
文本鏈接
<a href="path" target="目標(biāo)窗口位置">鏈接文本或圖像</a>
圖像鏈接：就是嵌套圖片標(biāo)簽
頁面間鏈接
錨鏈接
功能性鏈接
塊元素
行內(nèi)元素
什么是列表：就是一種展示方式
有序列表
無序列表
自定義列表
<dl>
<dt></dt> 標(biāo)題
<dd></dd> 選項(xiàng)
<dd></dd>
<dd></dd>
</dl>為什么使用表格
基本結(jié)構(gòu)
<table border="1px" 邊框>表格標(biāo)簽
<tr>
<td></td>列標(biāo)簽
<td></td>
<td></td>
</tr>行標(biāo)簽 這代表一行
</table>跨列：使用colspan="夸的列數(shù)" <td colspan="4">
跨行：使用rowspan="夸的行數(shù)" <td rowspan="4">
視頻元素
音頻元素
元素名 | 描述 |
header | 標(biāo)題頭部區(qū)域的內(nèi)容(用于頁面或頁面中的一塊區(qū)域) |
footer | 標(biāo)記腳部區(qū)域的內(nèi)容（用于整個(gè)頁面或頁面的一塊區(qū)域） |
section | web頁面中的一塊獨(dú)立區(qū)域 |
atricle | 獨(dú)立的文章內(nèi)容 |
aside | 相關(guān)內(nèi)容或應(yīng)用(常用于側(cè)邊欄) |
nav | 導(dǎo)航類輔助內(nèi)容 |
<iframe src="path" name="mainFrame"></iframe>
表單：form
<form method="post|get" action="result.hetml">
<input />
</form>get方式提交：我們可以在url中看到我們提交的信息，不安全，但高效
post方式提交：比較安全，可以傳輸大文件
表單元素格式
屬性 | 說明 |
type | 指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image、button默認(rèn)為text |
name | 指定表單元素的名稱 必填，用來后臺(tái)讀取 |
value | 元素的初試值。type為radio時(shí)必須指定一個(gè)值 |
size | 指定元素的初始寬度。當(dāng)type為text時(shí)或者password時(shí)，表單元素的大小以字符為單位。對(duì)于其他類型，寬度以像素為單位 |
maxlength | type為txet或password時(shí)，輸入的最大字符數(shù) |
cheaked | type為radio或cheackbox時(shí)，指定按鈕是否被選中 |
單選框
多選框
按鈕
<input type="button" name="btn1" value="點(diǎn)擊" />普通按鈕
<input type="image" src ="點(diǎn)擊跳轉(zhuǎn)的path"/>圖片按鈕
<input type="submit"/>提交按鈕
<input type="reset"/>重置按鈕下拉框
<select name="列表名稱">
<option value="選項(xiàng)的值" select>中國</option>
<option value="選項(xiàng)的值">中國</option>
<option value="選項(xiàng)的值">中國</option>
<option value="選項(xiàng)的值">中國</option>
<option value="選項(xiàng)的值">中國</option>
</select>
提交的格式就是列表名稱和value文本域
<textarea name="name" cols="列數(shù)" rows="行數(shù)">文本內(nèi)容</textarea>文件域
<input type="file" name="files"/>
<input type="button" value="提交"/>郵件驗(yàn)證
<input type="email" name="youjian">URL
<input type="url" name="url"> 數(shù)字驗(yàn)證
<input type="number" name="num" max="100" min="0" step="10">滑塊
<input type="range" max="100" min="0">搜索
<input type="search" name="search">隱藏域 hidden
<input type="text" id="mark" hidden>只讀 readonly
<input type="text" id="mark" readonly>禁用 disabled
<input type="text" id="mark" disabled>增強(qiáng)鼠標(biāo)可用性
<label for="mark">點(diǎn)擊</label>
<input type="text" id="mark">為什么要進(jìn)行表單驗(yàn)證：緩解服務(wù)器壓力、保證數(shù)據(jù)安全
提示信息
非空判斷
正則表達(dá)式驗(yàn)證
高級(jí)驗(yàn)證使用js
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
