當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML基础学习笔记（All in One）

發布時間：2024/3/26 HTML 46 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML基础学习笔记（All in One）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

INFO

作者：qkmango @芒果小洛
個人主頁 qkmango.cn

HTML標簽介紹

標簽的格式
<標簽名>封裝的數據</標簽名>
標簽名大小寫不敏感
標簽擁有自己的屬性
- 基本屬性：bgcolor = "red" 可以修改簡單的樣式效果
- 事件屬性： onclick="alert('你好！');" 可以直接設置事件響應后的代碼。
標簽又分為，單標簽和雙標簽。
- 單標簽格式
  
  <標簽名 /> br 換行 hr水平線
- 雙標簽格式
  
  <標簽名> ...封裝的數據...</標簽名>

標簽的語法

標簽不能交叉嵌套

正確： <div><span>早安，尚硅谷</span></div> 錯誤： <div><span>早安，尚硅谷</div></span>

標簽必須正確關閉

雙標簽正確：<div>早安，尚硅谷</div> 錯誤：<div>早安，尚硅谷 <hr /> 單標簽正確：<br />錯誤<br>

屬性必須有值，屬性值必須加引號

正確： <font color="blue">早安，尚硅谷</font> 錯誤： <font color=blue>早安，尚硅谷</font> 錯誤：<font color>早安，尚硅谷</font> <hr />

HTML頭部

元信息<meta>

元素可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞

主要用于設置網頁中的一些元數據，元數據不是給用戶看的，而是給瀏覽器、爬蟲看的

屬性

屬性值描述

charset	character encoding	定義文檔的字符編碼
content	some_text	設置name屬性的值
name	author description keywords generator revised others （描述、關鍵字）	把 content 屬性關聯到一個名稱。

<meta charset="utf-8"/> <meta name="keywords" content="Bilibili,嗶哩嗶哩,嗶哩嗶哩動畫,嗶哩嗶哩彈幕網,彈幕視頻,B站"> <meta name="description" content="bilibili是國內知名的視頻彈幕網站，">

基本標簽

字體font

<font color='red' face='宋體' size='4'> 我是字體標簽 </font>

橫線hr

預格式化文本pre

<pre>for(int i = 0; i < 10; i++) {System.out.println("i = " + i);} </pre>

刪除字del

插入字ins

粗體字b

斜體字i

右上角加字sup

右下角加字sub

X<sup>2</sup> Y<sub>3</sub>

語義化標簽

語義化標簽：強調的是語義話，而不是字體大小顏色等等

段落p

標題h

標題組合 hgroup

<hgroup><h1>回鄉偶書</h1><h2>其一</h2> </hgroup> <p>少小離家老大回，鄉音無改鬢毛衰。</p> <p>兒童相見不相識，笑問客從何處來。</p><hgroup><h1>回鄉偶書</h1><h2>其二</h2> </hgroup> <p>離別家鄉歲月多，近來人事半消磨。</p> <p>惟有門前鏡湖水，春風不改舊時波。</p>

強調文本em

表示被強調的文本，被重讀的文本

<p>今天天氣<em>真</em>不錯！</p>

今天天氣真不錯！

重要文本strong

<p>你今天<strong>必須</strong>完成作業</p>

你今天必須完成作業

長引用blockquote

塊元素，表示一個長引用，引用的內容比較多，所以是塊元素

魯迅說： <blockquote>我從來沒說過這句話！ </blockquote>

魯迅說：

我從來沒說過這句話！

短引用q

行內元素，表示一個短引用，引用的內容比較少，所以是行內元素，沒有縮進，自動添加雙引號

子曰：<q>學而時習之，樂呵樂呵！</q> 子曰：學而時習之，樂呵樂呵！

換行br

Hello<br/>Word

注意

塊元素（block element）

在網頁中一般使用塊元素進行布局

行內元素（inline element）

行內元素一般主要用來包裹文字

一般情況下會在塊元素中放行內元素，而不會在行內元素放塊元素

塊元素基本上什么都可以放

<p></p>元素中不能放任何塊元素

網頁頭部header

header表示網頁頭部，如京東的首頁上方即可表示為網頁頭部，或者各部分的上方都可以表示為header頭部，

網頁主體main

與header類似，網頁除頭部以下的地方都可以是main主體部分，但是注意，一個網頁只能有一個main

網頁底部footer

footer表示一個網頁的底部，或者其他部分下面部分都可以認為是footer，以京東首頁為例，頁面最下面可以認為是一個footer

可以認為一個網頁是由header、main、footer三個部分組成，這三個標簽使用的不頻繁

導航nav

表示網頁中的導航（導航欄）

側邊欄 aside

表示和主題相關的其他內容（側邊欄）

文章article

表示一個獨立的文章

div和span

1. div和span是什么？* div和span可以稱為圖層* 圖層就是一個盒子，div就是盒子套盒子* div和span是可以定位的，只要定下div的左上角坐標即可2. div和span有什么用？* 用來布局，圖層的作用就是保證頁面可以靈活的布局* div用來布局，span用來選中文字3. 其實最早的網頁是使用table進行布局的，但是不靈活4. div和span區別* 默認情況下div會獨占一行，span不會獨自占用一行

實體符號

與HTML語法沖突的符號，需要使用實體符號

小于號、大于號、空格

X<Y>Z W

表格

標簽

表格標簽 <table></table>

行標簽<tr></tr>

單元格<td></td>

<table><tr><td>A</td><td>B</td><td>C</td></tr><tr><td>X</td><td>Y</td><td>Z</td></tr> </table>

屬性

邊框border

寬度width

高度height

對其align

<table border="1px" width="50%" height="100px" align="center"><tr align="center"><td>1</td><td>2</td><td>3</td></tr><tr><td align="center">4</td><td>5</td><td>6</td></tr> </table>

單元格合并

rowspan 行合并，上下單元格合并，合并屬性寫在上面的單元格（rowspan="2"合并兩個），刪除下面被合并的單元格
colspan列合并，左右單元格合并，合并屬性寫在左邊的單元格（colspan="2"合并兩個），刪除右邊被合并的單元格

表頭單元格

表頭單元格th標簽，表頭標簽字體會加粗居中

thead、tbody、tfoot

<thead>、<tbody>、<tfoot>將表格分為三部分：表頭、表身、表腳

不是必須的，只是方便后期js代碼的編寫

<table border="1px" width="50%" height="100px"><thead><tr><th>學號</th><th>姓名</th><th>專業</th></tr></thead><tbody><tr><td>49</td><td>小明</td><td rowspan="2">計算機</td></tr><tr><td>06</td><td>小紅</td></tr></tbody><tfoot><tr><td colspan="3">安徽新華學院</td></tr></tfoot> </table>

背景顏色和背景圖片

背景圖片background值可以是URL或者本地資源路徑

背景色bgcolor

<body background="https://www.baidu.com/img/bd_logo1.png"> </body>  <body bgcolor="green"> </body>

頁面引入

圖片

<img />

src：圖片的路徑URL/本地資源

width：圖片寬度，僅設置寬度，高度會隨著等比例縮放

height：圖片高度，僅設置高度，寬度會隨著等比例縮放

title：設置鼠標懸停時顯示的信息

alt：圖片加載失敗時顯示的提示信息

搜索引擎會根據alt屬性值來識別圖片

內聯框架 iframe

相對于引入了另一個頁面
內聯框架使用不多

<iframe src="http://www.qq.com" width="1000px" height="500px" frameborder="no"></iframe>

音頻audio

頁面引入音頻

屬性值描述

autoplay		音樂自動播放，大部分瀏覽器為了體驗，不會自動播放
controls		向用戶顯示控件
src	url	所播放音頻的 url。
loop		循環播放

引入音頻的方式也可以使用<source/>標簽引入

<audio src="source/audio.mp3" controls ></audio> <audio controls ><source src="source/audio.mp3"> </audio>

解決低版本瀏覽器（IE8）不支持引入音頻的方法

<audio controls>對不起，您的瀏覽器不支持音頻播放，請升級瀏覽器<source src="source/audio.mp3"> </audio><audio src="source/audio.mp3">對不起，您的瀏覽器不支持音頻播放，請升級瀏覽器</audio>

解決不同瀏覽器對音頻文件格式的支持

<audio controls><source src="source/audio.mp3"><source src="source/audio.ogg"> </audio> 對不起，您的瀏覽器不支持音頻播放，請升級瀏覽器

視頻video

頁面引入視頻

使用方式同audio標簽基本一樣

<video controls>對不起，您的瀏覽器不支持視頻播放，請升級瀏覽器<source src="source/video.mp4"> </video> 對不起，您的瀏覽器不支持視頻播放，請升級瀏覽器

超鏈接

基本使用

<a>

href：URL/本地資源

target：打開頁面的方式，取值為

_blank新窗口

_self	當前窗口
_top	頂端窗口打開
_par	父窗口

錨點定位跳轉頁面任意位置

超鏈接a標簽href跳轉到指定id元素的位置，如href="#top"，路徑在前面加上#號，類似于id選擇器

<a href="#down" id="top">去底部</a> <a href="#p10">去第10段</a><h1>木蘭寺</h1> <p id="p1">唧唧復唧唧，木蘭當戶織。</p> <p id="p2">不聞機杼聲，惟聞女嘆息。</p> <p id="p3">問女何所思，問女何所憶。</p> <p>女亦無所思，女亦無所憶。</p> <p>昨夜見軍帖，可汗大點兵，軍書十二卷，卷卷有爺名。</p> <p>阿爺無大兒，木蘭無長兄，愿為市鞍馬，從此替爺征。</p> <p>東市買駿馬，西市買鞍韉，南市買轡頭，北市買長鞭。</p> <p>旦辭爺娘去，暮宿黃河邊，不聞爺娘喚女聲，但聞黃河流水鳴濺濺。</p> <p>旦辭黃河去，暮至黑山頭，不聞爺娘喚女聲，但聞燕山胡騎鳴啾啾。</p> <p id="p10">萬里赴戎機，關山度若飛。</p> <p>朔氣傳金柝，寒光照鐵衣。</p> <a href="#top" id="down">回到頂部</a>

請求響應

瀏覽器向服務器發送數據（請求：request）

服務器向瀏覽器發送數據（響應：response）

B/S結構的系統，每一個請求都會對應一個響應

B —> S 請求

S —> B 相應

列表

列表之間是可以互相嵌套的

無序列表

<ul>無序列表

? type屬性設置無序列表前的符號

? type="disc"實心點，type="circle"空心點，type="square"實心方形

<li>列表項

可以嵌套多層

有序列表

<ol>有序列表

? type屬性設置無序列表前的符號

? type="1"數字，"A" 大寫字母，"a"小寫字母，"I"大寫羅歐數字，"i"小寫羅馬數字

<li>列表項

可以嵌套多層

表單

<form />表單

必需的屬性

屬性值描述

action	URL	提交數據信息的服務器，指定服務器地址，如http://192.168.111.3:8080/oa/save是請求路徑，表單數據最終提交給這個地址的服務器對應的軟件
method	get post	用于向 action URL 傳送數據的 HTTP 方法。默認為 get 采用get提交表單信息的時候，信息會顯示在瀏覽器的地址欄上采用post提交表單信息的時候，信息不會顯示在瀏覽器的地址欄上 post和get提交的數據格式都是一樣的

可選的屬性

屬性值描述

accept-charset	字符集名稱列表	一個服務器可接受的字符集的列表（用逗號分隔）。
enctype	MIME 類型	用來編碼表單內容的 MIME 類型.
name	表單名稱	定義表單的唯一名稱。
target	_blank _parent _self _top	在何處打開目標 URL。

<input />輸入域標簽

必需的屬性

屬性值描述

type	button checkbox file hidden image password radio reset submit text	指示 input 元素的類型。默認值是 “text”。注釋：此屬性不是必需的屬性，但是我們認為應當包含此屬性。如果被忽略，IE 5.5 會顯示一個文本域，而 Netscape 4.7 不會。
name	field_name	定義用于此 input 元素的唯一名稱。必須的屬性，僅有有name屬性的輸入域的數據才會被提交給服務器。注釋：此屬性必需與 type屬性一同使用

type重要的屬性值

type屬性值作用

text	文本域
password	密碼輸入框
radio	單選按鈕（默認選中添加checked=“checked”）
checkbox	復選框（默認選中添加checked=“checked”）
submit	提交表單按鈕
button	普通按鈕
reset	復位按鈕，清空輸入的數據
hidden	隱藏域控件，用戶看不到的控件，提交數據的時候也會進行提交

可選屬性

屬性值描述

accept	list_of_mime_types	一個逗號分隔的 MIME 類型列表，指示文件傳輸的 MIME 類型。注釋：僅可與 type=“file” 配合使用。
align	left right top texttop middle absmiddle baseline bottom absbottom	定義圖像之后的文本的排列。注釋：僅可與 type=“image” 配合使用。
alt	text	定義圖像的替代文本。注釋：僅可與 type=“image” 配合使用。
checked	checked	指示此 input 元素首次加載時應當被選中。注釋：請與 type=“checkbox” 及 type=“radio” 配合使用。
maxlength	number	定義在某個文本域中所允許的最大字符數。注釋：僅可與 type=“text” 配合使用。
readonly	readonly	只讀，不能被修改value值 value值可以被提交給服務器注釋：僅可與 type=“text” 配合使用。
disabled	disabled	只讀，不能被修改值 value值不會被提給服務器注釋：不能與 type=“hidden” 一同使用。
size	number_of_char	定義 input 元素的尺寸。注釋：不能與 type=“hidden” 一同使用。
src	URL	定義所顯示圖像的URL 注釋：僅可與 type=“image” 一同使用。
value	value	對于按鈕、重置按鈕和確認按鈕：定義按鈕上的文本對于圖像按鈕：定義傳遞向某個腳本的此域的符號結果對于復選框和單選按鈕：定義 input 元素被點擊時的結果對于隱藏域、密碼域以及文本域：定義元素的默認值。注釋：不能與 type=“file” 一同使用。注釋：與 type=“checkbox” 和 type=“radio” 一同使用時，此元素是必需的。

<select>下拉列表

<option>下拉列表元素選項

可選的屬性

屬性值描述

disabled	disabled	當設置此屬性時，會禁用該菜單。
multiple	multiple	可同時選定多個項目（按住CTRL鍵）。
name	unique_name	定義下拉列表的唯一標識符。
size	number	定義菜單中可見項目的數目。

屬性值描述

selected	selected	默認選中狀態。
value	text	定義送往服務器的選項值。

注意：單選下拉列表select的value屬性值就是選中項option的value屬性值

<textarea>文本域

必需的屬性

屬性值描述

cols	number	規定文本區內可見的列數。
rows	number	規定文本區內可見的行數。

可選的屬性

DTD指示此屬性允許在哪種DTD中使用。S=Strict, T=Transitional, and F=Frameset.

屬性值描述

disabled	disabled	當此文本區首次加載時禁用此文本區。
name	name_of_textarea	為此文本區規定一個名稱。
readonly	readonly	指明用戶無法修改文本區內的內容。

注意

只有具有name屬性的表單控件的數據在提交時才會被提交
單選、復選按鈕value值必須手動指定，最后提交的是value值
文本域<textarea>無value屬性，輸入的就是value
超鏈接也會提交向服務器請求數據，但提交的數據是固定的，超鏈接的請求是get請求

表單提交數據的格式

http://localhost:8080/jd/login?username=1234&userpwd=1234 格式：action?name=value&name=value&.... http協議規定的，?前面是服務器路徑，?后面是name=value鍵值對

案例：注冊表單

用戶名
密碼
確認密碼
性別男女
興趣愛好玩游戲運動吃吃吃睡覺
學歷高中大專本科碩士
簡介
<form action="http://localhost:8080/jd/login" method="post">用戶名<input type="text" name="username" /><br/>密碼<input type="password" name="userpwd" /><br/>確認密碼<input type="password" /><br/>性別<input type="radio" name="sex" value="1"/>男<input type="radio" name="sex" value="0" checked="checked"/>女<br/>興趣愛好<input type="checkbox" name="interests" value="playgame"/>玩游戲<input type="checkbox" name="interests" value="sports"/>運動<input type="checkbox" name="interests" value="eat"/>吃吃吃<input type="checkbox" name="interests" value="sleep"/>睡覺<br/>學歷<select name="grade"> <option value="gz" selected="selected">高中</option><option value="dz">大專</option><option value="bk">本科</option><option value="ss">碩士</option></select><br/>簡介<textarea rows="3" cols="40" name="introduce"></textarea><br/><input type="submit" value="注冊" /><input type="reset" value="重置" /> </form>

id屬性

在HTML中，任何元素（節點）都有id屬性，id屬性是該節點的唯一標識，在一個HTML文檔中id唯一

表單提交數據的時候和name有關，和id無關

id作用？
JavaScript語言可以對HTML文檔中任意節點進行增刪改操作
通過id使得獲取節點更加方便，通過id直接拿到節點對象

HTML文檔是一棵樹叫做DOM樹，樹上有很多節點，每個節點都有唯一的id
JavaScript主要就是對這棵樹上的節點進行增刪改

總結

以上是生活随笔為你收集整理的HTML基础学习笔记（All in One）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：川大网络教育计算机综合实践,川大电子电工
下一篇： 2017年html5行业报告,云适配发布