打碼日常--html5+css3

阿新 • • 發佈：2020-12-30

技術標籤：html5+css3 html

html5+css3學習筆記

html5

html5

1.網頁的基本結構

文件宣告(doctype)
文件宣告用來告訴瀏覽器當前網頁的版本
html5的結構宣告<!doctype html>或<!Doctype HTML>

2.實體

在html中有些時候，我們不能直接寫一些特殊符號

比如：多個連續的空格，字母兩側的大於小於符號

  這時需要使用html中的實體（轉義字元）
      &nbsp;空格
      &gt;大於號
      &lt;小於號
      &copy;版權符號

檢視html實體

3.meta

meta主要設定網頁中的一些元資料，元資料不是給使用者看
–charset 指定網頁的字符集
–name 指定資料的名稱
–content 指定的資料內容

      1.頁面關鍵字（表示網站的關鍵字，可指定多個，用逗號隔開）
      <meta name="keywords" content="your,zhu,haha" />
      2.頁面描述（用於指定網站的描述）
      <meta name="description"這是一個不錯的網站" />

其他常用meta整理

4.語義化標籤

1.塊元素和行內元素

塊元素（block element），在頁面中獨佔一行
行內元素（inline element），在頁面中不會獨佔一行
一般在塊元素裡面放行內元素
p元素中不能放任何的塊元素

2.標籤

在網頁html專門用來負責網頁的結構

在使用html標籤的時候，應該關注標籤的語義，而不是樣式

  1）標題標籤：
          h1~h6 一共六級標籤
          一般標籤只使用到h1 ~ h3，h4 ~ h6很少用
   2）p標籤：
   		表示頁面的一個段落
   3）em標籤：
   		表示語言強調的一個加重
   4）hgroup標籤：
   		用來為標題分組，可以將一組相關的標題同時放在hgroup
   5）blockqute標籤：
   		表示一個長引用
   6）q標籤
   		表示一個短引用

標籤列表（字母排序）
標籤列表（功能排序）

3.結構化語義標籤

<header>元素描述了文件的頭部區域,可有多個
<nav>標籤定義導航連結的部分
<section>標籤定義文件中的節
<article> 標籤定義獨立的內容
<aside>標籤定義頁面主區域內容之外的內容（比如側邊欄）
<figcaption>標籤定義 <figure> 元素的標題
<figure>標籤規定獨立的流內容（影象、圖表、照片、程式碼等）
<footer>元素描述了文件的底部區域，可有多個

詳情可檢視

div 沒有語義，就是用來表示一個區塊，目前來講div是我們的主流佈局元素
span 行內元素，沒有任何語義，一般用於網頁中選中文字

4.列表

在html中也可以建立列表，html列表一共有三種：
   1.有序列表（使用ol標籤來建立有序列表，li來表示列表項）
   2.無序列表（使用ul標籤來建立有序列表，li來表示列表項）
   3.定義列表（使用dl標籤來建立一個定義列表，
  			  dt來表示定義內容，使用dd來對內容進行說明）
   
    列表之間可以相互巢狀

5.超連結（a）

- 使用標籤 a 來設定超文字連結
- href 屬性描述了連結的目標
- 相對路徑都會使用./表示當前檔案所在目錄../表示檔案所在目錄的上級目錄
- 超連結的其他用法
	target屬性，用來指定超連結開啟的位置
	    可選值：_self 預設值當前頁面開啟超連結
			    _blank 在一個新的頁面中開啟超連結
-在底部可以直接將href屬性設為#，點選超連結可以回到頂部
-可以跳轉到頁面的指定位置，只需要href屬性設為#目標元素的id
-可以使用javascript:;來作為href的屬性，此時點選這個超連結什麼都不會發生

6.圖片標籤（img）