web前端
一、HTML+CSS1、HTML（不能定义）2、CSS快速入门习题
实例项目新闻代码1知识点代码2知识点代码3知识点代码4知识点代码5知识点最终案例代码代码6知识点代码7知识点代码8知识点
一、HTML+CSS
1、HTML（不能定义）
官方网站 1、超文本：超越文本的限制 2、标记语言：由标签构成的语言，标签都是定义好的。 3、HTML代码直接在浏览器中运行，HTML标签由浏览器解析。 细节：1、HTML标签不区分大小写，标签属性值单双引号都可以，比较松散。
2、CSS
1、层叠样式表，用于控制页面的样式。
快速入门习题
1、在vscode中新建一个文件后缀名为.html或者.htm 2、在html文件中快捷键 (！+回车)，快速生成HTML标签。 3、在 < body>中写入Hello world
Hello world!
实例项目新闻
代码1
卡莎故事>正文
回来的女孩
2024年5月30日 12：00 拳头官网
百密一疏
知识点
1、图片标签: < img > src：指定图像的url（绝对路径/相对路径） width：图像的宽度（像素/相对于父元素的百分比） height：图像的高度（像素/相对父元素的百分比） 2、标题标签：< h1>-< h6> 重要程度依次降低 3、水平线标签：< hr> 4、css引用 行内样式：写在标签的style属性中 内联样式：写在style标签中（通常约定写在head标签中） 外联样式：写在一个单独的css文件中（link标签在网页中引入） 5、颜色的表示方式 关键字：预定义的颜色名：red、blue、green rgb表示法：红绿蓝三原色，每项取值范围：0-255 ：rgb（0,0,0）/rgb(125,125,125) 十六进制表示法：#开头，将数字转换成十六进制表示 :#000000、#ff0000 晾在海边–颜色代码大全网址 颜色提取器博客 6、font-size：字体大小，单位像素px
代码2
卡莎故事>正文
回来的女孩
2024年5月30日 12：00 拳头官网
知识点
1、< span> 没有语义 2、css选择器：用来选取需要设置样式的元素（标签） 元素选择器： 类选择器： id选择器：页面唯一，不重复 优先级：id选择>类选择>元素选择 3、行高line-height
代码3
英雄故事>卡莎
回来的女孩
2024年5月30日 12：00 拳头官网
知识点
1、超链接< a href=" " target=“”>< /a> href：指定资源访问的url target：指定在何处打开资源链接 _self:默认值，在当前页面打开 _blank:在空白页面打开 2、text-decoration: none; 去除下划线
代码4
英雄故事>卡莎
回来的女孩
2024年5月30日 12：00 拳头官网
关于勇猛的虚空猎手卡莎：
最值得称道的可能要数她不值一提的出身。
她并不是饱经战斗洗礼的部族战士的后裔，
也不是响应召唤远道而来，对抗恕瑞玛地下不可知邪魔的勇者。
相反，曾经的她只是个普通的小女孩。
虽然生在南部沙漠的残酷环境里，
但父母的关爱给予了她温暖。白天，
她和伙伴们玩耍嬉闹；夜里，
她憧憬着自己将来在这世上的位置。
正是在这一切都已流落的时刻，她看到了光。
正是在这一切都已流落的时刻，她看到了光。她跟随光亮，一直向下。
编辑：masha
知识点
1、视频标签：< video> src:规定视频url controls:显示播放控件 width:播放器的宽度 height:播放器的高度 2、音频标签< audio> src:规定音频的url controls:显示播放控件 3、段落标签< p> 文本加粗标签:< b>,< strong> 4、换行标签：< br> 5、首行缩进：text-indent 6、规定文本对齐方式：text-align (center–居中 left–左 right–右)
代码5
A A A A A A A A A A A A A A A A A A A A A A
知识点
1、盒子模型：页面中所有的标签都可以看做事一个盒子，通过盒子的视角更方便的进行页面布局操作。 2、盒子模型的组成：内容区域（content）、内边距（padding）、边框（border）、外边距（margin）简单说，盒子模型其实就是三个css属性：padding 、border、margin 3、布局标签： ①实际开发网页中，会大量使用div 和span 。 ②标签：< div>、< span> ③特点： div 标签：一行只显示一个（独占一行） 宽度默认事父元素的宽度，高度默认由内容撑开，可以设置宽高。 span标签：一行可以显示多个 宽度和高度默认由内容撑开，不可以设置宽高。 4、设置边框 border (宽度、线条类型、颜色) 5、盒子的宽度：box-sizing :border-box —指定width height为盒子的宽度。 6、背景颜色：background-color 7、内边距（上下左右）：paddding 8、外边距（上下左右）margin —auto（水平居中）
最终案例代码
英雄故事>卡莎
回来的女孩
2024年5月30日 12：00 拳头官网
关于勇猛的虚空猎手卡莎：
最值得称道的可能要数她不值一提的出身。
她并不是饱经战斗洗礼的部族战士的后裔，
也不是响应召唤远道而来，对抗恕瑞玛地下不可知邪魔的勇者。
相反，曾经的她只是个普通的小女孩。
虽然生在南部沙漠的残酷环境里，
但父母的关爱给予了她温暖。白天，
她和伙伴们玩耍嬉闹；夜里，
她憧憬着自己将来在这世上的位置。
正是在这一切都已流落的时刻，她看到了光。
正是在这一切都已流落的时刻，她看到了光。她跟随光亮，一直向下。
编辑：masha
代码6
| 序号 | 品牌logo | 品牌标签 | 企业名称 |
|---|---|---|---|
| 001 | |
图标1 | tubiao1 |
| 002 | |
图标2 | tubiao2 |
知识点
1、html表格标签：
代码7
知识点
1、表单标签 2、提交方式 ①get：默认值，表单数据在url后面拼接，格式：url？username=java&age=22；url长度有限 ②post:表单数据在请求体中，需要f12或者fn+f12==>点击network查看
两者区别： 1、get请求提交的数据在地址栏路劲后面，post请求提交的数据在请求体中 2、get请求提交数据相对不安全，post请求提交数据相对安全 3、get请求提交数据有大小限制，post请求提交数据没有大小限制
代码8
知识点
1、表单项：