前端基础知识学习（HTML+CSS）

最新推荐文章于 2024-10-09 20:10:15 发布
最新推荐文章于 2024-10-09 20:10:15 发布
阅读量256 收藏
点赞数 1
文章标签： 前端 学习 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52031422/article/details/125601837
版权

前端开发

1.HTML

1.1标签

<h1></h1>
<div></div>
<span></span>
<a></a>
<img>

1.2划分

- 块级标签
  <div></div>
  <h1></h1>
- 行内标签
  <span></span>
  <a target = "_blank"></a> 需要进行重开界面 可以
  <img />

1.3标签的嵌套使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
</head>
<body>

<a href="https://www.mi.com/redminote11t-pro" target="_blank" >
    <img src="/static/tp1.png" style="width: 30%">
</a>

<a href="https://www.mi.com/redminote11t-pro" target="_blank">
    <img src="/static/tp2.png" style="width: 30%">
</a>

<a href="https://www.mi.com/redminote11-se" target="_blank">
    <img src="/static/tp3.png" style="width: 30%">
</a>
</body>
</html>

1.4 列表标签

无序列表
<ul>
  <li>Python</li>
  <li>Java</li>
  <li>C/C++</li>
</ul>

有序列表
<ol>
  <li>Python</li>
  <li>Java</li>
  <li>C/C++</li>
</ol>

1.5 表格

<table>
  <thead border ="1"> 表头 border ="1"加上一个边框
    <tr> 
      <th>ID</th> 
        <th>姓名</th> 
          <th>年龄</th> 
    </tr>
  </thead>
  <tbody> 内容
    <tr> 
      <th>1</th> 
        <th>廖凡</th> 
         <th>22</th> 
    </tr>
    
    <tr> 
      <th>2</th> 
         <th>小牛</th> 
          <th>21</th>
    </tr>
  </tbody>
</table>

1.6 input系列

<input type="text"/>
<input type="password"/>
<input type="file"/>
    
<div> 单选
  <input type="radio" name="n1"/>男
  <input type="radio" name="n1"/>女
</div>

<div> 复选框
  <input type="checkbox">篮球
  <input type="checkbox">足球
  <input type="checkbox">乒乓球
</div>

<input type="button" value="提交"/> 普通按钮
<input type="submit" value="提交"/> 提交表单

1.7 下拉框

 <h1>下拉框</h1>
    <select >
        <option>湖南</option>
        <option>湖北</option>
        <option>广东</option>
    </select>

1.8 多行文本

<textarea rows="2"></textarea>  rows 设定其有多少行

案列：基于Flask的注册案例

from flask import Flask , render_template, request

app = Flask(__name__)

@app.route("/register", methods=['GET', 'POST'])
def register():
    if request.method == 'GET':
        return render_template("register.html")
    else :
        # 1.接收用户通过POST请求到的数据
        print(request.form)
        # 2.返回结果
        return "注册成功"

if __name__ == '__main__':
    app.run()

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>用户注册</h1>

<form method="post", action="/register">
    <div>
        用户名:
        <input type="text" name="user"/>
    </div>
    <div>
        密 码 :
        <input type="password" name="pwd"/>
    </div>
    <div>
        <input type="submit", value="submit提交"/>
    </div>

    <div>
        性别:
        <input type="radio" name="gender" value="-1"/>男
        <input type="radio" name="gender" value="1"/>女
    </div>

    <div>
        爱好:
        <input type="checkbox" name="hobby" value="10"/>LOL
        <input type="checkbox" name="hobby" value="20"/>Sing
        <input type="checkbox" name="hobby" value="30"/>Play
    </div>

    <div>
        城市:
        <select name="city">
            <option value="cs">长沙</option>
            <option value="gz">广州</option>
            <option value="sz">深圳</option>
        </select>
    </div>

    <div>
        技能:
        <select name="skill" multiple>
            <option value="py">Python</option>
            <option value="java">Java</option>
            <option value="c">C/C++</option>
        </select>
    </div>

    <div>
        更多：
        <textarea name="more"></textarea>
    </div>
</form>

</body>
</html>

页面上的数据，想要提交到后台：

  • form标签包裹要提交的数据标签
    • 提交方式：method = 'GET'
    • 提交地址：action = '/xxx/xxx'
    • 在form标签里面必须要有表当提交的==submit标签==
  • 在form里面的一些标签: input/select/textarea
    • 一定要写name属性<input type="text" name="xx">
  • 在form中的： radio/select/checkbox 标签
    • 一定要写value属性 <input type="radio" name="xx" value="xxx">

总结

  1. 称呼

    - HTML标签

什么是HTLM？超文本传输语言（与浏览器配合）

  2. HTML标签（默认格式样式，可以通过其他方式修改）

  3. HTML标签与编程语言无关

    • Java + HTML
    • python + HTML
    • php + HTML
    • c# + HTML

  4. HTML的标签比较多， 标签还有很多，不必逐一学习

2.CSS基础知识

2.1 快速了解

<img src="..." style='height:100px'/>

<div style="color:red"></div>

2.2 CSS应用方式

1.在标签上
<img src="..." style='height:100px'/>

<div style="color:red"></div>
2.在head标签中写style标签（*）
<style>
    .c1{
        color="red"
    }
</style>
3.在文件中写（*）
.c1{
    height:100px;
}

.c2{
    color:red;
}

<link rel="stylesheet" href="common.css">

注意在Flask中只可以在static文件下写css文件

案列:flask中的应用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/common.css">
</head>
<body>
<h1 class="c2">登录界面</h1>
<form action="/login" method="post">
    <div class="c1">
        账号:
        <input type="text" name="user"/>
    </div>
    <div class="c1">
        密码:
        <input type="password" name="psw"/>
    </div>
    <input type="submit" value="登录" class="c2">
</form>
</body>
</html>

.c1{
    height: 50px;
    color: burlywood;
}
.c2{
    color: aquamarine;
}
问题：Flask框架开发不方便
  • 每次都需要重新启动
  • 规定有些文件必须要存放在特定文件目录中
  • 新创建一个页面
    • 新建 route
    • 新建HTML

2.3 CSS选择器

  • ID选择器

    #c2{
            color: blue;
	}

  • 类选择器

    .c1{
            color: red;
	}

  • 标签选择器

    li{
            color:hotpink;
   }

  • 属性选择器

    input[type='text']{
    border :1px solid red
}
.v1[xx='456']{
            color: darkmagenta;
}

    <input type="text"/>
<input type="password"/>

<div class="v1" xx="123">asdf</div>
<div class="v1" xx="456">asdf</div>
<div class="v1" xx="789">asdf</div>

  • 后代选择器

    选择yy类下子孙中的所有li标签
.yy li{ 
            color: aqua;
}
选择yy类下的直接子元素 a
.yy>a{
            color: blueviolet;
}
选择yy类下的子孙元素 a
.yy a{
            color: blueviolet;
}

    关于选择器

    多：类，标签，后代

    少：属性，ID

  • 多个样式&覆盖

    与在style标签中的定义顺序有关，后定义的会覆盖先定义的

        <style>
        .c1{
            color: blueviolet;
            border: 1px solid red;
        }
        .c2{
            color: aqua;
            height: 30px;
        }
    </style>

    注意：使用!important;可以防止覆盖发生

2.4 样式

1. 高度和宽度
.c1{
            height: 300px;
            width: 50%;
            border :1px solid red;
}

注意：

  • 宽度，高度支持百分比设置
  • 行内标签：默认无效
  • 块级标签：默认有效（霸道，右侧的空白无法使用）
2.块级和行内标签
  • 块级 display:block
  • 行内display:inline
  • css样式 ：标签-> display:inline-block
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            display: inline-block;
            border: 1px solid darkred;
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
    <div style="display: inline">我是块级标签</div>

    <span style="display: block">我是行内标签</span>

    <span class="c1">我是一个块级&行内标签</span>

    <span class="c1">我是<span style="color: blue">另外一个</span>块级&行内标签</span>
</body>
</html>

注意：块级 + 块级&行内 使用的频率高

3.字体设置

  • 颜色

  • 大小

  • 缩放

  • 字体格式

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: aquamarine;/*颜色*/
            font-size: 50px;/*大小*/
            font-weight: 200;/*缩放*/
            font-family: Arial Narrow,serif;/*字体格式*/
        }
    </style>
</head>
<body>
    <div class="c1">我是一行文字</div>
</body>
</html>
4.文字对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 100px;
            width: 300px;
            border :1px solid hotpink;

            text-align: center; /*水平方向居中*/
            line-height: 100px;/*垂直方向居中*/
        }
    </style>
</head>
    <div CLASS="c1">LiaoFan</div>
<body>

</body>
</html>

注意：

水平居中:text-align: center; /*水平方向居中*/

垂直方向居中:line-height: 100px;/*垂直方向居中*/

5. 浮动

div标签默认为块级标签，而如果浮动起来就不一样了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            float: left;
            width: 200px;
            height: 200px;
            border: 1px solid orange;
        }
    </style>
</head>
<body>

    <div>
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>


</body>
</html>

出现的问题：如果让标签浮动起来，就会脱离文档流

解决的办法加入<div style="clear: both"></div>

<div style="background-color: hotpink">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div style="clear: both"></div>
</div>
6.内边距

内边距：我自己的内部设置一些距离，这会扩充div的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            height: 100px;
            width: 100px;
            border: 1px solid rosybrown;

            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 20px;
            padding-right: 20px;
            
        }
    </style>
</head>
<body>
    <div class="outer">我是一段文字
        <div>
            第一段文字
        </div>
        <div>
            第二段文字
        </div>
    </div>
</body>
</html>

padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;

等价于 ==>

padding ：20px

等价于 ==>

padding : 20 px, 10 px ,10px 20 px(顺时针 上右下左)
7.外边距

外边距： 自生与其他标签的边距， 不会使自生标签改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="margin-top: 10px; height: 200px; width: 200px ;background-color: rosybrown" ></div>
    <div style="margin-top: 30px; height: 200px; width: 200px ;background-color: purple" ></div>
</body>
</html>

总结

  • body标签，默认有一个边距，造成四周有空白边距，解决办法：

    body{
	margin:0
}

  • 内容居中

    • 文本居中

      <div style="width: 200px; text-align :center">
    xxxx
</div>

    • 区域局中，必须设置宽度 +margin-left: auto;margin-right: auto

      .container{
	width: 980px;
	margin: - auto;
}

<div class="container">
    xxxxxx
</div>

  • 父亲没有高度或者宽度，会被孩子支撑起来

  • 如果有浮动一定需要加如<div style="clear: both">xxx</div>

小凡在努力
关注
【前端基础篇】HTML5 + CSS3 入门知识
前端知识分享喵
06-09 2417
，HTML5和CSS3核心知识
前端 | （一）前端简介 | 尚硅谷前端html+css零基础教程2023最新
知识库搭建ing
07-15 996
（一）前端简介 | 尚硅谷前端html+css零基础教程2023最新
web前端基础（一）——HTML+CSS
热门推荐
广龙宇的博客
08-18 14万+
系列文章目录 web前端基础（一）——HTML+CSS 目录 系列文章目录 前言 HTML HTML的介绍 1. html的定义 2. html的作用 HTML的基本结构 1. 结构代码 2. 浏览网页文件 vscode的下载与使用 1. vscode 的基本介绍 2. vscode 的安装 3. vscode 的插件安装 4. vscode 的插件卸载 5. 设置字体大小 6. 设置颜色主题 7. 设置默认浏览器[可选] 初识常用的HTML标签 1. 常用的 ..
前端开发基础 HTML+CSS+JS
小白典的博客
04-28 9561
HTML介绍 HTML(Hyper Text Markup Language)是超文本标记语言，并不是编程语言，它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的网络资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令用来说明文字、图像、视频、表格、链接等，目前广泛使用的是HTML5 CSS介绍 CSS(Cascading Style Sheets)是层叠样式表，用来表现HTML文件样式的标准语言。CSS用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局
HTML+CSS+JavaScript基础知识总结
qq_53061847的博客
05-27 1万+
目录 一、HTML+CSS 1. 如何理解HTML的语义化 2. 从浏览器地址栏输入url回车会发生什么 3. 溢出的文字显示省略号 4. css选择器和优先级 css选择器 5. BFC 6. 水平垂直居中的方法 二、JavaScript 1. 基本数据类型 2. 数组的使用 一、数组序列化 二、栈和队列方法 三、排列方法 四、操作方法 五、位置方法 六、迭代方法 2.1 利用函数求任意个数的最大值 2.2 利用函数翻转任意数组 reverse ......
前端三剑客 HTML+CSS+JavaScript 学习笔记
霁晨晨晨的博客
12-10 3万+
总结了一些关于前端 HTML&CSS&JavaScript 的知识点，比较适合初学者快速了解和入门〝前端三剑客〞
前端基础知识HTML,css,js入门(超详细)
shen_of_218的博客
06-30 1582
前端基础知识——HTML、CSS和JavaScript。用案例和代码带你轻松入门前端世界。
前端HTML+CSS+JavaScript学习总结
weixin_43759279的博客
08-29 902
前端相对后端会简单一些，首先是HTML只要是页面的布局，其次css起辅助样式设计，最后JavaScript实现网页的动态功能。 HTML和css都虽然比较简单，但可能是因为我们主要学后端，前端的知识讲的比较轻，总体的连贯性还是有一些欠缺的，导致学了简单。 JavaScript就和后端的差不多了，需要写代码的逻辑能力，这一点我自己本身还有不足之处，仍需加强写代码的能力。 总而言之，前端比后端简单之处在于所写即所见，更有趣，难点在于JavaScript的应用。还是要多写多练才行。 ...
一文梳理总结HTML+CSS琐碎知识点 快速上手前端开发
FRIGIDWINTER的博客
10-27 2498
一文梳理总结HTML+CSS琐碎知识点1 前端三要素2 HTML2.1 HTML骨架2.2 HTML标签的基本概念2.3 HTML基础标签2.4 HTML高级标签2.4.1 列表2.4.2 表格2.4.3 表单2.4.4 简单布局2.5 字符实体3 CSS3.1 CSS基本概念3.2 CSS基本属性3.2.1 颜色3.2.2 样式表3.2.3 基础选择器3.2.4 高级选择器3.3 层叠性3.4 容器3.5 浮动3.6 定位3.5.1 相对定位3.5.2 绝对定位3.5.3 固定定位 1 前端三要素 前端三
前端基础学习——你必须掌握的CSS的知识
weixin_53919192的博客
07-05 1484
本文带大家理解掌握CSS的知识，希望对你有帮助~~
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频尚品汇项目源码
03-06
【标题】中的“尚硅谷前端入门html+css零基础教程”指的是一个由尚硅谷教育机构提供的，面向初学者的前端开发课程，主要涵盖了HTML（超文本标记语言）和CSS（层叠样式表）的基础知识。这个教程是为那些对前端开发...
web前端开发html+css+js免费下载（设计作品成品）
12-31
在“web前端开发html+css+js免费下载（设计作品成品）”这个资源中，包含了一系列使用HTML、CSS和JavaScript技术构建的Web应用实例。这些技术是现代Web开发的基石，它们共同作用于创建交互式的网页和应用程序。下面...
web前端 html+css+js+jquery 网易云音乐官网模仿
06-27
在本项目中，“web前端 html+css+js+jquery 网易云音乐官网模仿”是一个前端学习项目，目的是通过模仿网易云音乐的官方网站来掌握和应用HTML、CSS、JavaScript以及jQuery这四门核心技术。接下来，我们将深入探讨这些...
前端代码学习（HTML+CSS+JS进阶学习全资料）
12-25
这份前端学习资料包含了深入学习HTML、CSS和JavaScript的所有必要资源。其中，HTML模块涵盖了HTML基础语法、HTML5的新增功能以及表单设计和验证。CSS模块涵盖了CSS选择器和属性、各种布局技术，包括Flexbox和Grid，...
前端的全栈混合之路Meteor篇：3.0新版本介绍
分享有趣的、贴近生活的CS知识
10-01 1166
Meteor全栈框架3.0版本终于稳定下来了，它的效果约等于webpack+vue+express+socket.io+mongodb+npm+uniapp，学一个搞定全套，值得学习了解下，最后找到适合于自己的技术栈。
快餐食品检测系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]
m0_73388125的博客
10-08 1200
数据集信息展示在本研究中，我们使用了名为“burger detection”的数据集，以改进YOLOv8在快餐食品检测系统中的表现。该数据集专门针对快餐食品的多样性进行设计，涵盖了六个主要类别，分别是：bbq、bread、bun、hotdog、pattty和patty。这些类别的选择不仅反映了快餐食品的常见种类，还考虑到了它们在实际应用中的重要性，尤其是在餐饮行业的食品识别和分类任务中。数据集的构建过程经过精心设计，确保每个类别的样本数量和质量都能满足深度学习模型训练的需求。
前端基础面试题·第四篇——Vue（其二）
2301_76380626的博客
10-08 777
路由跳转 接收参数 params传递参数可以用过页面路由对象route的params属性访问到。 2.query传参 query 传参是通过URL的查询字符串来传递参数，这种方式传递的参数是可选的。 这种方式不需要提前配置路由路径，直接在路由跳转时在路径或者配置中传递参数即可。 路由跳转 接收参数 这种方式传递的参数会挂载到页面路由对象route的query对象上。 2. hash和history路由区别 hash路由地址上在路径后面带#号，history路由地址上不带#号. 在
Layout 布局组件快速搭建
最新发布
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
10-09 1902
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
尚学堂前端基础教程：HTML+CSS+JavaScript入门
“html+css+javascript.ppt - 前端开发基础入门教程，涵盖HTML、CSS和JavaScript基础知识。” 此资源是一个关于前端开发基础的PPT教程，主要讲解了HTML、CSS和JavaScript这三个核心技术。HTML（HyperText Markup ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值