溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html的基礎(chǔ)知識(shí)詳細(xì)介紹

發(fā)布時(shí)間：2020-06-22 15:57:02 來(lái)源：億速云 閱讀：279 作者：Leah 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)html的基礎(chǔ)知識(shí)詳細(xì)介紹，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

（一）HTML 基本結(jié)構(gòu)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- head部分主要做一些設(shè)置工作，比如字符集、標(biāo)題等-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- 網(wǎng)頁(yè)內(nèi)容類型的聲明，讓瀏覽器來(lái)識(shí)別網(wǎng)頁(yè)的內(nèi)容-->
    <title>我的第一個(gè)網(wǎng)頁(yè)</title>
</head>
<!--文檔的主體部分，呈現(xiàn)給用戶的信息都在此-->
<body>
帶你出師，闖蕩江湖！
</body>
</html>
<!-- 
<html>整個(gè)文檔的根節(jié)點(diǎn)
<head>主要描述文檔的設(shè)置信息，比如說(shuō)字符集和標(biāo)題
    <meta>設(shè)置字符集
    <tittle>設(shè)置標(biāo)題
<body>文檔的主題內(nèi)容，需要在網(wǎng)頁(yè)上呈現(xiàn)的內(nèi)容都安排在其中
注釋：快捷鍵 ctrl + / 或者 ctrl + shift + /
形勢(shì)就是"<!-- - ->"
作用：對(duì)代碼進(jìn)行說(shuō)明，方便程序員閱讀和理解。注釋對(duì)于計(jì)算機(jī)的執(zhí)行結(jié)果沒有任何影響
他的作用非常重要，代碼正確是前提，清晰也是非常重要的，程序員要養(yǎng)成寫注釋的習(xí)慣。
注釋一般用于對(duì)一個(gè)函數(shù)或者一段代碼的說(shuō)明方便以后閱讀，有一些變量的定義。之后會(huì)在總結(jié)
-->

（二）基礎(chǔ)標(biāo)簽

標(biāo)題標(biāo)簽：

標(biāo)題標(biāo)簽用于一段文字的標(biāo)題說(shuō)明，他的語(yǔ)義就是標(biāo)題。

<h2>一級(jí)標(biāo)題</h2>
<h3>二級(jí)標(biāo)題</h3>
<h4>三級(jí)標(biāo)題</h4>
<h5>四級(jí)標(biāo)題</h5>
<h6>五級(jí)標(biāo)題</h6>
<h7>六級(jí)標(biāo)題</h7>

段落標(biāo)簽：

段落標(biāo)簽顯示一個(gè)段落自動(dòng)換行

<h4>登鸛雀樓</h4>
<p>白日依山盡，</p>
<p>黃河入海流。</p>
<p>欲窮千里目，</p>
<p>更上一城樓。</p>

鏈接標(biāo)簽（a標(biāo)簽，a是anchor的縮寫） ：

a標(biāo)簽的作用就是跳轉(zhuǎn)，包括頁(yè)面的跳轉(zhuǎn)和頁(yè)內(nèi)跳轉(zhuǎn)。

<a href="http://www.huadianedu.com" title="百度" target="_blank">華點(diǎn)</a>
<a href="#zhangjie3" title="章節(jié)3" target="_blank">章節(jié)三</a>

target屬性：

_blank：瀏覽器會(huì)另開一個(gè)新窗口顯示document.html文檔
_parent：指向父frameset文檔
_self：把文檔調(diào)入當(dāng)前頁(yè)框
_top：去掉所有頁(yè)框并用document.html取代frameset文檔
tittle屬性：指明連接的信息

頁(yè)面內(nèi)的跳轉(zhuǎn)：在目標(biāo)標(biāo)簽處指明id=”“, 連接處指定 href=”#id值” 然后點(diǎn)擊會(huì)跳轉(zhuǎn)到相應(yīng)的id位置

圖片標(biāo)簽：

<img src="logo.jpg" alt="logo" title="圖片" />
<img src="../chapter4/logo.jpg" alt="logo" title="圖片" />

src 為圖片的地址，也就是路徑。有兩種格式(1). 絕對(duì)路徑 ： 圖片保存的地址；(2). 相對(duì)路徑 ： 相對(duì)于本文檔的路徑。上一層用../

alt為資源缺失時(shí)顯示的內(nèi)容。其原有的英文單詞為alternative
title為鼠標(biāo)停留在圖片上顯示的內(nèi)容

（三）列表

無(wú)序列表

<ul> <li>河南</li> <li>河北</li> <li>江西</li> <li>江蘇</li> </ul>

有序列表

<ol type="1" start="2">
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
<li>第四章</li>
</ol>

type屬性

html的基礎(chǔ)知識(shí)詳細(xì)介紹

start屬性：決定列表初始值，他的取值為自然數(shù)。

自定義列表

<dl>
        <dt>列表的標(biāo)題</dt>
        <dd>列表項(xiàng)的描述</dd>
        <dt>河北</dt>
        <dd>河北又稱燕趙大地</dd>
</dl>

（四）表單

表單：收集用戶填寫的信息并將其提交給服務(wù)器

<form Action="#" method="post/get">
</form>

form有兩個(gè)屬性

Action 表單提交的地址。

提交的方式有兩種，get和post。兩者的區(qū)別：（1）提交的內(nèi)容的長(zhǎng)度，get不能超過(guò)2KB，post無(wú)限制；（2）安全性，get將內(nèi)容拼接到字符串后面，不夠安全。

（五）輸入框

文本框

<input type="text" maxlength="10" size="10"  value="華點(diǎn)"/>

屬性為maxlength 表示輸入的最大長(zhǎng)度。 size為輸入框的長(zhǎng)度; value為默認(rèn)的值

密碼框

<input type="password" maxlength="10" size="10" value="123456"/>

屬性為maxlength 表示輸入的最大長(zhǎng)度。 size為輸入框的長(zhǎng)度; value為默認(rèn)的值

單選按鈕

<input type="radio" name="sex" checked value="0"/>
<input type="radio" name="sex" checked value="1"/>

屬性為name將單選按鈕分組這樣就可以選擇只能選擇一個(gè);checked默認(rèn)選中; value表示他的值

復(fù)選框

<input type="checkbox" checked/>

checked 表示默認(rèn)選中 name表示checkbox的名字，也是將復(fù)選框進(jìn)行分組

提交按鈕

<input type="submit" value="登錄"/>

submit為提交按鈕，value為按鈕上顯示的文字。點(diǎn)擊時(shí)會(huì)將參數(shù)添加在form Action的路徑后面

重置按鈕

<input type="reset" value="取消"/>

普通按鈕

<input type="button" value="單擊" οnclick=""/>

普通按鈕，value值為按鈕上顯示的文字，onclick是單擊按鈕觸發(fā)的事件，可用js去處理

圖片按鈕

<input type="image" src="#"/>

圖片按鈕 src為圖片的路徑其屬性可以和 <img>類似

文件按鈕

<input type="file" accept="*.*">

上傳文件在點(diǎn)擊按鈕后可以打開本地的文件，后面的accept是可以選中的文件的類型一般 .xls為excel表格 .docx為word文檔。.jpg 為圖片等等

下拉框

<select>
    <option>選擇</option>
</select>

（六）Html p介紹

<!DOCTYPE html>
<html>
<head>
<title>web學(xué)習(xí)一路向前，?裙767891015等你?</title>
</head>
<body>
    <p>第一個(gè)p</p>
    <p>第二個(gè)p</p>
    <p>第三個(gè)p</p>
</body>
</html>

p標(biāo)簽使用說(shuō)明

在html中布局使用最多標(biāo)簽為p，

我們通常將網(wǎng)頁(yè)重構(gòu)說(shuō)成p css制作。

p本身沒有什么特別之處，只是p標(biāo)簽替代了以前table標(biāo)簽布局。

我們通過(guò)對(duì)p標(biāo)簽對(duì)象設(shè)置不同樣式實(shí)現(xiàn)我們要的美化效果。

通常一對(duì)未設(shè)置任何樣式的p，獨(dú)占一行。

p作用

p起分割作用，是分割內(nèi)容常使用的標(biāo)簽。p+CSS更是起到分割與設(shè)置對(duì)應(yīng)樣式作用。

關(guān)于html的基礎(chǔ)知識(shí)詳細(xì)介紹就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手