HTML&CSS

一、Html、css、js

html:超文本标记语言------负责网页的结构

css:层叠样式表------页面显示的样式、排版

js:JavaScript------界面交互(动态交互、逻辑)

二、Html

div和span

  1. div division:div里面所有的元素都在div区域里面,div里面可以嵌套别的标签

div独占一行

  1. span:功能类似于div但是不能独占一行

  1. 块级元素block:单独成为一行。h、ul、ol、div

  2. 行内元素inline:不能独占一行,可以和其他元素并排。img、a、span、input

u(underline):下划线

i(italic):斜体

b(bold):粗体

空间折叠以及特殊符号

空格折叠:普通空格在html中如果有多个连续出现会被当做一个空格,如果想要显示多个连续空格需要特殊符号 

&lt; less than <

&gt; gteat than >

&copy; ©

&lt;h1&gt; 在html页面输出:<h1>

table表格

th:table head

tr:table row

td:table data单元格

rowspan:合并行

colspan:合并列

form表单

css:cascading style sheet 层叠样式表

语法格式:

html 复制代码
选择器 {
    属性名1:属性值1;
    属性名2:属性值2;
    属性名3:属性值3;
}

三、CSS

css使用:

1.通过选择器选择上标签

2.在选择的标签上设置样式

选择器分类:

1.标签选择器:

html 复制代码
p{
    ......
}

2.类选择器:

html 复制代码
.className{
    ......
}

3.id选择器:

html 复制代码
#id{
    ......
}

一些常见的样式:

color:red; //文字颜色

font-size:40px;

background-color:blue;

text-decoration:underline;

text-decoration:none; //去掉下划线

css使用思想:

  1. 不要试图用一个类名,把某个标签的所有样式写完。要让这个标签多携带几个类,共同造成这个标签的样式。

  2. 每一个类要尽可能小,要能够做到让更多的标签使用。

css高级选择器:

s1 s2 后代选择器,选择自己所有的后代

s1,s2 并集选择器(选择器组)||

属性选择器

s1s2 交集选择器(既要满足s1也要满足s2)&&

s1>s2 直接儿子选择器,与后代选择器不同,只选择自己直属的后代

s1+s2 下一个兄弟选择器,选择自己后面紧挨着的第一个兄弟

盒模型

盒模型中主要的属性:width(宽长),height(高度),padding(内边距),border(边宽),margin(外边距)

BootStrap

Bootstrap 是一个流行的前端框架,用于构建响应式和移动优先的网站和Web应用程序。它由Twitter团队开发并开源,提供了一套预构建的CSS样式和JavaScript组件,帮助开发人员快速搭建现代化的用户界面。

BootStrap全局样式特点:

1.代码简洁

2.风格统一

3.美观易用

Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架,用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网

bootstrap-3.4.1-dist.zip

链接:https://pan.baidu.com/s/1uACSnHugvkXXdqFGXP8MOw?pwd=szph

提取码:szph

相关推荐
叁两30 分钟前
用opencode打造全自动公众号写作流水线,AI 代笔太香了!
前端·人工智能·agent
golang学习记35 分钟前
GitLens 十大神技:彻底改变你在 VS Code 中的 Git 工作流
前端·后端·visual studio code
SuperEugene36 分钟前
后台权限与菜单渲染:基于路由和后端返回的几种实现方式
前端·javascript·vue.js
兆子龙38 分钟前
WebSocket 入门:是什么、有什么用、脚本能帮你做什么
前端·架构
是一碗螺丝粉43 分钟前
LangChain 链(Chains)完全指南:从线性流程到智能路由
前端·langchain·aigc
月弦笙音1 小时前
【浏览器】这几点必须懂
前端
青青家的小灰灰1 小时前
迈向全栈新时代:SSR/SSG 原理、Next.js 架构与 React Server Components (RSC) 实战
前端·javascript·react.js
SuperEugene1 小时前
弹窗与抽屉组件封装:如何做一个全局可控的 Dialog 服务
前端·javascript·vue.js
UrbanJazzerati1 小时前
事件传播机制详解(附直观比喻和代码示例)
前端
青青家的小灰灰1 小时前
透视 React 内核:Diff 算法、合成事件与并发特性的深度解析
前端·javascript·react.js