HTML學習第一天
阿新 • • 發佈：2022-04-08
檢視程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 瀏覽器多個空格自動解析為一個 不能直接寫大於小於以及一些特殊符號 如果需要使用則需要使用轉義字元，也就是實體 空格 大於 > 小於 < 直接搜尋w3c網站 --> <h1>hello</h1> <p>你好呀</p> </body> </html>
實體
meta
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!--meta主要用於設定網路中的一些元資料，元資料不是給使用者看的 charset 指定網頁的字符集 name 指定資料的名稱 content 指定的資料內容 keywords表示網站的關鍵字，可以同時指定多個關鍵字用逗號隔開 網頁重定向http-equiv --> <meta name="keywords" content="HTML,前端,CSS"> <meta name="descreption" content="這是一個不錯的網站"> <meta http-equiv="refresh" content="3,url=https://www.baidu.com"> <h1>hello</h1> <p>你好呀</p> </body> </html>
語義標籤
行內元素與塊元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- HTML負責網站的結構 應該關注標籤的語義，而不是樣式 標題標籤： h1~h6共六級標題 重要性遞減，h1的重要性，僅次於title標籤 所以一般一個頁面只有一個h1,標題一般只會使用到h3 標題標籤都是塊元素 在頁面中獨佔一行的元素叫做塊元素 --> <h1>一級標題</h1> <h2>二級標題</h2> <h3>三級標題</h3> <h4>四級標題</h4> <h5>五級標題</h5> <h6>六級標題</h6> <!-- p標籤表示頁面中的一個段落，也是塊元素 --> <!-- hgroup用來為標題分組，可以將相關的標題放入hgroup --> <hgroup> <h1>回鄉偶書</h1> <h2>其一</h2> </hgroup> <!-- em標籤語音語調加重,em不會獨佔一行，叫做行內元素 --> <p>今天天氣<em>真</em>不錯！</p> <!-- strong表示強調，重要，也是行內元素 --> <p>你今天必須<strong>完成作業</strong></p> <!-- blockquote表示一個長引用，獨佔一行，是塊元素 --> 魯迅說<blockquote>這句話我從來沒說過！</blockquote> <!-- q表示一個短引用，行內元素 --> 孔子說：<q>學而時習之，不亦說乎</q> <br> <!-- br標籤表示換行 --> 今天天氣真不錯 </body> </html>
語義標籤2
p元素中不放塊元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
塊元素
在網頁中一般通過塊元素對頁面佈局
行內元素
對文字設定特殊效果
塊元素中放行內元素
塊元素基本什麼都能放
p元素中不能放任何塊元素
瀏覽器解析網頁時會自動對不符合規定元素修正
比如標籤寫在了根元素外面
p中寫了塊元素等
修正不一定符合預期以及增加不必要的工作
-->
<p>
<h1>哈哈</h1>
</p>
</body>
</html>
語義化標籤3
檢視程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
佈局標籤（結構化語義標籤）
-->
<!--
header表示標籤的頭部
main表示網頁主體部分，一般一個頁面只有一個
footer網頁底部
aside 和主體相關的內容（側邊欄）
article表示獨立的文章
section表示獨立的區塊，以上標籤都不能表示時用section
div沒有語義，表示區塊，可以代替以上所有
sapn行內元素，沒有語義，一般用於網頁中選中文字
-->
<header>aa</header>
<main>bb</main>
<footer>cc</footer>
<aside>dd</aside>
<article>ee</article>
<section>ff</section>
<div></div>
<span></span>
</body>
</html>
列表
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
列表（list）
列表三種，列表之間是可以相互巢狀的
無序列表ul用li表示列表項
有序列表ol
定義列表 使用dl來定義內容
dt對內容解釋說明
-->
<ul>
<li>結構</li>
<li>表現</li>
<li>行為</li>
</ul>
<ol>
<li>結構</li>
<li>表現</li>
<li>行為</li>
</ol>
<dl>
<dt>結構</dt>
<dt>結構表示網頁結構</dt>
<dt>結構表示網頁結構</dt>
<dt>結構表示網頁結構</dt>
</dl>
<ul>
<li>ww
<ul>
<li>
11
<ul>
<li>
ee
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>超連結
超連結
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超連結</title>
</head>
<body>
<!-- alt+shift+向下箭頭（向下複製）
超連結-頁面跳轉
使用a標籤定義超連結，a標籤是行內元素
a標籤中可以巢狀除了a自身的任何元素
href指定跳轉目標路徑
值可以使外部網站
也可以是內部地址(在同一個目錄下可以像以下這麼寫)
-->
<a href="https://www.baidu.com">超連結</a>
<br><br>
<a href="07.列表.html">超連結</a>
</body>
</html>超連結內部跳轉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超連結</title>
</head>
<body>
<!--
當我們需要跳轉到伺服器內部時
一般使用相對路徑，用./或者../開頭
不寫預設為./
./表示當前檔案所在目錄
../表示當前檔案所在目錄的上級
-->
<a href="./target.html">超連結</a>
<a href="../07.liebiao.html">超連結</a>
<a href="./inner/target.html">超連結</a>
<a href="../outer/target1.html">超連結</a>
</body>
</html>
跳轉到文章任意位置
檢視程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超連結</title>
</head>
<body>
<!--
target屬性，指定超連結開啟的位置
_self預設在當前頁面開啟
_blank在新的頁面中開啟超連結
lorem自動將中文生成英文版本
超連結
回到頂部
-->
<!--
在開發中可以將#作為超連結的路徑的佔位符使用
-->
<a href="#">這是一個新的超連結</a>
<!--
javascript:; 作為href屬性，點選後什麼也不會發生
-->
<a href="javascript:;">不會發生</a>
<a href="#bottom">去底部</a>
<a href="https://www.baidu.com" target="_blank">超連結</a>
<p>ASP.NET Core是一個免費且開放原始碼的Web框架，以及由微軟和社群開發的下一代ASP.NET。它是一個模組化框架，既可以Windows上的完整.NET Framework上執行，也可以在跨平臺.NET Core上執行。</p>
<p>ASP.NET Core是一個免費且開放原始碼的Web框架，以及由微軟和社群開發的下一代ASP.NET。它是一個模組化框架，既可以Windows上的完整.NET Framework上執行，也可以在跨平臺.NET Core上執行。</p>
<p>ASP.NET Core是一個免費且開放原始碼的Web框架，以及由微軟和社群開發的下一代ASP.NET。它是一個模組化框架，既可以Windows上的完整.NET Framework上執行，也可以在跨平臺.NET Core上執行。</p>
<p>ASP.NET Core是一個免費且開放原始碼的Web框架，以及由微軟和社群開發的下一代ASP.NET。它是一個模組化框架，既可以Windows上的完整.NET Framework上執行，也可以在跨平臺.NET Core上執行。</p>
<p>ASP.NET Core是一個免費且開放原始碼的Web框架，以及由微軟和社群開發的下一代ASP.NET。它是一個模組化框架，既可以Windows上的完整.NET Framework上執行，也可以在跨平臺.NET Core上執行。</p>
<p>ASP.NET Core是一個免費且開放原始碼的Web框架，以及由微軟和社群開發的下一代ASP.NET。它是一個模組化框架，既可以Windows上的完整.NET Framework上執行，也可以在跨平臺.NET Core上執行。</p>
<p>ASP.NET Core是一個免費且開放原始碼的Web框架，以及由微軟和社群開發的下一代ASP.NET。它是一個模組化框架，既可以Windows上的完整.NET Framework上執行，也可以在跨平臺.NET Core上執行。</p>
<p>ASP.NET Core是一個免費且開放原始碼的Web框架，以及由微軟和社群開發的下一代ASP.NET。它是一個模組化框架，既可以Windows上的完整.NET Framework上執行，也可以在跨平臺.NET Core上執行。</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<!--
href="#"回到頂部
去底部等於去最底部那個位置,id是區分大小寫的
也可以跳轉到指定位置，只要設定id即可
-->
<a href="#" id="bottom">回到頂部</a>
</body>
</html>