一、概述

本文主要讲解本人对 html 与 css 初学的一些认识。适合作为入门级知识学习。

二、HTML 文件的概

HTML 是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。HTML 的全名是“超文本标记语言”（HyperText Markup Language），上个世纪 90 年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明。

以下是一个简单的 HTML 源代码:html 文件主要包含 DOCTYPE 、html 标签包住的 head 与 body 两部分

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>网页标题</title>
</head>
<body>
  <p>Hello World</p>
</body>
</html>

2.1 DOCTYPE

DOCTYPE 意思是文件类型( document type )，主要是告诉浏览器渲染该 html 文件的方式。用作区分如何渲染老页面和新页面，如果没有 doctype ，用老的方法渲染页面，如果有 doctpye 用标准模式渲染页面。

注意该行代码不属于 HTML 语法，并且只能放在第一行。

2.2 html lang

<html lang="zh-CN">意在告诉浏览器该页面为中国中文编写。类似的语言也有英文- en。

2.3 head

<head> 标签是一个容器标签，用于放置网页的元信息。它的内容不会出现在网页上，而是为网页渲染提供额外信息。他是 <html> 标签的第一个子元素。如果网页不包含 <head> ，浏览器会自动创建一个。 <head>的子元素主要有：

meta ：设置网页的元数据，(<meta charset="utf-8">)。
link ：连接引入 CSS 外部样式。
title ：设置网页标题，一般显示在浏览器标签页上。
style ：一般为内嵌的 CSS 样式表。

<meta charset="utf-8">告诉浏览器网页编码为 UTF-8 ，可以直接按照 UTF-8 方式解码显示。
<meta name="viewport" content="width=device-width"> 主要是为了适配手机浏览器，因为手机浏览器是把页面放在一个虚拟的“窗口（viewport）”中，通常这样的窗口比屏幕宽，这样就不用把每个页面挤到一个很小的窗口中，用户可以通过平移和缩放来看网页不同部分。width=device-width表示控制该窗口宽度为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）

2.4 body

<body> 标签是一个容器标签，用于放置网页的主体内容。浏览器显示的页面内容，都放置在它的内部。它是<html>的第二个子元素，紧跟在<head>后面。

三、CSS 初识

CSS 指层叠样式表 (Cascading Style Sheets)，样式定义浏览器如何显示 HTML 元素，样式一般储存在样式表中，主要解决了内容与表现分离的问题。

3.1盒子模型

所有 HTML 都可以看做是一个盒子，在 CSS 中，“box model”是用来设计与布局时使用的。如图:

不同部分说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

而盒子元素主要包括两类：块级盒子和行级盒子

3.1.1块级盒子

块级盒⼦会在⽔平⽅向上扩展并占据⽗容器在该⽅向上的所有可⽤空间，并且每个盒⼦都会换到新⾏，width 和 height 属性有效。内边距（padding）, 外边距（margin）和边框（border）会将其他元素从当前盒⼦周围推开。

常见的块级标签有：<h1>...<h6>、<p>、 <div>、 <ul>、<ol>、<li>、<dl>、<dt>、<dd>、<header>、<main>、<footer>、<aside>、<nav>、<section>、<table>、<pre>。更多详情请点击这里

3.1.2行级盒子

行级盒子不会产生换行， width 和 height 属性将不起作⽤。
内边距、外边距以及边框会被应⽤但是不会把其他处于 inline 状态的盒⼦推开。常见的块级标签有：<a>、<span>、<em>、<strong>、<img>、<input>、 <label>、<textarea>、<select>、<button>、<code>… 更多详情请点击这里

3.1.3盒模型：标准与IE

同时盒子模型也包括两部分：标准盒模型和IE盒模型。

1）标准盒模型

设置的width 和 height 指的是Content(盒子内容） 一个盒子的宽度不包括 margin (外边距)的实际大小，只会影响盒子实际占用空间，所以盒子宽度的计算方式为： 宽度 = width + 2 * padding + 2 * border

2）IE 盒模型

设置的width和height包含内边距和边框 浏览器默认使⽤标准盒模型，如想使⽤IE盒模型可以设置box-sizing,具体如下：

1
2
3
4
5
6
7


.box{
    width: 350px;
    height: 150px;
    margin: 10px;
    padding: 25px;
    box-sizing: border-box; /* content-box */
}

3.2 CSS 常用选择器

CSS 的常用选择器有：元素选择器（标签选择器）、ID选择器、类选择器（class）、通用选择器、属性选择器和一些组合选择器

3.2.1 元素选择器

即选择特定标签进行选择渲染，具体代码如下：

1
2
3
4
5
6


p {
    color : red;
}
div {
    color : blue;
}

3.2.2 ID选择器

每个标签内容块都有页面唯一的 id 来定位，使用 #id 来选择的示例如下：

1
2
3
4
5
6
7


<p id="box">拾光</p>

<style>
    #box{
        border : 1px solid red;
    }
</style>

3.2.3 类选择器

每个标签内容都有一个 class 类别，一般用来对一组元素设置样式，class 有别于全局唯一的 id 属性，class 可以在多个元素中使用。在选择时使用 “.” 来选择，示例如下：

1
2
3
4
5
6
7


<p class="box active">拾光</p>

<style>
    .active{
        font-size : 20px;
    }
</style>

3.2.4 通用选择器

对全局标签生效。示例如下，用 “*” 来选择：

1
2
3
4
5


<style>
    *{
        box-sizing : border-box;
    }
</style>

3.2.5 属性选择器

对某些标签的特定属性进行样式设置。用 “[]” 来选择，示例如下：

1
2
3
4
5
6
7
8


<style>
    [disabled] {
        border :  1px solid red;
    }
    [data-color="gray"] {
        color : blue;
    }
</style>

3.2.6 组合选择器

1）A,B
表示同时选中 A 和 B，示例如下：

1
2
3
4
5
6
7


<p class="author">拾光</p>
<p class="detail">朝花夕拾 荏苒时光</p>
<style>
 .author, .detail {
 color: red;
 }
</style>

2）A B
表示选中 A 的后代 B元素（A和B间有个空格），示例如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<ul class="detail">
    <li>
        <ul>
           <li>被选中✅ </li>
        </ul>
    </li>
    <li>被选中✅ </li>
</ul>

<style>
 .detail li {
    color: red;
 }
</style>

3）A>B
表示选中 A 的直接子元素 B，示例如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<ul class="detail">
    不被选中
    <ul>
        <li>不被选中</li>
    </ul>

    <li>
        被选中✅
        <ul>
            <li>被选中✅</li>
        </ul>
    </li>
</ul>

<style>
 .detail > li {
 color: red
;
 }
</style>

3.2 CSS 引入方式

CSS 引入方式主要包括四种：

3.2.1 标签 link

通过在 head 标签中引入外部 CSS 样式，示例如下：

1
2
3


<head>
    <link rel="stylesheet" href="index.css">
</head>

3.2.2 使用 CSS 语法引入

CSS 语法只有在 <style> 标签内或者 CSS 文件中才能有效，具体引入方式如示例：

1
2
3
4
5
6
7


<style>
    @import url("index.css");
    @import url(index.css);
    @import url('index.css');
    @import "index.css";
    @import 'index.css';
</style>

注意：通过CSS语法@import引⼊时

放在style标签或者CSS⽂件中
@import 必须放在CSS⽂件开头
语法后⾯的分号必不可少

3.2.3 内部样式

将CSS放在⻚⾯<style>标签中，style 标签可以放在 head ⾥，也可放在 body 内任意地⽅。示例如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <style>
        h1 {
            background: orange;
        }
    </style>
</head>
<body>
    <h1>Hello CSS!</h1>
</body>
</html>

3.2.4 内联样式(不推荐)

直接在标签的内部添加 style 属性来设置样式，示例如下：

1
2
3


<p style="background: orange; font-size: 24px;">
    拾光
<p>

四、总结

本文简要介绍了 HTML 与 CSS 的部分基础知识，适合初学者观看学习。如果想要学习更多，可以点击html和CSS,谢谢！

HTML 与 CSS 初识

Contents