當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

一、前端必须掌握HTML的基础知识

發(fā)布時(shí)間：2024/10/8 HTML 38 豆豆

生活随笔收集整理的這篇文章主要介紹了一、前端必须掌握HTML的基础知识小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章目錄

1、什么是HTML
2、HTML 的基本模板
3、常用標(biāo)簽
- 3.1 塊級(jí)標(biāo)簽代碼
- 3.2 什么是描點(diǎn)
- 3.3 列表標(biāo)簽
- - 3.3.1 無序列表
  - 3.3.2 有序列表
  - 3.3.3 定義列表
- 3.4 表格標(biāo)簽
- - 3.4.1 表格標(biāo)簽格式:
  - 3.4.2 表格標(biāo)簽的屬性:
  - 3.4.3 表格的合并
- 3.5 表單標(biāo)簽
- 3.5.1 表單標(biāo)簽input的屬性
- 3.5.2 label標(biāo)簽
- 3.5.3 datalist標(biāo)簽
- 3.6 表單非input標(biāo)簽
- - 3.6.1 select標(biāo)簽
  - 3.6.2 textarea標(biāo)簽
- 3.7 單選框
- 3.8 多選框
- - 3.8.1 input 標(biāo)簽
  - 3.8.2 submit 和reset
- 3.9 提交服務(wù)器要注意幾點(diǎn)
4、其他基礎(chǔ)知識(shí)
- 4.1 塊級(jí)元素
- 4.2 行內(nèi)（內(nèi)聯(lián)）元素
- 4.3 行內(nèi)塊元素
- 4.4 隱藏元素
- 4.5 多媒體標(biāo)簽
5、HTML書寫規(guī)范

1、什么是HTML

超文本標(biāo)記語言，標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用。是網(wǎng)頁制作必備的編程語言
“超文本”就是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
超文本標(biāo)記語言的結(jié)構(gòu)包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關(guān)于網(wǎng)頁的信息，“主體”部分提供網(wǎng)頁的具體內(nèi)容。

超文本標(biāo)記語言（HyperText Markup Language），簡(jiǎn)稱 HTML

2、HTML 的基本模板

3、常用標(biāo)簽

3.1 塊級(jí)標(biāo)簽代碼

h1 ~ h6 的標(biāo)題標(biāo)簽

div 塊狀標(biāo)簽, hr 分割線，br 換行

<div>hello html <hr> hello css <br> hello javascript </div>

3.2 什么是描點(diǎn)

要想通過a標(biāo)簽跳轉(zhuǎn)到指定的位置, 那么必須告訴a標(biāo)簽一個(gè)獨(dú)一無二的身份證號(hào)碼, 這樣a標(biāo)簽才能在當(dāng)前界面中找到需要跳轉(zhuǎn)到的目標(biāo)位置

如果和HTML中的標(biāo)簽綁定一個(gè)獨(dú)一無二的身份證號(hào)碼呢?

在HTML中, 每一個(gè)標(biāo)簽都有一個(gè)名稱叫做id的屬性, 這個(gè)屬性就是用來給標(biāo)簽指定一個(gè)獨(dú)一無二的身份證號(hào)碼的。

所以要想實(shí)現(xiàn)通過a標(biāo)簽跳轉(zhuǎn)到指定的位置分為兩步

給目標(biāo)位置的標(biāo)簽添加一個(gè)id屬性, 然后指定一個(gè)獨(dú)一無二的值

告訴a標(biāo)簽?zāi)阈枰D(zhuǎn)到的目標(biāo)標(biāo)簽對(duì)應(yīng)的獨(dú)一無二的身份證號(hào)碼是多少

格式:：

<a href="#center">跳轉(zhuǎn)到中部</a> <h2 id="center">我是中部</h2>

3.3 列表標(biāo)簽

3.3.1 無序列表

無序列表格式:

<ul><li>需要顯示的條目?jī)?nèi)容</li> </ul>

有序列表(最少)(ordered list)

3.3.2 有序列表

有序列表格式:

<ol><li>需要顯示的條目?jī)?nèi)容</li> </ol>

3.3.3 定義列表

定義列表的格式

<dl><dt>是用來定義列表中的標(biāo)題</dt><dd>含義就是用來定義標(biāo)題對(duì)應(yīng)的描述的</dd> </dl>

3.4 表格標(biāo)簽

3.4.1 表格標(biāo)簽格式:

3.4.2 表格標(biāo)簽的屬性:

<table border="1" width="500px" height="300px" align="right" cellspacing="12px" cellpadding="1"><tr valign="bottom"><td width="150px" height="50px">1.1</td><td valign="top">1.2</td></tr><tr align="center"><td align="right">2.1</td><td>2.2</td></tr> </table>

3.4.3 表格的合并

水平方向上的單元格合并可以給td標(biāo)簽添加一個(gè)colspan屬性

例如:<td colspan="2"></td>

含義: 把當(dāng)前單元格當(dāng)做兩個(gè)單元格來看待

垂直方向上的單元格合并

可以給td標(biāo)簽設(shè)置一個(gè)rowspan屬性, 來指定把某一個(gè)單元格當(dāng)做多個(gè)單元格來看待(垂直方向)

例如:<td rowspan="2"></td>

3.5 表單標(biāo)簽

3.5.1 表單標(biāo)簽input的屬性

3.5.2 label標(biāo)簽

要想讓輸入框和文字綁定在一起, 那么我們可以使用Label標(biāo)簽

1. 將文字利用label標(biāo)簽包裹起來 2. 給輸入框添加一個(gè)id屬性 3. 在label標(biāo)簽中通過for屬性和輸入框中的id進(jìn)行綁定即可

3.5.3 datalist標(biāo)簽

作用: 給輸入框綁定待選項(xiàng)
1. 搞一個(gè)輸入框
2. 搞一個(gè)datalist列表
3. 給datalist列表標(biāo)簽添加一個(gè)id
4. 給輸入框添加一個(gè)list屬性,將datalist的id對(duì)應(yīng)的值賦值給list屬性即可
請(qǐng)輸入你的車型: <input type="text" list="cars"> <datalist id="cars"> <option>奔馳</option> <option>寶馬</option> <option>奧迪</option> <option>路虎</option> <option>賓利</option> </datalist>

3.6 表單非input標(biāo)簽

3.6.1 select標(biāo)簽

作用: 用于定義下拉列表

一級(jí)下拉列表 <select><option>北京</option><option>上海</option><option>廣州</option><option>廣西</option》<option selected="selected">武漢</option> <</select> 二級(jí)下拉列表 <select><optgroup label="北京"><option>朝陽區(qū)</option><option>昌平區(qū)</option><option>通州區(qū)</option></optgroup><optgroup label="廣州"><option>天河區(qū)</option><option>越秀區(qū)</option><option>黃浦區(qū)</option></optgroup> </select>

3.6.2 textarea標(biāo)簽

作用: 定義一個(gè)多行輸入框
格式: 25行一行5個(gè) <p> 個(gè)人簡(jiǎn)介: <textarea cols="25" rows="5"></textarea> </p>

3.7 單選框

input 標(biāo)簽 radio 必須有相同的name ，checked = checked 默認(rèn)選上

3.8 多選框

3.8.1 input 標(biāo)簽

input 標(biāo)簽 checkbox 必須要相同的name

3.8.2 submit 和reset

submit 和reset

3.9 提交服務(wù)器要注意幾點(diǎn)

在單選框和多選框中,所有的項(xiàng)目的name必須一致，在表單標(biāo)簽中,除了按鈕標(biāo)簽以外的標(biāo)簽,都可以通過value來指定需要提交到服務(wù)器的數(shù)據(jù)，也就是必須有name和value屬性提交時(shí)url 會(huì)有 name的值 = value的值

其他input標(biāo)簽如text，password，必須要name ，提交時(shí)會(huì)name的值 = 填寫的值

4、其他基礎(chǔ)知識(shí)

4.1 塊級(jí)元素

div display:block;
可以包含任何塊和行內(nèi)元素
獨(dú)占一行，支持設(shè)置寬高
如果沒有設(shè)置寬高，高度由內(nèi)容撐開，寬度默認(rèn)瀏覽器寬度
沒有內(nèi)容，在網(wǎng)頁上肉眼看不到東西，但是審查元素，寬度是瀏覽器寬度，高度0

4.2 行內(nèi)（內(nèi)聯(lián)）元素

span display:inline;
可以和其他行內(nèi)元素位于同一行
行內(nèi)元素不要包塊級(jí)元素
不支持設(shè)置寬高
內(nèi)容撐開寬高

4.3 行內(nèi)塊元素

display:inline-block;
塊級(jí)元素可以橫排展示
行內(nèi)元素可以設(shè)置寬高
元素既能設(shè)置寬高也能排在一排

4.4 隱藏元素

display:none
包括他的子標(biāo)簽，在頁面中不占位置，等同于消失了

4.5 多媒體標(biāo)簽

什么是video標(biāo)簽?
作用: 播放視頻
格式: <video src=""> </video>
video標(biāo)簽的屬性
src: 用于告訴video標(biāo)簽需要播放的視頻地址
autoplay: 用于告訴video標(biāo)簽是否需要自動(dòng)播放視頻
controls: 用于告訴video標(biāo)簽是否需要顯示控制條
poster: 用于告訴video標(biāo)簽視頻沒有播放之前顯示的占位圖片
loop: 一般用于做廣告視頻, 用于告訴video標(biāo)簽視頻播放完畢之后是否需要循環(huán)播放
preload: 預(yù)加載視頻, 但是需要注意preload和autoplay相沖, 如果設(shè)置了autoplay屬性, 那么preload屬性就會(huì)失效

muted:靜音
width/height: 和img標(biāo)簽中的一模一樣-
什么是audio標(biāo)簽?
作用: 播放音頻
格式: <audio src=""> </audio><audio><source src="" type=""> </audio>

5、HTML書寫規(guī)范

1.名字用小寫字母2.以英文開頭，可以包含英文字母，數(shù)字，_，-，不能使用中文3.駝峰命名className 第二個(gè)單詞首字母大寫4.id命名id只能有一個(gè)名字，而且在頁面中相同的名字只能出現(xiàn)一次，相當(dāng)于身份證號(hào)碼一樣5.class命名class可以出現(xiàn)多次，而且相同的名字可以有多個(gè)，相當(dāng)于人名一樣

總結(jié)

以上是生活随笔為你收集整理的一、前端必须掌握HTML的基础知识的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：肾上腺嗜铬细胞瘤治疗费用（左肾上腺嗜铬细
下一篇：四十三、去年pandas的笔记