前端学习日志-1

杯似坛酒

已于 2022-01-26 10:47:17 修改

阅读量269

点赞数

文章标签：前端 node.js 后端

于 2022-01-22 20:26:44 首次发布

本文链接：https://blog.csdn.net/abundoning/article/details/122594800

版权

前端学习：

html-一个赤裸的人

css-赋予人物衣物服饰

gs-赋予人物行动能力

写静态页面需要：html； css

html需掌握(重点要求)：20个左右的重点标签——(一套浏览器认识的规则)

css需掌握(重点要求)：一部分必备操作(位置，移动，大小，颜色)

所有Web框架的本质都是socket服务端

测试方法：找到html文件路径，直接通过浏览器打开

----------html书写规则：

由pycharm创建生成的html文件

<!DOCTYPE html>     #默认对应规则
<html lang="en">    #<html>：外层标签(有且仅有一个)，称为“html标签”
                    #lang="en"表示标签内部的属性
<head>              #<head>：内层标签，称为“head标签”
    <meta charset="UTF-8">    #定义编码类型，自闭和标签
    <title>Title</title>      #定义标头，手动闭和标签
</head>
<body>              #<body>内层标签，称为“body标签”

</body>
</html>

由上：

标签分为自闭和标签（meta、br）、主动闭合标签（title、）；

head标签中（理解）：

    <meta http-equiv="Refresh" Content="5">     #定义刷新(http-equiv="Refresh")

<title>

<link rel='shortcut icon' href='image/pig.ico'>    #定义标头图标(rel='shortcut icon')

----------body标签中（掌握，重点都在这）：

各类特殊图标：

&nbsp—— 加空格

&gt——加大于号

<a href="https://www.bilibili.com/">哔哩&nbsp;&nbsp;&nbsp;哔哩</a>    #加空格
<a href="https://www.bilibili.com/">哔哩&nbsp;&gt;哔哩</a>    #加大于号

各类特殊符号：

<P>：生成段落(有间距)

<br>：换行

<h#>：放大加粗、缩小变细(#:1-6)

<h1 style="background-color:red;">Hello！<h1>    #<h1>:加大加粗        style:添加底色

<span>：换列（白板，不带属性）

所有标签分为：块级标签(有间距)：h标签，p标签，div标签(纵白板，不带属性)

行内标签(内联标签-堆叠)：span(横白板，不带属性)，input标签，a标签

<form>标签：相当于一个表单(数据单)，用于提交登录或其他请求；

表单中能够将数据提交至后台的标签有input，p，div，textarea，select

<from action=''>:表示你要将表单(数据)提交到哪；method=""：选择请求方式GET/POST（体现在提交方式上,附带、不附带参数提交服务器）

<form action="http://localhost:8888/index" method="post">
<form action="http://localhost:8888/index" method="GET">

<input>标签：

<input type="" name="" value=“” checked=""/> name属性用于让后台拿数据,checked-默认值

<input type="password" name="pwd"/>        #定义文本
<input type="radio"    name="man" value=''/>      #radio的name属性完成单选，name相同则互斥
<input type="checkbox"  name="man" value=''/>      #radio的name属性完成复选，name批量获取
<input type="button"  value="登录1"/>      #定义按钮；
<input type="submit"  value="登录2"/>      #定义按钮

<input type="file"  name="file_name"/> 
#上传文件,依赖于表单属性enctype，enctype="multipart/form-data"表示表单一点一点上向服务器上传文件

<input type="rest"/>    #重置

表单提交时，文本框内容以字典（key：value）形式存在

<textarea>标签：<textarea>默认值</textarea> 多行文本

<select>标签：生成下拉菜单（多选、子组通过属性实现）

<select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
</select>

<a>标签：

-跳转；

<a href="网址">寻址标头</a>

-锚

<a href="#+锚点" >标头</a>

-新页面+跳转+锚

    <a href="#+锚点" target="_blank">标头</a>    ##target="_blank"：新页面

<img src>标签：

 <img src="1.jpg" style="height: 200px;width: 200px;">    #图片要求同级且简单

配合页面跳转使用时：

 <a href="http://www.baidu.com">
     <img src="1.jpg" title="大美女" style="height: 200px;width: 200px;" alt="美女">   
 </a>                    
#title，alt为标注属性

<table>标签：创建表格

    <table>    
        <thead>                head表头： tr: 行  th: 列
            <tr>               
                <th>表头1</th>  
                <th>表头2</th>
            </tr>
        </thead>                
        <tbody>                body表体：tr: 行  td: 列
            <tr>              
                <td>11</td>    
                <td>22</td>    
            </tr>
        </tbody>
    </table>

-------------------------------------------------------------------

CSS：style标签内的属性操作(eg：background-color，height,)

书写方式：

1、style标签中写样式

2、写在head标签里，用在body里；

-id选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{                                    ##名称{}
            background-color:#2459a2;
            height:50px;
        }
    </style>
</head>
<body>
    <div id="i1">fffffff</div>
    <span id="i1">xxxxxxxxxxxx</span>
</body>

-类选择器（最常用）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .ca{                                #.名称{}
            background-color:#2459a2;
            height:50px;
        }
    </style>
</head>
<body>
    <div class="ca" >fffffff</div>
    <span class="ca">aaaaaaaaaaaaaa</span>
</body>

-标签选择器-body内所有相同标签都加上样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{                                   #div{}
            background-color:#2459a2;
            height:50px;
        }
    </style>
</head>
<body>
    <div>fffffff</div>
    <span>aaaaaaaaaaaaaa</span>

</body>

-层级选择器（空格）：.c1 .c2 div{ 样式 } --多条件样式

-组合选择器（逗号）：#i1，#i2，#i3{ 样式 } /.i1，.i2，.i3{ 样式 } --共同拥有一个样式

-属性选择器（）：.c1[name='aspc']{width:110px;}--对选择到的标签通过属性再进行一次筛选

选择器补充：优先级为style标签优先>选择器编写顺序>就近原则

3、css样式也可以写在单独文件中，通过引用的方式调用

文件类型：CSS文件引用方式(head内)：<link rel="stylesheet" href="commons.css" />

其他：

border：边框

<body>    
    <div style="border: 10px solid red;">4555153155</div>    #像素，实体，颜色
</body>

height(高)，width(宽-像素or百分比)，color(色)，font-size(大小)，font-weight(粗细)，

text-align：center(水平自定义居中)，line-height(垂直自定义居中)等字体操作

float：使标签动起来，块级标签也能够堆叠

  <div style="width:20%;background-color:red;float:right;">1</div>    #float浮动标签
  <div style="width:70%;background-color:black;float:left;">2</div>

display：改变标签属性（内联-块-内联块）

display:inline/block/inline-block/none

行内标签：无法设置高度，宽度，padding，margin

块级标签：可以设置高度，宽度，padding，margin

inline-block：有内联标签的特点，又能够设置高度，宽度，padding，margin

none：让标签消失

padding/margin(0，auto)：外/内边距（padding/margin:0 auto：自动居中）

position：图层

position:fixed-固定标签在页面的某个位置，它提供top,right,bottom,left等属性

<body>
    <div style="width:50px;height:50px;background-color:black;color:white;
    position:fixed;
    right:30px;
    bottom:30px;">返回顶部</div>
    <div style="height:5000px;background-color:#dddddd;"></div>
</body>

通过position:fixed实现分层

    <div style="z-index:10;position:fixed;top:50%;left:50%;margin-left:-200px;margin-top:-200px;;background-color:white;width:400px;height:400px;"></div>
    <div style="z-index:9;position:fixed;background-color:black;display:none;
        top:0px;
        bottom:0px;
        right:0px;
        left:0px;
        opacity:1.1;;">
    </div>
    <div style="height:5000px;background-color:green;"></div>

        #top:0px;bottom:0px;right:0px;left:0px;-表示填满整个页面

opacity:数字-设置图层透明度

z-index:数字-设置图层优先级

position:relativ/absolute ：相对标签，提供top,right,bottom,left等属性

overflow:hidden/aotu：设置像素区域，只限定区域内的内容（eg：图片）

background-image:url('')：设置背景图片

        <div style="background-image:url('11.jpg');width:1540px;height:1080px">
                    <div>123354566</div>
        </div>

background-repeat：设置图片是否可复制（但div大于图片像素）

background-position-x：px/ background-position-y：px/ background-position：xpx ypx

选择器:hover：盘旋（附加动态属性-光标指向则属性出现）

        选择器:hover{
            color:red;
        }

-----------------------------------------------------------------小结：

标签与标签之间能够嵌套，外层块标签在一定范围(style设定)内约束着内块标签，而对于超出的那部分(style未设定)，可通过<div style="clear:both;"></div>标签追加约束。这个约束包含位置、大小等等。

margin:0-无留白，margin:0 auto-自动居中。具体为：margin在外层标签应用时，它对留白，空隙及间距起作用；而在内层标签使用时，它决定了标签在外层块标签中的横向位置。

eg:
<body style="margin:0;">            #此margin使块标签紧贴页面(左、上)，不产生留白
    <div class="height:38px;background-color:#dddddd;">
        <div style="width:980px;margin:0 auto;line-height:2.5;">    #此margin使内标签在外层                                                                                                                       
                                                                    块标签中横向居中         
   <div style="float:left;">&nbsp&nbsp淘宝</div>
            <div style="float:right;">
                <a>登录&nbsp</a>
                <span>&nbsp注册&nbsp&nbsp</span>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
</body>
    #