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

相关推荐
TheSumSt4 分钟前
Python丨课程笔记Part3:语法进阶部分(控制结构与基础数据结构)
数据结构·笔记·python
纸上的彩虹33 分钟前
半年一百个页面,重构系统也重构了我对前端工作的理解
前端·程序员·架构
be or not to be1 小时前
深入理解 CSS 浮动布局(float)
前端·css
IT19951 小时前
Qt笔记-使用SSH2进行远程连接linux服务器并上传文件
linux·服务器·笔记
LYFlied1 小时前
【每日算法】LeetCode 1143. 最长公共子序列
前端·算法·leetcode·职场和发展·动态规划
老华带你飞1 小时前
农产品销售管理|基于java + vue农产品销售管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
小徐_23332 小时前
2025 前端开源三年,npm 发包卡我半天
前端·npm·github
GIS之路2 小时前
GIS 数据转换:使用 GDAL 将 Shp 转换为 GeoJSON 数据
前端
JIngJaneIL3 小时前
基于springboot + vue房屋租赁管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
天天扭码3 小时前
以浏览器多进程的角度解构页面渲染的整个流程
前端·面试·浏览器