標籤：url 搜尋引擎 連結地址 需求 strong 背景 style 搜尋 css
HTML:超文字標記語言 (HTML) 介紹HTML基本標記 1：頭部標記（head）----- 頭部的內容不會再頁面上顯示 在頭部元素中，一般需要包括標題<title>，基本資料(文檔樣式，表定義，指令碼)和元資訊<meta> 文法： 以<head> 開始標記，以</head> 結束標記 執行個體1： <html> <head> 文檔頭部資訊 </head> <body> 文檔本文資訊 </body> </html> 2：標題標記（title） 作用： 一般是說明頁面的用途，顯示在瀏覽器的標題列中； 文法： ： 以<title>開始，以</title>結束； 執行個體2： <html> <head> <title>標題資訊</title> </head> </html> 3：元資訊標記（meta） meta元素提供的資訊不顯示在頁面中，一般用來定義頁面資訊的說明，關鍵字，重新整理等； meta標記不需要設定結束標記； 在一個HTML頁面中可以有多個meta元素； meta元素的屬性有name和http-equiv，其中name屬性主要用於描述網頁，以便於搜尋引擎尋找，分類； 設定頁面關鍵字 在搜尋引擎中，檢索資訊都是通過輸入關鍵字來實現的； 關鍵字是整個網站登入過程中最基本也是最重要的一步，是進行網頁最佳化的基礎； 具體文法：<meta name="keywords" content="輸入具體的關鍵字"> 設定頁面說明 設定頁面說明也是為了便於搜尋引擎的尋找，它用來詳細說明網頁的內容； 文法：<meta name="description" content="設定頁面說明"> 編碼格式： <meta charset="UTF-8"> 3.3：定義編譯工具 指定開發工具 文法：<meta name="generator" content="FronPage"> 設定作者資訊 文法：<meta name="author" content="小希"> 設定網頁文字及語言 文法：<meta http-equiv="content-type" content="2.html" charset="utf-8"> http-equiv：用於傳遞HTTP通訊協定的標題； content：具體屬性資訊； charset：設定網頁的內碼語系； 設定網頁的跳轉 自動重新整理功能是將http-equiv屬性值設定為refresh; 更新時間和重新整理後的連結地址由content屬性設定，預設跳轉時間以秒為單位； 文法：<meta http-equiv="refresh" content="20;URL=跳轉地址"> 4:網頁主體標記（body） 主體主要包括要在瀏覽器中顯示處理的所有資訊，在網頁的主體標記中有很多的屬性設定，包括網頁的背景設定，文字屬性設定和連結設定等； 網頁背景顏色（bgcolor） 文法： <body bgcolor="背景顏色"> <body bgcolor="yellow"> <body bgcolor="#FF99FF"> 網頁背景顏色（background） 可以將圖片設定為背景，還可以設定背景顏色圖片的平鋪方式，顯示方式； 參數：no-repeat(不重複) background: yellow url("img/100.png") no-repeat; 文法：<body background="images/1.jpg"> 註：指定的路徑可以是絕對路徑也可以是相對路徑； <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #box{ width: 400px; height: 500px; background: yellow url("img/100.png") no-repeat center center; } #bg{ width: 500px; height: 600px; background: red url("img/1.jpg") center top no-repeat; } </style> </head> <body> <div id="box" >html study css</div> <div id="bg"></div> </body> </html> 邊框( border )： border 邊框 border-width 邊框寬度 border-style 邊框樣式 border-color 邊框顏色 邊框樣式： solid 實線 dashed 虛線 dotted 點線（IE6不相容） <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>邊框</title> <style> #bg{ width: 400px; height: 400px; border: 1px fuchsia dotted; } #box{ width: 0px; height: 0px; border-top: solid red 100px; border-right: solid green 100px; border-bottom: solid yellow 100px; border-left: solid fuchsia 100px; } </style> </head> <body> <div id="bg">邊框</div> <div id="box">邊框2</div> </body> </html> padding 內邊距 padding-top 上邊內邊距 padding-right 右邊內邊距 padding-bottom 下邊內邊距 padding-left 左邊內邊距 padding: top right bottom left; 注意：內邊距相當於給一個盒子加了填充厚度會影響盒子大小 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>內邊距</title> <!--如果給一個盒子加完內邊距，不想讓盒子的大小發生改變，我們需要在寬度和高度上減掉響應的像素--> <style> #box { width: 400px; height: 280px; border: 10px red solid; padding-top: 20px; } </style> </head> <body> <div id="box">邊框2</div> </body> </html> margin外邊距 外邊距的問題： 1、上下外邊距會疊壓； 2、父子級包含的時候子級的margin-top會傳遞給父級；（內邊距替代外邊距） 外邊距複合：margin: top right bottom left; <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>外邊距</title> <style> #box1{ width: 100px; height: 100px; background: yellow; /*頁面左右置中*/ margin-left: auto; margin-right: auto; } #box2{ width: 200px; height: 200px; background: red; padding-top: 100px; /*頁面左右置中*/ margin-left: auto; margin-right: auto; } </style> </head> <!--需求：box1頂部距box2，100px,使用內邊距;--> <body> <div id="box2"> <div id="box1">外邊距1</div> </div> </body> </html> 設定文字顏色（text） 文法： <body text="文字顏色"> <body background="images/1.jpg" text="#9966CC"> 連結文字屬性 文法： <body link="#993300"> 需要注意一下標籤屬性： 1：定義置中文本 <center> </center> 2：<a>標籤可定義錨 包括href和name屬性 <a> 標籤的 href 屬性用於指定超連結目標的 URL； 執行個體： <body background="images/1.jpg" text="#9966CC" link="#993300"> <center> <a href="https://www.baidu.com/index.html">串連文字</a> </center> </body> 設定正在訪問的文字顏色 文法：<body alink="#0066FF"> 設定訪問後的文字的顏色 文法：<body vlink="#0066FF"> 邊距margin 設定頁面與瀏覽器之間的距離，包括上邊距和左邊距，邊距的值以像素為單位； topmargin：上邊距離 leftmargin：左邊距離 文法： <body topmargin="100" leftmargin="100"> <p>設定頁面的長邊距</p> <p>設定頁面的左邊距</p> </body> 5:頁面注釋標記<!-- --> 文法：<!--注釋的內容-->HTML結構標籤介紹
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
