html文字放在图片右边_HTML和CSS基础网页设计

最新推荐文章于 2024-05-15 23:55:16 发布

weixin_39574287

最新推荐文章于 2024-05-15 23:55:16 发布

阅读量1.5w

点赞数 1

文章标签： html文字放在图片右边 html网页设计作品 html网页设计作品代码 html语言基本标记 html项目案例 web2.0div+css网页设计代码

本文介绍了HTML和CSS3的基础知识，包括HTML的超文本标记语言概念、CSS3的演进及其用于网页美化的作用。通过示例讲述了如何编写HTML代码，包括基本标记如标题、段落、图片等，并简单介绍了CSS3的基本语法和应用，帮助初学者入门网页设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

昨天那篇我朋友写的文章Flask系列(一)给我弄来了一个制作网页的话题，而用python只做网页是不可能离开html和css3的，今天来打点基础，以后的网页制作更轻松

顺便来个开幕雷击，统计下还要发不要：

/1.HTML概述/

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

在审查元素里就能看到一个网页的HTML了，如猫眼的HTML如下：

/2.css3概述/

CSS3是CSS(层叠样式表)技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂.。

简单来说，css就是美化和排版html代码放置的图片或文字等。

/3.编写你的网页/

我们使用vs code来编写html代码：

首先我们来看下html的基本格式：

      someblock        someblock

在html里，用<>包裹起来的东西叫做“标记”，标记分为成对标记和单独标记两种。

成对标记以如下方式写：

<...>

注意不能少了/。

常见的成对标记如下：

head和body标记包含在HTML标签内，html是项目的开始标签，head包含网页的标题等信息，body包含网页的主体信息。

单独标记以如下形式去写：

<...>

还可以给标签加上参数，注意参数要加在开始标记里：

<... arg1="" arg2="" arg3="">

/4.基本标记/

来看看最常用的几个标记：

我是标题

title标记一般包含在haed标记里，用处为定义网页标题。

运行程序，发现标题成功设置：

还有文字标记，放在body标记内：

 我是正文

也有标题标记：

我是标题

h1是一级标题，相对应的，还有二级标题，三级标题等。

相信大家也看到了，html的注释为。

接下来是图片标记：

这样可以显示图片，注意，图片路径可以是绝对路径也可以是相对路径。

接下来，我们做个小案例：

<html>    <head>        <title>Program编程者title>        <meta charset = "utf-8" >            head>    <body>        <div>            欢迎来到Program编程者公众号！        div>        <img src="blackke.jpg">    body>html>

运行结果如下：

其中，div标记和meta标记我们没讲过，div其实没有什么实际作用，只是分区，而meta则是设定一些不可见的东西，比如本项目中设置编码格式。

/5.CSS3基本语法/

大家不知道有没有发现，现在的界面非常杂乱，而css3则就是专门用来修复这个问题的。

css的通用格式如下：

selector{  choice: value;}

selector：指选择器，有类选择器，元素选择器等。

choice：指选项，即修改那个属性。

value：即改成什么。

在html里嵌入css代码用

<style>            div{                width:300px;       /*宽度*/                height:50px;      /*高度*/                margin:10px 200px 10px 200px;   /*间距：left左，right右，button下，top上*/                background-color:rgb(255,0,0); /*背景颜色*/                text-align: center;             /*对齐方式*/            }style>

这时候，你的网页就变成了这样：