初识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

猜你喜欢