文章目录(PS:觉得不错请点赞收藏支持一下)

  • 一、认识 Web
    • 1.1 认识网页
    • 1.2 浏览器(显示代码)
    • 1.3 Web 标准
  • 二、HTML 初识
    • 2.1 概念
    • 2.2 HTML 骨架标签
    • 2.3 HTML 元素标签分类
    • 2.4 HTML 标签关系
    • 2.5 文档类型 ``
    • 2.6 页面语言 lang
    • 2.7 字符集
    • 2.8 HTML 标签的语义化
  • 三、HTML 常用标签
    • 3.1 排版标签
    • 3.2 文本格式化标签
    • 3.3 标签属性
    • 3.4 图像标签 `img`
    • 3.5 链接标签
    • 3.6 注释标签
    • 3.7 路径
  • 四、表格 `table`
    • 4.1 创建表格
    • 4.2 表格属性
    • 4.3 表头单元格标签 `th`
    • 4.4 表格标题 `caption`
    • 4.5 合并单元格
    • 4.6 表格划分结构
  • 五、列表标签
    • 5.1 认识列表
    • 5.2 无序列表 `ul`
    • 5.3 有序列表
    • 5.4 自定义列表
    • 5.5 总结
  • 六、表单标签
    • 6.1 `input` 控件
    • 6.2 `label` 标签
    • 6.3 `textarea` 控件(文本域)
    • 6.4 `select` 下拉列表
    • 6.5 form 表单域

一、认识 Web

1.1 认识网页

  • 解释说明: 网页主要由文字、图像和超链接等元素构成,除了这些元素,网页中还可以包含音频、视频等。

如下图所示就是一个网页:

网页的背后是一行一行代码写出来的

1.2 浏览器(显示代码)

  • 解释说明: 浏览器是网页显示、运行的平台。

    • 常用的浏览器有: IE、火狐(Firefox)、谷歌(Chrome)、Safari(苹果自带浏览器)和Opera浏览器等(我们平时称为五大浏览器)。

    • 常见浏览器内核

      解释说明: 浏览器内核(Rendering Engine),中文翻译很多,如:排版引擎、解释引擎、渲染引擎,现在统一流行称为浏览器内核。

    浏览器 内核 备注
    IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
    Firefox Gecko 可惜这几年已经没落了,打开速度慢、升级频繁、猪一样的队友 flash、神一样的对手 Chrome
    Safari webkit 很多人错误的把 webkit 叫做 Chrome 内核,Chrome 内核早已不是了
    Chrome Chromium/Bink 在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中,Blink 其实是 WebKit 的分支,大部分国产浏览器最新版都采用 Blink 内核,二次开发
    Opera blink 跟随着 Chrome 用 blink 内核

1.3 Web 标准

  • 解释说明: Web 标准不是某一个标准,而是由 W3C 组织(W3C 万维网联盟是国际最著名的标准化组织)和其他标准化组织制定的一系列标准的集合。

  • 构成

    主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

标准 说明
结构(Structure) 结构用于对网页元素进行整理和分类,主要学的是 HTML
表现(Presentation) 表现用于设置网页元素的版式、颜色、大小等外观样式,主要学的是 CSS
行为(Behavior) 行为是指网页模型的定义及交互的编写,主要学的是 Javascript

优点

  • 让 Web 的发展前景更广阔
  • 内容能被更广泛的设备访问
  • 更容易被搜寻引擎搜索
  • 降低网站流量费用
  • 使网站更易于维护
  • 提高页面浏览速度

二、HTML 初识

2.1 概念

  • HTML 指的是超文本标记语言(Hyper Text Markup Language),是用来描述网页的一种语言。
  • HTML 不是一种编程语言,而是一种标记语言(markup language)
  • 标记语言是一套标记标签(markup tag)

所谓超文本,指两层含义

  1. 因为它可以加入图片、声音、动画、多媒体等内容(超越文本限制)。
  2. 它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级连接文本)。

2.2 HTML 骨架标签

  • HTML 有自己的语言语法骨架格式
<html><head><title></title></head><body></body>
</html>
标签名 定义 说明
<html></html> HTML标签 页面中最大的标签,为 根标签
<head></head> 文档的头部 注意在 head 标签中我们必须要设置的标签是 title
<title></title> 文档的标题 让页面拥有一个属于自己的网页标题
<body></body> 文档的主体 元素包含文档的所有内容,页面内容基本都是放到 body 里面的

注意:HTMl 标签名、类名、标签属性和大部分属性值统一用小写,不推荐使用大写。

2.3 HTML 元素标签分类

  • 常规元素(双标签)
格式:
<标签名> 内容 </标签名>比如:
<body></body>说明:
1. 该语法中 <标签名> 表示该标签的作用开始,一般称为"开始标签(start tag)","</标签名>"表示该标签的作用结束,一般称为"结束标签(end tag)"。
2. 和开始标签相比,结束标签只是在前面加了一个关闭符"/"。
  • 空元素(单标签)
格式:
<标签名/> 比如:
<br />  表示换行说明:
1. 空元素 用单标签来表示,简单点说,就是里面不需要包含内容,只有一个开始标签不需要关闭。

2.4 HTML 标签关系

  • 嵌套关系(父子关系)
比如:
<head>
<title></title>
</head>
  • 并列关系(兄弟关系)
比如:
<head></head>
<body></body>

注意:

  1. 两个标签之间的关系如果是嵌套关系,子元素最好缩进一个 tab 键的身位(一个tab是4个空格)
  2. 如果是并列关系,最好上下对齐

2.5 文档类型 <!DOCTYPE>

  • 用法
<!DOCTYPE html>
  • 作用

声明位于文档中的最前面的位置,处于标签之前,此标签告知浏览器文档使用哪种 HTML 或 XHTML 规范,也就是告诉浏览器按照 HTML5 规范解析页面。

2.6 页面语言 lang

最常见的2个:
1. en 定义语言为英语
2. zh-CN 定义语言为中文举例:
<html lang="en"> 指定html 语言种类注意:
考虑浏览器和操作系统的兼容性,目前仍然使用 zh-CN 属性值

2.7 字符集

  • 字符集(Character set)是多个字符的集合

  • 计算机要准确的处理各种字符集文字,需要进行字符编码,以便计算机能够识别和存储各种文字

举例:
<meta chaset="UTF-8" />utf-8 是目前最常用的字符集编码方式,常用的字符集编码方式还有 gbk 和 gb2312
1. gb2312 简单中文 包括 6763 个汉字 GUO BIAO
2. BIG5 繁体中文 港澳台等用
3. GBK 包含全部中文字符,是 GB2312 的扩展,加入对繁体字的支持,兼容 GB2312
4. UTF-8 则基本包含全世界所有国家需要用到的字符

2.8 HTML 标签的语义化

  • 什么意思呢?

    答: 指的是标签的含义

优点:
1. 方便代码的阅读和维护
2. 同时让浏览器或是网络爬虫可以很多的解析,从而更好分析其中的内容
3. 使用语义化标签会具有更好的搜索引擎优化

三、HTML 常用标签

HTML 语言呢,主要学的是结构,认识标签是干什么的就可以了,添加样式什么的我们主要用 CSS 语言

3.1 排版标签

  • 解释说明: 排版标签主要和 css 搭配使用,显示网页结构的标签,是网页布局最常用的标签。

  • 标题标签 h

说明:
为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML 提供了 6个等级的标题,即标题标签语义: 作为标题使用,并且依据重要性递减。格式:
<h1> 一级标题 标题内容 </h1>
<h2> 二级标题 标题内容 </h2>
<h3> 三级标题 标题内容 </h3>
<h4> 四级标题 标题内容 </h4>
<h5> 五级标题 标题内容 </h5>
<h6> 六级标题 标题内容 </h6>注意:
一行只能放一个标题

效果如下:

  • 段落标签 p
说明:
单词全拼: paragraph作用:
1. 把文本分割为若干段落
2. 文本会在一个段落中根据浏览器窗口大小自动换行格式:
<p></p>
  • 水平线标签 hr
说明:
单词全拼: horizontal
它是一个单标签作用:
1. 创建一个横跨网页的水平线
2. 将段落与段落之间隔开
3. 使文档结构清晰,层次分明格式:
<hr />

效果如下:

  • 换行标签 br
说明:
单词全拼: break 中文意思是 打断,换行
它是一个单标签作用: 强制换行<br />
  • divspan 标签
说明:
单词全拼:
division 中文意思是 分割,分区
span 就是全拼 中文意思是 跨度,跨距,范围作用:
1. div 和 span 标签是我们网页布局主要的 2个盒子注意:
1. div 标签 一行只能放一个 div
2. span 标签 一行上可以放好多个 span

3.2 文本格式化标签

  • 解释说明:开发网页时,有时需要为文字设置粗体、斜体、下划线和删除线效果,文本格式化标签呢就是用来显示这些的。
标签 显示效果
<b></b><strong></strong> 文字以 粗体 方式显示(XHTML推荐使用strong)
<i></i><em></em> 文字以 斜体 方式显示(XHTML推荐使用em)
<s></s><del><del> 文字以 加删除线 方式显示(XHTML推荐使用del)
<u></u><ins></ins> 文字以 加下划线 方式显示(XHTML推荐使用ins)

3.3 标签属性

说明:
1. 制作网页时,如果想让HTML标签提供更多的信息,就设置属性
2. 所谓属性就是外在特性,就是一种事物的特点格式:
<标签名 属性1="属性值1" 属性2="属性值2">内容</标签名>举例:
一个手机,它的颜色是黑色的,尺寸是 8寸
<手机 颜色="黑色" 尺寸="8寸"> </手机>

3.4 图像标签 img

说明:
单词全拼: image 中文意思是 图像作用: 插入图片格式:
<img src="图像URL" width="属性值" height="属性值" />注意:
1. 该语法中 src 属性用于指定图像文件的路径和文件名,它是img 标签的必需属性
2. 标签可以拥有多个属性,必须写在开始标签中,位于标签名后面
3. 属性之间不分先后顺序,标签名与属性、属性与属性之间以空格分开
4. 采取 键值对 的格式 key="value" 的格式
属性 属性值 描述
src URL 图像的路径
alt 文本 图片不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素(XHTML不支持%页面百分比) 设置图像的宽度
height 像素(XHTML不支持%页面百分比) 设置图像的高度
border 数字 设置图像边框的宽度

3.5 链接标签

说明:
1. 单词全拼: anchor 中文意思是 锚
2. 若创建超链接,只需用标签把文字包起来就好格式:<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>注意:
1. 外部链接 需要以下这种方式: https://www.baidu.com/
2. 内部链接 直接写内部页面名称即可,比如: <a href="index.html"></a>
3. 如果要定义空链接需这样写,<a href="#"></a>
4. 还可以给网页中各种网页元素添加超链接,如:图像、表格、音频、视频,最常见的就是文本超链接了。

3.6 注释标签

说明:
注释内容不会显示在浏览器窗口中,但是它也会被存储在用户的计算机内存地址中,查看源码时可以看到作用:
1. 注释是给人看,目的是为了更好的理解这部分的代码是干什么的
2. 一般用于简单的描述,如某些状态描述、属性描述等格式:
<!-- 注释内容 -->
快捷键: ctrl + / 或者 ctrl + shift + /注意:
推荐 注释内容位于需要注释代码的上面,单独占一行

3.7 路径

说明:
1. 实际工作中,我们的文件不能随便乱放,否则很难寻找,因此我们需要一个文件夹来管理
2. 目录文件夹;就是普通文件夹,存放我们做页面所需的相关文件和素材,如: html文件,图片等等。
3. 根目录;打开目录文件夹第一层就是根目录,当我们做的页面需要的图片非常多时,通常我们会新建一个文件夹来存放它们,这时插入图片时就需要采用“路径”的方式来获取图片文件的位置
4. 路径分为 相对路径和绝对路径两种
  • 相对路径
路径分类 符号 说明
同一级路径 只需输入图像文件的名称即可,如 <img src="小可爱.jpg">
下一级路径 / 图像文件位于 HTML 文件同级文件夹下,假如图像文件存在 imgs 文件夹下,需这样写 <img src="imgs/小可爱.jpg">
上一级路径 ../ 在文件名之前加入 ../,如果是上两级,使用../../,以此类推,如<img src="../小可爱.jpg">
  • 绝对路径
说明:绝对路径以 Web 站点根目录为参考基础的目录路径格式:
"D:Web\imgs\小可爱.jpg" 或者完整的网络地址,例如: "https://imgtu.com/i/5paY5D"注意:
它的写法,符号 \ 并不是相对路径的 /

四、表格 table

作用:
1. 常见显示、展示表格式数据
2. 可以让数据显示的规整,可读性好

4.1 创建表格

说明:
1. 主要由 table、tr、td这三对标签组成,它们是创建表格的核心,缺一不可
2. table 用于定义一个表格标签
tr标签 用于定义表格中的行,必须嵌套在 table 标签中
td(单词全拼:table data) 中文意思是数据单元格的内容,用来定义表格中的单元格,必须嵌套在 tr 标签中
3. 总结一下,一个完整的表格由表格标签(table),行标签(tr),单元格标签(td)组成,没有列的标签,我自己理解是把第一行的 单元格标签 看成表格中的列数。格式:
<!-- boder 是一个属性,意思的表格的边框是1像素,默认是0像素(无边框) -->
<table border="1px">
<!-- 第一行 -->
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<!-- 第二行 -->
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<!-- 第三行 -->
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>

效果如下:

4.2 表格属性

作用:
表格的属性主要用来设置表格的样式
属性名 含义 常用属性值
border 设置表格的边框(默认boder="0"无边框) 像素值
cellspacing 设置单元格与单元格边框之间的空白间距 像素值(默认为2像素)
cellpadding 设置单元格内容与单元格边框之间的空白间距 像素值(默认为1像素)
width 设置表格的宽度 像素值
height 设置表格的高度 像素值
align 设置表格在网页中的水平对齐方式 left、center、right

如图所示:

4.3 表头单元格标签 th

作用: 一般表头单元格位于表格的第一行或第一列,并且文本加粗居中格式:
<table border="1px">
<!-- 第一行 表头 -->
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<!-- 第二行 -->
<tr>
<td>小明</td>
<td>男</td>
<td>18</td>
</tr>
<!-- 第三行 -->
<tr>
<td>小李</td>
<td>男</td>
<td>20</td>
</tr>
<!-- 第四行 -->
<tr><td>小红</td>
<td>女</td>
<td>19</td>
</tr>
</table>

效果图:

4.4 表格标题 caption

说明:
1. caption 元素定义表格标题,通常这个标题会被居中且显示于表格之上
2. caption 标签必须紧随 table 标签之后格式:
<table border="1px">
<!-- 表格标题 -->
<caption>信息表</caption>
<!-- 第一行 -->
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<!-- 第二行 -->
<tr>
<td>小明</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>小李</td>
<td>男</td>
<td>20</td>
</tr>
<!-- 第三行 -->
<tr>
<td>小红</td>
<td>女</td>
<td>19</td>
</tr>
</table>

效果如下:

4.5 合并单元格

说明:
1. 两种方式
1) 跨行合并: rowspan="合并单元格的个数"
2) 跨列合并: colspan="合并单元格的个数"
2. 顺序
1) 按照 先上后下 先左后右 的顺序
3. 三步曲
1) 先确定是跨行还是跨列合并
2) 根据 先上后下 先左后右 的原则找到目标单元格,然后写上 合并方式 还有要合并的单元格数量
3) 删除多余的单元格格式:
<table border="1px" width="300px" height="100px">
<!-- 第一行 -->
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<!-- 第二行 -->
<tr>
<td colspan="2"></td>
</tr>
<!-- 第三行 -->
<tr>
<td></td>
<td></td>
</tr>
</table>

效果如下:

4.6 表格划分结构

说明:
对于比较复杂的表格,表格的结构也就相对的复杂了,所以又将表格分割成了三个部分,分别是题头、正文、脚注,这样可以功能更好的分清表格结构
1) thead: 用于定义表格的头部,用来方标题之类的东西,内部必须拥有标签
2) tbody: 用于定义表格的主体,放数据本体
3) 放表格的脚注之类格式:
<table border="1px">
<!-- 表格标题 -->
<thead>
<caption>信息表</caption>
</thead>
<tbody>
<!-- 第一行 -->
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<!-- 第二行 -->
<tr>
<td>小明</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>小李</td>
<td>男</td>
<td>20</td>
</tr>
<!-- 第三行 -->
<tr>
<td>小红</td>
<td>女</td>
<td>19</td>
</tr>
</tbody>
</table>注意:
以上标签都是放到 table 标签中,脚注一般用的不多,就不示例了

效果呢还是一样,没变化

五、列表标签

5.1 认识列表

1. 什么是列表?
答: 前面介绍了表格是用来显示数据的,那么列表就是用来布局的,因为非常整齐和自由2. 概述: 容器里面装载着结构,样式一致的文字或图表的一种形式就是列表3. 特点: 列表最大的特点就是整齐、整洁、有序,可组合自由度高。

5.2 无序列表 ul

说明: 无序列表的各个列表项之间没有顺序级别之分,是并列的格式:
<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>
</ul>注意:
1. <ul> 标签中只能嵌套 <li>,直接在 <ul> 标签中输入其他标签或者文字,这种做法是不允许的
2. <li>与</li>之间相当于一个容器,可以容纳所有元素
3. 无序列表会带有自己的样式属性

效果如下:

5.3 有序列表

说明: 有序列表即为有排列顺序的列表,各个列表项按照一定的顺序排列定义格式:
<ol><li>我是老大</li><li>我是老二</li><li>我是老三</li>
</ol>

效果如下:

5.4 自定义列表

说明: 常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号格式:
<dl><dt>我的兴趣爱好</dt><dd>游戏</dd><dd>乒乓球</dd><dd>追剧</dd><dt>我喜欢的明星</dt><dd>胡歌</dd><dd>刘德华</dd><dd>自己</dd>
</dl>

效果如下:

5.5 总结

标签名 定义 说明
ul 无序列表标签 里面只能包含 li 没有顺序
ol 有序列表标签 里面只能包含 li 有顺序
dl 自定义列表 里面有 2个 兄弟,dt 和 dd

六、表单标签

1. 表单标签是什么?
答: 我们注册QQ号时往每个选项中填入信息时,每个选项就是用表单标签来做的2. 说明
1) 表单目的是为了收集用户信息
2) 一个完整的表单通常由表单控件(也叫表单元素)、提示信息和表单域3个部分构成
3) 表单控件包含了具体的表单功能项,分别有单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等
4) 一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作
5) 表单域: 相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过它定义处理表单数据所用程序的 url 地址,以及数据提交到服务器的方法,如果不定义表单域,表单中的数据无法传送到后台服务器

6.1 input 控件

说明:
1. input 输入的意思
2. 它是一个单标签
3. 它有很多属性格式:
<input type="属性值" value="你好">

只举例了一些常用的属性

属性 属性值 描述
type text 单行文本输入框
password 密码输入框
radio 单选按钮
checkbox 复选按钮
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像形式的提交按钮
file 文件域
name 用户自定义 控件名称
value 用户自定义 input 控件中的默认文本值
size 正整数 input 控件在页面中的显示宽度
checked checked 定义选择控件默认被选中的项
maxlength 正整数 控件允许输入的最多字符数
  • type 属性
说明:
1. 这个属性通过改变值,可以决定属于哪种 input 表单
2. 比如 type="text" 就表示 文本框 可以做 用户名,昵称 等
3. 比如 type="password" 就是表示 密码框,用户输入的内容是不可见的举例:
用户名: <input type="text" />
密  码: <input type="password" />
  • value 属性 值
说明:
value 意思是显示默认的文本值
打开网页页面时默认显示指定的文字举例:
用户名: <input type="text" value="请输入用户名" />
  • name 属性
说明:
1. name 意思是表单的名字
2. 主要用于区别不同的表单
3. radio 单选按钮属性,这两者经常搭配,因为 radio 如果是一组,必须命名相同的名字,否则就变成多选了举例:
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女

效果如下:

  • checked 属性
说明:
表示定义默认状态举例:
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex" />女打开页面时它就会默认先选中了男,就不放图了,和上图一样,只不过上图那个是我打开页面之后选中的

6.2 label 标签

说明:
用于绑定一个表单元素,当点击 label 标签时,被绑定的表单元素就会获得输入焦点
也就是说,点击 label 标签里面的文字时,光标会定位到指定的表单里面两种写法
1. 用 label 标签直接把 input 表单包起来
<label>用户名:<input type="text"  value="请输入用户名"/></label>2. 用 label 的 for 属性规定与哪个表单元素绑定,for 属性值需要与 表单元素的 id 属性值一样
<label for="name1">用户名:</label>
<input type="text"  value="请输入用户名" id="name1"/>

6.3 textarea 控件(文本域)

作用:
通过 textarea 控件可以轻松的创建多行文本输入框格式:
<textarea>文本内容</textarea>

文本框和文本域区别

表单 名称 区别 默认值显示 用于场景
<input type="text" /> 文本框 只能显示一行文本 单标签,通过 value 显示默认值 用户名、昵称、密码
textarea 文本域 可以显示多行文本 双标签,默认值写到标签中间 留言板

6.4 select 下拉列表

说明:
当有多个选项让用户选择时,就使用 select 控件优点: 节约空间格式:
<select><option>选项1</option><option>选项2</option><option>选项3</option>
</select>注意:
1. <select> 中至少包含一对 option
2. 在 <option> 中定义 selected="selected"时,当前项即为默认选中项

效果如下:

6.5 form 表单域

说明:
1. 用于定义表单域,收集和传递用户信息, form 中的所有内容都会被提交给服务器格式:
<form action="url地址" method="提交方式" name="表单名称">各种表单控件
</form>注意:
每个表单都应该有自己表单域

常用属性:

属性 属性值 作用
action url地址 用于指定接收并处理表单数据的服务器程序的 url 地址
method get/post 用于设置表单数据的提交方式,值为 get 或 post

许久不更了,还望多支持

☀️前端基础—【HTML⚡】相关推荐

  1. html表格联动,html前端基础:table和select操作

    html前端基础:table和select操作 发布时间:2020-05-13 09:58:10 来源:亿速云 阅读:196 作者:Leah 这篇文章主要为大家详细介绍html前端基础中有关table ...

  2. element ui 图片控件 排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发

    本文主要包括以下4个内容 什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统 开源项目推荐 1.什么是ElementUI 官网:https://el ...

  3. boost log 能不能循环覆盖_前端基础进阶(十四):深入核心,详解事件循环机制...

    Event Loop JavaScript的学习零散而庞杂,很多时候我们学到了一些东西,但是却没办法感受到进步!甚至过了不久,就把学到的东西给忘了.为了解决自己的这个困扰,在学习的过程中,我一直在试图 ...

  4. gif透明背景动画_前端基础系列之bmp、jpg、png、gif、svg常用图片格式浅谈(二)...

    IT客栈 作者:大腰子 bmp.jpg.png.gif.svg常用图片格式 之前为大家介绍了几种WEB前端常用的图片格式,对比了它们的特点,参见<前端基础系列之bmp.jpg.png.gif.s ...

  5. 前端基础知识整理汇总(中)

    前端基础知识整理汇总(中) Call, bind, apply实现 // call Function.prototype.myCall = function (context) {context = ...

  6. 前端基础知识整理汇总(上)

    前端基础知识整理汇总(上) HTML页面的生命周期 HTML页面的生命周期有以下三个重要事件: 1.DOMContentLoaded -- 浏览器已经完全加载了 HTML,DOM 树已经构建完毕,但是 ...

  7. jquery function_前端基础进阶(十三)详细图解jQuery扩展jQuery插件

    UI 鉴赏 早几年学习前端,大家都非常热衷于研究jQuery源码. 我至今还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,"原来JavaScript居然可以 ...

  8. 前端基础-HTML的的标签详解

    阅读目录 一.head内常用标签 二. HTML语义化 三. 字符实体 四. h系列标签 五. p标签 六. img标签 七. a标签 八. 列表标签 九. table标签 十. form标签 一. ...

  9. 前端基础-CSS的各种选择器的特点以及CSS的三大特性

    一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...

  10. 前端基础进阶(七):函数与函数式编程

    纵观JavaScript中所有必须需要掌握的重点知识中,函数是我们在初学的时候最容易忽视的一个知识点.在学习的过程中,可能会有很多人.很多文章告诉你面向对象很重要,原型很重要,可是却很少有人告诉你,面 ...

最新文章

  1. iOS10.3 的评论系统
  2. python【蓝桥杯vip练习题库】ADV-73数组输出
  3. 同一服务器 数据库间 不同表 的查询
  4. swiper切换按钮位置改变_swiper插件自定义切换箭头按钮
  5. 【python】算法引入及算法特性和时间复杂度
  6. python——全局变量和局部变量
  7. promise封装ajax
  8. element 表单回显验证_关于vue el-form表单报错的问题
  9. 清楚linux缓存文件,Linux删除文件 清除缓存
  10. 前端ajax数据提交到服务器_详解前端如何让服务器主动向浏览器推送数据
  11. vba循环通过键盘某个按键按下退出循环_[VBA]For Next与Do Loop循环
  12. 高性能mysql 第5章 创建高可用的索引
  13. Fiddler4 抓包分析(基础版)
  14. Maven经验分享(一)安装部署
  15. java图书馆抢座系统_java毕业设计_springboot框架的图书馆座位预约占座
  16. java代码对图片缩放
  17. 主板温度过高的原因是什么?主板温度高的原因和处理办法
  18. 【好文】敏捷中国十八年目睹之怪现状
  19. Win10开了hdr灰蒙蒙的怎么办?
  20. 服务器藏宝系列,区如其名,这个服务器里果然遍地都是宝藏

热门文章

  1. K8S、kubernetes no resolver defined to resolve could not be resolved (3: Host not found) 问题解决
  2. saas 测试_为什么SaaS公司需要进行安全测试?
  3. java卸载(java卸载 windows installer)
  4. node.js 链接 数据库
  5. composite java,java设计模式_Composite模式
  6. android手机屏幕共享神器踩坑指南
  7. 在安卓手机上安装Linux子系统
  8. 做人,该善良时就善良,该勇敢时就要有勇气去对应
  9. 带你了解地址分配DHCP,IP地址管理方式及分配原则
  10. 文件下载被浏览器默认打开解决方法