前端学习记录第一周的总结-CSDN博客

1.前端三剑客之一html(超文本标记语言)

常用的文本标签

1.标题标签

h1-h6（从大到小自动加粗）

2.分割线标签

<hr/> (没有开始标签)

3.段落标签

<p></p> （前后行都有换行效果）

4. 段落缩进标签

<blockquote></blockquote>（长引用）

5.滚动标签

                <marquee></marquee>

常用的属性:

scrollamount:设置滚动速度:正整数的值（值越大，速度越快）

behavior：滚动的方式:

slide：滚动某边框停止掉

scroll: 穿梭滚动（默认值）

alternate：交替滚动

direction:滚动方向

left:默认值:从左到右

right：从右到左滚动

up：给上面滚动

down：给下面滚动

bgcolor：背景颜色（颜色英文单词即可）

6.格式化标签

加粗：<strong></strong> <b></b>

斜体：<i></i> <em></em>

加粗标签/斜体标签

加粗标签：strong和b都是同样的效果，前者是一种”文章语气强调“

斜体标签: i和em同样的效果，前者i是普通斜体字，后者是”语气强调“

7.换行标签：

<br/>

转义字符

  © 等价于 ©
           ® 等价于 ®
             等价于一个空格键
           &ensp; 等价于两个空格键
           < 等价于 <
           > 等价于 >

图像标签

图像链接标签：<img>

1.可以包裹在a标签中，图像链接

2.可以给整个页面设置背景颜色

body属性background=”图片地址“

超链接

超链接标签：a标签 <a></a>

a标签属性

href:链接到的资源地址url（统一资源定位符）

url：统一资源定位符组成：

协议+域名+端口：网站默认都是端口80（可以省略不写）

如：http://www.baidu.com

协议：

file:// 本地文件协议

http:// http协议

https:// 适合发送隐私数据

jdbc:mysql:// （jdbc的mysql协议）

thunder:// 迅雷协议

mailto：邮件协议

target:打开资源文件的方式

_blank: 新建一个窗口打开

_self: （默认值），当前窗口直接打开

超链接的使用方式

方式一：跳转链接 a标签的href：从一个页面链接到另一个页面

方式二：锚链接

同一个页面下

首先创建锚点（跳转标记）

<a name="锚点名称"></a>

再创建跳转到锚点的链接地址

<a href="#锚点名称">文本</a>

在不同页面下

1.创建锚点（跳转标记）

                                                                         <a name="锚点名称"></a>

2.创建跳转到锚点的链接地址

<a href="跳转到另一个页面地址的url地址#锚点名称">文本</a>

表格标签

表格标签：table

子标签：caption：指定表格的标题内容

tr：行标签

th：表头

td：数据表内容普通单元格

table标签的常见属性

border="表格边框大小"

cellspacing="单元个的边框和table边框的距离"

width和height："表格宽度和高度像素或者百分比"

bgcolor="背景颜色"

表格单元格的合并属性：

合并行（行合并）rowspan="所占的单元格的数量"

合并列（列合并）colspan="单元格的数量"

表单标签

        最常见表单的应用场景:
               用户通过表单提交,将用户数据提交到服务器端
               登录或者注册

表单标签form

<form></from>

常见的表单项

<input type="text"/> 文本输入框

<input type="password"/> 密码输入框

<input type="radio"/> 单项按钮

<input type="checkbox"/> 复选框

<input type="file"/> 文件上传组件

<input type="data"/> 日期组件 yyy/MM/dd(这种格式年份/月份/月中日期)

<input type="button" value="按钮的默认值"/> 普通按钮

<input type="submit"/> 特殊的提交按钮：将表单项提交到form的action地址上

<input type="rest"/> 重置清空

<input type="email"/> 输入有效的时候必须有@标记

下拉菜单

<select>

<option>下拉选项</option>

                </select>

文本域

<textarea><textarea/>(写一段文本如网页简历，自我介绍)

（rows:指定行数

cols:一行支持的列数）

day02

1. 块标签以及列表标签(无序列表/有序列表)

1.块标签

<div><div/>

块级元素：这些标签会以新的行开始或者结束

h1-h6标题标签

<p></p>

<table></table>

内联元素（没有新行开始）

<b> ,<td></td>,<a></a><img/>,<span></span>

div标签应用场景：

应用在网页布局中

使用div将任意html元素（标签）包裹起来，

再通过css（Casading Style Sheet:层叠式样式）进行样式修饰达到一种层级布局的效果

div的特点：占一行空间内容，属于块级元素，后面换行

2.无序列表

ul标签子标签li（列表项）

<ul>

<li></li>

                </ul>

ul属性：

type="指定列表项前面的标记"

disc:实心圆点（默认值）

cicle：空心圆点

square：实心小正方形

3.有序列表

ol:有序列表标签

<ol>

<li></li>

                </ol>

ol标签属性type：指定列表项前面的标记

默认值：1........

其他标记

A

I

4.自定义列表

dl:定义自定义列表

dt自定义的列表项

dd自定义列表项中的具体内容

<dl>

<dt></dt>

<dd></dd>

                </dl>

day03

1.框架标签(重点,模拟后台管理系统页面搭建)

frame:框架标签

一个frame包含一个html页面，src="链接的html页面地址"

name="给页面所在的框架起一个名称"

frameset:框架集

当整个结构有两个或者两个以上的html页面组成，必须使用框架集frameset

rows:由上而下划分的每一个部分所占用的权重百分比；

cols:从左而右划分每一个部分所占的权重百分比

注意事项：frameset不能和body共存(要么在body的前面，要么将body删掉)

如果超链接在框架中 frame使用，target指定为在哪一个frame中打开target必须和frame中的name属性名称一致

2.h5新增video元素

浏览器需要flash插件，浏览器通过video元素进行视频的播放

video元素

属性：width：宽度

height：高度

controls="controls" h5的video控制视频播放

source子标签：指定加载视频链接地址src属性

type="媒体类型举例：.mp4/.mp3/.ogg等等都是媒体类型"

3.CSS的使用方式

1.行内样式（如果某个页面中的某个位置单独去使用某个样式，可以使用行内样式）

每一个标签都有style属性="css代码"

样式名称：值;样式名称2:值2；.....

2.内部样式(内联)

在style标签体通过

选择器{

样式属性名称:值;

样式属性名称2:值2;

                }

优点：一次性控制多个标签

弊端：css代码和html标签混合使用，不利于后期管理（阅读性差）

3.外部方式（外联）导入CSS文件

link的href属性导入css文件地址

rel：固定写法 stylesheet：系统库中的叠层样式表

4.CSS选择器

通过选择器选中html标签，设置标签样式

选择器分类

1.id选择器（同一页面标签id属性值必须"唯一"）

#id属性值{

样式名称:值；

                                }

优先级最大

2.class 类选择器（一类元素）

同一页面标签元素的class属性值是可以重复的

.class属性值{

属性名称：值;

属性名称2：值2；

                                        }

3.标签名称选择器

标签名称{

样式属性:值；

...

                                        }

后代选择器（包含）div span{}

后代选择器：只要被包含在指定标签中都会被选中

选择器1 选择器2{

属性名称：值..；

                                       }

子元素选择器

选择器1>选择器2{ 选择器2所在的标签是选择器1选中标签的子标签

属性名称：值..;

                                        }

并集选择器:同时选中多个标签

选择器1,选择器2....选择器n{

样式属性：值;.....

                                }

伪类选中器（描述元素的一种状态）

锚伪类：

将一个标签的状态划分为以下几种:

1.鼠标未访问过的状态 link

2.鼠标经过这个元素的状态 hover

3.鼠标经过了并且点击在这个元素状态：active

4.鼠标访问的状态（上面3）之后的，点击并且松开了 visited

选择器：状态名称（不区分大小写）{

样式属性:值;.....

                                        }

提示1：在CSS定义中，a:hover 必须被置于 a:link和a:visited之后，才是有效的。

提示2：在CSS定义中，a:active必须被置于a:hover之后，才是有效的。

提示3.伪类名称对大小写不敏感

优先级：

id选择器>class选择器>标签名称选择器

5.CSS字体相关的样式属性

font-family:字体库的类型：楷体/宋体/其他/黑体

font-style:字体样式

normal:文字正常显示（正常体：默认值）

italic:文字"斜体"

font-weight 属性指定字体的粗细

适当加粗:bold

font-sizy:字体大小

6.CSS文本样式

color：颜色;

text-align:文本对齐方式

left:默认值左对齐

center:居中

right:右对齐

text-decoration:文本装饰

underline:设置下划线

overline:上划线

line-through:中划线

none:去掉文本修饰

text-transform:文本转换：设置字母大写:uppercase/lowercase小写

text-inden:文本缩进:第一行文本设置缩进效果

line-height 属性用于指定行之间的间距

word-spacing:单词间距

系统认定中文，必须两个字组成一个单词

text-shadow 属性为文本添加阴影

垂直和水平阴影默认2px 后面可以指定颜色

7.CSS边框样式属性

边框有四个边：

颜色/宽度/样式（必须有）（单实线/虚线/点/双实线）

边框颜色

边框宽度

边框样式

有简写属性格式(将四个边的颜色/宽度和样式进行简写)

border-color:

border-widh:

border-style:

特点：默认的方向上右下左

某一边没有设置颜色/宽度/样式，会补齐对边的颜色/宽度/样式

div{

          给四个边设置边框的颜色

                        border-top-color: red;

                        border-bottom-color: blue;

                        border-left-color: orange;

                        border-right-color: darkgray;

                        border-color: blue ;

给四个边的边框设置宽度

                        border-top-width: 10px;

                        border-bottom-width: 20px;

                        border-left-width: 30px;

                        border-right-width: 40px;

                        border-width: 10px;

  四个边框的样式
                            solid:单实线
                            double:双实线
                            dotted:点
                            dashed:虚线

                        border-top-style: solid;

                        border-bottom-style: dashed;

                        border-left-style: dotted;

                        border-right-style: double;

                        border-style: solid ;

                        边框的简写属性

                        border: 宽度样式颜色;

             }

day04

1.CSS背景

         background-color:背景颜色

background-image:背景图像（这个图像尺寸如果没有屏幕这么大，图像会出现x轴和y轴重复）

background-image:url(img/adv.jpg);

background-repeat

设置图像是否重复以及如何重复

repeat:x轴/y轴重复（默认值：跟图像的分辨率尺寸相关）

repeat-x:x轴重复

repeat-y:y轴重复

no-repeat:不重复

background-position:left top;

背景附着：fixed 背景图像固定,不会随着页面滚动而滚动

scorll:会随着其余部分滚动而滚动

background的简写属性

background:background-color background-image background-repeat background-position

2.CSS列表样式

list-style-type 设置列表项的标记类型

disc:默认值实心圆点

circle:空心圆点

square:实心小正方形

none:去掉列表项的标记

display:inline; 让列表项的内容水平排列

list-style-image:自定义列表前面的标记类型

url(自定义图片地址)

3.CSS表格

border-collapse 属性设置是否将表格框折叠为单一边框：

collapse:合并

4.盒子模型

万物皆盒子

通过div将一个大的页面划分成很多块;

每一个块里存储着很多html元素，然后通过css样式控制视图

控制div内边距

padding

如左内边距：padding-left

控制div外边距

margin

如左外边距:margin-left

5.盒子模型的使用

盒子模型：将任意标签都可以使用div包起来

                body{
           background-image: url(img/bg.jpg);
       }


       /* 修饰外面大的div样式 */
           #formDiv{
               border: 1px solid black;
               width: 420px;
               height: 300px;

               /* 边框四个角为圆角 */
               border-radius: 5px;

               /* 外边距的简写属性 */
               /* margin-left: 400px;
               margin-top: 120px; */
               margin: 120px 0 0 400px;
               /* 设置背景图像 */
               background-image: url(img/index_3.jpg);

           }

           /* 给id="nameDiv"控制样式 */
           #nameDiv{
               /* 外边距 */
               margin: 40px 0 0 100px;
           }
           /* 给 id="pwdDiv"控制样式 */
           #pwdDiv{
               /* 外边距 */
               margin: 20px 0 0 100px;
           }
           /* 给id="repwdDiv"控制样式 */
           #repwdDiv{
               /* 外边距 */
               margin: 20px 0 0 82px;
           }
           /* 发给id="emailDiv"设置样式 */
           #emailDiv{
               /* 外边距 */
               margin: 20px 0 0 100px;
           }
           /* 控制id="btnDiv"样式 */
           #btnDiv{
               /* 外边距 */
               margin: 20px 0 0 130px;
           }
           /* 给class="register"设置背景色 */
           .register{
               background-color: greenyellow;
           }
           .register:hover{
               background-color: darkgreen;
           }



6.CSS浮动属性

CSS浮动

浮动的框可以向左或向右移动直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中（不占据一行空间，单独的浮块），所以文档的普通流中的块框表现得就像浮动框不存在一样

浮动属性float：left/right 左浮动/右浮动

面试题：

1.http协议的执行流程



超链接 href属性="http://192.168.0.1:端口号/后端接口地址"
图像标签 src属性="http://ip或者域名:端口号/服务器端存储的验证码接口"

都属于"浏览器行为",浏览器----->发送请求----->被服务器接收
               浏览器       <----   响应 <--- 解析完数据
   http协议的执行流程:先去本地磁盘上c:\windows\system32\drivers\etc-->hosts文件

       localhost 127.0.0.1 回环地址

找到了,直接访问;找不到,就需要调用网卡驱动---->联网---->访问DNS服务器(网络运营商)
                记录大量常用的网站域名以及ip地址
                www.baidu.com 10.12.156.18

dns服务器访问---百度服务器---->回显给用户"首页"

2.form表单提交的get和post的区别?(面试题)

        浏览器默认的提交方式:GET
1)是否将表单的数据提交到地址栏上
       form action="http://ip地址货域名/登录的接口"
   get是可以提交到地址栏上 http://"http://ip地址货域名/登录的接口login?表单项的name属性值=输入的内容&name属性值2=内容2.... (地址栏携带参数)
   post提交,不会提交地址栏上---在浏览器--f12--->网络部分可以查看到负载数据

2)是否安全(相对性)
get提交,相对post不安全,将数据信息(涉及到隐私数据)提交到地址上
post,相对安全 ---浏览器网络--->负载---查看form data
3)提交数据大小是否有限制
   get,有限制(地址栏是不能无限去拼接数据 key=value&key2=value2...)
   post,没有限制(后端io去读前端post数据)
           io:Input /output