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

相关推荐
兆子龙6 分钟前
当「多应用共享组件」成了刚需:我们从需求到模块联邦的落地小史
前端·架构
Qinana7 分钟前
从代码到智能体:MCP 协议如何重塑 AI Agent 的边界
前端·javascript·mcp
Wect17 分钟前
LeetCode 130. 被围绕的区域:两种解法详解(BFS/DFS)
前端·算法·typescript
不会敲代码120 分钟前
从入门到进阶:手写React自定义Hooks,让你的组件更简洁
前端·react.js
用户54330814419422 分钟前
拆完 Upwork 前端我沉默了:你天天卷的那些技术,人家根本没用
前端
洋洋技术笔记23 分钟前
Vue实例与数据绑定
前端·vue.js
Marshall15123 分钟前
zzy-scroll-timer:一个跨框架的滚动定时器插件
前端·javascript
明月_清风2 小时前
打字机效果优化:用 requestAnimationFrame 缓冲高频文字更新
前端·javascript
明月_清风2 小时前
Markdown 预解析:别等全文完了再渲染,如何流式增量渲染代码块和公式?
前端·javascript
掘金安东尼3 小时前
用 CSS 打造完美的饼图
前端·css