HTML+CSS收官

已于 2023-08-14 16:09:37 修改
阅读量186 收藏
点赞数
分类专栏： 渡一大师课 文章标签： html css 前端
于 2023-07-24 10:41:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48069349/article/details/131891263
版权

补充重要知识点

防脱发神器


意思就是加上这个，可以了。

上面一个简单的例子。
只要改成border-box。我们就设置的就是包括边距，总共的了。这样是比较符合我们的自觉地的。

颜色的alpha通道



那么他和这个

opacity有什么区别呢，
其实显而易见，就是opacity是这个item这个盒子里面所的东西，都是透明的，但是rgba只是让这个背景颜色进行了透明。

尺寸的百分比

最大最小宽高

表单进阶-HTML

首先要说的第一点就是，在input输入框上，最好加一个div

<form class="container">  
    <h1>用户注册</h1>  
  
    <div class="form-item">  
        <input type="text" />  
    </div>  
</form>

像这样一样的。
第二个是提示性文字

叫做placeholder这个属性
以及maxlength=“11”，代表最大的长度是11。
之后是验证码区域

<div class="form-item">  
    <input type="text" placeholder="请填写验证码">  
    <button>请输入验证码</button>  
</div>

这个按钮用button是 比较好的。而不是用input的submit属性。因为button里面可以写的东西比较多，并且比较宽泛。但是我们会发现，按钮点击后，就直接会清空输入框的所有信息。我们这里不应该是一个提交按钮。
其实很简单

我们把type给他button就可以了，这样她就变成了一个普通的按钮。
之后看下一个区域密码区域。这个是非常的简单的

<div class="form-item">  
    <input type="password" placeholder="请输入密码">  
</div>  
<div class="form-item">  
    <input type="password" placeholder="请确认要输入的密码">  
</div>

之后我们来看一个多选的下拉列表框

<div class="form-item">  
    <select multiple="multiple">  
        <option>爱好1</option>  
        <option>爱好2</option>  
        <option>爱好3</option>  
        <option>爱好4</option>  
        <option>爱好5</option>  
        <option>爱好6</option>  
        <option>爱好7</option>  
        <option>爱好8</option>  
        <option>爱好9</option>  
        <option>爱好10</option>  
    </select>  
</div>

这个就是一个多选框的一个属性multiple，当然这个不写后面的那个= 也可以直接写一个multiple。就代表布尔属性里面的true
之后是可以选性别的选项

<div class="form-item">  
    <div class="title">性别</div>  
    <div>  
        <input type="radio" name="sex" checked>  
        </input>  
        <span>男</span>  
  
        <input type="radio" name="sex">  
        </input>  
        <span>女</span>  
    </div>  
</div>

这里需要说明的就是，只有他们的name属性是同一个的时候，他们才是互斥的，只能选择一个。
之后我们如何设置，点击文字也能选中呢。
这个时候就要用到lable这个标签

首先是可以通过给lable的for 指向id的。
当然还有一个自动关联的做法，就是把他们都放到lable的标签内。

这样
之后看下一个区域。一个多行文本

<div class="form-item">  
    <textarea placeholder="请输入个人简介"></textarea>  
</div>

之后下一个区域复选框

<div class="form-item">  
    <lable>  
        <input type="checkbox">  
        <span>同意</span>  
    </lable>  
</div>

很简单这里就不说了，最后是俩个按钮

<div class="form-item">  
    <button>立即注册</button>  
    <button type="reset">重置按钮</button>
</div>

这里的button都是一个简单的button。
这个重置按钮就是type=reset

表单进阶-css

写css第一步

* {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
}

就是写这些东西。
之后写container区域

.container{  
    background: white;  
    width: 400px;  
    margin: 30px auto;  
    border-radius: 10px;  
    padding: 30px;  
}

这里没什么好说的。margin 0 auto就代表着页面居中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cBcy5AqA-1690166489473)(D:/onenodes/前端/渡一前端大师课提升/HTML+CSS收官/images/Pasted image 20230718190159.png)]
接下来是h1元素

.container h1{  
    text-align: center;  
}

一个简单的文字居中。

之后我们看每一个表单之间，是有一个距离的。

.form-item{  
    margin-bottom: 10px;  
}

这个也是很简单的，用一个margin-bottom
之后我们来看文本框等的样式。
我们首先用搜索来对文本框进行统一样式的添加

之后就方便操作了，直接操作txt就可以了。

/*文本框*/  
.txt{  
    /*外边框 点击后的颜色*/  
    outline: none;  
    border: 1px solid #ccc;  
    width: 100%;  
    height: 40px;  
    border-radius: 5px;  
    font-size: 14px;  
    /*调整文字也可以写成*/  
    /*text-indent: 10px; 这个是首行缩进，不经常用*/  
    padding: 0 10px;  
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NCqzKktU-1690166489474)(D:/onenodes/前端/渡一前端大师课提升/HTML+CSS收官/images/Pasted image 20230718191105.png)]
之后我们来看点击后，也就是聚焦的情况下。

/*聚焦的样式*/  
.txt:focus{  
    border-color:#5f8be8;  
}

这个就是用一个伪元素进行聚焦的。
之后我们单独设置这个复选框

/*单独设置特殊情况这里就代表既是txt样式，又是select*/  
select.txt {  
    height: 100px;  
    padding: 10px;  
}

之后我们同样的方法设置个人简介

textarea.txt{  
    height: 100px;  
    padding: 10px;  
    /*设置多行文本框是否可以被用户改变尺寸*/  
    resize: none;  
}

之后来设置按钮

/*按钮的统一样式*/  
button{  
    height: 40px;  
    width: 150px;  
    border: none;  
    outline: none;  
    background: #5f8be8;  
    color: #fff;  
    font-size: 14px;  
    border-radius: 5px;  
    /*鼠标移动上去变成小手*/  
    cursor: pointer;  
}  
button:hover{  
    background: #759ae9;  
}

接着我们要考虑一个情况，就是比如发送验证码，是我们再填了手机号后才能进行提交。怎么样能做到不能点击呢
这个使用disabled。这个是需要js来进行实现的。
但是我们写css的时候，我们需要考虑再禁用状态下的样式的。

/*选中禁用状态的按钮*/  
button:disabled{  
    background: #9bd7f0;  
    cursor: not-allowed;  
}

这个not-allowed就是一个禁止的圆圈。
之后我们来看处理浮动

/*统一处理浮动*/  
.left{  
    float: left;  
}  
.right{  
    float: right;  
}

当我们哪一个地方需要浮动的时候，我们进行一个应用就可以了。
之后还有一个处理浮动造成的高度坍塌的。
这个的解决方法有一个overflow:hidden。但是这个不是最完美的解决方案。最完美的解决方案就是在他的后面再添加一个元素，之后给他设置上clear:both

.clearfix:after{  
    content: "";  
    display: block;  
    clear: both;  
}

之后我们来看另外一个问题

就是这两个是没有对齐的。
这是两个行级元素。
这个时候随便找一个。用一个vertical-align调像素

.policy span{  
    vertical-align: 2px;  
}

之后还有一个就是单选和多选的选中情况。
就是没有选中就淡一些这个效果。
这里介绍一个兄弟元素的选择方法。

lable input~span{  
    }

就是这样，如果后面是+那么就是只选择后面满足条件的一个。~就是多个

/*单选多选*/  
  
lable input~span{  
    color: #aaa;  
}  
  
/*单选或者多选被选中的情况*/  
label input:checked~span{  
    color: #333;  
}

就是这样的。
至此表单的就算是可以了。下面的全部的源码

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>用户注册</title>  
    <link rel="stylesheet" href="index.css">  
</head>  
<body>  
<form class="container">  
    <h1>用户注册</h1>  
  
    <div class="form-item">  
        <input class="txt" type="text" maxlength="11" placeholder="请输入11位手机号"/>  
    </div>  
    <div class="form-item clearfix captcha">  
        <input class="txt left" type="text" placeholder="请填写验证码">  
        <button type="button" class="right">请输入验证码</button>  
    </div>  
  
    <div class="form-item">  
        <input class="txt" type="password" placeholder="请输入密码">  
    </div>  
    <div class="form-item">  
        <input class="txt" type="password" placeholder="请确认要输入的密码">  
    </div>  
  
    <div class="form-item">  
        <select multiple="multiple" class="txt">  
            <option>爱好1</option>  
            <option>爱好2</option>  
            <option>爱好3</option>  
            <option>爱好4</option>  
            <option>爱好5</option>  
            <option>爱好6</option>  
            <option>爱好7</option>  
            <option>爱好8</option>  
            <option>爱好9</option>  
            <option>爱好10</option>  
        </select>  
    </div>  
  
  
    <div class="form-item clearfix">  
        <div class="title left">性别</div>  
        <div class="left">  
            <input type="radio" name="sex" checked id="male">  
  
            <label for="male">男</label>  
  
            <label>  
                <input type="radio" name="sex" id="">  
                <span>女</span>  
            </label>  
        </div>  
    </div>  
  
    <div class="form-item">  
        <textarea class="txt" placeholder="请输入个人简介"></textarea>  
    </div>  
  
    <div class="form-item policy">  
        <lable>  
            <input  type="checkbox">  
            <span>同意</span>  
        </lable>  
    </div>  
  
    <div class="form-item">  
        <button disabled>立即注册</button>  
        <button type="reset">重置按钮</button>  
    </div>  
  
  
</form>  
</body>  
</html>

* {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
}  
  
html {  
    background: rgb(30, 31, 34);  
    color: #333;  
}  
  
.container {  
    background: white;  
    width: 400px;  
    margin: 30px auto;  
    border-radius: 10px;  
    padding: 30px;  
}  
  
.container h1 {  
    text-align: center;  
    margin-bottom: 30px;  
}  
  
.form-item {  
    margin-bottom: 10px;  
}  
  
/*文本框*/  
.txt {  
    /*外边框 点击后的颜色*/  
    outline: none;  
    border: 1px solid #ccc;  
    width: 100%;  
    height: 40px;  
    border-radius: 5px;  
    font-size: 14px;  
    /*调整文字也可以写成*/  
    /*text-indent: 10px; 这个是首行缩进，不经常用*/  
    padding: 0 10px;  
}  
  
/*聚焦的样式*/  
.txt:focus {  
    border-color: #5f8be8;  
}  
  
/*单独设置特殊情况这里就代表既是txt样式，又是select*/  
select.txt {  
    height: 100px;  
    padding: 10px;  
}  
textarea.txt{  
    height: 100px;  
    padding: 10px;  
    /*设置多行文本框是否可以被用户改变尺寸*/  
    resize: none;  
}  
  
/*按钮的统一样式*/  
button{  
    height: 40px;  
    width: 150px;  
    border: none;  
    outline: none;  
    background: #5f8be8;  
    color: #fff;  
    font-size: 14px;  
    border-radius: 5px;  
    /*鼠标移动上去变成小手*/  
    cursor: pointer;  
}  
button:hover{  
    background: #759ae9;  
}  
/*选中禁用状态的按钮*/  
button:disabled{  
    background: #9bd7f0;  
    cursor: not-allowed;  
}  
  
/*统一处理浮动*/  
.left{  
    float: left;  
}  
.right{  
    float: right;  
}  
.clearfix::after{  
    content: "";  
    display: block;  
    clear: both;  
}  
.captcha .txt{  
    width: 170px;  
}  
.title{  
    margin-right: 10px;  
}  
.policy{  
    font-size: 12px;  
}  
.policy span{  
    vertical-align: 2px;  
}  
  
label{  
    cursor: pointer;  
}  
/*单选多选*/  
  
lable input~span{  
    color: #aaa;  
}  
  
/*单选或者多选被选中的情况*/  
label input:checked~span{  
    color: #333;  
}  
  
.txt:focus::placeholder{  
    color: red;  
}

精灵图

这个单词叫做sprite

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
  <style>  
    .item{  
      width: 85px;  
      height: 60px;  
      outline: 1px solid;  
      background: url("sprite.jpg")  
      no-repeat -280px -240px;  
    ;    }  
  </style>  
</head>  
<body>  
  <div class="item"></div>  
</body>  
</html>

看一个案例，大概就是这样的。
我们通过对position来进行设置，让
图像达到一个这样的效果，就可以了。
通过改变div的宽高。来只选择这一张图片。
就是这么的简单的。

绝对定位

什么时候使用绝对定位

下面三个条件满足任何一个时，使用绝对定位：

  1. 元素出现在一个天马行空的位置

  2. 元素是否存在，不影响其他元素的排列

  3. 单个元素在某个区域内水平垂直居中

fixed和absolute的区别

fixed是绝对定位的一种特殊情况，它们的参考系不一样

  • absolute参考有定位的父元素

  • fixed参考视口(viewport)

案例1


把一个图片放到这个中间。
这个我们一般用的方法就是用一个div把这个视口给盖住。这个div就叫做蒙层。之后我们的登录窗口在最中间

<img src="./assets/page.jpg" alt="" class="page">  
  
<div class="model">  
<!--    <img src="./assets/login.jpg" alt="" class="login">-->  
</div>  
</body>

.model{  
    position: fixed;  
    background: rgba(0,0,0,.5);  
    left: 0;  
    top: 0;  
    width: 100%;  
    height: 100%;  
}


这样就可以了。
之后我们的登录元素

.login{  
    position: absolute;  
    /*绝对定位居中*/  
    width: 400px;  
    height: 200px;  
    left: 50%;  
    top: 50%;  
    /*跑自身宽度的一半和自身高度的一半*/  
    margin-left: -200px;  
    margin-top: -100px;  
}

进行这样的一个设置，就可以了。

可以发现他就是在正中间了。
之后我们来做另外一个

<div class="cat">  
    <img src="./assets/r_code.jpg" alt="">  
</div>

.cat{  
    position: fixed;  
    width: 165px;  
    height: 250px;  
    background: url(assets/r_dj.png) no-repeat;  
    right: 0;  
    /*垂直居中*/  
    top: 50%;  
    margin-top: -125px;  
    padding-top: 145px;  
    /*图片靠右*/  
    text-align: right;  
}  
.Rcode{  
    width: 100px;  
    height: 100px;  
}

这里用的也是和上一个差不多的思想。之后就是text-aligh这个属性。
最后说一下覆盖的问题
他们俩个谁覆盖谁，就用z-index，就可以了。

就是应对类似这种情况。
这个只对定位元素有用。

案例2


是一个这样的效果。
首先是html的一些基本框架

<div class="item">  
  <a href="">  
    <img src="./assets/cover.png" alt="">  
  </a>  
  <div class="aside">  
    <div class="number">  
      118万  
    </div>  
    <div class="date">  
      2021-11-23  
    </div>  
        <div class="model">  
      <a href="" class="play"></a>  
    </div>  
  </div>  
</div>

之后开始书写css代码。

.item{  
    width: 230px;  
    height: 140px;  
    margin: 30px auto;  
}  
.item img{  
    width: 230px;  
    height: 140px;  
}

首先是图片的一个
之后我们的aside进行绝对定位

.item .aside{  
    position: absolute;  
    background: rgba(0,0,0,.5);  
    width: 100%;  
    height: 20px;  
    font-size: 12px;  
    bottom: 0;  
    left: 0;  
    line-height: 20px;  
    color: white;  
    padding: 0 10px;  
}  
.aside .number{  
    float: left;  
}  
.aside .date{  
    float: right;  
}

这个也是很简单的。

之后让他一个左浮动，一个右浮动，就可以让她左右靠拢了。
之后我们做118万旁边的那个按钮

.number::before{  
    content: '';  
    display: inline-block;  
    width: 14px;  
    height: 14px;  
    background: url(assets/icons.png) no-repeat -255px -63px;  
    vertical-align:-3px;  
    margin-right: 3px;  
}

这里需要主要的是before元素要变成行内块元素，不然她默认是一个行内元素。
之后中间的按钮

.play{  
    position: absolute;  
    width: 42px;  
    height: 42px;  
    background: url("assets/icons.png") no-repeat -191px -63px;  
    left: 50%;  
    top: 50%;  
    margin-left: -21px;  
    margin-top: -21px;  
}

进行简单的调整就可以了。

属性值的计算过程


比如说看这行代码，可以发现他是红色而不是蓝色。


他主要分为四个阶段

比较重要性就是作者写的覆盖浏览器默认
比较特殊性就是看的权重
比较源次序就是代码靠后的覆盖代码靠前的。

![Pasted image 20230721150418.png]
这里需要注意的是可以继承的进行继承，例如这个的背景就是无法进行继承的

这里就进行之前情况的一个解析。

我们来进行一个分析。
p就是一个继承。
之后我们来看a元素。

可以发现他在第一步就已经有颜色了。
所以不需要后面的步骤了。
我们要是不想要这样，让元素和p元素是一个颜色。

那么我们就写一个color:inherit就可以了。
这个就是让他强制继承了。

扩展知识

伪类选择器

css伪类选择器大全：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

伪类含义
:link选中未访问过的超链接
:visited选中已访问过的超链接
:hover选中鼠标移入的元素
:active选中鼠标按下的元素
:focus选中聚焦的表单元素
:disabled选中被禁用的表单元素
:checked选中被选中的表单元素
:first-child选中第一个子元素
:last-child选中最后一个子元素
:nth-child(an+b)选中第「an+b」个子元素 a和b是常量，n的值会从0开始依次递增
:first-of-type选中第一个指定类型的子元素
:last-of-type选中最后一个指定类型的子元素
:nth-of-type(an+b)选中第「an+b」个指定类型的子元素 a和b是常量，n的值会从0开始依次递增

之后我们再做的时候，会出现一些问题

我们只要遵循这个，就可以达到一个好的效果。

contenteditable属性

该属性是一个布尔属性，可以设置到任何元素上，它可以让该元素变为可编辑的状态

在实际开发中，通常用于制作富文本框

image-20211124171230964

table 元素

table元素用于表达一个表格，受CSS3的影响，现在已经很少使用了，基本上只有后台的一些前端在用。因为这个渲染的速度回造成很大的影响。

Xiaouuuuua
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5+CSS3+JS小实例：仿优酷视频轮播图
艾恩小灰灰的博客
10-09 456
实例：仿优酷视频轮播图。技术栈：HTML+CSS+JS。
网易新闻右侧导航-css样式练习 --主要注意将h2转换成行内块元素,设置border-top --用了a::before 实现小标题前面的小方块,后面可以在进行修改
mayiyayou的博客
03-17 544
<!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>网..
html+css实战收官
m0_48069349的博客
08-22 209
这里实战的网站是小米商城。 首先是项目的搭建 项目的搭建 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"> <link rel="style
HTML+CSS基础02
weixin_47917392的博客
04-15 45
Day02一： 列表 1.无序列表 <ul type=""> <li></li> <li></li></ul> type:默认为黑心原点；应用场景：新闻列表/网页导航/商品列表 2.有序列表 <ol type="" start=""> <li></li> <li></li></ol> type:默认为数字排序，可以选择数字，大小写字母，i
HTML+CSS
weixin_44305559的博客
09-15 139
1.什么是html? 超文本标记语言 超文本: 超越普通文本:能够在html中插入图片/音视频/超链接 标记语言: 特点:本身不具有行为能力和逻辑能力，只能被浏览器读取 1+1 2.特点 1.从上而下依次读取 2.大小写不敏感 3.容错性 3.html基础语法 1.空白语法 hello world pre:段落标签，保留用户输入的格式，上下13像素外边距 p:段落标签 上下16像素外边距 2.字符实体 &实体名称; nbsp 空格 quot 双引号 copy 版权声明 lt 小于号 gt大于号
HTML期末学生作业~HTML+CSS+JavaScript仿猫眼电影在线网站
qq_365392777
01-27 1981
❤ HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全) ​​web期末结课大作业 html+css+javascript网页、电影、仿京东、天猫、服装、 企业网站制作，资源里面有网页的HTML文件、CSS文件、JAVASCRIPT文件和网页中的图片文件，用于大学web网页课程参考以...
259. 简洁典雅的中国风旅游网页实例 大学生期末大作业 Web前端网页制作 html+css+js
A240307的博客
05-31 663
本实例应用html+css+js： Div、导航栏、三级菜单、选项卡、无缝滚动插件、图片轮翻效果、鼠标滑动特效、搜索等。适用于大学生网页课程作业设计、公司网页制作等。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
web移动端flex布局详细，简单快速快速上手！
weixin_51370967的博客
05-24 312
没有废话，只有干货！ 当父元素别设置为display:flex;将无视所有子元素的类型（块级元素，行块级元素，行内元素） 1.元素在主轴上的排列方式(添加在父元素上) <style type="text/css"> .box{ display: flex; width: 600px; height: 600px; /*主轴上的排列方式*/ justify-content: center; /*排列方向*/ flex-di.
vue3中vite基于vite-plugin-html的多入口打包
k0933的博客
08-30 449
1、安装vite-plugin-html。3、配置vite.config.js。
网站开发：HTML + CSS - CSS选择器
qq_51222843的博客
09-03 1331
CSS（Cascading Style Sheets，层叠样式表）是一种用于控制 HTML 文档样式和布局的语言。它为 Web 页面提供了许多功能，使开发者能够创建美观且功能丰富的用户界面。提供了丰富的功能来控制网页的外观和布局，增强用户体验，并支持现代 Web 开发的最佳实践。通过合理使用 CSS，可以创建视觉上引人入胜、功能丰富、易于维护的 Web 应用。
HTML：charset讲解
Weiki的博客
09-02 1015
HTML：charset讲解
VitePress 文件路由解析：从 Markdown 到 HTML 的映射艺术
软考鸭
09-05 332
VitePress 采用文件路由的方式，将 Markdown 文件的目录结构直接映射为生成的 HTML 页面的 URL 路径。这种设计使得网站的结构清晰易懂，同时也方便了内容的组织和维护。VitePress 的文件路由机制为文档网站的构建提供了一种直观且高效的方式。通过简单地组织和编写 Markdown 文件，你可以快速生成结构清晰、易于导航的静态网站。无论是个人博客、项目文档还是企业官网，VitePress 都是一个值得尝试的选择。
扑捉一只耿鬼（HTML文件）
每一次跌倒都是为了华丽的站起来。
08-28 1312
捕捉一只耿鬼
HTML 文本标签
qq_40107571的博客
09-05 286
HTML 文本标签
HTML第一课 语法规范与常用标签
2301_80062351的博客
09-05 503
◆ HTML 语法规范 ◆ HTML 常用标签 4.2 标题标签 4.3 段落和换行标签 4.4文本格式化标签 4.5和标签 4.6图像标签和路径 4.7超链接标签 1.外部链接 2.内部链接 3.空链接 4.下载链接 5.锚点链接 ◆ HTML 中的注释和特殊字符​编辑
SpringBoot开发——结合Thymeleaf模板整合HTML
最新发布
bjzhang75的博客
09-05 826
Thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。它是一个开源的Java库，基于Apache License 2.0许可。Thymeleaf提供了一个用于整合Spring MVC的可选模块，在应用开发中，你可以使用Thymeleaf来完全代替JSP或其他模板引擎，如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。
HTML和HTML5有什么区别
m0_56131422的博客
08-30 1443
HTML，即超文本标记语言，是构建网页的标准语言。最初版本的HTML简单地定义了网页的结构和内容，包括文本、图片、链接等元素。HTML的基本标签包括等，它们帮助浏览器正确渲染网页内容。HTML5是HTML的第五个主要版本，旨在解决Web开发中的一些长期存在的问题，并引入了许多新功能。HTML5不仅扩展了现有功能，还增强了对多媒体、图形和应用程序的支持。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值