前端开发第一天
1、HTML是什么
HTML是一种超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
2、XML是什么
XML叫做可扩展标记语言
3、写一个网页需要哪些技术：
HTML: 写页面的一个架子（页面结构）
CSS：做页面的美化
JS: 给页面添加一些动态效果
4、第一个HTMl页面
在VS Code中的html文件里，输入一个!，然后回车，就可以自动的生成一个html页面模板
5、HTML页面的基本结构
<html lang="en">
<head> 页面的相关信息写在head标签中 </head>
<body> 需要显示在浏览器中的东西写在body中 </body>
</html>
6、h1~h6标签
1)标签中文字加粗
2)h1到h6文字的大小会依次变小（h1的字体最大）
3)所有的h标签都会占一行
7、hr标签
1)在页面显示为一条横线
8、单标签与双标签
HTML中的标签可以分为两种：
单标签：没有标签对，只有一边，比如hr标签
双标签：有标签对，有两边，比如h1标签
9、HTML中的注释
写法：
注意：注释中的内容浏览器是不会识别显示的，所以一般会写注释来做代码的说明
10、关于标签的语义化：
标签的语义化简单说看到这个标签，就知道它表达个什么意思
比如：
h1标签语义：表示标题
p标签语义：表示段落
11、br标签
表示强制换行,br标签换行没有间距
而p标签等会有间距
12、Strong标签与b标签
共同点：
1)文字加粗
2)不占一行
不同点：
1)strong标签有语义，表示强调(有利于SEO搜索)
2)b标签没有主义
13、em标签与i标签
共同点：
1)里边的文字为斜体
2)不占一行
不同点：
1)em标签有语义, 表示强调(强调的语气比strong要小)
2)i标签没有语义
14、sup与sub标签
sup表示上标（例如：4<sup>4</sup>）
sub表示下标（例如：H<sub>2</sub>O）
15、常用特殊符号
表示空格
< 表示向左的尖括号
> 表示向右的尖括号
© 表示版权符号©
16、img标签
1)用于在页面显示图片
2)src属性：设置要显示图片的路径
3)width属性：设置图片的宽度
4)height属性：设置图片的高度
PS：如果只改变了图片的某一条边，则另一条边也会等比缩小或者放大
面试题：img标签的title属性 与 alt属性的区别是什么？
5) title: 图片的标题（当光标移入到图片上时，则显示标题）
6) alt: 图片加载失败的提示（当图片显示失败时，则会显示alt的内容）
17、相对路径与绝对路径
相对路径：
从当前文件路径开始找指定的资源，这种路径叫相对路径
./ 表示当前文件路径（如果不写也表示当前路径开始找）
../ 表示返回上一级目录
例如：<img src="./images/1.jpg" alt="">
绝对路径：
从磁盘的根目录开始找指定的资源, 这种路径叫绝对路径
例如：<img src="G:/万树IT教学资料/DW2106/day02/images/2.png" alt="">
18、a标签
a标签的作用一：可以跳转到指定的其它页面(也可以是网上的页面)
也可以认为a标签它会去请求指定的页面路径
target="_blank"表示在新的窗口打开页面(默认会在当前窗口打开)
a标签的作用二：可以设置锚点（可以页面的内部进行位置跳转）
锚点可以给标签设置id, 也可以给a标签设置name
a标签的作用三：可以打开邮箱，进行发邮箱
19、iframe标签：
1)表示内联框架，可以在当前页面嵌套其它的页面
2)src属性：要显示的页面路径
3)width属性：宽度
4)height属性：高度
5)frameborder属性：是否有边框（设置为0表示无边框）
6)scrolling属性：是否有滚动条
20、列表
1)有序列表（ol标签）
ol标签：有序列表
type属性：
type="1" 表示序号为阿拉伯数字
type="A" 表示序号为大写字母
type="a" 表示序号为小写字母
type="i" 表示序号为小写罗马数字
type="I" 表示序号为大写罗马数字
注意：可以列表中嵌套其它列表
li标签：列表的每一个列表项
2)无序列表（ul）
ul标签：无序列表
type属性：
type="disc" 显示实心圆(默认值)
type="circle" 显示空心圆
type="square" 显示实体方心
li标签：列表中每一个列表项
3)自定义列表（dl）
dl标签：自定义列表
dt标签：每一个列表项的标题
dd标签：对列表项的描述
21、表格
1)table标签：表示表格
width属性：设置表格宽度
height属性：设置表格高度
border属性：设置边框
cellspacing属性：设置单元格之间距离
cellpadding属性：设置单元格里边的边距
align属性：设置表格的水平对齐方式（值为left / center / right）
2)tr标签：表示行
3)td标签：表示每一行里的单元格（表格最小的单位）
4)th标签：表示单元格（它表示的表头的单元格，里边的文字会加粗且居中）
align属性：设置水平方向的对齐方式（left / center/ right）
valign属性：设置垂直方向的对齐方式（top / center/ bottom）
rowspan属性：跨行合并
colspan属性：跨列合并
5)thead标签：存放表头部分
6)tbody标签：存放表体部分
7)tfoot标签：存放表尾部分
22、form表单标签
1)action属性：表单要提交的地址
2)method属性：表单提交的方式（如果不写method属性，则默认为get请求）
get请求：用于查询数据
特点：
1)提交的数据，会跟在url的后面（例如：https://github.com/login?password=123456）
2)相对不安全
3)请求的速度相对快些
4)提交的数据相对比较小
post请求：用于添加数据
特点：
1)提交的数据，会存放在请求体中
2)相对安全些
3)请求的速度相对慢些
4)提交的数据相对比较大
put请求：用于修改数据
delete请求：用于删除数据
23、input标签（表单元素）
type属性：
<input type="submit" value="提交按钮"> 提交按钮(可以提交表单)
<input type="button" value="普通按钮"> 普通的button按钮
<input type="text"> 文本框
<input type="password"> 密码框
<input type="radio" name="sex"> 单选框（name相同的radio为同一组，同一组中只能选中一个）
<input type="checkbox" name="hobby" value="吃"> 复选
<input type="file" name="pic"> 文件域（用于提交文件）
<input type="reset" value="重置按钮"> 重置按钮（重置表单信息）
<input type="image" src="./images/1.png"> 图片按钮（也可以做表单的提交）
<input type="number" min="10" max="15" value="12" name="on"> 数值框（只能填写数字）
<input type="date"> 日期文本框（可以选择日期）
<input type="email"> 邮箱（只有输入的东西是一个邮箱时，表单才能提交）
<input type="hidden" value="120" name="id"> 隐藏域（在页面会隐藏，注意它也会和表单一起提交）
value属性：数据值，可以给input设置默认值（也可以通过value获取）（单选，复选，下拉列表注意都要写value）
name属性：数据名，要提交的数据都要设置name
24、下拉列表（表单元素）
select标签：下拉列表
option标签：下拉列表列表项
24、文本域
textarea标签：文本域
25、checked 与 selected属性
checked属性：可以让单选或者复选框默认选中
selected属性：可以默认选中某一个下拉列表项
26、label标签
label标签：可以点击文字的同时，也选中input
写法一：把input与文件包在label标签中
<label><input type="radio" name="sex" value="男">男</label>
写法二：通过label的for属性与input的id属性进行关联
<input id="m" type="radio" name="sex" value="女" checked><label for="m">女</label>
27、只读与禁用
readonly属性：表示只读（可以选中元素，但不能修改值）
<input type="text" name="username" readonly value="佐助">
disabled属性：表示禁用（不可以选中元素）
<input type="password" name="password" disabled value="123456">
28、表单域与域名称
fieldset标签：表单域
legend标签：表单域名称
29、按钮标签
button标签：表示一个按钮（例如：<button>我是一个小按钮</button>）
30、HTML标签的嵌套问题
块级元素：独占一行的元素（列如：h1-h6、p、ul、li、ol、dl、dt、dd、div）
行级元素：不独占一行的元素（例如：a、strong、i、b等标签）
标签嵌套的基本规则：
1、p标签中不允许嵌套块元素（p标签包不住块级元素）
2、h标签不允许相互嵌套
3、行级元素不建议嵌套块级元素（块元素可以行元素）
4、行级元素与块级元素最好不要在同一级
5、li标签可以嵌套任何标签（包括div）
31、编码问题
1)注意：浏览器解析页面的编码 要与 页面文件本身的编码保持一致
2) <meta charset="utf-8" /> 作用：告诉浏览器，以指定的编码来解析这个html页面文件
32、页面的三要素
<meta name="keywords" content="佐助, 鸣人" />
<meta name="description" content="这是一个要成为海贼王的男人的故事" />
<title>海贼王</title>
33、div标签
div标签：独占一行，是一个块级元素
作用：会使用div标签做页面的结构布局
34、span标签
span标签：对标签里的内容不会有任何效果（这个标签没自带的任何样式）
有的时候，希望给某一段文字加个标识（方便后面的操作），但是又不希望这个标识 对这个文字有任何影响
35、style标签：
style标签：可以这个标签中写css样式（一般会把这个标签写在head头部）
36、css样式语法：
选择器 {
样式属性名：样式属性值;
}
37、基本的选择器
标签选择器：通过标签的名称去选择器页面的元素
例：h1 { color: red; }
class选择器：通过标签的class属性去选择页面元素（也叫做类选择器， .表示class ）
例：.user { color: gold; }
id选择器：通过标签的id属性去选择页面元素（#表示id）
例：#item1 { color: pink; }
注意：
id在页面中应该是唯一的（一个页面中可以设置多个id属性，但是不能出现同样的id名）
class在页面中可以有多个同名的class
38、后代选择器
例如：#box h1 { color: red; }
注意：中间需要有个空格
39、通配符选择器
特点：可以选择页面所有的元素;(不太建议使用，页面对页面性能不好)
特点：* { color: red; }
40、并集选择器
例如：同时给多个选择器设置统一样式
h1 strong,
.title,
p {
color: red;
}
41、交集选择器
例如：.list p.item { color: red; }
42、选择器的优先级：
id选择器 > class选择器 > 标签选择器
43、行内样式
行内样式(它只会影响到当前的标签)
特点：把样式写在标签的style属性中
注意：不建议把样式直接写在标签里边（如果样式比较少,还是可以接受的）
44、内部样式表
特点：样式写在style标签中
45、外部样式表
特点：把样式写在一个外部css文件中
引入外部样式表（方式一：
通过link标签引入
例如：<link rel="stylesheet" href="./css/home.css">
引入外部样式表（方式二：
通过@import引入
例如：<style>
@import url('./css/home.css');
</style>
注意：@import需要写在style的最上面
46、link与@imprt的区别：
1)link是一个html标签，@import是一个css的语法
2)link引入兼容性比@import要好些
3)link引入会先引入后页面加载，@import会先页面加载后引入
47、样式表的优先级:
行内样式 > 内部样式 和 外部样式
注意：内部样式和外部样式谁写在下面，谁的优先级就高（一般来说内部样式表会写在下面）
48、!important
特点：表示最高优先级
例如：h1{ color: blue !important; }
49、常用css基本属性
width: 200px; （宽度）
height: 200px; （高度）
background: gold; （背景）
text-align: center; （文字的水平居中）
line-height: 200px; （文字的垂直居中(设置行高)）
color: red; （字体颜色）
font-size: 20px; （字体大小）
font-weight: bold; （字体粗细, bold表示加粗）
font-style: italic; （字体样式(italic表示斜体，normal表示正常)）
font-family: 宋体, 黑体, Arial, Helvetica, sans-serif; （字体类型）
text-indent: 2em; （文本首行缩进）
letter-spacing: 16px;（字符间距）
word-spacing: 1em; （单词间距）
vertical-align: middle;（设置垂直居中(可以设置两边文字垂直对齐方式)）
text-decoration: none; （文本的修饰，none值表示无）
50、em单位
1em表示的是1个字的大小
51、calc()
calc()可以在css样式中用于数学运算
例如：text-indent: calc(16px * 2);
52、font属性：
font属性它里边包含了 font-size， font-weight， font-style，font-family四个功能 （像这样的属性，我们叫做复合属性）
注意1：font属性的值书写有顺序
font: font-style font-weight font-size font-family
注意2：font-size 与 font-family属性必需要写
52、背景
background-color: pink; （背景颜色）
background-image: url(./images/1.jpg); （背景图片）
background-size: 50px 30px; （背景图片的大小）
background-repeat: no-repeat; （设置背景图片的平铺）
background-position: 100px 200px; （设置背景图片的位置）
background：表示背景（是一个复合属性）
注意：使用background复合时，斜杠前面的一定是位置，后面的一定是大小
注意：使用background复合时，可以只设置位置不设置大小，但设置了大小就一定要有位置
例如：background: url(./images/1.jpg) no-repeat 0px 0px / 50px 50px;
注意：设置多个背景图片
例如：background: url(./images/1.jpg) no-repeat 0px 0px / 50px 50px, url(./images/2.png) no-repeat 0px 0px / 100px 100px;
53、颜色的取值
单词文本取值（transparent特殊值表示透明）
background: transparent;
十六进取值
background: #999;
rgb取值 rgb()取值的范围: 0-255
background: rgb(45, 120, 15);
rgba取值 a表示的是透明值,取值范围是0-1（rgba透明仅仅只是颜色的透明）
background: rgba(240, 218, 27, 0.6);
54、透明属性
opacity属性，设置元素透明（整个元素都会透明）
例如：opacity: 0.4;
55、边框
border属性表示边框
border: 边框线大小 线的类型 线的颜色（顺序是可以变的）
border-left: 左边框
border-right: 右边框
border-top: 上边框
border-bottom: 下边框
56、:hover伪类 （当光标移入时会触发生效）
#box:hover { /*移入box时，把box的颜色改变为red*/
background: red;
}
57、border-radius属性
作用: 设置圆角
四个值时：
border-radius: 左上 右上 右下 左下;
三个值时：
border-radius: 左上 右上/左下 右下;
两个值时：
border-radius: 左上/右下 右上/左下;
一个值时：
border-radius: 表示四个角
58、内边距(padding)
padding作用：设置内边距
特点：
1)设置内边距，盒子会变大
2)设置内边距，设置盒子里边内容与边界的距离
注意：
1)给行内元素设置的上下内边距会与其它的元素重叠
2)内边距的区域可以渲染颜色与背景图
59、外边距（margin）
margin作用：设置外边距（盒子与盒子外边边界的距离）
注意：
1)行内元素不支持上下外边距的设置(左右外边距可以)
2)上下的外边距会重叠
两个为正数时：取大值
一正一负时：做加运算
两个为负数时：取小值
3)子元素的margin-top会带着父元素一起往下移
解决方法：可以给父元素加一个边框 或者 给父元素添加overflow: hidden
4)margin的左右设置为auto，可以让盒子水平居中
例如：margin: 0px auto;
60、盒子模型
特点：由宽高(width/height)、内边距(padding)、边框(border)、外边距(margin)四个东西组成
注意：算一个盒子的大小时，注意算把两条边算进去
顺序（由里到外）：宽高(width/height) > 内边距(padding) > 边框(border) > 外边距(margin)
61、box-sizing属性
box-sizing: border-box;
作用：可以把内边距和边框的大小，计算到设置的宽高中（width/height）；
添加了padding,border时，可以保证设置宽高不会发生变化
62、伪类对象
特点：可以把伪类对象当成一个行级元素来操作（它会做为一个伪元素添加到页面）
注意：伪类对象里边必需要写一个content属性（值是一个字符串，可以是一个空字符串""）
::after伪类对象
作用在元素内容的最后面添加一个伪元素
::before伪类对象
作用在元素内容的最前面添加一个伪元素
63、浮动(float)
作用：在布局时，可以让多个块元素并排显示
特点：
1)浮动的元素可以脱离页面（导致它下面的元素跑上去）
2)子元素的浮动会影起父元素高度撑不开（一旦使用的浮动，就建议清除浮动影响）
3)可以把一个元素变成一个行内块元素
清浮动第1种解决方案：
第一步：在父元素里边最下面添加一个div
第二步：给添加的div写一个clear: both;
缺点：会多出一个div元素，不是很好
清浮动第2种解决方案：
第一步：给父元素添加一个after伪类对象
第二步：给伪类对象清浮动
#box::after {
content: "";
clear: both;
/* display: block;可以把元素变成块元素 */
display: block;
}
清浮动第3种解决方案：
第一步：父元素添加一个overflow: hidden;
64、display属性
display: inline; 把一个元素变成一个行级元素
display: block; 把一个元素变成一个块级元素
display: inline-block; 把一个元素转换成一个行内块级元素
display: none; 把元素从页面中隐藏掉，并且不占位置
注意：(opacity: 0)透明隐藏可把元素从页面中隐藏掉，会占位置
注意：(visibility: hidden) 也可以隐藏元素，会占位置
65、定位属性
1)绝对定位（ position: absolute）
1.绝对定位的元素会脱离文档
2.绝对定位默认会以窗口的左上角为参考点进行偏移（如果有定位的祖先元素(一般为相对定位),则会以那个祖先元素左上角为参考进行偏移）
3.绝对定位的元素margin: auto会不起作用
4.绝对定位可以让元素变成行内块级元素
5.绝对定位会让浮动失效
2)相对定位（position: relative;）
1.相对定位的元素 不会脱离文档流
2.相对定位元素偏移时，从当前位置开始偏移
3.相对定位对margin: auto;没有影响
4.相对定位对浮动 没有影响
5.相对定位对元素本身没有任何影响（比如不会让行内元素支持宽高）
总结：相对定位对元素本身没有任何影响
总结：如果子元素添加了绝对定位，又希望它以父元素为参考偏移，这个时候一般会给父元素添加相对定位
3)固定定位（position: fixed;）
1.固定定位特点基本与绝对定位一致，但是固定定位的元素不会随着页面的滚动而滚动
这篇博客详细介绍了HTML和CSS的基础知识，包括HTML的结构元素如标题、段落、列表、表格，以及CSS的样式设置如颜色、字体、布局。还探讨了浮动、定位和盒模型等核心概念，对于前端开发者来说是一份很好的入门教程。
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
