网站推广原则,企业备案网站名称怎么填,政务公开及网站建设意见,网站模板怎么进学习路线 一、新闻网界面1. 代码示例2. 效果展示3. 知识点总结3.1 HTML标签和字符实体3.2 超链接、颜色描述与标题元素3.3 关于图片和视频标签#xff1a;3.4 CSS引入方式3.5 CSS选择器优先级 二、flex布局1. 代码示例2. 效果展示3. 知识点总结3.1 span标签和flex容器的区别3.… 学习路线 一、新闻网界面1. 代码示例2. 效果展示3. 知识点总结3.1 HTML标签和字符实体3.2 超链接、颜色描述与标题元素3.3 关于图片和视频标签3.4 CSS引入方式3.5 CSS选择器优先级 二、flex布局1. 代码示例2. 效果展示3. 知识点总结3.1 span标签和flex容器的区别3.2 Flex 容器属性 三、表单项1. 代码示例2. 效果展示3. 知识点总结3.1 HTML表单元素与属性3.2 method属性3.2.1 GET 方法3.2.2 POST 方法 四、Tlias智能学习辅助系统1. 代码示例2. 效果展示3. 知识点总结3.1 表格的基本结构 五、HTML-CSS-知识总结 一、新闻网界面
1. 代码示例
!DOCTYPE html
!DOCTYPE html !-- 声明文档类型为HTML5 --
html langen !-- 开始HTML文档指定语言为英语 --head !-- 文档头部开始 --meta charsetUTF-8 !-- 设置字符编码为UTF-8确保页面正确显示中文和其他特殊字符 --meta nameviewport contentwidthdevice-width, initial-scale1.0 !-- 配置视窗大小以适应不同设备的屏幕宽度 --title新思想引领新征程/title !-- 网页标题显示在浏览器标签上 --style !-- 内部样式表开始 --#title { /* 定义ID为title的元素样式 */color: black; /* 设置文本颜色为黑色 */}span { /* 定义所有span元素的样式 */color: rgb(160, 156, 156); /* 使用RGB值设置文本颜色为灰色 */}a:link { /* 定义未访问过的链接样式 */text-decoration: none; /* 移除链接下划线 */}p { /* 定义所有p段落元素的样式 */line-height: 2; /* 设置行高为2即双倍行距 */text-indent: 2em; /* 设置首行缩进2个字符宽度 */}#content-container { /* 定义ID为content-container的元素样式 */width: 70%; /* 设置容器宽度为页面宽度的70% */margin-left: auto; /* 自动设置左边距使内容居中 */margin-right: auto /* 自动设置右边距使内容居中 */}/style !-- 内部样式表结束 --link relstylesheet hrefcss/news.css !-- 引入外部CSS文件用于进一步定义样式 --!-- 注意实际上link标签是自闭合的不需要关闭标签 --
/headbody !-- 文档主体开始 --div idcontent-container !-- 创建一个具有特定ID的div容器用于布局控制 --h1 idtitle【Xin思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章/h1 !-- 标题使用ID title 应用前面定义的样式 --a hrefhttp://www.cctv.com target_parent央视网/a !-- 创建超链接点击后在父窗口打开链接目标注意target属性值应该用引号包围 --span2025年1月15日 15:46/span !-- 显示日期时间并应用前面定义的灰色文本样式 --brbr !-- 插入两个换行符用于增加空白空间 --video src01. 央视新闻\video\news.mp4 controls width40%/video !-- 嵌入视频设置宽度为容器宽度的40%并提供播放控件 --!-- 空格实体字符nbsp --!-- 加粗标签p strong --pnbsp;nbsp;nbsp;nbsp;b央视网消息/b新闻联播作为共抓长江大保护的标志性工程长江十年禁渔今年进入第四年。xxx指出长江禁渔是为全局计、为子孙谋的重要决策。xxx牢记嘱托沿江省市持续推进长江水生生物多样性恢复努力保障退捕渔民就业生活。这段时间记者深入长江两岸记录下禁渔工作取得的重要阶段性成效和广大干部群众坚定不移推进长江十年禁渔的扎实行动。/p !-- 段落文本使用非断开空格(nbsp;)实现首行缩进效果b标签加粗文本 --p行走在长江沿线科研人员发现很多可喜现象。/p !-- 另一段普通文本 --img src01. 央视新闻\img\1.gif width40% alt描述图片内容 !-- 显示图片设置宽度为容器宽度的40%alt属性添加描述性文字 --/div
/body/html !-- HTML文档结束 --2. 效果展示 3. 知识点总结
3.1 HTML标签和字符实体
HTML提供了多种标签用于文本格式化这些标签不仅改变了文本的显示样式还带有语义上的强调
加粗b或strong。虽然两者都能使文本加粗但strong有更强的语义性通常表示文本的重要性。下划线u或ins。ins不仅添加下划线还暗示了文本是后来插入的。倾斜i或em。与加粗类似em用于强调其含义比i更重。删除线s或del。del同样不仅添加删除线而且表明该文本已被删除。
此外还有字符实体它们用于在HTML文档中表示特殊字符
nbsp;非断开空格Non-Breaking Space用于防止单词间的空格被浏览器合并或移除。lt; 和 gt;分别代表小于号Less Than Sign和大于号Greater Than Sign避免这些符号被误解为HTML标签的开始或结束。
3.2 超链接、颜色描述与标题元素
超链接由a标签定义具有两个重要属性
href指定链接的目标URL。target控制链接页面如何打开如_blank新窗口、_self当前窗口、_parent父框架、_top顶层框架。
颜色可以通过以下方式描述
十六进制颜色值从#000000到#ffffff其中每个两位数对分别对应红、绿、蓝三种颜色成分。RGB颜色值如rgb(0,0,0)至rgb(255,255,255)使用整数值来表示每种颜色成分。RGBA颜色值如rgba(0,0,0,0.5)至rgba(255,255,255,0.5)增加了透明度参数。颜色名称直接使用预定义的颜色名如red、blue等。
HTML支持六级标题标签从h1到h6其中h1是最高级别的标题h6是最小级别。
3.3 关于图片和视频标签
img标签需要设置src属性以指定图片源文件路径可以是绝对路径或相对路径。width和height属性用于设定图片尺寸。video标签也有类似的src属性以及controls提供播放控件、autoplay自动播放、width和height等属性。
3.4 CSS引入方式
CSS可以以三种方式引入网页中 内联样式通过style属性直接应用于HTML元素例如 p stylecolor: red;这是一个段落。/p内部样式表在HTML文档头部用style标签定义适用于整个页面的样式规则例如 headstylebody { background-color: lightblue; }p { color: blue; }/style
/head外部样式表创建独立的.css文件并通过link标签将其链接到HTML文档中这是推荐的做法有利于代码的维护和复用例如 headlink relstylesheet hrefstyles.css
/head3.5 CSS选择器优先级
CSS选择器决定了哪些元素会应用特定的样式规则
ID选择器以#开头如#title它的优先级最高。类选择器以.开头如.class次于ID选择器。属性选择器格式[attributevalue]如input[typetext]优先级等同类选择器。标签选择器直接使用标签名如p优先级最低。
二、flex布局
1. 代码示例
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleFlex布局示例/titlestyle.flex-container {display: flex; /* 定义一个Flex容器 */justify-content: space-around; /* 水平方向上均匀分布项目 */align-items: center; /* 垂直方向上居中对齐项目 */height: 600px; /* 设置容器高度 */border: 2px solid #333; /* 添加边框以便观察效果 */flex-direction: column; /* 设置Flex容器的布局方向为垂直默认以row横向布局 */}.flex-item {width: 100px; /* 设置项目宽度 */height: 100px; /* 设置项目高度 */background-color: #f0f0f0; /* 设置背景颜色 */border: 1px solid #ccc; /* 添加边框以便观察效果 */text-align: center; /* 文本居中 */line-height: 100px; /* 垂直居中文本 */font-size: 20px; /* 设置字体大小 */}/style
/head
bodydiv classflex-containerdiv classflex-item1/divdiv classflex-item2/divdiv classflex-item3/div/div
/body
/html2. 效果展示 3. 知识点总结
3.1 span标签和flex容器的区别
span 和 Flex 容器通常由 div 或其他块级元素加上 display: flex; 样式创建是HTML和CSS中用于布局的不同概念它们在用途、默认行为和样式方面有显著区别。
span 标签
定义span 是一个行内元素inline element没有特别的语义含义主要用于包裹文档中的小部分文本或对这些文本应用样式。默认显示作为行内元素span 不会独占一行多个 span 元素可以在同一行内并排显示除非被其他样式规则改变。使用场景适合用于不需要额外结构意义的小范围文本格式化。例如给一段文字中的某些词添加颜色、字体样式等。示例p这是普通文本span stylecolor: red;而这是红色文本/span。/pFlex 容器
定义Flex 容器不是具体的HTML标签而是通过将 display: flex; 应用到任何HTML元素如 div、section 等来创建的一种布局模式。该容器内的直接子元素成为弹性项目flex items可以根据可用空间自动调整大小和排列。默认显示当 display: flex; 被应用于一个元素时它变成了一个块级容器默认情况下会占据其父元素的全部宽度并且其内部的子元素将按照指定的主轴和交叉轴方向进行排列。使用场景适用于需要创建灵活响应式布局的情况比如水平或垂直居中内容、创建导航栏、卡片布局等。它允许开发者轻松地控制子元素之间的间距、对齐方式以及如何分配剩余的空间。示例div styledisplay: flex; justify-content: space-around;divItem 1/divdivItem 2/divdivItem 3/div
/div3.2 Flex 容器属性
display: flex;
作用将一个元素转换成Flex容器使其直接子元素成为Flex项目。影响一旦设置了display: flex该容器内的所有直接子元素都将遵循Flexbox规则进行布局即使它们本身没有指定任何Flex属性。兼容性现代浏览器都支持此属性但在较老版本的浏览器中可能需要添加前缀或使用替代方案。
flex-direction
作用定义了Flex项目在主轴上的排列方向。取值 row默认值从左到右排列。row-reverse从右到左排列。column从上到下排列。column-reverse从下到上排列。 影响决定了项目的排列顺序以及justify-content和align-items所操作的方向。
justify-content
作用用于定义Flex项目在主轴上的对齐方式。取值 flex-start默认值项目向主轴起点对齐。flex-end项目向主轴终点对齐。center项目居中对齐。space-between项目之间有等距空间但第一项和最后一项紧贴容器边缘。space-around每个项目周围都有相等的空间包括与容器边缘之间的空间。space-evenly项目之间及项目与容器边缘之间的间距相等。 影响控制项目在主轴上的分布当项目总宽度小于容器时可调整它们之间的空隙大小当项目总宽度超过容器时所有值的效果相同即项目会被压缩以适应容器。
align-items
作用用于定义Flex项目在交叉轴上的对齐方式。取值 stretch默认值如果项目未设置高度或设为auto则拉伸填满整个容器的高度。flex-start项目顶部对齐。flex-end项目底部对齐。center项目居中对齐。baseline根据项目的第一行文本基线对齐。 影响控制项目在交叉轴上的垂直位置尤其在项目具有不同高度时效果明显。
三、表单项
1. 代码示例
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title表单示例/titlestylebody {font-family: Arial, sans-serif;margin: 20px;}.form-group {margin-bottom: 15px;/* 在同一行 */display: flex;}label {display: block;margin-bottom: 5px;}/style
/head
bodyh1用户信息表单/h1form action/save methodpost!-- 姓名 --div classform-grouplabel forname姓名/labelinput typetext idname namename/div!-- 密码 --div classform-grouplabel forpassword密码/labelinput typepassword idpassword namepassword/div!-- 性别 --div classform-grouplabel性别/labelinput typeradio idmale namegender valuemale checkedlabel formale男/labelinput typeradio idfemale namegender valuefemalelabel forfemale女/label/div!-- 爱好 --div classform-grouplabel爱好/labelinput typecheckbox idjava nameinterests valuejavalabel forjavaJava/labelinput typecheckbox idgame nameinterests valuegamelabel forgameGame/labelinput typecheckbox idsing nameinterests valuesinglabel forsingSing/label/div!-- 图像上传 --div classform-grouplabel forimage图像/labelinput typefile idimage nameimage/div!-- 生日 --div classform-grouplabel forbirthday生日/labelinput typedate idbirthday namebirthday/div!-- 时间 --div classform-grouplabel fortime时间/labelinput typetime idtime nametime/div!-- 日期时间 --div classform-grouplabel fordatetime日期时间/labelinput typedatetime-local iddatetime namedatetime/div!-- 学历 --div classform-grouplabel foreducation学历/labelselect ideducation nameeducationoption value---请选择---/optionoption valuehigh-school高中/optionoption valuecollege大专/optionoption valueuniversity本科/optionoption valuegraduate硕士/optionoption valuedoctor博士/option/select/div!-- 描述 --div classform-grouplabel fordescription描述/labeltextarea iddescription namedescription rows10 cols30/textarea/div!-- 按钮组 --div classform-groupbutton typebutton按钮/buttonbutton typereset重置/buttonbutton typesubmit提交/button/div/form
/body
/html2. 效果展示 3. 知识点总结
3.1 HTML表单元素与属性 表单结构HTML form 元素用于创建表单通过 action 属性指定表单提交的目标URLmethod 属性定义提交方式GET 或 POST。POST 方法更适合敏感数据的传输。 输入字段类型 文本输入 (input typetext)用于输入简单的文本信息如姓名、地址等。密码输入 (input typepassword)隐藏用户输入的内容适用于密码输入。单选按钮 (input typeradio)让用户从一组选项中选择一个通常用于性别、偏好等二元或多选一的选择。复选框 (input typecheckbox)允许用户选择多个选项适合爱好、技能等多选的情况。文件上传 (input typefile)让用户选择本地文件上传到服务器。日期 (input typedate) 和 时间 (input typetime) 输入提供专门的控件让用户选择日期或时间简化了日期和时间的输入过程。日期时间 (input typedatetime-local)结合日期和时间的选择功能方便用户输入具体的日期和时间点。下拉菜单 (select option)为用户提供一系列预设选项适用于学历、职业等有固定选项的选择。 文本区域 (textarea)允许多行文本输入适合描述性信息或评论等长文本内容。 按钮 (button)可以是普通按钮触发JavaScript事件、重置按钮清空表单或提交按钮提交表单。 label 标签的作用 描述信息每个 label 都应与相应的输入字段关联提供明确的指示帮助用户理解需要填写的信息。点击激活当 label 关联到一个输入字段时点击 label 也会激活该字段增加了交互区域提升了易用性。辅助技术支持对于屏幕阅读器等辅助工具来说label 提供了重要的上下文信息有助于残障人士更好地理解和使用网页。 HTML 表单提交方式总结
HTML 表单可以通过 action 和 method 属性来指定表单数据的提交目标和提交方式。以下是关于这两种属性及其影响的详细总结
1. action 属性
定义action 属性指定了当用户提交表单时表单数据将被发送到的URL地址。作用该URL通常是服务器端脚本的位置负责处理接收到的数据如保存到数据库、发送邮件等。
2. method 属性
method 属性决定了表单数据如何被发送到服务器主要分为两种方式GET 和 POST。
3. 表单项的 name 属性
重要性为了确保表单数据能够正确地被服务器接收并处理每个表单项都必须设置 name 属性表示当前表单项的名字。作用name 属性值用于标识表单中的各个字段在服务器端可以通过这些名字来获取对应的值。例如input typetext nameusername 中的 nameusername 就是用来标识这个输入框的名称服务器端可以通过这个名字来读取用户输入的内容。
3.2 method属性
3.2.1 GET 方法
默认值如果未明确指定 method则默认使用 GET 方法。特点 数据展示提交的数据会附加在URL后面作为查询字符串的一部分。例如example.com?nameJohnage30。安全性问题由于数据是公开可见的不适合传输敏感或隐私信息。所有数据以明文形式暴露在URL中容易被截获或记录。大小限制浏览器对URL长度有一定的限制通常为2048个字符左右因此不适合用于提交大数据量的表单。缓存与书签GET 请求可以被浏览器缓存并且可以直接通过书签访问这可能带来安全性和隐私问题。
3.2.2 POST 方法
特点 数据隐藏提交的数据包含在HTTP请求的消息体中而不是附加在URL上。这意味着数据不会出现在浏览器地址栏中提供了更高的安全性。安全性提升因为数据不显示在URL中所以减少了敏感信息泄露的风险。对于需要保护的数据如密码、个人资料等推荐使用POST方法。无大小限制理论上POST 请求没有像GET那样严格的大小限制适合提交较大的数据集或文件上传。不可缓存POST 请求不会被浏览器缓存也不能直接通过书签访问进一步增强了安全性。 四、Tlias智能学习辅助系统
1. 代码示例
!DOCTYPE html
html langzhheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title搜索表单与表格展示/titlestyle/* 导航栏样式 */.navbar {background-color: #808080;/* 灰色背景 */padding: 10px;display: flex;/* 使用flex弹性布局 */justify-content: space-between;/* 左右对齐 */align-items: center;}/* 标题样式 */.navbar h1 {margin: 0;color: white;font-size: 40px;font-weight: bold;/* 设置字体为楷体 */font-family: 楷体;}/* 退出登录按钮样式 */.navbar a {text-decoration: none;color: white;font-size: 16px;padding: 5px 10px;border-radius: 5px;transition: background-color 0.3s;}/* 鼠标悬停效果 */.navbar a:hover {background-color: #555;}.search-form {display: flex;flex-wrap: nowrap;/* 确保所有子元素在同一行 */box-sizing: border-box;align-items: flex-start;margin-top: 10px;}/* .search-form内的input和select样式变长 */.search-form input[typetext],.search-form select[idgender],#position {width: 200px;}.form-group {margin-right: 10px;}.form-group:last-child {margin-right: 0;}.form-group label {display: block;margin-bottom: 5px;margin-bottom: 0;}.form-group input,.form-group select {width: 100%;padding: 8px;box-sizing: border-box;}.form-group button {padding: 8px 16px;margin-top: 21.5px;}#submit-btn {background-color: rgb(101, 202, 233);}table {width: 100%;border-collapse: collapse;margin-top: 20px;}th,td {border: 1px solid #ddd;padding: 8px;text-align: left;}th {background-color: #f2f2f2;font-weight: bold;}tr:nth-child(even) {background-color: #f9f9f9;}.avatar {width: 50px;height: 50px;object-fit: cover;border-radius: 50%;}.action-buttons {display: flex;gap: 5px;}.action-buttons button {padding: 5px 10px;}/* 页脚版权区域样式 */footer {background-color: #a8a8a8;color: white;text-align: center;padding: 10px 0;margin-top: 20px;}#containner {width: 80%;margin: 0 auto;}/style
/headbodydiv idcontainner!-- 导航栏 --div classnavbarh1Tlias智能学习辅助系统/h1a href#退出登录/a/div!-- 其他内容 --div/divdiv classsearch-formdiv classform-grouplabel forname姓名/labelinput typetext idname placeholder请输入姓名/divdiv classform-grouplabel forgender性别/labelselect idgenderoption value请选择/optionoption value男男/optionoption value女女/option/select/div!-- for 属性指定该标签与哪个表单元素相关联。for 属性的值应该与表单元素的 id 属性值相同。 --div classform-grouplabel forposition职位/label select idpositionoption value请选择/optionoption value班主任班主任/optionoption value讲师讲师/optionoption value学工主管学工主管/optionoption value教研主管教研主管/optionoption value咨询师咨询师/option/select/divdiv classform-groupbutton idsubmit-btn查询/button/divdiv classform-groupbutton idreset-btn清空/button/div/divtabletheadtrth姓名/thth性别/thth头像/thth职位/thth入职日期/thth最后操作时间/thth操作/th/tr/theadtbodytrtd令狐冲/tdtd男/tdtdimg srchttps://p2.ssl.qhimgs1.com/t011ade375876837888.png alt令狐冲头像 classavatar/tdtd讲师/tdtd2023-01-01/tdtd2023-03-15/tdtdbutton编辑/buttonbutton删除/button/td/trtrtd任盈盈/tdtd女/tdtdimg srchttps://p1.ssl.qhimgs1.com/sdr/400__/t018de2b83fe844a2db.jpg alt任盈盈头像classavatar/tdtd班主任/tdtd2022-06-15/tdtd2023-02-20/tdtdbutton编辑/buttonbutton删除/button/td/trtrtd岳不群/tdtd男/tdtdimg srchttps://p2.ssl.qhimgs1.com/sdr/400__/t0112dbabd47b98792c.jpg alt岳不群头像classavatar/tdtd教研主管/tdtd2021-12-01/tdtd2023-04-01/tdtdbutton编辑/buttonbutton删除/button/td/tr/tbody/tablescriptdocument.getElementById(reset-btn).addEventListener(click, function () {document.getElementById(name).value ;document.getElementById(gender).selectedIndex 0;document.getElementById(position).selectedIndex 0;});/script!-- 页脚版权区域 --footer中国科学院海西研究院泉州装备制造研究中心br版权所有 Copyright 2006-2024 All Rights Reserved/footer/div
/body/html2. 效果展示 3. 知识点总结
3.1 表格的基本结构
HTML表格由table标签定义并且通常包含以下部分
表头 (thead)用于定义表格的头部一般放置列标题。表体 (tbody)用于定义表格的主要内容即数据行。表脚 (tfoot)可选部分用于定义表格底部的内容如总结或总计行。需要注意的是尽管tfoot通常放在HTML代码中的tbody之后但在渲染时它会出现在表格的最底部。
每个部分可以包含多个行tr而每行又可以包含一个或多个单元格分为两种类型
th定义表头单元格通常用于描述表格中每一列的数据类型或名称。默认情况下表头单元格文本是加粗并居中的。td定义标准单元格用于存放实际的数据值。
tabletheadtrth姓名/thth性别/thth职位/th/tr/theadtbodytrtd令狐冲/tdtd男/tdtd讲师/td/trtrtd任盈盈/tdtd女/tdtd班主任/td/tr/tbodytfoottrtd colspan3总共有2名成员。/td/tr/tfoot
/table五、HTML-CSS-知识总结
类别标签说明文本处理标签h1 - h6一级标题 - 级标题br、p换行、段落strong、em、ins、del文本加粗、倾斜、下划线、删除线a href...超链接属性href、target图片、音视频标签img src...图片路径绝对路径、相对路径audio src...、video src...音频、视频布局标签div、span没有语义的布局标签配合CSS实现页面布局表格标签table、thead、tbody表格、表头、表格主体tr / th、td行 / 单元格表单标签form定义表单属性action、methodinput typetext/button表单项文本输入框、按钮...select / option表单项下拉列表/选项
类别属性说明盒子模型作用控制元素尺寸、内边距、边框、外边距从而控制页面的布局展示width、height高度、宽度box-sizing高度和宽度的计算方式content-box, border-boxpadding内边距上、右、下、左上下、左右border边框margin外边距上、右、下、左上下、左右flex弹性布局作用是一种一维的布局模型为元素之间提供强大的空间分布和对齐能力displayflex使用flex布局flex-direction设置主轴方向rowx轴水平方向columny轴垂直方向justify-content子元素在主轴上的对齐方式
