基礎(chǔ)標(biāo)簽的學(xué)習(xí)
- 如何在WebStorm中利用快捷鍵創(chuàng)建一個(gè)新的.html的文件
- 同事按下鍵盤上的Ctrl+Alt+Insert
H系列標(biāo)簽(Header1-Header6)
- 作用
- 用于給為本添加標(biāo)題語義
- 格式
- 注意點(diǎn)
H 標(biāo)簽是用來給文本添加標(biāo)題語義的，而不是用來修改文本樣式的
H標(biāo)簽一共有6個(gè)，從H1~H6,最多只能到6抑钟，超過則無效
被H標(biāo)簽包裹的內(nèi)容會(huì)獨(dú)占一行
在H系列的標(biāo)簽中H1最大，H6最小
在企業(yè)開發(fā)中芽卿，一定要慎用H系列的標(biāo)簽，特別是H1標(biāo)簽浦辨，在企業(yè)開發(fā)中一般情況下一個(gè)界面只能出現(xiàn)一個(gè)H1標(biāo)簽（和SEO有關(guān)）
-
如何在WebStom中讓光標(biāo)在多行閃爍，
- 按住鍵盤上的Alt鍵不放沼沈，然后在按住鼠標(biāo)的左鍵不放流酬，然后在拖動(dòng)鼠標(biāo)即可
- Ctrl+D 快速復(fù)制當(dāng)前行
- ctrl+x 剪切
- ctrl+alt+t 然后按下快捷鍵，讓標(biāo)簽包裹一段內(nèi)容列另，也就是自動(dòng)在一段內(nèi)容前后加上標(biāo)簽芽腾，然后輸入對(duì)應(yīng)的標(biāo)簽即可
- end 光標(biāo)快速移到最后一行
- Home 讓光標(biāo)快速移到首行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H系列標(biāo)簽和P標(biāo)簽和Hr標(biāo)簽</title>
</head>
<body>
<h1>我是標(biāo)題1</h1>
<h2>我是標(biāo)題2</h2>
<h3>我是標(biāo)題3</h3>
<h4>我是標(biāo)題4</h4>
<h5>我是標(biāo)題5</h5>
<h6>我是標(biāo)題6</h6>
<h7>我是標(biāo)題7</h7>
我是普通文本
<hr />
<hr>
<p>我是一段文本</p>
<p>我是一段文本</p>
我是一段普通文本
我是一段普通文本
</body>
</html>
P標(biāo)簽
- 作用
- 告訴瀏覽器哪些文字是一個(gè)段落
- 格式
- <P> xxxx</P>
- 注意點(diǎn)
*在瀏覽器中會(huì)單獨(dú)占一行
Hr標(biāo)簽
- 作用
- 在瀏覽器上會(huì)顯示一條分割線
- 格式
- 注意點(diǎn)
- 在瀏覽器中會(huì)單獨(dú)占一行
- 在Html5中兼容Html和Xhtml所以Hr標(biāo)簽后面斜杠寫不寫都行，以后按照高級(jí)開發(fā)工具提示寫不寫
Img 標(biāo)簽
-
作用
- 告訴瀏覽器我們需要一張圖片
-
格式
- < img src="">
屬性
width:
height
title：用于告訴瀏覽器页衙，當(dāng)鼠標(biāo)懸停在圖片上時(shí)摊滔，需要彈出描述框中顯示什么內(nèi)容
alt: 作用就是告訴瀏覽器阴绢，當(dāng)需要顯示的圖片找不到時(shí)顯示的內(nèi)容
-
注意：
- img標(biāo)簽不會(huì)獨(dú)占一行
- 圖片沒有指定寬高，即顯示圖片的圖片的原始寬高艰躺，
- 如果我們手動(dòng)指定img標(biāo)簽顯示的圖片的寬度和高度呻袭，有可能會(huì)導(dǎo)致圖拍呢變形，那么如果又想指定寬高腺兴，又不想讓圖片變形左电，我們可以只指定高度和寬度中的一個(gè)值即可，只要指定了其中的一個(gè)值页响，系統(tǒng)會(huì)自動(dòng)計(jì)算另外一個(gè)值篓足，而且會(huì)按等比來計(jì)算
路徑問題
路徑問題
其實(shí)想給src屬性賦值有兩種方式
1.通過相對(duì)路徑賦值(掌握)
相對(duì)路徑就是每次都從.html文件所在的文件夾開始查找, 我們稱之為相對(duì)路徑
1.1同級(jí)
同級(jí)就是"圖片"和".html文件"存儲(chǔ)在同一個(gè)文件夾中
格式: src="QRCode.jpg"
含義: 在.html文件所在的文件夾中查找名稱叫做QRCode.jpg的圖片
1.2下級(jí)(開發(fā)中用的最多)
下級(jí)就是"存儲(chǔ)圖片的文件夾"和".html文件"在同一個(gè)文件夾中
格式: src="images/QRCode.jpg"
含義: 在.html文件所在的文件夾中找到名稱叫做images的文件夾
然后再在images文件夾中找到名稱叫做QRCode.jpg的圖片
1.3上級(jí)
上級(jí)就是"存儲(chǔ)圖片的位置"和存"儲(chǔ)代碼的文件夾"在同一個(gè)文件夾中
格式: src="../QRCode.jpg"
含義：在.html文件所在的文件夾中找到這個(gè)文件夾的上一級(jí)文件夾, 然后再在上一級(jí)文件夾中找到名稱叫做QRCode.jpg
其中../代表找到當(dāng)前文件夾的上一級(jí)文件夾
2.通過絕對(duì)路徑賦值(了解)
絕對(duì)路徑就是每次都從指定的盤符開始查找
格式: src="C:\Users\Jonathan_Lee\Desktop\HTML基礎(chǔ)\QRCode.jpg"
含義: 在C盤下找到Users文件夾, 然后在Users文件夾中找到Jonathan_Lee文件夾, 然后在Jonathan_Lee文件夾中找到Desktop文件夾, 然后在Desktop文件夾中找到HTML基礎(chǔ)文件夾, 然后在HTML基礎(chǔ)文件夾中找到名稱叫做QRCode.jpg的圖片
注意:
1.路徑中不要出現(xiàn)中文, 否則可能出現(xiàn)未知問題
2.如果是通過"相對(duì)路徑"來指定圖片, 不能跨盤符
2.1例如.html文件在C盤, 那么不能去查找D盤圖片
br標(biāo)簽
- 作用： 換行
- 格式: < br>
- 注意點(diǎn)：
- 多個(gè)br標(biāo)簽可以連續(xù)使用, 使用了多少個(gè)br標(biāo)簽就會(huì)換多少行
- 由于HTML的作用就是用來給文本添加語義, 而br標(biāo)簽的語義是不另起一個(gè)段落換行, 而在企業(yè)開發(fā)中一般情況下需要換行都是因?yàn)樾枰砥鹨粋€(gè)段落, 所以在企業(yè)開發(fā)中很少使用br標(biāo)簽
//一般換行的時(shí)用p標(biāo)簽
<p>只設(shè)置了img標(biāo)簽的src屬性</p>
<p></p>
<p>設(shè)置了img標(biāo)簽的src和width以及height屬性</p>
<p></p>
<p>設(shè)置了img標(biāo)簽的src和width以及height, 但是寬高不是等比拉伸的</p>
<p></p>
<p>設(shè)置了img標(biāo)簽的src和height屬性</p>
<p></p>
<p>設(shè)置了img標(biāo)簽的src和width屬性</p>
<p></p>
<p>設(shè)置了img標(biāo)簽的src和width以及title屬性</p>
<p></p>
<p>設(shè)置了img標(biāo)簽的src和width以及alt屬性</p>
<p></p>
a標(biāo)簽
a標(biāo)簽的作用: 就是用于控制頁面與頁面之間跳轉(zhuǎn)的
a標(biāo)簽的格式: <a href="指定需要跳轉(zhuǎn)的目標(biāo)界面">需要展現(xiàn)給用戶查看的內(nèi)容</a>
a標(biāo)簽中有一個(gè)叫做target屬性, 這個(gè)屬性的作用就是專門用于控制如何跳轉(zhuǎn)
_self: 用于在當(dāng)前選項(xiàng)卡中跳轉(zhuǎn), 也就是不新建界面跳轉(zhuǎn). 默認(rèn)就是_self
_blank: 用于在新的選項(xiàng)卡中跳轉(zhuǎn), 也就是新建界面跳轉(zhuǎn)a標(biāo)簽中還有一個(gè)屬性, 叫做title. a標(biāo)簽中的title和img標(biāo)簽中的title一樣, 都是用來控制鼠標(biāo)懸停時(shí)顯示的提示文本的
注意點(diǎn):
1.a標(biāo)簽不僅可以讓文字可以點(diǎn)擊, 還可以讓圖片也能夠被點(diǎn)擊
2.一個(gè)a標(biāo)簽必須有一個(gè)href屬性, 否則a標(biāo)簽不知道要跳轉(zhuǎn)到什么地方
3.如果通過a標(biāo)簽的href屬性指定一個(gè)URL地址, 那么必須在地址前面加上http://或https://
4.a標(biāo)簽的href屬性除了可以指定一個(gè)網(wǎng)絡(luò)地址以外, 還可以指定一個(gè)本地地址
<a >糯米</a>
<a >
</a>
<a href="08-br標(biāo)簽.html">08-br標(biāo)簽.html</a>
<a href="test/demo/10-路徑練習(xí).html">10-路徑練習(xí).html</a>
<a target="_self">糯米</a>
<a target="_blank">糯米</a>
<a target="_blank" title="江哥提示: 會(huì)跳轉(zhuǎn)到百度糯米的首頁">糯米</a>
Base標(biāo)簽
- 作用：base標(biāo)簽就是專門用來統(tǒng)一的指定當(dāng)前網(wǎng)頁中所有的超鏈接(a標(biāo)簽)需要如何打開
- 注意點(diǎn):
1.base標(biāo)簽必須寫在head標(biāo)簽的開始標(biāo)簽和結(jié)束標(biāo)簽之間
2.如果既在base中指定了target又在a標(biāo)簽中指定了target,那么瀏覽器會(huì)按照a標(biāo)簽中指定的來執(zhí)行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11-base標(biāo)簽</title>
<base target="_blank">
</head>
<body>
<!--
base標(biāo)簽就是專門用來統(tǒng)一的指定當(dāng)前網(wǎng)頁中所有的超鏈接(a標(biāo)簽)需要如何打開
注意點(diǎn):
1.base標(biāo)簽必須寫在head標(biāo)簽的開始標(biāo)簽和結(jié)束標(biāo)簽之間
2.如果既在base中指定了target又在a標(biāo)簽中指定了target,那么瀏覽器會(huì)按照a標(biāo)簽中指定的來執(zhí)行
-->
<a target="_self">糯米</a>
<a >新聞</a>
<a >hao123</a>
<a >地圖</a>
<a >視頻</a>
<a >貼吧</a>
</body>
</html>
假鏈接
1.什么是假鏈接?
就是點(diǎn)擊之后不會(huì)跳轉(zhuǎn)的鏈接我們稱之為假鏈接2.假鏈接存在的意義:
在企業(yè)開發(fā)前期, 其它界面都沒有寫出來, 那么我們就不知道應(yīng)該跳轉(zhuǎn)到什么地方, 所以就只能使用假鏈接來代替. 當(dāng)項(xiàng)目后期其它界面都已經(jīng)完成時(shí)再將假鏈接體會(huì)為真鏈接-
3.假鏈接的格式:
- 1.#
- 2.javascript:
4.兩者之間的區(qū)別:
"# 的假鏈接會(huì)自動(dòng)回到網(wǎng)頁的頂部, 而javascript:的假鏈接不會(huì)自動(dòng)回到網(wǎng)頁頂部"
錨點(diǎn)
- 1.要想通過a標(biāo)簽跳轉(zhuǎn)到指定的位置, 那么必須告訴a標(biāo)簽一個(gè)獨(dú)一無二的身份證號(hào)碼, 這樣a標(biāo)簽才能在當(dāng)前界面中找到需要跳轉(zhuǎn)到的目標(biāo)位置
- 2.如果和HTML中的標(biāo)簽綁定一個(gè)獨(dú)一無二的身份證號(hào)碼呢?
在HTML中, 每一個(gè)標(biāo)簽都有一個(gè)名稱叫做id的屬性, 這個(gè)屬性就是用來給標(biāo)簽指定一個(gè)獨(dú)一無二的身份證號(hào)碼的 - 3.所以要想實(shí)現(xiàn)通過a標(biāo)簽跳轉(zhuǎn)到指定的位置分為兩步
- 3.1給目標(biāo)位置的標(biāo)簽添加一個(gè)id屬性, 然后指定一個(gè)獨(dú)一無二的值
- 3.2告訴a標(biāo)簽?zāi)阈枰D(zhuǎn)到的目標(biāo)標(biāo)簽對(duì)應(yīng)的獨(dú)一無二的身份證號(hào)碼是多少
- 4：格式:
< a href="#center">跳轉(zhuǎn)到中部</a>
< h2 id="center">我是中部</h2>
- 5:注意點(diǎn):
1.通過我們的a標(biāo)簽跳轉(zhuǎn)到指定的位置, 是沒有過度動(dòng)畫的, 是直接一下子就跳轉(zhuǎn)到了指定位置
2.a標(biāo)簽除了可以跳轉(zhuǎn)到當(dāng)前界面的指定位置以外, 還可以在跳轉(zhuǎn)到其它界面的時(shí)候直接跳轉(zhuǎn)到其它界面的指定位置
格式:
< a href="13-錨點(diǎn)測試界面.html#bottom" target="_blank">跳轉(zhuǎn)到錨點(diǎn)測試界面< /a>
< h2 id="bottom">我是錨點(diǎn)測試界面33333< /h2>
