HTML与CSS的初步解析及实践案例

最新推荐文章于 2024-08-26 21:48:51 发布

澄岚明雪

最新推荐文章于 2024-08-26 21:48:51 发布

阅读量357

点赞数 4

文章标签： html css 前端

本文链接：https://blog.csdn.net/ymr1843762281/article/details/139893021

版权

1，HTML概览与基本语法

HTML，即超文本标记语言，是网页的基础构建语言，允许网页中包含图片、链接、声音和视频等多种媒体内容。通过HTML标签，浏览器能够解析并呈现网页。

基本结构：

Html

1<html>
2<head>
3    <!-- 头部信息 -->
4</head>
5<body>
6    <!-- 主体内容 -->
7</body>
8</html>

头部标签：`<title>`定义网页标题，`<meta>`提供元信息，`<link>`用于引入外部资源如图标。

常用标签与属性

标题：<h1>至<h6>用于不同级别的标题。
段落：<p>用于段落。
列表：<ul>无序列表，<ol>有序列表。
超链接：<a>用于链接，如<a href="http://www.sohu.com">搜狐</a>。
图像：<img>用于插入图片，如<img src="image.jpg" alt="描述">。

表格：<table>用于表格，<tr>定义行，<th>定义表头，<td>定义单元格。

表单：<form>用于收集用户输入，<input>用于文本输入、密码、文件上传等，<textarea>用于多行文本输入。

CSS概述与基本语法

CSS，层叠样式表，用于控制HTML文档的外观和布局，使内容与表现分离。

行内样式：直接在HTML标签中使用style属性。

1<p style="color:red;">红色文本</p>

内嵌样式：在<head>中使用<style>标签。

1<style>
2    p {
3        color: blue;
4        font-size: 16px;
5    }
6</style>

外部样式：使用<link>标签引入独立的.css文件。

CSS选择器与属性

选择器：标签选择器div {}，类选择器.class {}，ID选择器#id {}。

文本样式：color，font-size，font-family，text-align等。

背景：background-color，background-image，background-repeat等。

列表：list-style-type，list-style-image等。

伪类：:hover，:active，:focus等。

透明度：opacity。

盒子模型与布局

盒子模型：由内容、内边距、边框、外边距组成。

布局方式：block块级，inline行级，inline-block行级块。

浮动：使用float属性，如float: left;。

定位：position属性，包括static静态，relative相对，absolute绝对，fixed固定定位。

实例展示

HTML示例：创建一个简单的网页，包括标题、段落、链接和图像。

1<!DOCTYPE html>
2<html>
3<head>
4    <title>我的第一个网页</title>
5    <link rel="icon" href="favicon.ico">
6</head>
7<body>
8    <h1>欢迎来到我的网站</h1>
9    <p>这是一个段落。</p>
10    <a href="https://www.sohu.com">访问搜狐</a>
11    <img src="logo.png" alt="Logo">
12</body>
13</html>

CSS示例：为上面的网页添加样式。

1body {
2    font-family: Arial, sans-serif;
3    margin: 20px;
4}
5
6h1 {
7    color: navy;
8}
9
10p {
11    text-align: justify;
12}
13
14a {
15    color: darkblue;
16    text-decoration: none;
17}
18
19a:hover {
20    text-decoration: underline;
21}
22
23img {
24    max-width: 100%;
25    height: auto;
26}