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

HTML

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

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

生活随笔收集整理的這篇文章主要介紹了 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）的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：川大网络教育计算机综合实践,川大电子电工
下一篇： HTML5实现经典Windows扫雷游戏

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

HTML

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

HTML標簽介紹

標簽的語法

HTML頭部

元信息<meta>

基本標簽

字體font

橫線hr

預格式化文本pre

刪除字del

插入字ins

粗體字b

斜體字i

右上角加字sup

右下角加字sub

語義化標簽

段落p

標題h

標題組合 hgroup

強調文本em

重要文本strong

長引用blockquote

短引用q

換行br

注意

網頁頭部header

網頁主體main

網頁底部footer

導航nav

側邊欄 aside

文章article

div和span

實體符號

小于號、大于號、空格

表格

標簽

屬性

單元格合并

表頭單元格

thead、tbody、tfoot

背景顏色和背景圖片

頁面引入

圖片

內聯框架 iframe

音頻audio

視頻video

超鏈接

基本使用

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

請求響應

列表

無序列表

有序列表

表單

<form />表單

<input />輸入域標簽

<select>下拉列表

<option>下拉列表元素選項

<textarea>文本域

注意

案例：注冊表單

id屬性

總結