4.Web总结

最新推荐文章于 2022-07-26 16:18:39 发布

程序员西柚柚

最新推荐文章于 2022-07-26 16:18:39 发布

阅读量322

点赞数

分类专栏：技术总结

本文链接：https://blog.csdn.net/Frame_X/article/details/96594610

版权

技术总结专栏收录该内容

17 篇文章 0 订阅

订阅专栏

能查得到的都不是重点

web前端
1. html：负责搭建结构和内容（盖房子）
2. css：负责美化页面（装修）
3. JavaScript：负责给页面添加动态效果和动态内容 ()
4. jQuery: 对js进行封装，写的更少实现的更多
数据库

###HTML

学习html主要学习的就是有哪些标签标签有哪些属性标签和标签的嵌套关系
HyperTextMarkupLanguage：超文本标记语言，超文本指不仅仅是纯文本还包括字体相关的设置和多媒体信息(音频、视频、图片)

####创建第一个html页面

html页面结构介绍：

  <!DOCTYPE html><!-- 文档声明：告诉浏览器使用
  	html哪个版本的标准解析页面 -->
  <html><!-- 页面根标签 所有内容都在它里面 -->
  	<head><!--头标签：给浏览器看的内容  -->
  		<meta charset="UTF-8">
  		<title>第一个html页面</title>
  	</head>
  	<body><!--体标签：给用户看的内容 -->
  		
  	</body>
  </html>

###常见标签

内容标题

独占一行并且有上下外边距字体加粗
-
字体大小从大到小属性： align="left/right/center" 水平对齐方式

段落标签 p

独占一行并且有上下外边距

水平分割线 hr
换行 br
###列表标签
无序列表
ul:type li
有序列表
ol:type start起始值 reverse降序 li
定义列表
dl dt dd
列表嵌套

有序无序可以任意无限嵌套
列表嵌套练习：

Java基础
变量
数据类型
运算符
流程控制
if
switch
while
for
Java面向对象
JavaAPI
###分区标签(元素)

自身没有显示效果，用于管理多个标签
分区的作用：
1. 方便多页面复用
2. 对多个元素进行统一管理
块级分区元素： div
独占一行
行内分区元素: span
共占一行
h5新增的分区标签

头部

体部

脚部

头部

正文

标签分类

块级元素：独占一行
div h1-h6 p hr
行内元素：共占一行
span 字体加粗：strong和b 斜体：em和i 删除线：del和s 下划线u

空格折叠现象

如果出现多个空格只能识别一个
####实体引用

空格
小于号 <
大于号 >
换行

###图片标签

img
1. 相对路径：访问站内资源时使用相对路径
  - 图片和页面在同一目录，直接写图片名
  - 图片在页面的上级目录, …/图片名
  - 图片在页面的下级目录, 文件夹名/图片名
2. 绝对路径：访问站外资源使用绝对路径
  称为图片盗链，好处：节省自己网站资源，
  坏处：有可能找不到图片 -->
alt：图片不能显示时显示的文本内容
title: 鼠标悬停时显示的文本
width/height: 两种赋值方式
- 如果只给宽度赋值则高度会等比例缩放
  1. 像素
  2. 上级元素的百分比
支持 jpg/jpeg、png、gif

###图像地图

map 属性：name（唯一标识）
子标签
area: shape形状：rect/circle coords坐标：（矩形4个值对角线点的坐标，圆形三个值圆心坐标和半径）
href资源路径：页面资源和文件资源(能浏览浏览不能则下载)

###超链接a

如果a标签内部没有href属性则就是纯文本
target="_blank" 在新窗口中显示页面
a标签包裹文本就是文本超链接包裹图片就是图片超链接

###课程回顾

内容标题 h1-h6 独占一行上下外边距字体加粗 align=“left/right/center”
段落标签 p 独占一行上下外边距
水平分割线 hr
换行 br
列表标签

无序列表： ul:type li
有序列表： ol:type start reversed li
定义列表： dl dt dd
列表嵌套：有序和无序可以任意无限嵌套

分区标签： div 独占一行 span 共占一行

h5 新增 header article footer

标签分类

块级元素：独占一行包含：div h1-h6 p hr
行内元素：共占一行包括： span strong和b em和i del和s u

实体引用：空格小于号 < 大于号 > 换行 br
图片标签img

alt 图片不能显示时显示的文本
title 鼠标悬停时显示的文本
src 路径：
1. 相对路径：访问站内资源
  - 同目录直接文件名
  - 上级目录 …/文件名
  - 下级目录文件夹名/文件名
2. 绝对路径：访问站外资源好处节省本站资源坏处可能找不到图片
width/height: 两种赋值方式 1. 像素 2. 上级元素的百分比

图片地图 map: name area:shape形状 coords坐标
href：资源路径
超链接a 不写href属性就是纯文本 target="_blank"

###课程回顾

内容标题 h1-h6 字体由大到小独占一行字体加粗上下外边距，align=“left/right/center”
段落标签 p 独占一行上下外边距
水平分割线 hr
换行 br
列表标签

无序列表： ul:type li
有序列表： ol:type start reversed li
定义列表： dl dt dd
列表嵌套：有序和无序可以任意无限嵌套

分区元素

div：块级分区元素独占一行
span：行内分区元素共占一行
h5: header article footer

元素分类

块级元素： div h1-h6 p hr
行内元素： span strong和b em和i del和s u

实体引用

空格
小于号 <
大于号 >

图片标签 img

src：路径
1. 相对路径：访问站内资源
  - 同目录直接写文件名
  - 上级目录 …/文件名
  - 下级目录文件夹名/文件名
2. 绝对路径：访问站外资源
  - 好处:节省本站资源
  - 坏处：有可能找不到图片
alt: 当图片不能正常显示的时候显示的文本
title: 鼠标悬停时显示的文本
width/height: 两种赋值方式 1. 像素 2. 上级元素的百分比

图片地图map

name唯一标识结合图片里面的usemap使用
子标签 area： shape（形状rect/circle） coords（坐标，矩形对角线点的坐标，圆形圆心坐标+半径） href：资源路径，页面资源直接访问文件资源（能浏览则浏览不能浏览则下载）

超链接a

如果不写href属性则就是纯文本
target="_blank" 在新窗口中显示页面
a标签包裹文本是文本超链接包裹图片则是图片超链接
页面内部调转功能，如果目的地位置有元素则给元素添加id属性，如果没有元素则添加一个空的a标签作为锚，然后通过另外一个a标签跳转过去
```
  <a id="top"></a>
  <a href="#top">回到顶部</a>
```

###表格标签table

tr:table row td:table data th:table head 表头居中加粗
跨行：rowspan row(行)
跨列：colspan column（列）
caption 表格标题
分组（分区）标签：thead tbody tfoot
###表单form
表单作用：获取用户的各种数据提交到服务器

form表单的各种控件：文本框、密码框、单选、多选、下拉选、文本域等

  <form action="http://www.tmooc.cn">
  <!-- name:对传递参数的介绍，如果不写则不会传递数据
  所有的控件都需要添加name属性 
  placeholder：占位文本 
  maxlength:最大字符长度
  value：修改文本框的值
  readonly： 只读 只能看不能改-->
  用户名:<input type="text" name="username"
  placeholder="请输入您的用户名"
  maxlength="5" value="xxx"
  readonly="readonly"><br>
  密码:<input type="password" name="password"
  placeholder="请输入密码"><br>
  <!-- 两个控件必须有相同的name
  	checked设置默认选中
  	value：设置提交的数据不写则提交的是on -->
  性别:<input type="radio" name="gender" 
  	checked="checked" id="m" value="m"><label for="m">男</label>
  <input type="radio" name="gender" id="f" value="f"><label for="f">女</label> <br>
  爱好:<input type="checkbox" 
  name="hobby" value="code" id="code">
  <label for="code">撸代码</label>
  <input type="checkbox" 
  name="hobby" value="wz" checked="checked">王者农药
  <input type="checkbox"
   name="hobby" value="gdx">搞对象<br>
   <!-- 隐藏域：当需要给服务器传递一个数据这个数据又
   不希望给用户看的时候使用隐藏域 -->
  <input type="hidden" name="xxx" value="yyy">
  <!-- 日期选择器 -->
  生日：<input type="date" name="birthday"><br>
  <!-- 文件选择器 -->
  靓照：<input type="file" name="pic"><br>
  所在城市:<select name="city">
  	<option>请选择</option>
  	<option value="bj">北京</option>
  	<option selected="selected">上海</option>
  	<option>广州</option>
  </select><br>
  自我介绍：<textarea rows="3" cols="20" 
  name="intro" placeholder="说点啥。。。"
  	></textarea><br>
  	
  <input type="submit" value="注册">
  <input type="reset" value="啦啦啦">
  <input type="button" value="自定义按钮">  
  </form>

###CSS

Casecading 层叠 Style样式 Sheet表，作用：美化页面
####CSS的引入方式
有三种引入方式：

内联样式：在标签的style属性中添加样式代码，不能复用
```
 <h1 style="color: red">内联样式</h1>
```
内部样式：在head标签里面添加style标签，在标签体内通过选择器给元素添加样式，好处：是可以在当前页面复用，坏处：只能在当前页面复用
外部样式：在单独的css文件中添加样式代码，然后通过link标签把css文件引入，好处：可以多页面复用

引入方式的优先级：内联优先级最高，内部和外部相同后执行覆盖先执行的

###课程回顾
####day01

内部标题 h1-h6
段落标签 p
分割线 hr
换行 br
列表标签

无序列表： ul：type li
有序列表： ol：type start reversed li
定义列表： dl dt dd
列表嵌套：有序无序任意无限嵌套

分区元素

div：独占一行
span：共占一行
h5： header article footer

元素分类

块级元素：独占一行包括： h1-h6 p hr div
行内元素：共占一行包括： span strong和b em和i del和s u

实体引用

空格
小于 lt
大于 gt

图片img

src：相对路径：站内资源绝对路径：站外资源
alt：图片不显示的时候显示的文本
title：鼠标悬停时显示的文本
width、height： 1.像素 2.上级元素的百分比

图像地图 map

name
子标签 area：shape(circle/rect) coords(4,3) href路径

超链接a

target="_blank" 新窗口中显示页面
文本超链接和图片超链接
页面内部跳转
 xxx

表格标签table: border cellspacing cellpadding

子标签： tr td:rowspan colspan th caption thead tbody tfoot

表单form

action：提交地址
文本框 input type=“text” name value placeholder maxlength readonly
密码框 type=paasword name value
单选 type=radio name value id checked
多选 type=checkbox name value id checked
隐藏域 type=hidden name value
日期 type=date name
文件 type=file name
下拉选 select:name option:value selected
文本域 textarea: cols rows placeholder
提交按钮 type=submit
重置按钮 type=reset
自定义按钮 type=button

CSS 层叠样式表美化页面
引入方式：三种

内联：在标签的style属性中添加样式代码不能复用
内部：在head标签里面添加style标签可以当前页面复用
外部：在单独的css文件中写样式代码通过link标签引入可以多页面复用
引入方式的优先级：内联最高内部和外部相同后执行覆盖先执行的

###选择器

标签名选择器

匹配指定标签名称的所有标签
格式：标签名{样式代码}

id选择器

匹配指定id的某一个元素
格式： #id{}

类选择器

匹配指定class的某一类元素
格式： .class{}

分组选择器

将多个选择器合并成一个选择器
格式： div,#abc,.c1{}

属性选择器

通过属性的名称和值去选择匹配的元素
格式： div[属性名=‘值’]

子孙后代选择器

格式： div div span{} div里面的div里面的所有span

子元素选择器

格式： div>div>span{} div里面的div里面的子元素span

伪类选择器

用于选择元素的状态：未访问link 访问过visited 悬停hover 点击active

任意元素选择器

选中页面中所有的元素
格式： *{}

###颜色的赋值方式

三原色：红绿蓝 red green blue 每个颜色的取值0-255

颜色单词 red
6位16进制赋值 #ff0000 （用的最多）
3位16进制赋值 #f00
3位10进制赋值 rgb(255,0,0)

4位10进制赋值 rgba(255,0,0,1) a=alpha透明度取值0-1 值越小越透明
###背景图片

 /* 设置背景图片 */ 
 background-image: url("../imgs/1.jpg");
 /* 背景图片宽高 */
 background-size:100px 100px;
 /* 禁止重复 */
 background-repeat: no-repeat;
 /* 控制位置 left/right/top/bottom/center 
 	通过百分比控制位置  */
 background-position: 90% 90%;

###布局相关样式（盒子模型）

盒子模型：宽高+外边距+边框+内边距

####宽高

width、height：赋值方式两种： 1. 像素 2. 上级元素百分比
行内元素不能修改宽高，由内容决定
####外边距
什么是外边距：元素距上级元素或相邻兄弟元素的距离称为外边距
赋值方式：
/* 单独给某一个方向添加外边距
margin-left/top/right/bottom*/
/* margin-top: 50px;
margin-left: 30px;
margin-bottom: 20px; /
/ margin: 50px; / / 四个方向全是50 /
/ margin: 20px 40px; / / 上下20 左右40 /
/ margin: 0 auto; // 水平居中 /
/ margin: 10px 20px 30px 40px; / / 上右下左顺时针 */
块级元素上下相邻同时添加下外边距和上外边距取最大值，行内元素左右相邻，同时添加左外和右外相加
上下相邻取最大左右相邻相加
行内元素上下外边距无效
当元素的上边缘和上级元素上边缘重叠时，给元素添加上外边距，会出现粘连问题，给上级元素添加overflow：hidden 解决

###课程回顾：

CSS层叠样式表美化页面
引入方式：

内联：在标签的style属性中添加样式代码不能复用
内部：在head标签里面添加style标签通过选择器给元素添加样式可以当前页面复用
外部：在单独的css文件中添加样式代码在页面中通过link引入，可以多页面复用
优先级：内联优先级最高，内部和外部一样后执行覆盖先执行的

选择器

标签名选择器 div{}
id选择器 #id{}
类选择器 .class{}
分组 div,#id,.class{}
属性选择器标签名[属性名=‘值’]{}
子孙后代 div p span{}
子元素选择器 div>p>span{}
伪类选择器 a:link/visited/hover/active
任意元素选择器 *{}

颜色赋值

单词 red
6位16进制 #ff0000
3位16进制 #f00
3位10进制 rgb(255,0,0)
4位10进制 rgba(255,0,0,0-1)

背景图片

background-image: url(“路径”)
background-size:100px 200px;
background-repeat: no-repeat;
background-position: 单词left/right/top/bottom/center 百分比

盒子模型

由外边距+边框+内边距+宽高组成
宽高： width、height 赋值方式：1.像素 2.上级元素的百分比
行内元素不能修改宽高由内容决定
外边距：元素距上级元素或相邻兄弟元素的距离
margin-left/top/right/bottom:
margin:10px; 四个方向10
margin:10px 20px; 上下10 左右20
margin: 0 auto; 水平居中
margin:10px 20px 30px 40px ; 上右下左顺时针
行内元素上下外边距无效
左右相邻相加上下相邻取最大
粘连问题：当元素的上边缘和上级元素的上边缘重叠时给元素添加上外边距会出现粘连问题，通过给上级元素添加 overflow:hidden解决

###边框

border: 边框粗细边框样式颜色;
border-left/right/bottom/top:边框粗细边框样式颜色;
行内元素边框全部生效，影响元素所占宽度但不影响元素所占高度
###内边距
什么是内边距：元素边框距内容的距离
给元素添加内边距会影响元素的宽高
如果移动的是元素的子元素则给子元素添加外边距，如果移动的是元素的文本内容则只能使用内边距
行内元素内边距全部生效，影响元素所占宽度但不影响元素所占高度

###特殊的行内元素

宽高：不能修改宽高
外边距：上下无效
边框：不影响所占高度
内边距：不影响元素所占高度

###文本相关

文本水平对齐方式
text-align: left/right/center
文本修饰
text-decoration:overline/underline/line-through/none
文本颜色
color:red;
文本阴影
text-shadow: 颜色 x偏移值 y偏移值浓度（值越大越模糊）
行高
line-height:30px;
###字体相关
/* 字体大小 /
font-size: 30px;
/ 字体加粗 /
font-weight: bold/normal;
/ 斜体 /
font-style: italic;
/ 字体设置 */
font-family: “黑体”;
###CSS的三大特性
继承性：元素可以继承上级元素的文本和字体相关的样式，个别标签自身特有的样式不受继承影响如：超链接a标签的字体颜色、h1-h6的字体大小。
层叠性：当不同选择器选择到同一个元素的时候，如果作用的样式不同则所有样式全部层叠到一起（全部生效），如果作用的样式相同则由优先级决定
优先级：作用范围越小优先级越高， id>class>标签名>继承(间接选中)

####元素的显示方式display

block: 块级元素默认的显示方式，可以修改宽高
inline: 行内元素默认的显示方式，可以共占一行
inline-block: 行内块，可以修改宽高也可以共占一行
####行内元素垂直对齐方式vertical-align
上对齐 top
下对齐 bottom
中间对齐 middle
基线对齐 baseline（默认）

###定位方式 4+1
####position定位

静态定位（文档流定位）默认： static，块级元素从上到下排列，行内元素从左向右排列，元素的位置通过元素的外边距控制。
相对定位：relative，元素不脱离文档流，通过left/right/top/bottom从元素初始位置做位置偏移
当元素需要改变位置，并且其它元素不受影响的情况使用相对定位
绝对定位：absolute，元素脱离文档流，通过left/right/top/bottom移动元素，元素坐标相对于窗口(默认)或某一个上级元素
当元素需要改变位置，并且不希望保留原来的位置时使用绝对定位
固定定位：fixed，元素脱离文档流，通过left/right/top/bottom移动元素，元素坐标只相对于窗口。
当元素需要固定在窗口的某个位置时使用固定定位

####浮动定位

脱离文档流，元素从当前所在行向左或向右浮动，当撞到上级元素边框或其它浮动元素时停止
浮动元素一行装不下会自动换行，换行时有可能被卡主
当元素上面有其它元素浮动后则元素会顶上去，如果不希望元素往上移动可以给元素添加clear属性。
当元素的所有子元素全部浮动后，自动识别的高度为0，可以通过给元素添加overflow：hidden解决此问题。
通过外边距控制元素位置
当需要把纵向排列的元素改成横向时使用浮动定位
###溢出设置overflow
hidden ：超出范围不显示
visible（默认）：超出范围显示
scroll：超出范围滚动显示

程序员西柚柚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
4.Web总结

能查得到的都不是重点web前端html：负责搭建结构和内容（盖房子）css：负责美化页面（装修）JavaScript：负责给页面添加动态效果和动态内容 ()jQuery: 对js进行封装，写的更少实现的更多数据库###HTML学习html主要学习的就是有哪些标签标签有哪些属性标签和标签的嵌套关系HyperTextMarkupLangu...
复制链接

扫一扫