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

目录

1,HTML概览与基本语法

基本结构:

头部标签:

常用标签与属性

CSS概述与基本语法

CSS选择器与属性

盒子模型与布局

实例展示


1,HTML概览与基本语法

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属性。

html 复制代码
1<p style="color:red;">红色文本</p>

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

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

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

CSS选择器与属性

选择器 :标签选择器div {},类选择器.class {},ID选择器#id {}

文本样式colorfont-sizefont-familytext-align等。

背景background-colorbackground-imagebackground-repeat等。

列表list-style-typelist-style-image等。

伪类:hover:active:focus等。

透明度opacity

盒子模型与布局

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

布局方式block块级,inline行级,inline-block行级块。

浮动 :使用float属性,如float: left;

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

实例展示

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

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示例:为上面的网页添加样式。

html 复制代码
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}
相关推荐
万少13 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL19 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl0234 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang36 分钟前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼38 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿40 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再43 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5551 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录1 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空00001 小时前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试