一、HTML超文本标记语言1、快速入门html head titleHTML快速入门/title /head body h1Hello HTML/h1 img srcimg/1.png /body /html其中html是根标签head和body是子标签head: 定义网页的头部用来存放给浏览器看的信息如CSS样式、网页的标题。body: 定义网页的主体部分存放给用户看的信息也是网页的主体内容如文字、图片、视频、音频、表格等。title中定义标题显示在浏览器的标题位置。2、HTML的特点HTML标签不区分大小写建议小写HTML标签的属性值采用单引号、双引号都可以一般写双引号HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些)3、超链接a标签标签a href..... target.....稽稽稽稽不如人/a属性href:指定资源访问的urltarget指定在何处打开资源链接。_self: 默认值在当前页面打开、_blank: 在空白页面打开。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title【旮旯给木速报】红毛青梅掀翻榜单二见原莉莉子登顶柚子社最强四号位/title /head body !-- 定义一个标题标题内容为【旮旯给木速报】红毛青梅掀翻榜单二见原莉莉子登顶柚子社最强四号位 -- h1【旮旯给木速报】红毛青梅掀翻榜单二见原莉莉子登顶柚子社最强四号位/h1 !-- 定义一个超链接里面展示的内容是Bilibili -- !-- a 超链接标签 href 属性超链接的链接地址-url地址 target 属性超链接打开方式 _blank新窗口打开 _self当前窗口打开默认 -- a hrefhttps://space.bilibili.com/325953797?spm_id_from333.1007.0.0 target_blank稽稽稽稽不如人/a 2025年12月23日 15:00 /body /html二、CSSCSS:Cascading Style Sheet层叠样式表用于控制页面的样式表现。1、CSS引入方式名称语法描述例子行内样式在标签内使用stye属性属性值是css属性键值对span stylecolor:gray;2025年12月23日 15:00/span内部样式定义styk标签在标签内部定义css样式。stylespan{color:#b2b2b2;}/style外部样式定义lnk标签通过href属性引I入外部css文件link relstylesheet hrefcss/news.css在企业开发中最常使用的是外部样式让html和css实现了完全分离2、颜色表示方式style span{ /* 关键字 */ /* color: gray; */ /* RGB表示法 */ /* color: rgb(255, 255, ); */ /* RGBA表示法 */ /* color: rgba(255, 0, 0, 0.1); */ /* 十六进制表示法 */ /* color: #f00; */ color:#b2b2b2; } /style3、css选择器选择器是选取需设置样式的元素标签但是我们根据业务场景不同选择的标签的需求也是多种多样的所以选择器有很多种。a{ /* 去除超链接的下划线 */ text-decoration: none; } a hrefhttps://space.bilibili.com/325953797?spm_id_from333.1007.0.0 target_blank稽稽稽稽不如人/a三、正文排版浏览器在解析渲染页面的时候是从上往下解析渲染的我们就可以从上往下来布局这个页面代码如下!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title【旮旯给木速报】红毛青梅掀翻榜单二见原莉莉子登顶柚子社最强四号位/title style /* id选择器-优先度最高 */ #time{ color:#b2b2b2; } a{ /* 去除超链接的下划线 */ text-decoration: none; } p{ /*设置行高 */ line-height: 1.8;/* 行高2倍行高 */ /* 设置首行缩进 */ text-indent: 2em;/* 首行缩进2个字符 */ } /* 整体版面居中显示 */ #content-container{ width: 70%; margin:0 auto; } /style /head body div idcontent-container !-- -------------------------------------新闻标题------------------------------------ -- !-- 定义一个标题标题内容为【旮旯给木速报】红毛青梅掀翻榜单二见原莉莉子登顶柚子社最强四号位 -- h1【旮旯给木速报】红毛青梅掀翻榜单二见原莉莉子登顶柚子社最强四号位/h1 a hrefhttps://space.bilibili.com/325953797?spm_id_from333.1007.0.0 target_blank稽稽稽稽不如人/a span classcls idtime2025年12月23日 15:00/span brbr !-- -------------------------------------新闻正文------------------------------------ -- !-- 定义一个视频引入video/冲浪学院——瓦学弟形态.mp4 -- !-- video标签属性 src视频路径 controls显示播放控件 autoplay自动播放 width宽度建议设置一个另一个等比例缩放 height高度 单位像素——px 百分比——%相当于父元素的百分比 -- video srcvideo/冲浪雪鹰——瓦学弟形态.mp4 controls width100%/video p 二见原莉莉子能稳坐柚子社最强四号位核心原因是她的人设立体度、剧情完整度和情感共鸣力在四号位角色中形成了碾压级优势。 /p p !-- b1. 人设自带 “青梅 经纪人” 双重 buff适配度拉满/b -- strong1. 人设自带 “青梅 经纪人” 双重 buff适配度拉满/strong /p p 莉莉子作为男主冲浪雪鹰的青梅竹马有着最自然的情感基础。她不拘小节房间乱糟糟每天需要男主叫醒以毫无防备的姿态融入男主日常既是家人般的陪伴又带着少年气的合拍感不像传统青梅的 “邻家小妹”更像能并肩前行的 “兄弟”。 同时她身为乐队 SNS 负责人全程包揽运营与后勤工作。男主组建乐队后她从练习陪伴到 live 现场守望用专业能力成为乐队不可或缺的支柱这种 “情感陪伴 事业辅助” 的双重设定让角色功能性远超普通四号位。 /p !-- 定义一张图片引入img/9.jpg -- !-- img标签属性 src图片访问路径 1、绝对路径 1.1:绝对磁盘路径D:\code4\HTML-CSS\img\2.jpg-不要用服务器端运行否则不显示图片不推荐 1.2:绝对网络路径https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png 2、相对路径 2.1:当前目录./可以省略img/2.jpg 2.2:上一级目录../img/2.jpg width宽度建议设置一个另一个等比例缩放 height高度 -- img srcimg/9.jpg width100% /img p strong2. 剧情双向奔赴有深度碾压同作其他支线/strong /p p 相较于其他角色线的短板莉莉子线的情感逻辑和成长弧光更完整。男主陷入作曲瓶颈时她没有只做旁观者而是主动奔走询问他人用行动给予支持在家中敞开胸怀治愈男主的低谷情绪这种 “你为梦想拼搏我为你托底” 的双向奔赴比单纯的甜宠剧情更有感染力。 剧情中 “秋千告白”“游戏厅智斗” 等名场面将青梅竹马的暧昧与拉扯写得细腻动人。两人从 “习惯彼此存在” 到 “正视暗藏多年的喜欢”再到告白后仍能保持日常相处的松弛感这种 “不轰轰烈烈却深入人心” 的浪漫让情感线更具回味性。 /p !-- 定义一个图片路径img/4.jpg -- img srcimg/4.jpg width100%/img p 反观同作其他支线或存在剧情突兀如隐杏珠线、或篇幅过短如美玖线、或逻辑生硬如惠凪线家庭篇而莉莉子线虽有脚本争议但核心情感线完整且贴合人设对比之下优势尽显。 /p pstrong3. 情感共鸣直击核心符合柚子社粉丝期待/strong /p p 莉莉子的魅力在于 “真实感”。她会因为男主放弃吉他而失落会在面对告白时手足无措会用最笨拙的方式守护在意的人这种不完美的可爱恰好戳中了粉丝对 “理想青梅” 的想象 /p !-- 定义图片路径img/6.jpg -- img srcimg/6.jpg width100%/img p她的个人线没有强行制造冲突而是聚焦于日常相处的细节 —— 电视机前的老夫老妻式互动、被双方家长打趣的羞涩这些贴近生活的桥段让角色跳出 “工具人” 定位成为有血有肉的存在。这种共鸣力是柚子社过往四号位角色中少有的也让她成为无可替代的 “最强四号位”。/p img srcimg/8.jpg width100%/img /div /body /html页面展示1、常用标签在HTML页面中我们在代码中录入空格、、 这些符号的时候是没有对应的效果的因为浏览器并不能准确的识别此时我们就需要通过字符实体来表示空格, 。常见符号的字符实体如下2、路径表示绝对路径绝对磁盘路径D:\code4\HTML-CSS\img\2.jpg-不要用服务器端运行否则不显示图片不推荐绝对网络路径https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png相对路径当前目录./可以省略img/2.jpg上一级目录../img/2.jpg3、正文样式p{ /*设置行高 */ line-height: 1.8;/* 行高2倍行高 */ /* 设置首行缩进 */ text-indent: 2em;/* 首行缩进2个字符 */ }4、布局/* 整体版面居中显示 */ #content-container{ width: 70%; margin:0 auto; }四、盒子模型1、概念盒子页面中所有的元素标签都可以看做是一个 盒子由盒子将页面中的元素包含在一个矩形区域内盒子模型组成内容区域content、内边距区域padding、边框区域border、外边距区域margin。2、布局标签实际开发网页中会大量频繁的使用 div 和 span 这两个没有语义的布局标签。div一行只显示一个独占一行宽度默认是父元素的宽度高度默认由内容撑开可以设置宽高width、height。span一行可以显示多个宽度和高度默认由内容撑开不可以设置宽高width、height。body div A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A /div div A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A /div span A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A /span span A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A /span /body运行结果!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style #div1{ width: 400px;/* 宽度 */ height: 300px;/* 高度 */ background-color: pink; padding: 30px;/* 内边距 */ box-sizing: border-box;/* 盒子模型 */ border: 20px solid #ffbbf7;/* 边框 */ margin: 30px auto;/* 外边距 */ } /style /head body div iddiv1 A A A A A A A A A A A A A A A A A A A A A A /div /body /html五、flex弹性布局!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleYUZUSOFT智能学习辅助系统/title style body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .navbar { background-color: #fff9c4; /* 淡黄色背景 */ height: 60px; display: flex;/* 弹性布局 */ justify-content: space-between; /* 左右两端对齐 */ align-items: center; /* 垂直居中 */ padding: 0 20px; box-sizing: border-box; border-bottom: 1px solid #ddd; } .title { font-size: 24px; font-weight: bold; color: #333; /* 设置字体为楷体 */ font-family: 楷体; } .logout-link { text-decoration: none; color: #666; font-size: 16px; padding: 8px 16px; border-radius: 4px; transition: color 0.3s; } .logout-link:hover { color: #ff6b6b; text-decoration: underline; } /style /head body !-- 第一部分顶部导航栏 -- nav classnavbar div classtitleYUZUSOFT智能学习辅助系统/div a href# classlogout-link退出登录/a /nav /body /html1、概念flex是flexible Box的缩写意为弹性布局。采用flex布局的元素称为Flex容器它的所有子元素自动成为容器成员称为Flex项目item。通过给父容器添加flex属性,来控制子元素的位置和排列方式。2、flex相关CSS样式!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleflex弹性布局/title style /* body { margin: 0; } */ #container { background-color: #f1eeee; width: 500px; height: 300px; display: flex; /* flex弹性布局 */ flex-direction: row; /* 默认为row水平布局, 设置主轴 */ /* flex-start: 从头开始排列 */ /* flex-end: 从尾部开始排列 */ /* center: 在主轴上居中对齐 */ /* space-around: 平分剩余空间 */ /* space-between: 先两边贴边, 再平分剩余空间 */ justify-content: space-between; } .item { background-color: rgb(184, 246, 184); border: 1px solid rgb(141, 138, 138); width: 100px; height: 50px; } /style /head body div idcontainer div classitem1/div div classitem2/div div classitem3/div /div /body /html六、表单标签1、概念表单场景表单就是在网页中负责数据采集功能的如注册、登录的表单。表单标签form表单属性action:规定表单提交时向何处发送表单数据表单提交的URL。method规定用于发送表单数据的方式常见为 GET表单数据是拼接在url后面的 如 xxxxxxxxxxx?usernameTomage12url中能携带的表单数据大小是有限制的、POST表单数据是在请求体消息体中携带的大小没有限制。表单项标签!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body !-- form表单 form标签属性 action提交表单时表单数据发送到的服务器地址url method提交表单时表单数据发送到服务器的方式 get默认将表单数据以键值对的形式附加在url后面形式/save?namexxxagexxx 特点 1、数据不安全 2、数据长度有限制不适合提交大数据量表单。 post将表单数据会在消息体/请求体中提交到服务器 特点 1、数据安全 2、数据长度无限制适合提交大数据量表单。 注意事项表单项要是想采集数据必须设置name属性表示当前表单项的名称 -- form action/save methodpost 姓名input typetextnamename 年龄input typetextnameage input typesubmit value提交 /form /body /html2、表单项标签在一个表单中可以存在很多的表单项而虽然表单项的形式各式各样但是表单项的标签其实就只有三个分别是input: 表单项 , 通过type属性控制输入形式。select: 定义下拉列表,option定义列表项。textarea: 文本域。type取值的属性形式type取值描述text默认值定义单行的输入字段password定义密码字段radio定义单选按钮checkbox定义复选框file定义文件上传按钮date/time/datetime-local定义日期/时间/日期时间number定义数字输入框email定义邮件输入框hidden定义隐藏域submit / reset / button定义提交按钮 / 重置按钮 / 可点击按钮!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML-表单项标签/title /head body !-- value: 表单项提交的值 -- form action/save methodpost 姓名: input typetext namename brbr 密码: input typepassword namepassword brbr 性别: input typeradio namegender value1 男 labelinput typeradio namegender value2 女 /label brbr 爱好: labelinput typecheckbox namehobby valuejava java /label labelinput typecheckbox namehobby valuegame game /label labelinput typecheckbox namehobby valuesing sing /label brbr 图像: input typefile nameimage brbr 生日: input typedate namebirthday brbr 时间: input typetime nametime brbr 日期时间: input typedatetime-local namedatetime brbr 学历: select namedegree option value----------- 请选择 -----------/option option value1大专/option option value2本科/option option value3硕士/option option value4博士/option /select brbr 描述: textarea namedescription cols30 rows10/textarea brbr input typehidden nameid value1 !-- 表单常见按钮 -- input typebutton value按钮 input typereset value重置 input typesubmit value提交 br /form /body /html3、表格标签七、页面展示通过上面的知识经过可以利用AI提示初步的做出一个“yuzusoft案例”的页面原型。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleYUZUSOFT智能学习辅助系统/title style body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .navbar { background-color: #fff9c4; /* 淡黄色背景 */ height: 60px; display: flex;/* 弹性布局 */ justify-content: space-between; /* 左右两端对齐 */ align-items: center; /* 垂直居中 */ padding: 0 20px; box-sizing: border-box; border-bottom: 1px solid #ddd; } .title { font-size: 24px; font-weight: bold; color: #333; /* 设置字体为楷体 */ font-family: 楷体; } .logout-link { text-decoration: none; color: #666; font-size: 16px; padding: 8px 16px; border-radius: 4px; transition: color 0.3s; } .logout-link:hover { color: #ff6b6b; text-decoration: underline; } /* 第二部分搜索表单样式 */ .search-form { background-color: #f8f9fa; padding: 20px; margin: 20px; border-radius: 8px;/* 圆角 */ box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .form-row { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; } .form-group { display: flex; flex-direction: column; min-width: 150px; } .form-group label { font-weight: bold; margin-bottom: 5px; color: #333; } .form-group input, .form-group select { padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; } .btn-group { display: flex; gap: 10px; margin-left: auto; /* 将按钮组推到右侧 */ align-self: flex-end; /* 底部对齐 */ } .btn { padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: bold; transition: background-color 0.3s; } .btn-search { background-color: #007bff; color: white; } .btn-search:hover { background-color: #0056b3; } .btn-clear { background-color: #6c757d; color: white; } .btn-clear:hover { background-color: #545b62; } /* 第三部分表格展示区 */ .table-container { margin: 20px; overflow-x: auto; } table { width: 100%; border-collapse: collapse; background-color: white; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; } th, td { padding: 12px 15px;/* 垂直间距 */ text-align: left;/* 左对齐 */ border-bottom: 1px solid #ddd;/* 添加边框 */ } th { background-color: #f8f9fa; font-weight: bold; color: #333; position: sticky; top: 0; } tr:hover { background-color: #f5f9ff; } .avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .action-buttons { display: flex; gap: 5px; } .btn-edit, .btn-delete { padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: bold; transition: background-color 0.3s; } .btn-edit { background-color: #28a745; color: white; } .btn-edit:hover { background-color: #218838; } .btn-delete { background-color: #dc3545; color: white; } .btn-delete:hover { background-color: #c82333; } .footer { background-color: #6c757d; /* 灰色背景 */ color: white; text-align: center; padding: 20px; margin-top: 20px; font-size: 14px; } #container { margin: 0 auto; width: 80%; } /style /head body div idcontainer !-- 第一部分顶部导航栏 -- nav classnavbar div classtitleYUZUSOFT智能学习辅助系统/div a href# classlogout-link退出登录/a /nav !-- 其他部分将在这里继续添加 -- !-- 第二部分搜索表单 -- div classsearch-form action/search methodpost form classform-row div classform-group label forname姓名/label input typetext idname namename placeholder请输入姓名 /div div classform-group label forposition作品位序/label select idposition nameposition option value--请选择--/option option value1女主角/option option value2二号位/option option value3三号位/option option value4四号位/option option value5次要角色/option /select /div div classform-group label forwork出场作品/label select idwork namework option value--请选择--/option option value1魔女的夜宴/option option value2千恋万花/option option value3星光咖啡馆与死神之蝶/option option value4天使的纷扰/option option value5Limelight Lemonade Jam/option /select /div div classbtn-group button typesubmit classbtn btn-search查询/button button typereset classbtn btn-clear清空/button /div /form /div !-- 第三部分表格展示区 -- div classtable-container table!-- 表头 -- thead tr!--定义行 -- th姓名/th th头像/th th作品位序/th th出场作品/th th发布时间/th th最近操作时间/th th操作/th /tr /thead tbody !-- 二见原莉莉子 -- tr td二见原莉莉子/td tdimg srcimg/12.jpg alt二见原莉莉子 classavatar/td td四号位/td tdLimelight Lemonade Jam/td td2025/td td2025.10/td td div classaction-buttons button classbtn-edit编辑/button button classbtn-delete删除/button /div /td /tr !-- 四季夏目 -- tr td四季夏目/td tdimg srcimg/10.jpg alt四季夏目 classavatar/td td二号位/td td星光咖啡馆与死神之蝶/td td2019/td td2025.12/td td div classaction-buttons button classbtn-edit编辑/button button classbtn-delete删除/button /div /td /tr !-- 常陆茉子 -- tr td常陆茉子/td tdimg srcimg/17.jpg alt常陆茉子 classavatar/td td二号位/td td千恋万花/td td2016/td td2025.10/td td div classaction-buttons button classbtn-edit编辑/button button classbtn-delete删除/button /div /td /tr !-- 岛越月望 -- tr td岛越月望/td tdimg srcimg/15.jpg alt岛越月望 classavatar/td td三号位/td tdLimelight Lemonade Jam/td td2025/td td2025.10/td td div classaction-buttons button classbtn-edit编辑/button button classbtn-delete删除/button /div /td /tr !-- 谷风天音 -- tr td谷风天音/td tdimg srcimg/11.jpg alt谷风天音 classavatar/td td二号位/td td天使的纷扰/td td2023/td td2025.11/td td div classaction-buttons button classbtn-edit编辑/button button classbtn-delete删除/button /div /td /tr !-- 小云雀来海 -- tr td小云雀来海/td tdimg srcimg/13.jpg alt小云雀来海 classavatar/td td三号位/td td天使的纷扰/td td2019/td td2025.11/td td div classaction-buttons button classbtn-edit编辑/button button classbtn-delete删除/button /div /td /tr !-- 阳见惠凪 -- tr td阳见惠凪/td tdimg srcimg/14.jpg alt阳见惠凪 classavatar/td td女主角/td tdLimelight Lemonade Jam/td td2025/td td2025.10/td td div classaction-buttons button classbtn-edit编辑/button button classbtn-delete删除/button /div /td /tr !-- 隐杏珠 -- tr td隐杏珠/td tdimg srcimg/16.jpg alt隐杏珠 classavatar/td td二号位/td tdLimelight Lemonade Jam/td td2025/td td2025.10/td td div classaction-buttons button classbtn-edit编辑/button button classbtn-delete删除/button /div /td /tr /tbody /table /div !-- 第四部分页脚版权区域 -- footer classfooter div稽稽稽稽不如人科技股份有限公司/div div版权所有 Copyright 2006-2025 All Rights Reserved/div /footer /div /body /html /body /html