总结：
1. web前端
- HTML: 负责搭建页面结构和内容 （盖房子 毛坯房）
- CSS: 负责美化页面 （装修）
- JavaScript:负责给页面添加动态效果和动态内容
- JQeury: 是一个js框架，为了简化js开发而生
2. 数据库
待更新
html学习内容
1:主要学习有哪些标签（tag或标记）
<html>
2:标签有哪些属性
3:标签和标签之间的嵌套关系
1、1 HTML介绍
- Hyper Text Mark Language:超文本标记语言，超文本：指不仅仅是纯文本还包括字体的各种设置（大小、颜色、样式等）和多媒体(图片、视频、音频)相关。
- HTML部署在服务器上，运行在浏览器上
- 可以理解为标签固定的XML
1、2 html结构
<!-- 文档声明
告诉浏览器使用html哪个版本的标准解析页面
下面的就是h5标准的文档声明-->
<!DOCTYPE html>
<!-- 根标签 -->
<html>
<!-- 头：里面的内容是给浏览器看的，指示浏览器在何处可以找到样式表，包含的脚本，等等 -->
<head>
<!-- mata元素提供关于html文档的元数据
如：告诉浏览器用的是"UTF-8"字符集
常用属性有content http-equiv、charset-->
<meta charset="UTF-8">
<!-- 设置页面标题，如：“百度首页” -->
<title>百度首页</title>
</head>
<body>
</body>
</html>
一、body内部常见的标签
1、 文本标签
1.1 文本标题标签
- h1-h6
- 特点： 独占一行，自带上下外边距
- 属性： align=left/right/center 左对齐 右对齐 中间对齐
1.2 段落标签
- p
- 特点： 独占一行，自带上下外边距
1.3 水平分割线
- hr
1.4 换行
- br
1.5 列表标签
- 无序列表： ul（type） li
- 有序列表： ol(type start reversed) li
- 定义列表： dl dt dd 自带层级效果
- 列表嵌套： 有序和无序列表可以任意无限嵌套
1.6 分区标签
- 作用：用于统一管理多个标签 类似于容器，分区标签自身没有显示效果
- span：行内分区元素，共占一行
- div：块级分区元素，独占一行
-
html5标准中新增了几个分区元素
<div>头部</div> <div>体部</div> <div>脚部</div> 取代上面的写法 更直观 <header>头部</header> <article>正文</article> <footer>脚部</footer>
2、标签(元素)分类
-
块级元素：独占一行
-div -h1-h6 -p -hr -
行内元素：共占一行
-行span -加粗 strong和b -斜体 em和i -删除线del和s -下划线u
3、 实体引用（特殊字符）
- 空格： 有折叠问题 nbsp牛逼是屁
- 小于号： < lt老铁
- 大于号： > gt干他
- html： how to ml
4、图片标签img
-
src:路径
- 相对路径：访问站内资源
a. 同级目录 直接写图片名
b. 上级目录 …/图片名(有几个上级写几个…/)
c. 下级目录 文件夹名/图片名 - 绝对路径：访问站外资源，好处节省网站资源，坏处可能找不到图片
- 相对路径：访问站内资源
-
alt:
当图片不能正常显示时显示的文本
-
title:
当鼠标悬停时显示的文本
-
width/height:
宽高，赋值方式：1. 像素 2. 上级元素的百分比 如果只设置宽度 高度会等比例缩放
-
支持的图片格式：
jpg/jpeg png(支持透明色) gif动图
5、图片地图map
-
map属性：
name 代表地图的唯一标识
-
子元素：
area
-
area属性：
1、shape形状(矩形rect、圆形circle) 2、coords坐标（矩形四个值两个对角线点的坐标，圆形三个值圆心坐标和半径） 3、href:资源路径 页面资源和文件资源（浏览器能浏览则浏览 不能则下载）
6、超链接a
-
如果a标签不写href属性则就是纯文本
-
target=_blank 开启新的窗口显示该页面，如果不写默认是从当前窗口跳转
-
如果a标签包裹文本内容则是文本超链接，如果包裹的是图片则是图片超链接
-
页面内部跳转
- 设置锚点用于定位
- 通过超链接跳转到锚的位置 回到顶部
如果跳转的目的地有标签则直接给标签添加id属性即可
7、表格table
属性：
-
border边框的粗细
-
cellspacing：单元格间距和单元格距外边框的距离
-
cellpadding：单元格的内边距
-
跨行rowspan 跨列colspan
子元素：
-
caption表格的标题
-
tr td
-
th table head 表头，加粗并居中
-
分区标签：thead tbody tfoot 对多行进行统一管理（比如统一添加样式）分区标签自身没有显示效果
8、表单form
- 作用：获取用户输入的各种数据把数据提交到服务器
- 主要学习有哪些控件：文本输入框、密码框、提交按钮、单选、多选、下拉选、日期选择器、文件选择器等
- 文本输入框 input type=text name value placeholder占位文本 最大长度maxlength 只读readonly
- 密码框 input type=password name
- 单选 input type=radio name value 默认选中checked 通过label标签扩充点击范围
- 多选 input type=checkbox name value 属性和单选一样
- 日期 input type=date name
- 文件选择 input type=file name
- 隐藏域 当需要给服务器提交数据但是此数据不需要给用户展示的时候使用 input type=hidden name value
- 下拉选 select:name 子标签 option:value selected默认选中
- 文本域 textarea:name rows行 cols列 占位文本placeholder
- 提交按钮 input type=submit value修改文本内容
- 重置按钮 input type=reset value修改文本内容
- 自定义按钮 input type=button value修改文本内容
CSS学习内容
- CSS：Casecading层叠 Style样式 Sheet表, 用于美化页面
一、CSS的引入方式
- 内联样式:在标签的内部添加style属性,在属性内部添加css样式代码,弊端:不能复用
- 内部样式:在head标签内部添加style标签,通过选择器给元素添加样式,好处可以复用 弊端:只能在当前页面复用
- 外部样式:在单独的css文件中通过选择器给元素添加样式,在html页面中通过link标签引入样式文件, 好处:可以多页面复用
三种引入方式的优先级
- 内联优先级最高
- 内部和外部优先级相同,后执行覆盖先执行
二、九种选择器
- 标签名选择器
- 格式: 标签名{样式代码}
- 选取页面中所有的指定标签
- id选择器
- 格式: #id{样式代码}
- 当需要选择页面中的某一个元素时使用id选择器
- class选择器
- 格式: .class{样式代码}
- 当需要选取页面中某一类元素(多个)时使用class选择器
- 属性选择器
- 格式: 标签名[属性名=‘属性值’]{样式代码}
- 通过标签的属性去选择元素
- 分组选择器
- 格式: div,#id,.class{样式代码}
- 将多个选择器合并成一个选择器
- 子孙后代选择器
- 格式: div span{样式代码}
- 选取div里面所有的span(包括子元素和所有后代元素)
- 子元素选择器
- 格式: div>span{样式代码}
- 选取div里面所有的子元素span
- 伪类选择器
- 用于选取元素的状态
- 未访问状态link/访问过状态visited/点击状态active/悬停状态hover
- 任意元素选择器
- 格式: *{样式代码}
- 选中页面中所的元素
三、颜色赋值
- 三原色:rgb red green blue 红 绿 蓝 每个颜色的取值是0-255
- 通过6位16进制赋值 #ff0000
- 通过3位16进制赋值 #f00
- 通过3位10进制赋值 rgb(0-255,0-255,0-255)
- 通过4位10进制赋值 rgba(0-255,0-255,0-255,0-1) a=alpha 透明度 值越小越透明
四、背景图片
/* 设置背景图片 */
background-image: url("../imgs/a.jpg");
background-size: 100px 100px;
/* 禁止重复 */
background-repeat: no-repeat;
/* 控制背景图片的位置
left right top bottom center*/
background-position: 10% 10%;
五、盒子模型
在这里插入图片描述
- 盒子模型由 宽高+外边距+内边距+边框组成
5.1 盒子模型之宽高
- 两种赋值方式:
- 像素
- 上级元素的百分比
- 行内元素不能修改宽高 宽高由内容决定
5.2 盒子模型之外边距
-
什么是外边距:元素距上级元素或相邻兄弟元素的距离称为外边距
-
赋值方式:
margin-left/top/bottom/right:20px; margin:10px; 四个方向10px margin:10px 20px; 上下10 左右20 margin:0 auto; 水平居中 margin:10px 20px 30px 40px; 上右下左 顺时针 -
行内元素上下外边距无效
-
左右相邻相加 上下取最大
-
当元素的上边缘和上级元素的上边缘重叠时会出现粘连问题,在上级元素中添加overflow:hidden 解决
5.3 盒子模型(Box Model)之边框
- 单个方向添加边框:
border-left/right/top/bottom: 粗细 样式 颜色; - 四个方向添加边框
border:粗细 样式 颜色; - 行内元素边框不影响元素所占高度
- 圆角:
border-radius: 值越大越圆 超过宽高一半时变成圆形(前提宽高一样)
5.4 盒子模型之内边距
- 什么是内边距: 元素边框距内容的距离
- 如果需要移动元素的文本内容则必须使用内边距,如果需要移动元素的子元素内容可以使用两种方式1. 给子元素添加外边距 2.给元素添加内边距(会影响元素的宽高)
- 行内元素内边距不影响元素所占高度
六、 文本相关样式
- 水平对齐方式
text-align:left/right/center - 文本修饰
text-decoration:overline/underline/line-through/none - 文本阴影
text-shadow:颜色 x偏移值 y偏移值 浓度(值越小越清晰) - 行高
line-height: 像素 - 文本颜色
color:red;
6.1 字体相关
- 字体大小 font-size
- 字体加粗 font-weight:bold/normal(去掉加粗效果)
- 斜体 font-style:italic
- 字体设置 font-family: xxx,xxx,xxx;
七、CSS的三大特性
- 继承性: 元素可以继承上级元素的部分样式(包括文本相关和字体相关) ,个别标签自带效果不受继承影响,如:h1-h6自带字体大小不受影响,超链接a标签自带字体颜色也不受继承影响.
- 层叠性: 不同的选择器有可能作用到相同某一个元素,如果作用的样式不同则全部生效(层叠到一起全部生效),如果作用的样式相同则由优先级来决定
- 优先级: 作用范围越小优先级越高 id>class>标签名>继承 , 直接选中优先级高于间接选中(继承属于间接选中)
八、 (内容溢出元素框)溢出设置overflow
- hidden 隐藏
- visible 显示
- scroll 滚动显示
九、 显示方式display
- block: 块级元素的默认值,独占一行,可以修改宽高
- inline: 行内元素的默认值,共占一行,但是不能修改宽高
- inline-block:行内块, 共占一行并且可以修改宽高
在这里插入图片描述
十、行内元素的垂直对齐方式vertical-align
- top 上对齐
- bottom下对其
- middle 中间对齐
- baseline 基线对齐
十一、定位方式 4+1
11、1 position定位
-
静态定位static(默认)
也称为文档流定位,块级元素从上到下,行内元素从左向右 -
相对定位relative
-
元素不脱离文档流,通过top/bottom/left/right让元素从初始位置做偏移 - 当需要移动某个元素,但不希望其它元素受影响时使用. -
绝对定位absolute
元素脱离文档流,通过top/bottom/left/right让元素相对于窗口做位置偏移(默认)或相对于某个上级元素做位置偏移(在上级元素中添加相对定位) - 当需要往页面中添加一个元素,但不希望影响其它元素的位置 - -
固定定位fixed
元素脱离文档流,通过top/bottom/left/right让元素相对于窗口做位置偏移
11、2 浮动定位float
- 元素脱离文档流,元素从当前所在行向左或向右浮动,当撞到上级元素边框或其它浮动元素时停止
- 通过外边距控制元素的具体位置
- 一行装不下会自动换行, 有可能被卡住
- 如果元素的所有子元素全部浮动,则自动识别的高度为0,通过给元素添加overflow:hidden可以解决
- 如果元素浮动,则会脱离文档流 后面的元素会顶上去,如果不希望顶上去则给后面的元素添加clear:both
- 当需要把纵向排列的元素改成横向排列时使用浮动定位
附：元素与标签统计图：
扫一扫
3870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
