Web开发——HTML&CSS

作者：很楠不爱3 | 2024-05-21 15:34:11

踩

Web开发——HTML&CSS

1、概述

Web开发分前端开发和后端开发，前端开发负责展示数据，后端开发负责处理数据。
HTML&CSS是浏览器数据展示相关的内容。

1）网页的组成部分
文字、图片、音频、视频、超链接、表格等等
2）网页背后的本质
程序员写的前端代码
3）前端代码如何转换成用户眼中的网页
通过浏览器转化（解析和渲染）成用户看到的网页，浏览器中对代码进行解析和渲染的部分，称为浏览器内核。浏览器多种多样，相同的网页如何让浏览器展示一致的观感，这依赖于Web标准：

HTML：负责网页的结构（页面元素和内容）
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）
JavaScript：负责网页的行为（交互效果）

2 HTML & CSS

2.1 HTML和CSS概述

HTML：HyperText Markup Language，超文本标记语言

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、
视频等内容。
标记语言：由标签构成的语言，HTML标签都是预定义好的。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
CSS：Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。
以下就是html代码以及css样式搭配之后的显示效果

2.2 快速入门

在这里插入图片描述
创建hello.html文件，并写入以下html代码

<html>
    <head>
        <title>HTML 快速入门</title>
    </head>
    <body>
        <h1>Hello HTML</h1>
        <img src="1.jpg"/>
    </body>
</html>
1
2
3
4
5
6
7
8
9

head用于定义浏览器头部，body用于定义主题部分
title标签用于定义标题，h1是1号标题，img用于引入一张图片，采用相对地址
浏览器展示效果如下：
在这里插入图片描述
HTML中标签的特点：

不区分大小写
标签中的属性值，采用单引号和双引号都可以
语法松散（即使不写闭合也能运行），建议语义严谨

2.3 CSS引入方式

在这里插入图片描述

2.4 颜色表示

在这里插入图片描述

2.5 CSS选择器

选择器是选取需设置样式的元素（标签）
语法如下：

选择器名 {
	css样式名：css样式值;
	css样式名：css样式值;
}
1
2
3
4

2.5.1 元素（标签）选择器

元素名称 {
	css样式名:css样式值；
}
1
2
3

示例：

div{
	color: red;
}
1
2
3

2.5.2 id选择器

#id属性值 {
	css样式名:css样式值；
}
1
2
3

示例：

#did {
	color: blue;
}
1
2
3

2.5.3 类选择器

.class属性值 {
	css样式名:css样式值；
}
1
2
3

示例：

.cls{
	color: green;
}
1
2
3

2.6 盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        div {
     
            width: 200px;
            height: 200px;
            box-sizing: border-box; /* 指定width height为盒子的高宽 */
            background-color: aquamarine; /* 背景色 */
            
            padding: 20px; /* 内边距, 上 右 下 左 */
            border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */
            margin: 30px; /* 外边距, 上 右 下 左 */
        }
    </style>
</head>

<body>
    
    <div>
        A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
    </div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

根据padding、border和margin来设置盒子相关属性

2.7 新浪新闻页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
    <style>
        h1 {
     
            color: #4D4F53;
        }
        
        #time {
     
            color: #968D92;
            font-size
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/603315