HTML+CSS基础入门-第九天（CSS-使用方式）

╰半橙微兮° 2022-10-01 02:47 155阅读 0赞

# HTML<DOCTYPE>声明标签 #

## 定义和用法 ##

*  <!DOCTYPE>声明必须是HTML文档的第一行，位于<html>之前
 *  <!DOCTYPE>声明不是HTML标签；它是指web浏览器关于页面使用哪个HTML版本进行编写的指令。
 *  在HTML4.01中，<!DOCTYPE>声明引用DTD，因为HTML4.01基于SGML。HTML5不基于SGML，所以不需要引用DTD。

## 各版本的声明 ##

#### HTML5 ####

<!DOCTYPE html>
    <meta charset="utf-8">

### HTML4.01 ###

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1,0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD.xhtml1-trasitional.dtd">

该DTD包含所有HTML元素和属性，包括展示型的弃用的元素比如（font）。不允许框架集（framesets）。

### 注意的规则 ###

#### 单标记必须闭合 ####

比如<br>必须写为<br/> <input/>

#### 单属性必须添加属性值 ####

#### 标记和属性必须使用小写 ####

<Body><BODY>是错的必须写为<body>

#### 属性的属性值必须使用“” ####

在HTML4.01之前可以使用<body bgcolor=red>,HTML4.01必须写成<body bgcolor=“red>

# 内链样式表 #

## 格式 ##

body中定义的style作用域是全局

也可在单个标签中定义style

## 代码 ##

<!DOCTYPE html>
    <html>
        <head>
            <title>css的使用</title>
            <meta charset="utf-8">
        </head>
        <body style="background-color:green; color:red">
            breeeee
            <h1 style="background-color:red; color:#fff">bree css的使用</h1>
        </body>
    </html>

## 显示结果 ##

![9-1][]

# 嵌入式链式表 #

## 格式 ##

## 代码 ##

<!DOCTYPE html>
    <html>
        <head>
            <title>css的使用</title>
            <meta charset="utf-8">
    
            <style type="text/css"> body{  background-color:red; color:yellow; } h1{  background-color:white; color:black; } </style>
        </head>
        <body >
            breeeee
            <h1 >bree css的使用</h1>
        </body>
    </html>

## 显示结果 ##

![9-2][]

# 引用式样式表 #

## 格式 ##

## 代码 ##

### demo.html ###

<!DOCTYPE html>
    <html>
        <head>
            <title>css的使用</title>
            <meta charset="utf-8">
    
            <link rel="StyleSheet" type="text/css" href="style.css"/>
    
        </head>
        <body >
            breeeee
            <h1 >bree css的使用</h1>
        </body>
    </html>

### style.css ###

body{ background-color:red; color:yellow; }
    h1{ < background-color:white; color:black; }

## 显示结果 ##

![9-3][]

[9-1]: /images/20220705/266c1003af2f490c99c90707b31c6f6f.png
[9-2]: /images/20220705/d4ed4adf41f4446c9e4787498ae3b39b.png
[9-3]: /images/20220705/83416fb0751a4f86886a289facb038d2.png