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

相关推荐
慧一居士7 分钟前
Sass和Less功能、使用场景、用法对比
前端·css·less·sass
leoZ23114 分钟前
AI+前端提效-09 AI赋能前端测试:单元测试、E2E测试自动生成,提升覆盖率
前端·人工智能·opencv·目标检测·数据挖掘·单元测试·语音识别
知产xiao_xin15 分钟前
知识产权入门 —— 工业品外观设计
经验分享·笔记·知识产权
计算机魔术师20 分钟前
OpenAI 评定 Astra 达到网络安全 Critical 能力阈值,将受限发布
前端
JavaGuide24 分钟前
SpaceX 工程师的 AI Coding 玩法太牛了, 200 多个 Agent 并行!
前端·后端
小猪code28 分钟前
frp 80/443 Web 服务两种部署模式实操笔记
前端·笔记
熊猫钓鱼>_>33 分钟前
鸿蒙AI Agent新范式:从“对话式辅助”到“工程化代理”的Harness架构实战解析
人工智能·笔记·学习·华为·架构·harmonyos
JamesZhang8007834 分钟前
Chrome相关知识点
前端
GGMM7891 小时前
西门子 AAOP 亚洲高级操作面板详解(MM420/MM440 专用)
笔记·变频器·变频器维修
jayson.h1 小时前
python——pdf编辑
前端·python·pdf