欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

初识HTML、CSS

发布时间：2025/3/15 HTML 27 豆豆
生活随笔 收集整理的这篇文章主要介绍了 初识HTML、CSS 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

  HTML、CSS、JS这三兄弟听了好多次，但这次还是第一次用。写一篇总结一下！
  首先需要明白三者的关系，简单点儿说：HTML负责显示，CSS负责好看，JS负责更好的和用户沟通(我是这么认为的~)
  由于时间关系，JS还没学到。所以本篇整理了一些HTML、CSS的常用知识点，做个提醒。日后有时间再深学吧！

一、HTML

// 各级标题（1-5），1最大 <h1>这是一个标题。</h1> <h2>这是一个标题。</h2> <h3>这是一个标题。</h3><p> 段落 </p>// body中的链接 <a>链接：<a href="https://www.runoob.com", >这是一个链接</a>// 连接css，需要放在<head>中 <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/D_op_add.css',_external=True) }}"/><hr>水平线 <br>换行<div>模块</div>HTML的注释是{#注释内容#}// html中可以对所有关键字进行样式修饰，在style中可以进行多个参数修饰(其实我觉得CSS就是把这部分修饰独立了出来)： <h1 style="text-align: center;color: rgb(193,210,240);" > 请输入群众信息</h1>//rgb三个颜色参数，rgba四个参数，第四个是透明度(范围是0-1) rgb() rgba()

列表：无序列表、有序列表
无序列表：

有序列表：

二、CSS

  CSS文件刚建的时候是空的，需要自己一点点加。每一模块以类的形式存在(在HTML中对于css的调用就是通过class)。有两种引用：关键字类、自定义类。关键字类就是指对于HTML中预设的关键字(比如h1)设定相应样式，在HTML运行显示的时候就会指定显示。自定义类就是自己设定名字，可对传过来的变量进行修饰。
  要想学好CSS，必须深刻理解盒子模型(我理解的不太好)，我就简单谈谈项目中用到过的一些参数的含义：

color: white; // 指定颜色 text-align: center; // 文字居中 background-color: #111; // 设置背景颜色 width: 100%; // 设置组件宽度，一种是百分比，一种是px为单位的值 height: 100%; // 设置组件高度 background: url(../images/vaccine.jpg) no-repeat; // 设置背景图片 // 以下三个是组合，可用于定位 position: absolute; top: 50%; left: 50%; font-size: 40px; // 字体大小 border: none; // 无边界框 border-radius: 6px; // 设置边界框弧度 font-weight: bold; // 字体加粗 注释方法：/*注释内容*/

  一组可以实现悬浮按钮代码：

.sign-btn{left: 70%;top: 80%;position: absolute;text-align: center;margin-top: 50px;margin-bottom: 50px;background: rgba(100,149,237,.7);color: aliceblue;font-size: 15px;border-radius: 44px;cursor: pointer;transition: 0.8s; }.sign-btn:hover{transform:scale(0.96); }

  写到这儿突然发现自己还有太多太多的不熟悉，希望和大家一起加油！继续学习新的东西~

  最后留一个很好的学习网站吧(里面有很多的案例教学)：https://www.runoob.com/

因作者水平有限，如有错误之处，请在下方评论区指出，谢谢！

总结

以上是生活随笔为你收集整理的初识HTML、CSS的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。