一、标题-排版标题、超链接!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title标题/title /head body !-- 定义一个标题, 标题内容: -- h1标题1/h1 ​ !-- 定义一个超链接, 里面展示 -- !-- a 超链接标签: href: 链接地址 - url地址 target: 打开方式 _blank: 新窗口打开 _self: 本窗口打开(默认) -- a hrefhttps://www.cctv.com target_blank央视网/a 2024年05月15日 20:07 ​ /body /html二、标题-样式1CSS引入方式行内样式:h1style..内部样式:style../style外部样式XXX.CSSlink href...2颜色表示关键字red、green··rgb表示法:rgb(255,0,0)、rgb(134,100,89)rgba表示法:rgba(255,0,0,0.5)、rgba(134,100,89,1)十六进制#ff0000、#cccccc、#f003颜色属性color设置文本内容的颜色!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title标题/title !-- 方式二: 内部样式 -- style span{ /* 关键字 */ /* color: gray; */ ​ /* RGB表示法 */ /* color: rgb(255, 120, 0); */ ​ /* RGBA表示法 */ /* color: rgba(255, 120, 0, 0); */ ​ /* 十六进制表示法 */ /* color: #0000ff; */ color: #b2b2b2; } /style ​ !-- 方式三: 外部样式 -- !-- link relstylesheet hrefcss/news.css -- /head ​ body !-- 定义一个标题, 标题内容: -- h1/h1 ​ !-- 定义一个超链接, 里面展示 -- a hrefhttps://www.cctv.com target_blank央视网/a ​ !-- 方式一: 行内样式 -- !-- span stylecolor: gray;2024年05月15日 20:07/span -- ​ span2024年05月15日 20:07/span ​ /body /html三、标题-样式(选择器)最为常见的三类选择器的写法元素选择器标签名{...}类选择器:.class属性值{···}id选择器#id属性值{...}!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title/title style /* 元素选择器 */ /* span { color: #b2b2b2; } */ ​ /* 类选择器 */ /* .cls { color: #ff0000; } */ ​ /* ID选择器 */ #time { color: #b2b2b2; } ​ a { /* 去除超链接下方的下划线 */ text-decoration: none; } /style /head ​ body !-- 定义一个标题, 标题内容: -- h1/h1 ​ !-- 定义一个超链接, 里面展示 央视网 -- a hrefhttps://www.cctv.com target_blank央视网/a ​ span classcls idtime2024年05月15日 20:07/span ​ /body /html四、正文-排版video换行audio段落标签img!-- --------------------------- 新闻正文 -------------------------------- -- !-- 定义一个视频, 引入 video/news.mp4 -- !-- video标签属性 src: 视频地址 controls: 显示播放控件 autoplay: 自动播放 width: 视频宽度(建议: 宽度和高度只设置一个即可, 另一个会等比例缩放) height: 视频高度 单位: px: 像素 %: 百分比 (相对于父元素的百分比) -- video srcvideo/news.mp4 controls width80%/video !-- audio srcaudio/news.mp3 controls/audio -- ​ p /p ​ p /p ​ !-- 定义一张图片, 引入 img/1.gif -- !-- img标签属性: src: 图片的访问地址 1. 绝对路径 1.1 绝对磁盘路径: C:\Users\Administrator\Desktop\img\1.gif (不推荐) 1.2 绝对网络路径: https://www.baidu.com/img/1.gif 2. 相对路径 2.1 ./ : 当前目录 (可以省略) , 如: ./img/1.gif 2.2 ../: 上一级目录 width: 图片宽度(建议: 宽度和高度只设置一个即可, 另一个会等比例缩放) height: 图片高度 -- img srcimg/1.gif width80%/img ​ p /p ​ /body五、正文-样式加粗b、string空格nbsp首行缩进p { /* 设置行高 */ line-height: 2; /* 行高: 2倍行高 */ /* 设置首行缩进 */ text-indent: 2em; /* 首行缩进2个字符 */ }六、整体布局将主体用div包裹起来并起名为content-container#content-container { width: 70%; /* 宽度: 70% */ margin: 0 auto; }七、CSS盒子模型内容区域content、内边距区域padding、边框区域border)、外边距区域(margindiv标签一行只显示一个(独占一行) 宽度默认是父元素的宽度高度默认由内容撑开 可以设置宽高width、heightspan标签:一行可以显示多个 宽度和高度默认由内容撑开 不可以设置宽高width、height!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title盒子模型/title style #div1 { width: 400px; /* 宽度: 400像素; 默认是内容展示区域的宽度 */ height: 300px; /* 高度: 300像素; 默认是内容展示区域的高度 */ background-color: #ffff00; padding: 30px; /* 内边距: 30像素 */ box-sizing: border-box; /* 盒子模型: 边框内边距内容展示区域 */ border: 20px solid #ff00ff; /* 边框: 20像素 */ margin: 30px auto; /* 外边距: 20像素 */ } /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 A A A A A A A A A A A A A A A A A A A A A A /div ​ !-- div iddiv2 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 A A A A A A A A A A /div ​ span B B B B B B B B B B B B B B B B /span ​ span B B B B B B B B B B B B B /span -- /body /html八、tilas案例-顶部导航栏!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleTlias智能学习辅助系统/title style /* 导航栏样式 */ .navbar { background-color: #b5b3b3; /* 灰色背景 */ display: flex; /* flex弹性布局 */ justify-content: space-between; /* 左右对齐 */ ​ padding: 10px; /* 内边距 */ align-items: center; /* 垂直居中 */ } .navbar h1 { margin: 0; /* 移除默认的上下外边距 */ font-weight: bold; /* 加粗 */ color: white; /* 设置字体为楷体 */ font-family: 楷体; } .navbar a { color: white; /* 链接颜色为白色 */ text-decoration: none; /* 移除下划线 */ } /style /head body !-- 顶部导航栏 -- div classnavbar h1Tlias智能学习辅助系统/h1 a href#退出登录/a /div /body /html九、tlias案例-flex布局!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后面usernamejava大小有限制post表单数据在请求体中携带大小没有限制注意表单项必须有name属性才可以提交。2、表单项标签input表单项通过type属性控制输入形式。select定义下拉列表option定义列表项。textarea文本域1表单项标签 input的type属性:text、password、radio、checkbox、file、date、 datetime-local、time、hidden、button、submitselect定义下拉列表 textarea定义文本域3、tlias案例搜索表单区域!-- 搜索表单区域 -- !-- form表单标签: action: 表单提交的地址 - url method: 表单提交的方式 - get(默认) / post get: 提交时, 表单数据会在url后提交到服务端; 比如: /search?nameTomgender2position3 ; get方式提交数据长度有限制, 不能提交大量数据; get方式不安全; post: 提交时, 表单数据会在请求体(消息体)中提交到服务端; 比如: /search -- nameCatgender1position2 post方式提交数据长度无限制; post方式安全; -- form classsearch-form action/search methodpost label forname姓名/label input typetext idname namename placeholder请输入姓名 ​ label forgender性别/label select idgender namegender option value/option option value1男/option option value2女/option /select ​ 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 ​ button typesubmit查询/button button typereset清空/button /form4、tlias案例表格数据展示区域!-- 表格展示区 -- table !-- 表头 -- thead tr th姓名/th th性别/th th头像/th th职位/th th入职日期/th th最后操作时间/th th操作/th /tr /thead ​ !-- 表格主体内容 -- tbody tr td令狐冲/td td男/td tdimg classavatar srchttps://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg alt令狐冲/td td讲师/td td2021-06-15/td td2024-09-16 15:30/td td classaction-buttons button typebutton编辑/button button typebutton删除/button /td /tr tr td任盈盈/td td女/td tdimg classavatar srchttps://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg alt任盈盈/td td咨询师/td td2021-07-20/td td2024-09-17 09:00/td td classaction-buttons button typebutton编辑/button button typebutton删除/button /td /tr tr td向问天/td td男/td tdimg classavatar srchttps://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg alt向问天/td td教研主管/td td2021-05-01/td td2024-09-15 17:45/td td classaction-buttons button typebutton编辑/button button typebutton删除/button /td /tr tr td任我行/td td男/td tdimg classavatar srchttps://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg alt向问天/td td教研主管/td td2021-05-01/td td2024-09-15 17:45/td td classaction-buttons button typebutton编辑/button button typebutton删除/button /td /tr /tbody /table5、tlias案例底部版权区域!-- 页脚版权区域 -- footer classfooter p江苏传智播客教育科技股份有限公司/p p版权所有 Copyright 2006-2024 All Rights Reserved/p /footer十一、总代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleTlias智能学习辅助系统/title style /* 导航栏样式 */ .navbar { background-color: #b5b3b3; /* 灰色背景 */ display: flex; /* flex弹性布局 */ justify-content: space-between; /* 左右对齐 */ ​ padding: 10px; /* 内边距 */ align-items: center; /* 垂直居中 */ } .navbar h1 { margin: 0; /* 移除默认的上下外边距 */ font-weight: bold; /* 加粗 */ color: white; /* 设置字体为楷体 */ font-family: 楷体; } .navbar a { color: white; /* 链接颜色为白色 */ text-decoration: none; /* 移除下划线 */ } ​ /* 搜索表单样式 */ .search-form { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; /* 控件之间的间距 */ margin: 20px 0; } .search-form input[typetext], .search-form select { padding: 5px; /* 输入框内边距 */ width: 260px; /* 宽度 */ } .search-form button { padding: 5px 15px; /* 按钮内边距 */ } ​ /* 表格样式 */ table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ddd; /* 边框 */ padding: 8px; /* 单元格内边距 */ text-align: center; /* 左对齐 */ } th { background-color: #f2f2f2; font-weight: bold; } tr:nth-child(even) { background-color: #f2f2f2; } .avatar { width: 30px; height: 30px; } ​ /* 页脚样式 */ .footer { background-color: #b5b3b3; /* 灰色背景 */ color: white; /* 白色文字 */ text-align: center; /* 居中文本 */ padding: 10px 0; /* 上下内边距 */ margin-top: 30px; } ​ #container { width: 80%; /* 宽度为80% */ margin: 0 auto; /* 水平居中 */ } /style /head body div idcontainer !-- 顶部导航栏 -- div classnavbar h1Tlias智能学习辅助系统/h1 a href#退出登录/a /div ​ !-- 搜索表单区域 -- form classsearch-form action/search methodpost label forname姓名/label input typetext idname namename placeholder请输入姓名 ​ label forgender性别/label select idgender namegender option value/option option value1男/option option value2女/option /select ​ 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 ​ button typesubmit查询/button button typereset清空/button /form ​ !-- 表格展示区 -- table !-- 表头 -- thead tr th姓名/th th性别/th th头像/th th职位/th th入职日期/th th最后操作时间/th th操作/th /tr /thead ​ !-- 表格主体内容 -- tbody tr td令狐冲/td td男/td tdimg classavatar srchttps://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg alt令狐冲/td td讲师/td td2021-06-15/td td2024-09-16 15:30/td td classaction-buttons button typebutton编辑/button button typebutton删除/button /td /tr tr td任盈盈/td td女/td tdimg classavatar srchttps://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg alt任盈盈/td td咨询师/td td2021-07-20/td td2024-09-17 09:00/td td classaction-buttons button typebutton编辑/button button typebutton删除/button /td /tr tr td向问天/td td男/td tdimg classavatar srchttps://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg alt向问天/td td班主任/td td2021-05-01/td td2024-09-15 17:45/td td classaction-buttons button typebutton编辑/button button typebutton删除/button /td /tr tr td任我行/td td男/td tdimg classavatar srchttps://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg alt向问天/td td教研主管/td td2021-05-01/td td2024-09-15 17:45/td td classaction-buttons button typebutton编辑/button button typebutton删除/button /td /tr tr td田伯光/td td男/td tdimg classavatar srchttps://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg alt令狐冲/td td班主任/td td2021-06-15/td td2024-09-16 15:30/td td classaction-buttons button typebutton编辑/button button typebutton删除/button /td /tr tr td不戒/td td女/td tdimg classavatar srchttps://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg alt任盈盈/td td班主任/td td2021-07-20/td td2024-09-17 09:00/td td classaction-buttons button typebutton编辑/button button typebutton删除/button /td /tr tr td左冷禅/td td男/td tdimg classavatar srchttps://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg alt向问天/td td班主任/td td2021-05-01/td td2024-09-15 17:45/td td classaction-buttons button typebutton编辑/button button typebutton删除/button /td /tr tr td定逸/td td女/td tdimg classavatar srchttps://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg alt向问天/td td班主任/td td2021-05-01/td td2024-09-15 17:45/td td classaction-buttons button typebutton编辑/button button typebutton删除/button /td /tr tr td东方兄弟/td td男/td tdimg classavatar srchttps://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg alt向问天/td td讲师/td td2021-05-01/td td2024-09-15 17:45/td td classaction-buttons button typebutton编辑/button button typebutton删除/button /td /tr tr td金庸/td td男/td tdimg classavatar srchttps://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg alt向问天/td td咨询师/td td2021-05-01/td td2024-09-15 17:45/td td classaction-buttons button typebutton编辑/button button typebutton删除/button /td /tr /tbody /table ​ !-- 页脚版权区域 -- footer classfooter p江苏传智播客教育科技股份有限公司/p p版权所有 Copyright 2006-2024 All Rights Reserved/p /footer /div /body /html