web笔记

最新推荐文章于 2024-11-10 22:45:39 发布

__BC__

最新推荐文章于 2024-11-10 22:45:39 发布

阅读量103

点赞数

分类专栏：前端笔记文章标签： web 前端 html css javascript

本文链接：https://blog.csdn.net/m0_46650312/article/details/114754700

版权

前端笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端三层：

html:结构层
css:样式层
javascript:行为层：人机交互

html

快捷键

shift+!=>tab键，快速生成网页骨架
按标签的名字=>tab键，自动补齐
按标签的名字+*+数字=>tab键，生成对个相同的标签

标签级别

在HTML超文本标记语言中，标签分级别的，有容器级别、文本级别标签
文本级别标签：常用的有p、span、img、表单元素等等
- 向这类文本级别标签：网页显示内容部分一般只能插入文字、或者是其他级别文本标签，否则将来学习样式的时候，网页布局会受到影响的
容器级别的标签
- 容器级别的标签：常用的有div、h1、dl、dd、ul、ol、li等等
- 向这类容器级别标签：网页显示内容部分可以插入任意内容
总结：
- 文本级别标签，内部不能出现容器级别标签
- 容器级别标签，内部可以出现文本级别标签

标签属性

标签可以添加属性，属性由2部分组成，属性名和属性值两部分组成，标签属性可能对于整个网页有影响，或者对于某一个标签是有影响的。
标签的属性需要放在开始标签中，标签名字和属性的名字之间有一个空格
属性的名字一般都是英文，属性名字和属性值之间，用一个等号连接
右侧属性值需要加上一对双引号，属性值一般是由字母、数字、横线组成，或者一些其他的特殊字符
某一个标签的属性的属性值，可以是多个属性值，多个属性值之间用空格隔开，不是逗号
某一个标签可以同时有多个属性，多个属性之间用空格隔开

其他杂碎知识点

网页制作的时候，标签与标签之间对于换行、空格不敏感，效果都是一样的。但是在开发的时候，尽量换行，因为观看比较整洁

在制作网页的时候，我们知道需要在html骨架下进行开发，如果想制作精美网页，第一步是学习好标签；第二步是学习好样式。
h系列
- 主要作用是可以在网页中显示一级到六级标题。h1-h6
- h系列是双标签、容器级别标签，可以插入任何内容
- h系列标签，在网页布局的时候，他们都是兄弟姐妹的关系，不能是父子关系
- 一般页面当中只能有一个h1标题，因为在html语言中，根据不同的标签重要程度，分权重。
- h1权重最高的，一般网页logo使用h1标题。
p标签
- 使用p标签显示段落
- p标签是双标签、文本级别标签，只能插入文本或者其他类型文本级别标签，不能放容器级别内容
img标签
- 可以在网页中显示图片，我们还需要知道图片的格式：jpg、png、gif
- 单标签、文本级别标签。在使用时，把它当作一个文字使用即可。
- 常用属性：
  - src:英文是source,主要作用是设置路径(网页中要显示图片的文件路径)
  - width:主要作用是设置图片的宽度
  - height：主要作用是设置图片的高度
  - title:主要作用是当用户鼠标移动到图片上的时候显示的提示文字
  - border：边框，主要作用时设置图片外层边框的宽度
  - alt：主要的作用是当图片没有图像的时候，用文字进行替代
- note:
  - 如果图片没有设置width、height属性，网页显示的是原始图片默认宽度和高度
  - 如果图片设置width属性，网页中显示的图片宽度即为你width这个属性值设置属性值宽度（高度等比例放大/缩小）
    - same height
  - width 属性值是由数字+px(pixel，像素)单位
  - 如果图片width和height属性同时设置，图片显示的就是你width和height设置的数值
  - border 属性：可以给图片外层添加一个外边框，默认黑色
    - border 属性值：数字+px(pixel，像素）单位
a 标签
- a:英文全称[anchor],汉语意思：锚
- a标签，俗称超链接，它的主要作用是可以设置不同网页进行跳转，或者同一个网页中不同位置进行跳转
- 双标签，文本级别标签
- 常用属性
  - href：当前网页即将跳转的另外一个网页网址（相对路径/绝对路径）
  - title：用来设置用户鼠标移上去的时候提示文字，属性值可以任意类型字符
- a 标签的其他使用
  - 可以通过a标签，实现同一个网页中，不同两者位置进行跳转
    - 使用情况
      - 第一步设置一个锚点
        设置锚点：任意标签都可以当做锚点，锚点的标签，需要添加一个id属性
        锚点的id属性值，一般情况下都是英文、数字、横线、下划线等等，最好别使用汉字
        eg：
        <h1 id=‘cur’>我是锚点</h1>
      - 第二步设置锚点链接
        设置锚点链接，锚点链接标签使用的是a标签，锚点链接a标签，需要有一个herf属性，锚点链接href属性值，是由#加上锚点id的属性值组成
        eg:
        <a href=’#cur’>我是一个锚点链接</a>
        
        note:
        多个锚点的id属性值别重名

列表

列表会将网页中结构相同，内容相关、样式类似的结构，可以利用列表进行搭建
web领域中：无序列表、有序列表、定义列表

无序列表

无序列表作用：可以在网页中搭建一个没有书序列表
在使用无序列表的时候，需要使用两个标签配合才可以使用，分别是ul,li
- ul：unorder list,表示的是一个列表容器，大结构
- li:list item:表示的是容器当中每一项
- note
  - li标签不能脱离ul标签单独使用
  - li标签要嵌套在ul标签中使用
  - ul和li标签都属于容器级别标签，li标签里面可以放置任意内容

有序列表

作用：搭建一个有顺序的列表结构
在使用有序列表的时候，需要结合两个标签一起使用，分别是ol,li
- ol:order list,表示的是一个容器，大结构
- li :list item，表示的是容器，大结构中的每一项
- ol标签内部只能嵌套li，li标签不能脱离ol标签单独使用

定义列表

作用：自定义一个标签和内容列表
定义列表在使用时需要结合三个标签一起使用，dl,dt,dd
- dl：definitation list,相当于列表最外层容器，大结构
- dt:definitation term,表示列表主题或者术语
- dd:definitaiton description,表示的对于主题、术语一个解释
- note:
  - 在使用定义列表的时候dl标签需要嵌套dt、dd一起使用。而dt和dd是兄弟级别关系
  - 一个dt标签内部可以有多组dt、dd
  - 每一个dt的后面可以同时有多个dd

布局标签

有两个非常重要的布局标签，div和span，我们称为”盒子“

div

作用：划分页面区域，辅助页面布局。可以将一些内容、布局相似标签放在一个div盒子标签里面进行统一管理，可以方便我们后期维护项目
div:division,区域，跨度，分割
双标签，容器级别标签

span

作用：在不影响页面布局的时候，可以用于局部调整
span:小区域，小跨度
双标签，经典的文本级别标签

表格

制作表格的时候，至少需要三个标签才可以制作出一个小表格
table:表格大框架
tr:table rows:表格的行，定义的是表格内部行
td:table dock,表格单元格，定义的是每一行中的单元格
th:table head，表头单元格，替换td位置

表单元素

作用：可以让用户输入文字的一个小控件

form

作用1:可以设置表单元素收集数据提交给谁的设置，设置提交数据方式
作用2：
form本身含义即为表单
form标签不是一个结构性标签，是一个功能性标签，可以将表单元素收集到的数据可以提交给服务器端。
全部表单元素一般需要书写在form标签内部
标签的两个非常重要属性
- method:
  - 设置提交数据的方式：get/post
- action
  - 设置收集到表单数据提交给谁的路径
note:
- form是一个双闭合标签，它只是一个功能形式标签（收集表单元素数据，将数据提交给服务器），他不是表单元素，表单元素需要嵌套在form标签内部

文本框

**input **标签即为表单元素，非常重要
input标签是一个单标签，它相当于一个特殊文字
input标签有一个非常重要属性type,可以根据type属性值不同，去创建不同类型表单元素
input 标签还有一个属性常用value,可以设置文本框默认数值
- 如果表单元素type属性值为text，会创建一个文本框

密码框

密码框可以通过input标签获取到。只需要将type属性值设置为password
https://www.bilibili.com/video/BV1kv411W73u?p=30&spm_id_from=pageDriver

单选框

单选按钮是通过input标签获取的，只不过input标签的type属性值为radio
单选框一般是成组出现的，一般是互斥的
设置单选按钮互斥方法：同时给这组单选按钮添加name属性，且属性值务必一样

<p>
	 <form>
	        <input type="radio" name="sex"> 男
	        <input type="radio" name="sex"> 女
	    </form>
</p>

复选框

复选框也是通过input标签获取得到的。只不过input标签的type属性值，需要设置为checkbox

 <form >
        <input type="checkbox" name="hobby" /> 吃饭
        <input type="checkbox" name="hobby" /> 睡觉
        <input type="checkbox" name="hobby"  /> 打游戏
    </form>

note:
- 勾选文字是不能让复选框选中的状态
- name属性可有可无
- 如果单选按钮、复选按钮想默认就是被选中的状态，可以给这个表单元素，设置一个checked属性，属性值也为checked

按钮

我们可以通过input标签，还可以获取到三种不同类型按钮

根据不同type属性不同

button:普通按钮
reset:重置按钮，单击这个按钮后，form标签内部的全部表单元素恢复到起始状态
submit:提交按钮，当单击这个按钮的时候，可以将form标签内部收集到表单元素数据提交到服务器。而且form标签内部的全部表单元素恢复到起始状态

 <form >
    <input type="checkbox" name="hobby" /> 吃饭
    <input type="checkbox" name="hobby" /> 睡觉
    <input type="checkbox" name="hobby"  /> 打游戏
</form>
<form >
    <input type="button" value="call me" />
    <input type="reset" value="重置" /> 
    <input type="submit" value="提交"  /> 
</form>

文本域

文本框只能给用户提供一行输入文字的地方
文本域表单元素可以让用户在多行中输入文字内容
标签：textarea(文本域)，双闭合标签，文本级别标签，可以将它当作一个文字显示。
文本域常用的属性
- rows:多行，作用是可以设置文本域显示文字用几行来显示，这个属性值用的是数字。文字超出会有滚动条出现
- cols：多列，作用是设置文本域显示的宽度
- note:
  - 添加默认的文字
    - 文本域可以设置默认文字显示：在标签内部插入文字即可。就可以默认的显示出来

   <form >
        <textarea rows="10" cols="20">添加默认的文字</textarea>
    </form>

下拉菜单

在网页中制作下拉菜单，需要两个标签的嵌套结合使用
select嵌套option,两者都是双标签，且是文本级别标签
select:搭建下拉菜单整体结构
option:表示下拉菜单中的每一项

<select name="" id="">
        <option>
            南京大学
        </option>
        <option>
            东南大学
        </option>
        <option>
            南航
        </option>
    </select>

note:
- 下拉菜单默认显示的是第一个选项。如果想让某一项作为默认显示，需要给这个option标签添加一个selected属性，属性值为selected
- 通过单击三角箭头可以显示全部选项

杂碎知识点

注释

快捷键：ctrl+/

字符实体

在制作网页的时候，标签内部的内容中可能会出现一个特殊字符不显示、或者一些特殊含义字符是不能书写的，因此需要使用字符实体
字符实体可以显示一些特殊符号、展示一些有特殊含义字符
字符实体是以&开头，以分号结尾

CSS

css:美化网页，还可以用于网页布局
文字设置颜色、文字设置大小、设置文字字体

css书写规则

css[层叠样式表，简称样式]:根据在网页中书写位置不同，分为如下三种：
- 行内样式
- 内嵌样式
- 外链样式

行内样式

使用的频率不高
- 缺点：工作量大
- 标签和样式没有分离，学起来费劲
在双标签、单标签的开始位置书写
给标签添加style属性
style属性的属性值书写
- 样式属性名字：样式属性的属性值，，，注意加分号
一个标签可以设置多个样式
任意标签都可以设置行内样式

<div style="color: chartreuse; font-size: medium;">我是ha</div>

常用样式

一个样式只需要设置一次即可，如果设置多次，右侧覆盖左侧属性
设置颜色：color
- 属性值是由英文单词、十六机制数字组成
设置文字的大小：font-size
- 属性值：属性值是由数字加上px单位，px:全称是像素
- 除了标题以外的默认是16px*，除了h标签，h标签有默认的样式以及字体大小
- 谷歌浏览器，一般标签默认文字的大小是16px，谷歌浏览器最小的是12px，如果比12px还小显示的是12px
- 任意浏览器的字体最大值是上不封顶的。
- IE浏览器，一般标签默认文字的大小是16px，min:1px,max:上不封顶的。
- h1：默认大小是：
设置字体：font-family
- 常用的中文字体：微软雅黑（浏览器默认）、楷体
- 常用的英文字体：新罗马
- 一个标签可以同时设置多种字体，多种字体用逗号隔开，后面的会覆盖前边的
- font-family属性值外层需要加上一对单引号
- note:
  - 如果文字内容，为纯的英文（没有汉字），设置多个英文字体，后者没有用
  - 如果文字内容为文字+英文，设置多个中英文字体，从左到右找到第一个符合自己字体进行设置
盒模型样式
- 盒模型样式比较常用的有：width、height、background-color
  - width:设置元素的宽度
  - height：…高度
  - background-color：设置标签的背景颜色
    - width:属性值：数字+px
    - height:属性值：数字+px

内嵌样式

内嵌样式需要书写在style标签里面，而且style标签一般放置head标签内部
在 style标签内部就可以书写，内嵌样式
要通过选择器，选择将来需要添加样式标签
内嵌样式语法规则
- 内嵌样式需要放书写在style标签里面，而且style标签一般放置head标签内部
- style标签的tye属性，可有可无。属性值text/css 纯文本css样式
- 通过选择器匹配将来要添加样式标签。eg:p
- 样式标签后加花括号
- 在花括号中书写需要添加样式（对于换行不敏感）
  - 样式名字:样式属性值;
  - 样式名字:样式属性值;
  - 样式名字:样式属性值;

<!-- 在head中设置 -->
<style type="text/css">
        p{
            color: chartreuse;
            font-size: small;
            font-family: 'Times New Roman', Times, serif;
        }
    </style>

选择器

选择器：selector
选择器是css中一种模式，用来选择器给那些网页中的标签添加样式而已

css选择器分为两种：基础选择器、高级选择器（css2选择器）

基础选择器
- 标签选择器、id选择器、类选择器、通配符选择器
高级选择器
- 后代选择器、交集选择器、并集选择器

基础选择器

标签选择器

<style type="text/css">
p{
    color: chartreuse;
    font-size: small;
    font-family: 'Times New Roman', Times, serif;
}

```

  -  标签选择器：在css样式中通过标签名字，选择给哪些标签添加样式
  -  选择器范围：网页中同名标签都会添加样式
  -  通过标签名字、选择器网页中标签进行添加样式，不管标签嵌套层次多深，都可以添加样式

外链样式

other

underscore函数库

JS函数库jQuery。jQuery行数库经常用来操作DOM
underscore也是前端当中比较常用的一个JS函数库，里面封装了很多工作当中常用算法功能
note:
- JS属于脚本语言，这门语言不能独立运行，它必须要嵌套在静态网页中使用
- underscore对外暴露的是一个下划线函数
- 常用方法：随机数、数组最大值、最小值、数组去重…