前端HTML+CSS学习笔记
``
第一部分 前端HTML基础
第一章 html基本结构
认识HTML：
html不是一种编程语言，是一种标志语言
标记语言是由一套标识标签组成的
html使用标签来描述网页
html结构：
不成对出现的标签
标签
—-
仅仅用于标题文本，不要为了产生粗体文本使用它们
标签 段落标签 *主要*标签都会让文字产生加粗效果 *主要* 标签强调 用于倾斜 比强调更强 特殊符号： ** —->空格 > —>大于号 <；—>小于号** "；—>引号 ©–>版权号
第二章 html基本标签
HTMl基本标签：
span标签
对被用来组合文档中的行内元素
注意：span没有固定的格式表现，当对它应用样式时，才会产生视觉上的变化
标签—>他有一个必不可少的属性 href
锚点也是一种超链接，是页面内进行跳转的超链接
第一步：创建锚点
第二步：使用创建好的锚点名称 内容
第三章 img图片标签与路径
图片标签与路径：
常见图片格式 jpg png gif Gif （只支持全透明） Jpeg /jpg Png 半/全透明都支持
图片标签写法 ：
图片四要素：
src=“” 图片路径
alt=“” 图片含义
width=“” 图片宽度 和图片大小保持一致
height=“” 图片高度 和图片大小保持一致
title=“”
路径知识：
相对路径、绝对路径：
相对路径：(Relative Path) 相对于该文件的路径；
绝对路径：(Absolute Path) 从磁盘出发的路径；
在静态页面中：
/开头表示根目录；
./表示当前目录；（斜画线前面一个点）
…/上级目录；（斜画线前面两个点）
这些都是相对于当前文件的位置来说的，如果用绝对路径的话就是写全了。
第四章 三种列表的讲解
三种列表的知识讲解：
- 无序列表 无序列表是一个没有顺序项目的列表，此列表项默认粗体圆点进行标识
有序列表 有序列表也是一列项目，只是列表项目使用的是数字进行标记。 有序列表始于
- 标签。每个列表项始于
- 标签。
- 内容一
- 内容二
- 内容三
无序列表-嵌套
- 柚子
- 沙田柚
- 蜜柚
- 荔枝
- 苹果
有序列表-嵌套
定义列表不仅仅是一列项目，而是项目及其注释的组合。定义列表以
- 标签开始。每个定义列表项以 开始。每个自定义列表项的定义以
- 开始。
- pc网页制作
- 学习DIV+CSS JS JQ 项目实战
- 手机网页制作
- 手机网页制作实战
dd是对dt的解释
< dl>< /dl>用来创建一个普通的列表,
< dt>< /dt>用来创建列表中的上层项目，
< dd>< /dd>用来创建列表中最下层项目，
< dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。
- 中国城市
- 北京
- 上海
- 广州
- 美国城市
- 华盛顿
- 芝加哥
- 纽约
list-style属性具有三个属性分量： list-style-position ：设置列表项图标的位置，位于文本内或者文本外
list-style-type： 设置列表项图标的类型 list-style-image：使用图像设置列表项图标 用于去掉li前面的项目符号（小圆点）
第五章 表单元素(上)
表单标签:
表单标签 表单是一个包含表单元素的区域，包括起来的都是表单的内容
HTML标签 - 隐藏域隐藏标签：
隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器
标签的掌握
常用type类型：
type="text" 单行文本输入框 type="password" 密码（maxlength=""） type="radio" 单项选择（checked="checked"） type="checkbox" 多项选择 type="button" 按钮 type="submit" 提交 type="image"图片提交 type="file" 上传文件 type="reset"重置 type="hidden" 隐藏 关于表单中的设置默认值： **下拉菜单** textarea没有默认值
标签的使用
label 元素不会向用户呈现任何特殊效果，增加了用户体验感。
例子：（重要—注册表单–用户体验–必做）
单向选择
男： 女：
第六章 表单和表格(下)
表单和表格标签：
文本域标签 标签： 是文本域标签，可以在其中插入一段文字内容，它有两个常用属性rows和cols
注意： rows表示这个文本域有多少行 cols表示这个文本域有多少列
除了这两个属性它还有readonly（只读，文本域的内容无法改变，相当于协议）和title（鼠标放上提示）
标签的掌握
注：当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 表单数据提交给服务器时包括 name属性
1月 2月 常用到的属性：disabled=“disabled” name="sel" size="2" 表格标签 表格标签： 是表格标签，可以用它定义一个表格。
| 姓名 | 性别 |
注意：的border属性不能少 标签的使用 行标签： 可以定义表格中的一行，一个表示一行。
| 姓名 | 性别 |
| 姓名 | 性别 |
单元格标签: 可以定义表格中的一个单元格，表示一个单元格。
| 姓名 | 性别 | 爱好 |
border-collapse 属性设置是否将表格边框折叠为单一边框： border-collapse:collapse; colspan左右合并 rowspan上下合并
第一部分总结
非可视化标签：head meta style scrpit…
可视化标签：img div span a ul li…
只有可视化标签，才能用css改变它
单标签：meta link base img input br hr
双标签：html head body div a p span …ul li ol dl ….
常用可视化标签
div
一般用它来布局
a 超链接标签
href*属性：设置跳转的网页地址
target属性：设置跳转的目标
结论：凡事页面可以点击跳转或者表单提交的文字，都用a标签
img
src*属性用来设置图片的url数据
alt提供给搜索引擎搜索的
width
height
结论 ：显示图片
ul li
列表
结论：只要将来设计页面中有固定样式的列表，就用ul和li
如果是合并竖排的就是合并行（rowspan）
如果是合并横排的就是合并列（colspan）
第二部分 CSS
第七章 css基础知识
css基础知识：
css样式表的定义
css：（Cascading Style Sheets）层叠样式表；
分类及位置：内部样式-head区域style标签里面
外部样式-link调用
内联样式-标签元素里面
css内的注释：/注释内容/
css样式表的语法
CSS规则由两个主要的部分构成：要添加样式的盒子名或者标签名、和要添加的样式。
盒子名或者标签名{属性:值;}
CSS中几种颜色的表示方法
用颜色名表示 有17个预先确定的颜色，它们是 aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, orange, purple, red, silver, teal, white, and
yellow 用十六进制的颜色值表示(红、绿、蓝)#FF0000或者#F00 用rgb(r,g,b)函数表示
如：rgb(255,255,0) 用hsl(Hue,Saturation,Lightness)函数表示（色调、饱和度、亮度)
如：hsl(120,100%,100%),色调0代表红色，120代表绿色，240代表 蓝色 用rgba(r,g,b,a)函数表示
其中a表示的是改颜色的透明度，取值范围是0~1，其中0代表完全透明
用hsla(Hue,Saturation,Lightness,alpha)函数表示
内部样式表
当单个页面需要设置样式时，就应该使用内部样式表。
使用 标签在文档里面定义内部样式表
内联样式表（优先级高） 写在标签里面的样式 如： 表示给p标签里面的文字颜色设置为红色
样式的优先级补充
相同权值情况下，CSS样式的优先级总结来说，就是——就近原则（离被设置元素越近优先级别越高）：
内联样式表（标签内部） > 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
权值不同时，浏览器是根据权值来判断使用哪种css样式的，哪种样式权值高就使用哪种样式
层叠优先级是:
浏览器缺省< 外部样式表 < 内部样式表 < 内联样式
其中样式表又有:类选择器 < 类派生选择器<ID选择器 < ID派生选择器
派生选择器以前叫上下文选择器，所以完整的层叠优先级是:
浏览器缺省 <外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器< 外部样式表ID选择器< 外部样式表ID派生选择器<
内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 <
内联样式…共12个优先级
另外，如果同一个元素在没有其他样式的作用影响下，其Class定义了多个并以空格分开，其优先级顺序为：
一个元素同时应用多个class，后定义的优先（即近者优先），加上!important者最优先！
第八章 css选择器(上)
css选择器：
class类选择器可以重复利用
id选择器唯一
标签选择器
标签选择器：页面中所有的标签都是一个选择器 p{color:red;}
ID选择器
选择id命名的元素 以 # 开头 #p1{color:#0f0;}
类选择器
class选择器，选择clas命名的元素 以.开头 .first{color:#00f;}
css代码写完后上线前要经过压缩处理
本地和服务器分两个css版本（备份）
压缩后注释都清除，空间体积减少
群组选择器
选择多个元素,以逗号隔开 #main,.first,span,a,h1{color:red;}
包含选择器
选择某元素的后代元素，也称后代选择器，父类与子类间以空格隔开p
span{color:red;}
属性选择器
选择包含某一属性的元素
a[title]{color:red;} 选择包含title的a标签
a[title][href]{color:red;} 选择包含title和href的a标签
** 选择器子类选择器**
只选择子元素（只选择儿子）（相当于包含元素）
p > span{color:red;}
相邻兄弟选择器
只选择后面的相邻兄弟元素
p + span{color:red;}
第十章 css选择器(下)
伪类选择器
a:link {color:#FF0000;} / 未访问的链接 / （只用于a标签）
a:visited {color:#00FF00;} / 已访问的链接 / （只用于a标签）
a:hover {color:#FF00FF;}/* 鼠标移动到链接上
*/（可和其他标签结合一起用）
a:active {color:#0000FF;} / 选定的链接 /
注意
伪类选择器的排序很重要，a:link a:visited a:hover a:active
LV包包好啊
输入伪类选择器（针对表单）
input:focus{color:red;} / 键盘输入焦点 /
其他伪类选择器
p:first-child{color:red;} /* 第一个p */
:before 在元素之前添加内容。
:after 在元素之后添加内容。
css优先规则
内联样式表-> ID 选择器—> Class 类选择器->标签选择器
第十一章 背景属性
背景属性：
背景的添加 ：
背景颜色的添加:
background:red;
backgronnd-color:red;
背景图片的添加：
background:url(“images/1.jpg”);
backgronnd-image:url(“images/1.jpg”);
背景的平铺
什么是平铺？平铺就是图片是否重复出现
不平铺：background-repeat:no-repeat;
水平方向平铺：background-repeat:repeat-x;
垂直方向平铺：background-repeat:repeat-y;
完全平铺：默认为完全平铺
背景图片的定位
背景图片的定位就是可以设置显示背景图片的位置，通过属性background-position来实现
background-position的取值可为英文单词或者数值和百分值。
background-positon的英文单词取值
top left
top center
top right
center left
center center
center right
bottom left
bottom center
ottom right
background-positon的数值取值
background-position:x y;
positon的百分值取值
background-position:x% y%;
背景图片的大小
背景图片的大小可以通过属性background-size来设置background-size的取值可为数值和百分值。
background-size的数值取值
background-size:x y;
background-size的数值取值
background-size:x% y%;
背景图片的滚动
背景图片是否随着内容的滚动而滚动由background-attachment设置
background-attachment:fixed; 固定，不随内容的滚动而滚动
background-attachment:scroll; 滚动，随内容的滚动而滚动
第十二章 文字文本属性
css文字文本属性：
文字属性
color:red; 文字颜色
font-size:12px; 文字大小
font-weight:“bold” 文字粗细(bold/normal)
font-family:“宋体” 文字字体
font-variant:small-caps小写字母以大写字母显示
文本属性
text-align:center; 文本对齐(right/left/center)
line-height:10px; 行间距(可通过它实现文本的垂直居中)
text-indent:20px; 首行缩进
text-decoration:none;
文本线(none/underline/overline/line-through)
letter-spacing: 字间距
第十三章 盒子模型
盒子模型
盒子模型就是一个有高度和宽度的矩形区域
所有html标签都是盒子模型
div标签自定义盒子模型
所有的标签都是盒子模型
class和id的主要差别是：class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。
盒子模型组成部分：
自身内容：width、height 宽高
内边距： padding
盒子边框： border 边框线
与其他盒子距离： margin外边距
内容+内边距+边框+外边距=面积
border 边框
常见写法 border:1px solid #f00;
单独属性：
border-width:
border-style:
dotted 点状虚线
dashed（虚线）
solid（实线）
double（双实线）
border-color (颜色)
padding 内边距
值：像素/厘米等长度单位、百分比
padding:10px; 上下左右
padding:10px 10px; 上下 左右
padding:10px 10px 10px; 上 左右 下
padding:10px 10px 10px 10px; 上 右 下 左（设置4个点–>顺时针方向）
单独属性：
padding-top:
padding-right:
padding-bottom:
padding-left:
当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小
margin 外边距
值：与padding相同
单独属性：与padding相同
外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并
清除内外边距
- {
padding：0；
margin：0；
}
第十四章圆角边框
语法：
border-radius: length;
①参数值可以为数值或百分比
②如果是正方形想要设置一个圆，把数值修改为宽度或者高度的一半即可，或直接写50%
③如果是矩形，设置为高度的一半
④该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角（顺时针）
第十五章盒子阴影
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow:必需 水平阴影的位置，可以负值
v-shadow:必须 垂直阴影的位置，可以负值
blur:可选 模糊距离
spread:可选 阴影尺寸
color:可选 阴影颜色
inset:可选 将外阴影（outset）改为内阴影
注意
①默认是外阴影，但是不可以写outset，否则导致阴影无效
②盒子阴影不占用空间，不会影响其他盒子的排列
第十六章浮动
css提供三种传统布局方式
①普通流（标准流/文档流）：就是标签按照规定好的默认方式排列
②浮动
③定位
网页布局第一标准：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
语法：
选择器 { float ：属性值；}
属性值：none 元素不浮动（默认值）
left 元素向左浮动
right 元素向右浮动
浮动特性
1、浮动元素会脱离标准流（脱标）
①脱离标准流的控制（浮）移动到指定位置（动）
②浮动的盒子不在保留原先的位置
2、浮动元素会一行内显示并且元素顶部对齐
3、浮动的元素会具有行内块元素的特性
浮动元素经常和标准流父级搭配使用
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
浮动的注意点
1、浮动和标准流的父盒子搭配
先用标准流父元素排列上下位置，之后内部子元素采取浮动排列左右位置
2、一个元素浮动了，理论上其余的兄弟元素也要浮动
浮动盒子只会影响后面的标准流，不会影响前面的标准流
第十七章清除浮动
清除浮动的本质：清除浮动元素造成的影响。如果父盒子本身有高度，则不需要清除浮动。
清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了
语法：
选择器 {clear：属性值；}
属性值：left 清除左侧浮动影响
right 清除右侧浮动影
both 同时清除左右两侧浮动影响
清除浮动策略：闭合浮动
清除浮动方法
1、额外标签法
在浮动元素末尾添加一个空标签（必须是块级元素）或
2、父级添加overflow属性
给父级添加overflow属性，将其属性设置为hidden、auto或scroll
3、父级添加after伪元素
.clearfix:after {
content:“”;
height: 0;
clear: both;
visibility；hidden;
}
.clearfix {
*zoom: 1;
}
代表网页：百度 网易 淘宝网
4、给父级添加双伪元素
.clearfix :before ,.clearfix:after {
content:“”;
display:table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
代表网页：小米 腾讯
第十八章PS切图
PS切图方式：图层切图、切片切图、PS插件切图
图层切图：
最简单的切图方式：（图层菜单
前端HTML+CSS学习笔记相关推荐
- Web前端 html css学习笔记（更新）
HTML CSS学习笔记 2021/9/29 网页简介 HTML简介 第一个网页 自结束标签和注释 文档声明 进制 字符编码 完整的文档结构 2021/9/30 VScode安装及使用 实体 meta ...
- 【前端】CSS 学习笔记（重要）
视频链接:https://www.bilibili.com/video/BV14J4114768 简写语法 先安装 Mithril Emmet 插件 (webstorm自带) css 单位 p → % ...
- 前端入门css学习笔记（十七）-----二级菜单
二级菜单的方法就是在一个<ul><li>中再嵌套一个<ul><li> 如下: <ul class="box"><l ...
- B站coderwhy前端html+css学习笔记 day10
一.cursor 可以设置鼠标指针在元素上面时的显示样式 1.常见设值 auto: 浏览器根据上下文决定指针的显示样式,比如根据文本或者非文本切换指针样式 default: 箭头效果 pointer ...
- 前端入门css学习笔记（十一）-----溢出属性之空余空间
内容溢出时可以用white-space:属性来设置如何处理元素内的空白. white-space:属性的值如下:
- 前端篇--------1.css学习笔记
1.css 单行文本换行溢出解决方案(css三件套) white-space:nowrap overflow:hidden text-overflow:ellipsis 2.css m ...
- 前端获取div里面的标签_web前端教程JavaScript学习笔记DOM
web前端教程JavaScript学习笔记 DOM一DOM(Document Object Model): 文档对象模型 其实就是操作 html 中的标签的一些能力 我们可以操作哪些内容 获取一个元素 ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- 360前端星计划学习笔记0410
360前端星计划学习笔记(五)正则的三个应用场景–王峰老师 360前端星计划学习笔记(六)NodeJS基础入门 文章目录 正则 正则表达式的创建和使用 创建正则表达式的两种方式 正则表达式的常见用法 ...
- CSS学习笔记-—学会用PS切图和取色—day03(基本用法)
CSS学习系列文章目录 HTML和CSS学习笔记--day01 HTML.CSS学习笔记--day02 css4.2.4参考手册.zip(免费下载) 文章目录 CSS学习系列文章目录 一.PS测量图片 ...
最新文章
- python模块（一）
- [TJOI2011] 卡片（网络流 + 质因子优化建图）
- 《深入理解Java虚拟机》读书笔记一
- php的filter input,php中filter_input函数用法分析
- 看unix高级编程时遇到apue.h找不到的问题
- Sophos 修复严重的防火墙 RCE 漏洞
- css中的伪类与伪元素的区别
- Android开发简单购物app源码,校园购物APP源码（适合新手学习）
- Xamarin开发教程如何使用Xamarin开发Android应用
- 常见面试算法题汇总（Android面试）
- 希尔伯特矩阵（Hilbert matrix）
- Docker数据管理：data container
- 渗透测试实验_安装Windows7旗舰版
- 反正切函数摘录自变频器
- 推荐几款软件界面模型设计工具
- 屏幕色彩(一)-已知混色光色点求配色比
- 向量或矩阵的微分计算
- 网易企业邮箱用Python发邮件
- (附源码)php校园二手交易网站 附源码041148
- java—— 图片转字符串、字符串转图片、java Base64用法