html+CSS筆記（1）

Liquor08發表於2020-11-05
HTMLCSS筆記

1、 什麼是HTML？

  • HTML是一種超文字標記語言「Hyper Text Markup Language」；
  • HTML不是一種程式語言，而是一種標記語言；
  • HTML使用標記標籤來描述網頁；
  • HTML的標記標籤簡稱為HTML標籤；
  • HTML是一種解釋型語言，由瀏覽器解釋執行。

簡單來說：HTML是一種描述網頁的標記語言

2、 什麼是HTML文件？

  • HTML文件描述網頁；
  • HTML文件只包含：
  • HTML標籤和純文字；
  • HTML文件被簡稱網頁；
  • Web瀏覽器的作用是讀取HTML文件，並以網頁的形式展示出來；
  • HTML文件的常見字尾：.html .htm

3、 HTML的基本語法

  • HTML標籤必須由<>包裹；
  • HTML標籤一般成對出現，分為：開始/開放標籤和結束/閉合標籤，也稱容器；
  • 標籤與標籤之間可以巢狀，但必須正確的巢狀；
  • HTML標籤不區分大小寫

4、 HTML的基本結構

 <html>為根標籤，包含2大部分：<head>和<body>； 
 <head>定義HTML的頭部，一般定義HTML的元資訊，包含元素：<title>  |  <meta>  |
 <body>標籤之間定義的是網頁的主要內容。

5、 HTML的程式碼註釋符：

<!-- 要註釋的內容 -->

<標籤名 屬性名1=屬性值1 屬性名2=屬性值2…>

標籤1
title：定義網頁的標題

標籤2：
meta中的charset屬性定義網頁的編碼格式

標籤3：
body：定義網頁的主體
屬性1：
bgcolor：設定網頁的背景顏色
屬性2：
Background：設定網頁的背景圖片（優先順序更高）
屬性3：
Text：設定文字的顏色

基本標籤1：

<hx></hx>	標題標籤（獨佔一行）

基本標籤2：

<br>			換行標籤

基本標籤3：

<hr>			下劃線標籤

基本標籤4：

<p></p>		段落標籤（間距比較大）

基本標籤5：

<pre></pre>	預排版標籤

基本標籤6：

<img/>		圖片標籤

基本標籤7：

<font>		文字字型標籤
	屬性1：
		Color：設定文字字型的顏色
	屬性2：
		Size：設定文字字型的大小
	屬性3：
		Face：設定文字字型的字型

基本標籤8(文字格式化標籤)：

<b>			使文字加粗
<i>			使文字傾斜
<u>			使文字下面加下劃線
<sup>		使內容比前面的字型小，高
<sub>		使內容比前面的字型小，低

基本標籤9：
< marquee> 跑馬燈標籤
屬性：
direction： 設定跑動方向；屬性值：up | down | left | right
behaviour： 設定跑動方式；屬性值：scroll迴圈跑動| slide只跑動1次 | alternate：來回交替跑動
scrollmount： 設定跑動速度「即每次跑動的長度；單位：畫素」；
scrolldelay： 設定滾動延遲「即延遲多長時間開始；單位：毫秒」
loop： 設定滾動迴圈「預設值：-1」
width/height： 設定滾動範圍
bgcolor： 設定滾動背景顏色
hspace/vspace： 設定水平/垂直方向的空白空間

標籤10：

<a>		超連結標籤（跳轉到另外一個頁面）
		必選屬性：href：設定要跳轉的絕對路徑/相對路徑
		屬性1：
target：設定在哪裡「怎樣」開啟超連結頁面；屬性值：target="_blank  |  			_parent  |  _self  |  _top"	
		屬性2：
			name(配合#跳轉到頁面指定位置)
				第一步：做記號：	<a name="自定義標記名'>需要做記號的內容</a>
				第二步：跳轉到當前頁面指定位置：<a href="#自定義標記名">超連結內							容</a>

標籤11：
音訊標籤
必選屬性：src：設定音訊的路徑
可選屬性：loop：設定播放的次數

基本標籤12：

	無序列表<ul><li>
		定義格式：
			<ul   type=”屬性值”>						說明它是一個無序列表
				<li></li>								代表每一條
				<li></li>
				…
		    </ul>

		屬性type的作用： 設定列表每一條前面的樣式
			disc：實心圓   circle：空心圓   square：正方形、

	有序列表<ol><li>
		定義格式：
			<ol>
				<li></li>
				<li></li>
				…
			</ol>			

自定義列表<dl><dt><dd>

<dl>					表明它是一個自定義列表
	<dt></dt>		代表列表中的每一條
	<dd></dd>		說明
</dl>

相關文章