html+css基础，小学生看完都学会了(1)

====

这是一个div标签

这个一个段落标签

---

百度网

百度网

提示:

标签不区分大小写，但是推荐使用小写。

根据标签的书写形式，标签分为双标签(闭合标签)和单标签(空标签)

2.1 双标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，比如: div标签

2.2 单标签是一个标签组成，没有标签内容， 比如: img标签

2. 小结

学习 html 语言就是学习标签的用法，常用的标签有20多个。

编写 html 标签建议使用小写

根据书写形式，html 标签分为双标签和单标签

单标签没有标签内容，双标签可以嵌套其它标签和承载文本内容

资源路径

===================================================================

资源路径

学习目标

能够知道相对路径和绝对路径的区别

当我们使用img标签显示图片的时候，需要指定图片的资源路径，比如:

这里的src属性就是设置图片的资源路径的，资源路径可以分为相对路径和绝对路径。

1. 相对路径

从当前操作 html 的文档所在目录算起的路径叫做相对路径

示例代码:

2. 绝对路径

从根目录算起的路径叫做绝对路径，Windows 的根目录是指定的盘符，mac OS 和Linux 是/

示例代码:

提示:

一般都会使用相对路径，绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题

3. 小结

相对路径和绝对路径是 html 标签使用资源文件的两种方式，一般使用相对路径。

相对路径是从当前操作的 html 文档所在目录算起的路径

绝对 路径是从根目录算起的路径

列表标签

===================================================================

列表标签

学习目标

能够知道列表标签的种类

1. 列表标签的种类

无序列表标签(ul标签)

有序列表标签(ol标签)

2. 无序列表

• 列表标题一

• 列表标题二

• 列表标题三

3. 有序列表

4. 列表标题一

5. 列表标题二

6. 列表标题三

7. 小结

列表标签有无序列表标签(ul标签)和有序列表标签(ol标签)

列表项目对顺序有要求的时候使用ol标签

列表项目对顺序无要求的时候使用ul标签

表格标签

===================================================================

表格标签

学习目标

能够知道表格的边线合并

1. 表格的结构

表格是由行和列组成，好比一个excel文件

2. 表格标签

标签：表示一个表格 标签：表示表格中的一行

标签：表示表格中的列	标签：表示表格中的表头

示例代码:

姓名 年龄 张三 18

表格边线合并:

border-collapse 设置表格的边线合并，如：border-collapse:collapse;

表单标签

===================================================================

表单标签

学习目标

能够知道表单中常用的表单元素标签

1. 表单的介绍

表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器 。

2. 表单相关标签的使用

标签 表示表单标签，定义整体的表单区域

标签 表示表单元素的文字标注标签，定义文字标注

标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式

type属性

type=“text” 定义单行文本输入框

type=“password” 定义密码输入框

type=“radio” 定义单选框

type=“checkbox” 定义复选框

type=“file” 定义上传文件

type=“submit” 定义提交按钮

type=“reset” 定义重置按钮

type=“button” 定义一个普通按钮

标签 表示表单元素的多行文本输入框标签 定义多行文本输入框

标签 表示表单元素的下拉列表标签 定义下拉列表

标签 与标签配合，定义下拉列表中的选项 示例代码:

姓名：

密码：

性别：

男

女

爱好：

唱歌

跑步

游泳

照片：

个人描述：

籍贯：

北京 上海 广州 深圳

3. 小结

表单标签是标签

常用的表单元素标签有: 、、 、 等标签

表单提交

===================================================================

表单提交

学习目标

能够知道表单的提交方式

能够知道表单中action属性的作用

1. 表单属性设置

标签 表示表单标签，定义整体的表单区域

action属性 设置表单数据提交地址

method属性 设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写

2. 表单元素属性设置

name属性 设置表单元素的名称，该名称是提交数据时的参数名

value属性 设置表单元素的值，该值是提交数据时参数名所对应的值

3. 示例代码

姓名：

密码：

性别：

男

女

爱好：

唱歌

跑步

游泳

照片：

个人描述：

籍贯：

北京 上海 广州 深圳

小结

表单标签的作用就是可以把用户输入数据一起提交到web服务器。

表单属性设置

action: 是设置表单数据提交地址

method: 是表单提交方式，提交方式有GET和POST

表单元素属性设置

name: 表单元素的名称，用于作为提交表单数据时的参数名

value: 表单元素的值，用于作为提交表单数据时参数名所对应的值

css的介绍

=====================================================================

css 的介绍

学习目标

能够知道css的作用

1. css 的定义

css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。

没有使用css的效果图

使用css的效果图

2. css 的作用

美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。

控制页面布局, 比如: 设置浮动、定位等样式。

3. css 的基本语法

选择器{

样式规则

}

样式规则：

属性名1：属性值1;

属性名2：属性值2;

属性名3：属性值3;

…

选择器:是用来选择标签的，选出来以后给标签加样式。

代码示例:

div{

width:100px;

height:100px;

background:gold;

}

说明

css 是由两个主要的部分构成：选择器和一条或多条样式规则，注意:样式规则需要放到大括号里面。

4. 小结

css 是层叠样式表，它是用来美化网页和控制页面布局的。

定义 css 的语法格式是: 选择器{样式规则}

css的引入方式

=======================================================================

css 的引入方式

学习目标

能够知道 css 的引入三种方式

css的三种引入方式

行内式

内嵌式（内部样式）

外链式

1. 行内式

直接在标签的 style 属性中添加 css 样式

示例代码:

hello

优点：方便、直观。 缺点：缺乏可重用性。

2. 内嵌式（内部样式）

在标签内加入

示例代码:

优点：在同一个页面内部便于复用和维护。 缺点：在多个页面之间的可重用性不够高。

3. 外链式

将css代码写在一个单独的.css文件中，在标签中使用标签直接引入该文件到页面中。

示例代码:

优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。 缺点：css代码由于分离到单独的css文件，容易出现css代码过于集中，若维护不当则极容易造成混乱。

4. css引入方式选择

行内式几乎不用

内嵌式在学习css样式的阶段使用

外链式在公司开发的阶段使用，可以对 css 样式和 html 页面分别进行开发。

5. 小结

css 的引入有三种方式, 分别是行内式、内嵌式、外链式。

外链式是在公司开发的时候会使用，最能体现 div+css 的标签内容与显示样式分离的思想， 也最易改版维护，代码看起来也是最美观的一种。

css选择器

=====================================================================

css 选择器

学习目标

能够说出 css 选择器的种类

1. css 选择器的定义

css 选择器是用来选择标签的，选出来以后给标签加样式。

2. css 选择器的种类

标签选择器

类选择器

层级选择器(后代选择器)

id选择器

组选择器

伪类选择器

3. 标签选择器

根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置。

示例代码

hello

hello

4. 类选择器

根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。

示例代码

这是一个div

这是一个标题

这是一个段落

5. 层级选择器(后代选择器)

根据层级关系选择后代标签，以选择器1 选择器2开头，主要应用在标签嵌套的结构中，减少命名。

示例代码

hello

哈哈

百度

谷歌

你好

新浪

注意点: 这个层级关系不一定是父子关系，也有可能是祖孙关系，只要有后代关系都适用于这个层级选择器

6. id选择器

根据id选择标签，以#开头, 元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

示例代码

这是一个段落标签

这是第二个段落标签

这是第三个段落标签

注意点: 虽然给其它标签设置id=“box”也可以设置样式，但是不推荐这样做，因为id是唯一的，以后js通过id只能获取一个唯一的标签对象。

7. 组选择器

根据组合的选择器选择不同的标签，以 , 分割开, 如果有公共的样式设置，可以使用组选择器。

示例代码

这是第一个div

这是第二个div

这是第三个div

8. 伪类选择器

用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器

示例代码

最后

对于很多Java工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。

整理的这些资料希望对Java开发的朋友们有所参考以及少走弯路，本文的重点是你有没有收获与成长，其余的都不重要，希望读者们能谨记这一点。

再分享一波我的Java面试真题+视频学习详解+技能进阶书籍

id选择器

根据id选择标签，以#开头, 元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

示例代码

这是一个段落标签

这是第二个段落标签

这是第三个段落标签

注意点: 虽然给其它标签设置id=“box”也可以设置样式，但是不推荐这样做，因为id是唯一的，以后js通过id只能获取一个唯一的标签对象。

7. 组选择器

根据组合的选择器选择不同的标签，以 , 分割开, 如果有公共的样式设置，可以使用组选择器。

示例代码

这是第一个div

这是第二个div

这是第三个div

8. 伪类选择器

用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器

示例代码

最后

对于很多Java工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。

整理的这些资料希望对Java开发的朋友们有所参考以及少走弯路，本文的重点是你有没有收获与成长，其余的都不重要，希望读者们能谨记这一点。

再分享一波我的Java面试真题+视频学习详解+技能进阶书籍

[外链图片转存中…(img-VVkaWkF6-1714297657807)]

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录