web-beginner

(Updated: )
note

学习心态与方法🔗

  1. 觉醒,初学时应尽量按照教程步骤复刻,尽量做到100%复刻;摒弃创新,保存质疑和疑问.(守,保守)
  2. 初成,工作时或实践时,寻求突破对疑问进行发掘破解,将知识融汇贯通自成一体.(破,突破)
  3. 大成,对知识体系熟悉,能够从任意角度或方式来理解解构对应的知识体系,自成一家.(离,融汇贯通)

前端框架知识体积

  1. HTML5
  2. CSS3
  3. JavaScript
  4. ES6新特性
  5. Vue3

HTML

html基础格式

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
    	hello html!
		<ol>
			<li>有序列表</li>
			<li>有序列表</li>
		</ol>
    </body>
</html>

html的<>号基本都是成对出现,构成一个搭档如<html></html>.html的符号一定要是英文输入状态下的符号.
html文件以.html为后缀才为正常的html文件.
为html的文本类型声明,使浏览器快速识别.

html的标签🔗

  • html标签,定义文件内容为html,同时也包含了html的所有内容,html文本的所有内容都要在<html></html>中书写.
  • head标签,定义html的头部内容,html的头部内容一般包括html文档的各个属性的定义和声明,包含文档的标题,引用项目中其他相关文件等.
  • body标签,body标签内容为html文档的主要内容,包含文本,超链接,图片,视频等等内容.
  • title标签,定义html文件的标题,即html在浏览器标签或状态栏上所显示的名字.同时title还有利于SEO(搜索引擎搜索)的优化.
  • meta标签,用来描述html文件的文档属性,关键词等,如编码格式UTF-8.

html中,大多数的标签都是双标签,及标签头和标签尾两部分组成<html></html>,这样的标签被称为双标签.
而也有只需要一个<>标签就一个完整标签的存在,如img标签,meta标签,这种类型的标签被称为单标签.

  • h1-h6标签,用于定义页面中的关键段落标题,合理的书写有利于SEO的优化.
  • p段落标签,在html书写文章段落时,可以使用<p></p>中,这样p标签中的内容则为一个段落.
  • br换行标签,html中需要文章另起一行时,在该行末尾使用</br>(单标签)使接下来的内容在html中另起一行显示.
  • hr水平线标签,在html中使用</hr>(单标签),则会在html中显示为一条横线.
  • img图片标签,在html中引用图片资源<img src="资源连接">(单标签).
  • input输入标签,用来获取用户输入的数据信息.(单标签)
  • a超文本链接标签,在html中a标签可以定义用户点击后实现跳转的功能.<a herf=""></a>
  • div容器标签,在html中用div对页面内容进行容器划分,方便html文本内容的阅读管理和css和js对相应内容进行修饰.

文本标签

  • em重点文本标签.
  • b粗体文本标签.
  • i斜体文本标签.
  • strong加重文本标签.
  • del删除文本标签.
  • span空标签,没有特定含义.

列表标签

  • ol有序列表标签.
  • ul无序列表标签.

表格标签

  • table表格标签.
  • tr行标签.
  • td单元格/列标签.

表单标签

  • form表单,

    表单由容器和控件组成,一个表单包含信息输入和信息提交(控件)等多个控件组成.

h5新标签

  • header头部标签
  • nav导航标签
  • section页眉页脚标签
  • aside侧边栏标签
  • footer底部标签
  • article文章标签(包括文章内容,评论等)

html的标签属性🔗

<html>
<head></head>
<body>
	<h1 align="center"></h1>
	<a href="git.md">git</a>
</body>
</html>
  • align属性,对齐属性,用来定义标签在html页面中的位置,默认值为left(左对齐)·center(居中)·right(右对齐).
  • color属性,颜色属性,用来定义标签中内容的颜色.
  • width属性,宽度属性,用来定义标签内容的宽度,常用于<img></img>标签中.
  • size属性,大小属性,用来定义标签内容的大小,常用于设置字体的大小.
  • src属性,源属性,用来定义标签内容的来源.
  • alt属性,替代文本,在给图片设置alt属性时,在图片未加载时html会显示alt的内容.
  • height属性,高度属性,定义标签内容的高度.
  • title属性,title属性,在给图片定义title属性时,鼠标悬停在图片上会显示title的内容.
  • href属性,链接地址属性,在a标签中用来定义a标签要实现跳转的目标地址.
  • type属性,类型属性,定义标签的类型,如在<ol type="a"></ol>中type有(1,a,A,i,I)这几个值;<ul type="disc"></ul>中type有(disc,circle,square,none)这几个值.

表格属性

  • border属性,边框属性,定义表格的边框.
  • colspan属性,水平合并单元格<tr colspan="2"></tr>.
  • rowspan属性,垂直合并单元格.

表单属性

<form action="url" method="get|post" name="name"></form>

action服务器地址,name表单名,method中get提交的url数据可见post不可见,get一般用于少量数据提交,post用于大量数据.

表单元素

  • 表单标签
  • 表单域
  • 表单按钮
    <form>
    	<input type="text">
    	<input type="button">
    </form>
    文本域通过<input type="text">标签定义,当用户需要输入文本,字母,数字等内容时会使用文本域.
    <form>
    	user name: <input type="text" name="user name"></br>
    	password: <input type="password" name="password">
    	<input type="submit" value="sign in">
    </form>

块元素与内行元素(内联元素)

  • 块元素
  • 块元素元素会在页面中独占一行,(自上向下垂直排列)
  • 可以设置width,height属性
  • 一般块级元素可以包含行内元素和其他块级元素
    		•
  • 内行元素
  • 行内元素不会独占一行,只会占用元素自身实际大小范围
  • 行内元素设置width,height无效
  • 一般内联元素包含内联元素不包含块级元素
    		•

    常见块级元素 div, form, h1~h6, hr, p, table, ul等.
    常见的内联元素 a, b, em, i, span, strong等.
    行内块级元素(特点:不换行能够设定width宽height高) button, img, input等.

    CSS3🔗

    CSS(Cascading Style Sheets)层级样式表,又叫级联样式表,简称样式表;文件的后缀为.css.
    使用CSS来定义或控制html中元素在页面的样式,使元素看起来更加美观.
    Css的基本语法由选择器加一条或多条声明构成.

    <html>
      <header>
        <style>
            h1{
                color: blue;        <!--h1为选择器大括号内的为声明.-->
                font-size: 10px; 	<!--font-size为属性名10px为属性值.-->
            }
        </style>
      </header>
      <body>
        <h1>
    	  super css.
        </h1>
      </body>
    </html>

    选择器通常为要改变样式的html元素,每条声明由属性和属性值构成,属性和属性值用:,每条声明结尾用;.

    上面这种直接在html中使用<style></sttyle>标签来写css的方式叫作css内嵌式引用.

    CSS的引用

    1. <p style="background-color: #2bbc8a; font-size: 10px;">css</p>,以属性的方式直接在html标签中定义的样式内联样式(行内样式).
    2. 直接在html中使用<style></sttyle>标签来写css的方式叫作内部样式(如↑的代码).
    3. 通过链接从.css文件引用样式到html中的方式称为外部样式(推荐用法).
      <html>
        <header>
            <link rel="stylesheet" type="text/css" href="./main.css">
        </header>
        <body>
          input by .css file.
        </body>
      </html>
      在html的header内使用link标签(单标签)引用外部.css样式文件.

      以这种方式引用css样式的方式,在多个文件都在使用这个css样式时,只需要修改单个css文件即可.

    选择器🔗

    全局选择器

    可以和任何元素匹配,优先级最低,一般用作初始化操作.

    *{
        margin: 0px;
        padding: 0px;
    }

    元素选择器

    根据html中标签名作为选择器的选择器称为元素选择器,常见的有 p, b, div, a, img, body等.

    标签选择器的定义会对页面所有改标签的内用产生作用,所以经常描述”共性”,无法描述某一元素的个性.

    <style>
      div{
      }
      img{
      }
    </style>

    类选择器

    <style>
        .text{
            color: #2bbc8a;
        }
    </style>
    <p class="text">类选择器</p>

    在html中给指定标签添加class属性,设置属性值为选择器名;然后在css文件中通过.属性值来定义这个标签内容的样式.

    类选择器灵活方便,便于修改,类选择器以.加class属性名组成,如.oneclass.

    类选择器的特点与注意项

    1. 类选择器可以被多种标签使用.
    2. 类名不能以数字开头.
    3. 同一个标签可以使用多个类选择器,用空格隔开.
    <style>
        .text{
            color: #2bbc8a;
        }
    </style>
    <p class="text color">类选择器</p>

    <h2 class="oneclass" class="twoclass">class</h2> 错误❌.

    ID选择器

    html中给指定的某一个标签添加id属性,就可以通过#加id属性值来定义id所对应的标签样式.

    <style>
        #text{
            color: #2bbc8a;
        }
    </style>
    <p id="text">id选择器</p>

    ID选择器的特点

    1. 一个id只能使用一次(唯一性).
    2. id(属性值)不能以数字开头.

    合并选择器

    当两个选择器定义的属性参数有大量相同时,使用合并选择器的方式来定义相同参数,再用各自定义不同的参数,这样可以减少代码重复率节省代码量.

    .main-left,.main-right{
        margin: 20px 20px 10px 20px;
        height: 70px;
        max-width: 45%;
        border-radius: 5px;
        background-color: rgba(49, 52, 54, 0.8);
    }
    .main-left{
        position: absolute;
    }
    .main-right{
        float: right;
    }

    选择器的优先级

    选择类型 选择器名 索引方式 优先级 补充说明
    全局选择器 * *{}
    元素选择器 标签名(a,div…) 标签名(a{},div{}…) 1
    类选择器 类属性值(class) .类属性值(.class{}) 10
    id选择器 id属性值(text) #id属性值(#text{}) 100

    行内样式(内联样式)选择器<p style="color: #2bbc8a"></p>,即在标签中使用style定义的选择器权重为1000

    行内样式 > ID选择器 > 类选择器 > 元素选择器

    字体属性

    字体颜色

    JavaScript

    web-intermediate