提示:
标签不区分大小写,但是推荐使用小写。
根据标签的书写形式,标签分为双标签(闭合标签)和单标签(空标签)
2.1 双标签是指由开始标签和结束标签组成的一对标签,这种标签允许嵌套和承载内容,比如: div标签
2.2 单标签是一个标签组成,没有标签内容, 比如: img标签
2. 小结
学习 html 语言就是学习标签的用法,常用的标签有20多个。
编写 html 标签建议使用小写
根据书写形式,html 标签分为双标签和单标签
单标签没有标签内容,双标签可以嵌套其它标签和承载文本内容
===================================================================
资源路径
学习目标
能够知道相对路径和绝对路径的区别
当我们使用img标签显示图片的时候,需要指定图片的资源路径,比如:
这里的src属性就是设置图片的资源路径的,资源路径可以分为相对路径和绝对路径。
- 相对路径
从当前操作 html 的文档所在目录算起的路径叫做相对路径
示例代码:
- 绝对路径
从根目录算起的路径叫做绝对路径,Windows 的根目录是指定的盘符,mac OS 和Linux 是/
示例代码:
提示:
一般都会使用相对路径,绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题
- 小结
相对路径和绝对路径是 html 标签使用资源文件的两种方式,一般使用相对路径。
相对路径是从当前操作的 html 文档所在目录算起的路径
绝对 路径是从根目录算起的路径
===================================================================
列表标签
学习目标
能够知道列表标签的种类
- 列表标签的种类
无序列表标签(ul标签)
有序列表标签(ol标签)
- 无序列表
-
列表标题一
-
列表标题二
-
列表标题三
-
有序列表
-
列表标题一
-
列表标题二
-
列表标题三
-
小结
列表标签有无序列表标签(ul标签)和有序列表标签(ol标签)
列表项目对顺序有要求的时候使用ol标签
列表项目对顺序无要求的时候使用ul标签
===================================================================
表格标签
学习目标
能够知道表格的边线合并
- 表格的结构
表格是由行和列组成,好比一个excel文件
- 表格标签
标签:表示一个表格 标签:表示表格中的一行
标签:表示表格中的列 | 标签:表示表格中的表头 |
---|
示例代码:
表格边线合并:
border-collapse 设置表格的边线合并,如:border-collapse:collapse;
===================================================================
表单标签
学习目标
能够知道表单中常用的表单元素标签
- 表单的介绍
表单用于搜集不同类型的用户输入(用户输入的数据),然后可以把用户数据提交到web服务器 。
- 表单相关标签的使用
标签 表示表单标签,定义整体的表单区域
标签 表示表单元素的文字标注标签,定义文字标注
标签 表示表单元素的用户输入标签,定义不同类型的用户输入数据方式
type属性
type=“text” 定义单行文本输入框
type=“password” 定义密码输入框
type=“radio” 定义单选框
type=“checkbox” 定义复选框
type=“file” 定义上传文件
type=“submit” 定义提交按钮
type=“reset” 定义重置按钮
type=“button” 定义一个普通按钮
标签 表示表单元素的多行文本输入框标签 定义多行文本输入框
标签 表示表单元素的下拉列表标签 定义下拉列表
标签 与标签配合,定义下拉列表中的选项 示例代码:
男
女
唱歌
跑步
游泳
北京 上海 广州 深圳
- 小结
表单标签是标签
常用的表单元素标签有: 、、 、 等标签
===================================================================
表单提交
学习目标
能够知道表单的提交方式
能够知道表单中action属性的作用
- 表单属性设置
标签 表示表单标签,定义整体的表单区域
action属性 设置表单数据提交地址
method属性 设置表单提交的方式,一般有“GET”方式和“POST”方式, 不区分大小写
2. 表单元素属性设置
name属性 设置表单元素的名称,该名称是提交数据时的参数名
value属性 设置表单元素的值,该值是提交数据时参数名所对应的值
3. 示例代码
男
女
唱歌
跑步
游泳
北京 上海 广州 深圳
小结
表单标签的作用就是可以把用户输入数据一起提交到web服务器。
表单属性设置
action: 是设置表单数据提交地址
method: 是表单提交方式,提交方式有GET和POST
表单元素属性设置
name: 表单元素的名称,用于作为提交表单数据时的参数名
value: 表单元素的值,用于作为提交表单数据时参数名所对应的值
=====================================================================
css 的介绍
学习目标
能够知道css的作用
- css 的定义
css(Cascading Style Sheet)层叠样式表,它是用来美化页面的一种语言。
没有使用css的效果图
使用css的效果图
- css 的作用
美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。
控制页面布局, 比如: 设置浮动、定位等样式。
- css 的基本语法
选择器{
样式规则
}
样式规则:
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
…
选择器:是用来选择标签的,选出来以后给标签加样式。
代码示例:
div{
width:100px;
height:100px;
background:gold;
}
说明
css 是由两个主要的部分构成:选择器和一条或多条样式规则,注意:样式规则需要放到大括号里面。
- 小结
css 是层叠样式表,它是用来美化网页和控制页面布局的。
定义 css 的语法格式是: 选择器{样式规则}
=======================================================================
css 的引入方式
学习目标
能够知道 css 的引入三种方式
css的三种引入方式
行内式
内嵌式(内部样式)
外链式
- 行内式
直接在标签的 style 属性中添加 css 样式
示例代码:
优点:方便、直观。 缺点:缺乏可重用性。
- 内嵌式(内部样式)
在标签内加入
示例代码:
优点:在同一个页面内部便于复用和维护。 缺点:在多个页面之间的可重用性不够高。
- 外链式
将css代码写在一个单独的.css文件中,在标签中使用标签直接引入该文件到页面中。
示例代码:
优点:使得css样式与html页面分离,便于整个页面系统的规划和维护,可重用性高。 缺点:css代码由于分离到单独的css文件,容易出现css代码过于集中,若维护不当则极容易造成混乱。
- css引入方式选择
行内式几乎不用
内嵌式在学习css样式的阶段使用
外链式在公司开发的阶段使用,可以对 css 样式和 html 页面分别进行开发。
- 小结
css 的引入有三种方式, 分别是行内式、内嵌式、外链式。
外链式是在公司开发的时候会使用,最能体现 div+css 的标签内容与显示样式分离的思想, 也最易改版维护,代码看起来也是最美观的一种。
=====================================================================
css 选择器
学习目标
能够说出 css 选择器的种类
- css 选择器的定义
css 选择器是用来选择标签的,选出来以后给标签加样式。
- css 选择器的种类
标签选择器
类选择器
层级选择器(后代选择器)
id选择器
组选择器
伪类选择器
- 标签选择器
根据标签来选择标签,以标签开头,此种选择器影响范围大,一般用来做一些通用设置。
示例代码
hello
- 类选择器
根据类名来选择标签,以 . 开头, 一个类选择器可应用于多个标签上,一个标签上也可以使用多个类选择器,多个类选择器需要使用空格分割,应用灵活,可复用,是css中应用最多的一种选择器。
示例代码
这是一个标题
这是一个段落
- 层级选择器(后代选择器)
根据层级关系选择后代标签,以选择器1 选择器2开头,主要应用在标签嵌套的结构中,减少命名。
示例代码
hello
哈哈
你好
注意点: 这个层级关系不一定是父子关系,也有可能是祖孙关系,只要有后代关系都适用于这个层级选择器
- id选择器
根据id选择标签,以#开头, 元素的id名称不能重复,所以id选择器只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。
示例代码
这是一个段落标签
这是第二个段落标签
这是第三个段落标签
注意点: 虽然给其它标签设置id=“box”也可以设置样式,但是不推荐这样做,因为id是唯一的,以后js通过id只能获取一个唯一的标签对象。
- 组选择器
根据组合的选择器选择不同的标签,以 , 分割开, 如果有公共的样式设置,可以使用组选择器。
示例代码
- 伪类选择器
用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器
示例代码
写在最后
学习技术是一条慢长而艰苦的道路,不能靠一时激情,也不是熬几天几夜就能学好的,必须养成平时努力学习的习惯。所以:贵在坚持!
最后再分享的一些BATJ等大厂20、21年的面试题,把这些技术点整理成了视频和PDF(实际上比预期多花了不少精力),包含知识脉络 + 诸多细节,由于篇幅有限,上面只是以图片的形式给大家展示一部分。
Mybatis面试专题
MySQL面试专题
并发编程面试专题
这是第三个段落标签
注意点: 虽然给其它标签设置id=“box”也可以设置样式,但是不推荐这样做,因为id是唯一的,以后js通过id只能获取一个唯一的标签对象。
- 组选择器
根据组合的选择器选择不同的标签,以 , 分割开, 如果有公共的样式设置,可以使用组选择器。
示例代码
- 伪类选择器
用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器
示例代码
写在最后
学习技术是一条慢长而艰苦的道路,不能靠一时激情,也不是熬几天几夜就能学好的,必须养成平时努力学习的习惯。所以:贵在坚持!
最后再分享的一些BATJ等大厂20、21年的面试题,把这些技术点整理成了视频和PDF(实际上比预期多花了不少精力),包含知识脉络 + 诸多细节,由于篇幅有限,上面只是以图片的形式给大家展示一部分。
[外链图片转存中…(img-lsYUQcAR-1714297687770)]
Mybatis面试专题
[外链图片转存中…(img-xi2oagXZ-1714297687770)]
MySQL面试专题
[外链图片转存中…(img-6WordlCR-1714297687771)]
并发编程面试专题