HTML與盒模型

時間 2019-12-07

標籤 html 模型欄目 HTML 简体版

原文原文鏈接

HTML與盒模型

HTML結構

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="keyword" content="關鍵字">
    <meta name="description" content="描述">
    <meta http-equiv="content type" content="text/html" charset="uft-8">
    <meta http-equiv="refresh" content="20;url=http://www.baidu.com">
    <!-- 20秒後進入百度頁面 -->
      <title>標題</title>
  </head>
  <body>
      <img src="圖片地址">

  </body>
</html>

!docment type：文檔聲明，避免盒模型出現怪異解析如ie瀏覽器下margin雙邊距問題。html

HTML4.0的文檔類型聲明：3種嚴格型、過渡型、框架型。前端

HTML5的文檔類型：1種 HTMLweb

meta，元信息，(utf-8)防止亂碼瀏覽器

charset聲明要放在title上面，以避免title出現亂碼緩存

網頁開發製做與開發流程

網頁開發流程：

切圖，分析
瞭解代碼書寫規範
總體佈局
公共模塊
類似模塊、普通模塊
網頁的優化和細節方面的處理

標籤、語義

<div>div沒有任何語義性，主要用於佈局（每一個div獨佔一行）</div>
<h1>標題<h1>
<p>段落</p>

CSS

CSS（cascading Style Sheet）可譯爲層疊樣式表或級聯樣式表，是一組格式設置規則，用於控制web頁面的外觀。服務器

css的引入方式框架

標籤內的書寫：直接在標籤裏面添加style樣式佈局

<div style='border: 1px solid red;'>一個邊框</div>

頭部寫入優化

在<head\>部分加入<style>標籤，在<style>標籤內部書寫樣式

外部引入

css三種引入方式優缺點

外部引入（優先級最低）

優勢

代碼量少
一個css文件能夠控制多個頁面
有利於改版和維護
有效的利用緩存機制，加快頁面的訪問速度
肯能有seo的壓力

缺點

對於單頁來講，會產生多餘的代碼
外部引入中的href屬性會給服務器形成請求壓力

頭部寫入

優勢

代碼量少。
相對於整站來講，單頁面代碼量少
沒有服務器請求壓力

標籤內部寫入

優勢

優先級最高
個別特殊狀況使用，網站維護中，若是不知道這串代碼會不會致使別的修改。

路徑

../返回上一級，href="../css/index.css"
./當前文件所在的層級（基本不用）
/根目錄，D：/uxd/css/index.css，在D盤中任意一個文件夾href="/"這就表明D盤

CSS代碼基礎語法

選擇器 {屬性：值；屬性：值}

選擇器一般是須要改變樣式的HTML元素

每條聲明由一個屬性和值組成，每一個屬性有一個值，屬性和值用：分開用;結束

例如：

.wrap {
  width: 200px;
  height: 200px;
  margin: 100px;
  padding: 130px;
  background-color: #fcc;
}

其中margin和padding存在多種值類型

margin/padding

1個值上下左右

2個值上下、左右

3個值上、左右、下

4個值上、右、下、左

border：

border-left: 10px solid green;
border-right: 10px solid green;
border-top: 10px solid green;
border-bottom: 10px solid green;

CSS自身屬性

盒子模型

width 寬

height 高

margin 外邊距

padding 內邊距

border 邊框

盒模型總寬度：margin-right/left、border-right/left、padding-right/left、width

盒模型總高度：margin-top/bottom、border-top/bottom、padding-top/bottom、height

顯示屬性

float: none|left|right;

float先浮後動：漂浮在上面的圖層，當瀏覽器寬度不夠，就會在下一行，水槽浮動原理

全部元素均可以浮動

沒有特殊設置能夠和文字同樣大小的邊框

CSS選擇器

CSS基本選擇器：3種

id選擇器：#開頭，首字母不能是數字，且只能用一次 #wrap{border: 10px}優先級最高主要用於JS中
類選擇器：.開頭，首字母不能是數字，可重複使用 .test{border： 10px}優先級第二
標籤選擇器<p>、<div>標籤

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。