2023年1月第一周Javaweb总结_java 2023-1-1 一年的第一周-优快云博客

本文链接：https://blog.youkuaiyun.com/DoNotGankMe/article/details/128589359

本文介绍了HTML的基础知识，包括标签、多媒体和表单元素，以及实体引用和标签类型。接着，阐述了CSS的选择器、样式引入和元素布局，如块元素与行元素的转换、盒子模型和定位方式。此外，提到了JavaScript在页面交互中的作用。进一步讨论了CSS中的弹性盒子和响应式布局技术，强调了其在现代前端开发中的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML基础知识
-------------------------------

1.HTML的概念

HyperText Marked Language (超文本标记[标签]语言)。
学习制作网页的结构。

常见的标签
1)文档类型声明。<!DOCTYPE HTML>
2) <HTML> //根标签，有且只有一个。
3) <meta> //页的元信息。字符集，作者，关键字，移动设备优先显示，刷新...
<meta charset="utf-8"/>

4)文本标签 h hr p div span a strong b i em ul li ol li dl dd dt sup sub...
5)多媒体标签 <img src="url"/> vedio audio progress ...
6)表格标签 <table> <tr> <td> <th> colspan rowspan
7)表单标签 <form action="" name="xxx" method="get/post">
<input type="text|password|radio|checkbox|file|hidden|date|submit|reset|button">

8)实体引用  <>&&right;©....

9)单标签和双标签。

hr br img input ..... <hr/> <br/> <br>

2.HTML/Css/Javascript
-----------------------------------------------------
HTML：负责页面的结构。(Structure)
Css: 负责页面的样式。(Style)
Javascript: 负责页面交互行为。(Action)
前端三剑客。

Css3基础知识
------------------------------------------------------

1.选择器

标签 ID 类伪类子后代组合属性通配符*

2.选择优先级

!important > 内联样式 >ID >类 >标签 >伪类 >通配符*

3.样式表的三种引入

1)内部样式。
<style>
xxxxxx
</style>

2)外部引入
<link type="text/css" rel="styleSheet" href="CSS文件路径" />

3)内联样式
<p style="xxxxx">

内联 > 内部 >外部

4. 块元素什么是行元素。
块：独占一行，可以设宽度和高度。div p ul li ol li table form
行：不会独占一行，不能设宽高。span img strong i

display: inline; //块元素转换为行元素。
display: block; //行元素转换为块元素。

5.盒子模型
盒子：肯定块元素。
content,padding,border,margin;
盒子的尺寸=content+padding+border

6.脱离文档流的三种方式：fixed,float,absolute.

7.定位：static,fixed,absolute,relative;

8.弹性盒子。float/flex/grid
浮动是魔鬼，clear是小白。

flex

//父元素
父元素：display:flex; //表示父元素使用弹性盒子布局。
justify-content: space-around; /*等间距*/
flex-flow: row wrap; /*水平对齐，并且换行*/
/*父元素使用弹性盒子布局*/
align-items:center; /*垂直居中*/

//子元素的属性
flex-grow :1;
order: 1
--------------------------------------------
9.z-index
层：

10.响应式布局