HTML5，CSS3，學習筆記

この青龍だ!發表於2020-11-14
HTMLCSSS3筆記

hHTML5，CSS3，學習筆記

html筆記

1.html的基本格式

<!--文件宣告，宣告當前網頁的版本-->
<!DOCTYPE html>
<!--html的根標籤,網頁中的所有內容都要寫在這裡面-->
<html>
    <!--網頁的頭部，不會再網頁中出現，幫助瀏覽器或搜尋引擎解析網頁-->
    <head>
        <!--meat標籤，用來設定網頁的後設資料，這裡用來設定網頁的字符集，避免亂碼問題-->
            <meta charset="utf-8">
        <!--title裡的內容顯示在瀏覽器的標題欄上，搜尋引擎會根據title中的內容來判斷網頁的主要內容-->
            <title>網頁的標題</title>
        </head>

        <!--表示網頁的主體，網頁中的所有的可見內容都應該寫在body裡-->
        <body>
            <h1>第一個網頁</h1>
            <h2>馬保國</h2>
            <h3>松果糖豆閃電鞭</h3>
           
        </body>


    

</html>

2.標籤

常用的標籤，例如：

<meta name="keywords" content="馬保國,混元形意太極門掌門人,武德">
	<!-- keywords表示網站關鍵字。多個關鍵字之間使用英文 "," 隔開 -->


<meta name="description" content="這個網站針不戳">
	<!-- description用於指定網站的描述 -->


<hgroup>
	<h1> 馬保國大戰英國大力士 </h1>
    <h2> 折手指頭 </h2>
</hgroup>
	<!-- hgroup標籤用來為標題分組，可以把一組相關的標題同是放到hgroup裡 -->


<p>在p標籤中的內容表示一個段落</p>



<br>表示換行

語義化標籤

<p>
    住在山裡<em>針不戳</em>
</p> 
	<!-- 
		em標籤用於語氣的加重 
		在頁面中不會獨佔一行的元素叫做行內元素
	-->


<p>
   	住在山裡<strong>針不戳</strong>
</p>
	<!-- strong表示強調主要的內容 -->


<blockquote>
    你找周樹人，關我魯迅什麼事呢？
</blockquote>
	<!-- blockquote表示長引用 -->


<header></header>
	<!-- header表示網頁的頭部 -->


<main></main>
	<!-- main表示網頁的主體
		一個網頁只有一個main	
	-->

<footer></footer>
	<!-- footer表示網頁的底部 -->


<nav></nav>
	<!-- nav表示網頁中的導航 -->

<aside></aside>
	<!-- aside表示和主體相關的其他內容(側邊欄) -->

<article></article>
	<!-- 表示一個獨立的文章 -->

<section></section>


	<!-- 表示一個獨立的區塊，上面的標籤不能使用時用section>

塊元素&行內元素

1.塊元素：對網頁進行佈局。

2.行內元素：行內元素主要用來包裹元素。

​ 一般情況會在塊元素中放行內元素。而不會在行內元素中放塊元素。

<div>
    
</div>
<!-- div沒有語義,就用來表示一個區塊，目前來講div還是主要的佈局元素。-->

<span>
    
</span>
<!-- 沒有語義，是行內元素，一般用於網頁中選擇文字 -->

3.列表

html中的列表一共有三種

1.有序列表

有序列表，使用ul標籤來建立無序列表

使用li標籤表示列表項

<ol>
    <li>結構</li>
    <li>表現</li>
    <li>行為</li>
</ol>

2.無序列表

有序列表，使用ul標籤來建立無序列表

使用li標籤表示列表項

<ul>
    <li>結構</li>
    <li>表現</li>
    <li>行為</li>
</ul>

3.定義列表

使用dl標籤來建立定義列表

使用dt來定義內容

使用dd來對內容進行解釋說明

<dl>
    <dt>結構</dt>
    <dd>結構表示網頁的結構，結構用來規定網頁哪裡是標題，哪裡是段落。</dd>
</dl>

4.超連結

超連結可以從一個頁面跳轉到其他頁面。

超連結也是一個行內元素。

在中可以巢狀任何元素，除了它自身。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超連結</title>
</head>
<body>

    <a href="https://www.bilibili.com">進入新世界</a>
    <br>
    <a href="https://www.bilibili.com/video/BV14t411J7bR?from=search&seid=11879629248292825137">馬老師松果糖豆閃電鞭線上教學</a>
   



</body>
</html>

1.相對路徑

當需要跳轉到一個伺服器（專案）內部頁面時，一般都會使用相對路徑

相對路徑都睡使用 . 或 … 開頭 ，./，…/可以不寫，如果不寫，就預設為./。

./ 表示當前檔案所在的目錄。

…/ 表示當前檔案所在目錄的上級。

​

2.超連結的其他用法

​ 開啟新的標籤

​ target屬性，用來指定連結開啟的位置，是可選值。

​ _self 預設值，在當前頁面中開啟連結。不寫預設為self。

​ _blank 在一個新的頁面中開啟超連結。

<a href="https://www.bilbil.com"target="_self">超連結</a>
<!--與不寫無區別-->
<a href="https://www.bilbil.com"target="_blank">超連結</a>

1.回到頂部

直接把href的屬性值設定為“#”

<a href="#">超連結返回頂部</a>

2.到網頁的任意位置

給a標籤加特殊的標記（id屬性)

每一個標籤都可以新增id屬性，同一個頁面中不能出現相同的id屬性。

<a href="#abc">點選這裡</a>
<a id="abc"href="#">到這個超連結的位置位置</a>

<a href="#def"></a>
<p id="def">
    到這個段落的位置
</p>

5.圖片標籤

用於網頁中引入一個外部圖片。使用img標籤，

src 屬性指定的是外部圖片的路徑。（路徑規則和超連結是一樣的）

alt是對圖片的描述

widht 圖片的寬度

hight 圖片的高度

如果只修改一個 ，圖片會等比例縮小或放大

<img widht="200"src="002.png" alt="anmi大師的畫">

6.內聯框架

在一個頁面內引用另一個頁面

src裡是要引用的連結

frameborder=“0”，表示內聯框架的邊框，0無，1有

<iframe src="hptts://bilibili.com"width="800"hight="600" frameborder="0"></iframe>

7.音視訊播放

音視訊引入時預設為不可操作

1.加上“controls”，使用者可控制播放。

2.autoplay控制在開啟頁面時是否自動播放。(一般瀏覽器不會自動播放)

3.loop控制是否迴圈播放。

audio標籤用來在頁面中引入外部音訊檔案。

<audio src=" " controls></audio>
<audio src=" " controls autoplay></audio> <!-- 可控，自動播放-->

video標籤

<video controls>
	<source scr="">
</video>

css筆記

1.css語法

1.內部表樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<!--
	內部樣式表
	所有將樣式編寫到head中的style標籤裡，通過css選擇器來選中元素並將其改為各種樣式，可以同時設定多個標籤的樣式，
	並且修改時只要修改一次就能全部應用

-->
    
    <style>
        p{  	
            color: aqua;
            font-size: 50px;
        }  
    </style>

    
</head>
<body>
   <p>aquaSUKI</p>
    
</body>
</html>

2.外部表樣式

可以將css編寫到一個外部的css檔案，然後通過link標籤來引入外部的css檔案。

只要想使用這種樣式都可以引入，使樣式可以在不同頁面之間反覆使用。

<link real="stylesheet" href="./style.css">
<!-- ./style.css 為外部css樣式表的連結。-->

  p{  	
            color: aqua;
            font-size: 50px;
        }

相關文章