华清远见 前端技术总结与学习心得

技术总结

这里总结的是html、css、以及js的部分知识点，jquery相关的内容还没有添加进来

html

文本相关标签

标签属性

align = "right(靠右)/center(居中)/left(靠左)"

每个标签都有style属性，用于设置标签的样式

标题标签--h1~h6

字号逐渐变小，换行显示，默认靠左显示

段落标签 --p标签

文本标签

span标签

行内元素，没有默认的样式效果，不换行显示

div标签

块级元素，没有默认的样式效果，换行显示

换行标签

br标签

换行标签，是一个单标签，用于换行

hr标签

单标签，产生一条横线

width属性：设置宽度

color属性：设置颜色

列表标签

ul标签--无序列表

常用方式：

ol标签--有序列表

常用方式：

加粗标签

b标签、strong标签

b标签:加粗
strong标签:加粗

倾斜标签

em标签、i标签

em标签:倾斜
i标签:倾斜

删除线标签

del标签

del标签:删除线

下划线标签

u标签:下划线

上标签、下标签

sub下标签

H2O

sup上标签

33=27

img标签

功能：引用一张存在的图片，在网页上显示图片

src:引用的图片资源的路径

相对路径：根据当前文件所在的位置，查找需要引用资源的位置(../img/2.jpg) 绝对路径：从协议开始的全路径(http://127.0.0.1:8848/2022.8.5/img/1.jpg)可以省略协议及其域名，直接从根目录开始的路径，也就是绝对路径

alt:如果图片没有正常加载成功，则显示alt的文字说明

../ 表示退出当前文件夹

./ 表示当前文件夹，一般可以省略

超链接标签--a标签

点击超链接标签，可以让页面跳转到新的资源路径，网页的内容被更新

href属性：指定需要跳转的url地址(相对地址、绝对地址)

url：统一资源定位路径(网络上可以访问的资源的路径)

target属性——_blank：打开的内容显示在一个新窗口

target属性——_self：打开的内容显示在当前窗口

表格标签—table标签

用于实现的表格

caption：设置表格的名字

tr:行

td/th:列(单元格) th中的文字会加粗

table标签的属性

border:边框 width:宽度

cellpadding="0":设置文本内容和表格边框的宽度 cellspacing="0":设置的单元格之间的宽度 align:表格显示位置

260

表单相关标签

form标签

表单相关的标签，其内部嵌套用于用户输入数据的标签

action:表单提交的请求地址(url) method:请求的方式get/post encytype:设置enctype的类型，对请求参数的处理方式

如果表单中涉及到文件上传，要求：method只能是post，enctype设置为multipart/form-data

label标签

label标签的for属性对应的数据值的input标签的id. 那么单击label标签的时候，input标签获取焦点(光标就在输入框内部，用户就可以直接输入数据)

用户名：
密码：

input标签

用于用户输入数据

type:设置标签的类型，对用户输入的数据进行一些设置 name:用户输入的数据，传输到服务器端的时候，Java程序根据name的值，获取到输入框的数据 value:对应的就是用户输入的数据值

type="submit":提交请求(请求的地址+请求的参数)的按钮,单击按钮会触发表单提交事件 “表单提交事件”：发送请求给服务器，并且把请求参数(用户输入的数据)也传输到服务器端

reset事件：清空表单中的数据值

表单的相关元素

单行文本框:

密码框:

隐藏域:

文件上传:

    
单选按钮:男
         女

复选框:看书
      弹琴
      跑步
下拉列表(单选):
                 请选择
                 上海
                 
                 北京
                 深圳
            
下拉列表(多选):
         
         
             java
             c
             c++
             python
             html
             c#
         

多行文本框:
         
         

         submit:

         reset:

         button:

分组标签:
         

             
地址
             邮箱:
             phone:
             date:
             颜色:
         

iframe标签

在网页中，可以通过src的路径找到新的网页，嵌套在当前网页中

    
    
1.文件结构
    
2.文本相关
    
3.特殊样式文本

html标签分类

display:none;  隐藏标签

块级元素

占据一整行，其他内容换行显示。可以设置width、height。比如：h1,div,p

display:block  设置为块级元素

行内元素

宽高由内容决定，剩下的区域可以显示其他元素。不支持设置width、height比如：span、input

display:inline-block  设置为行内元素

块级行内元素

具有块级元素的特征，但是不换行。可以设置width、height。比如：img

display:inline-block  设置为行内块级元素

css样式

级联样式表，用途调整html中标签的形式的语言

语法规则

"样式名:样式值",比如 color:red 这个指定字体的颜色为红色 "样式名1:样式值1,样式名2:样式值2",比如 color:red,font-size:20px

三种使用方式

内联样式

直接在标签上，通过style属性进行使用

内部样式

在head标签中，通过