認(rèn)識(shí)HTML結(jié)構(gòu)的基本標(biāo)簽

1. < !DOCTYPE >

定義:定義?檔類型。告訴瀏覽器渲染??的規(guī)則。

  • DOC: document ?檔。
  • TYPE:類型
  • 說(shuō)明:任何?個(gè)??都必須在??第??聲明?檔類型。

?法:
h3??檔類型

<html>
</htm>

H4的?檔類型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 
</html

H5的?檔類型

<!DOCTYPE html>

HTML5語(yǔ)義化

語(yǔ)義:標(biāo)簽所含有的意義。
Html 4標(biāo)簽的語(yǔ)義化比不明顯
HTML4中有語(yǔ)義的標(biāo)簽

<h1>一級(jí)標(biāo)題</h1>
<p>段落</p>
<ul>無(wú)序列表</ul>
<li>無(wú)序列表項(xiàng)目</li>
<ol>有序列表</ol>

<em>斜切</em>

HTML4中沒(méi)有語(yǔ)義的

<div id='header'>塊</div>
<div id='nav'>導(dǎo)航navigation</div>
<div id='main'>主要內(nèi)容區(qū)域</div>
<div id='sidebar'>次要內(nèi)容區(qū)域</div>
<div id='footer'>頁(yè)尾</div>

HTML對(duì)<div>派生出了多個(gè)語(yǔ)義化標(biāo)簽

<header>頁(yè)頭</header>
<nav>導(dǎo)航</nav>
<section>一章一節(jié)</section>
<main>主要內(nèi)容</main>
<aside>次要內(nèi)容</aside>
<footer>頁(yè)尾</footer>

2. < html >

定義:定義?個(gè)HTML?檔。

3. < head >

定義:定義HTML?檔的頭部區(qū)域(次要的區(qū)域)。

  • 不是給?看的
    • 給?戶代理看
    • 給搜索引擎看的

4. < meta >

定義:定義??的元信息(描述??信息的信息)。

?法:

  • < meta >標(biāo)簽位于?檔的頭部。
  • < meta >是?個(gè)單標(biāo)簽
  • < meta >采?"名值對(duì)"形式定義??元信息。

語(yǔ)法

<meta name="屬性名" content="屬性值" >

常?的meta設(shè)置:
字符集: 設(shè)置??的字符編碼為utf-8字符集

<meta charset="utf-8">  

??描述: 為搜索引擎設(shè)置的

<meta name="description" content="簡(jiǎn)書是?個(gè)優(yōu)質(zhì)的創(chuàng)作社區(qū),在這?,你可以任性地創(chuàng)作,?篇短?、?
張照?、??詩(shī)、?幅畫……我們相信,每個(gè)?都是?活中的藝術(shù)家,有著?窮的創(chuàng)造?。">

??關(guān)鍵詞:為搜索引擎設(shè)置的

<meta name="keywords" content="簡(jiǎn)書,簡(jiǎn)書官?,圖?編輯軟件,簡(jiǎn)書下載,圖?創(chuàng)作,創(chuàng)作軟件,原創(chuàng)社區(qū),?
說(shuō),散?,寫作,閱讀">

視?:為移動(dòng)設(shè)備設(shè)置的

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

5. < title >

定義:定義HTML?檔標(biāo)題。

6. < link >

定義:關(guān)聯(lián)外部資源與當(dāng)前???檔。

  • 外部資源:可以css?件 也可以是圖?
  • 收藏夾圖標(biāo):favourite icon的縮寫,表示收藏夾圖標(biāo)的意思。
  • 在線轉(zhuǎn)換ico圖標(biāo):百度搜索

?法:

  1. 使?< link >關(guān)聯(lián)外部的css?件
<link rel="stylesheet" href='css?件地址' >
  1. 使? < link >管理收藏夾圖標(biāo)
<link rel='shortcut icon' href='icon圖?地址'

7. < script >

定義: <script> 標(biāo)簽?于定義客戶端腳本,?如 JavaScript。
客戶端: 指訪問(wèn)?站的?戶的瀏覽器。
腳本:?前使?率最?的是js (其他:ActionScript、VBScript)
?法
?法1: 通過(guò)< script >引?外部腳本?件

<script src='腳本?件路徑'></script>

?法2: 通過(guò)< script >創(chuàng)建腳本區(qū)域。

<head>
 <script>
 window.onload = function(){
 
 }
 </script>
</head>

8. < body >

定義:body元素定義?檔的主體。

  • 主體:給?戶看的內(nèi)容全部放在body??。
  • ?檔次要部分:< head >
    ?法:
  • ?個(gè)HTML?檔只能有?個(gè)body

9. < header > h5

定義: 標(biāo)簽定義?檔的?眉。

  • ?眉包括什么
    • LOGO
    • 搜索框
    • 主導(dǎo)航
    • 登錄區(qū)
    • 快捷??(連接)

10. < section > h5

定義: 定義?檔中的節(jié)。 具有通?性。

11.main:主要

定義:定義文檔的主要區(qū)域

12.aside:次要的

定義

13section

14.nva

定義:導(dǎo)航

15.box-sizing屬性

定義:用于定義盒模型的計(jì)算規(guī)則
語(yǔ)法

div{box-sizing:content-box |
border-box}
  • Content-box:內(nèi)容盒模型,默認(rèn)值
  • Border-box:邊框盒模型

16.container{

width:1140px;
margin;

解析

  • 盒模型規(guī)定了元素的結(jié)構(gòu)。任何一個(gè)元素都是由四部分構(gòu)成:內(nèi)容、內(nèi)邊距、邊框、外邊距
  • 內(nèi)容盒模型:Winth屬性控制到內(nèi)容區(qū)
  • 邊框盒模型:winth屬性控制到

奇數(shù)偶數(shù)

odd 奇數(shù)
even 偶數(shù)

14. < footer > h5

定義:定義文檔的頁(yè)尾

H5標(biāo)簽可以在項(xiàng)?中使?嗎?

  • 開(kāi)會(huì)商量?案
  • 確定你的觀點(diǎn):有?個(gè)?站可以幫助你決策:

常???布局的種

  • 分屏式布局
  • ?字形布局
  • 圣杯布局
  • ?字型布局
  • 兩欄布局
  • 三欄布局
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容