整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天南地北大拜年# 一起领红包>根据您提供的代码，这是一个使用 jQuery 来实现网页导航栏动态位置调整、滚动到特定内容区域时高亮导航项，以及用户留言和评价功能的网页。下面是对这些功能的报告：
### 1. 导航栏位置调整
- **功能描述**: 导航栏的位置会根据浏览器窗口的大小动态调整，以确保它在视觉上居中显示。
- **实现方法**: 使用 jQuery 监听 `resize` 事件，实时计算导航栏的宽度，并动态设置其 `right` CSS属性。
### 2. 滚动导航高亮
- **功能描述**: 当用户滚动到网页的某个特定内容区域时，对应的导航项会被高亮显示。
- **实现方法**: 首先，获取每个内容区域的位置顶部值并存入数组。然后，监听 `scroll` 事件，根据滚动位置判断当前处于哪个内容区域，并使用 `.addClass("selected")` 来高亮当前导航项。
### 3. 用户留言功能
- **功能描述**: 用户可以在网页上留下自己的意见或建议。
- **实现方法**: 使用 HTML 的 `` 元素创建一个多行文本输入框，并通过 jQuery 监听按钮点击事件来处理留言的提交。
### 4. 星级评价功能
- **功能描述**: 用户可以通过点击星星图标来对网页进行评价。
- **实现方法**: HTML 使用 `` 元素创建星星图标，并通过 jQuery 来监听点击事件，根据点击的星星图标更新页面上的评级显示。
### 5. 功能完善建议
- **用户体验**: 增加留言提交后的反馈机制，如提示用户留言成功或出现错误。
- **交互设计**: 对于星级评价，可以增加更多的交互效果，如星星点击效果，以及评价后的结果展示。
- **响应式设计**: 确保网页在不同设备上均有良好的显示效果，包括手机和平板电脑。
- **性能优化**: 对于 `scroll` 和 `resize` 事件，应考虑节流（throttle）或防抖（debounce）技术，以避免过度事件处理导致的性能问题。
### 6. 错误和警告
- **代码错误**: 在您的代码中，有几个问题需要解决。比如，变量 `sectionHeightArray` 应该在 `$(window).scroll` 事件处理函数外部声明，否则它可能无法正确引用。此外，按钮点击事件处理函数没有提供，需要补充相应的代码来处理用户的交互。
- **跨浏览器兼容性**: 需要确保所有的 jQuery 代码在不同的浏览器上都能正常工作，特别是旧版本的浏览器。
### 7. 安全性
- **XSS防范**: 确保从用户那里收集的数据在插入到网页上之前进行了适当的清理，以防止跨站脚本（XSS）攻击。
整体而言，该网页的交互功能对于用户参与和反馈提供了良好的基础，但在发布前需要进行详细的测试和优化以确保最佳的用户体验和性能。类图（15分）：
主题：智能家居控制系统
描述：为一个智能家居控制系统绘制组件图，展示系统中各个组件如用户界面、数据存储、设备控制等的关系
本文，有很多很棘手的问题，例如使用sublime 编辑器可能安装插件的时候会使用不了view in browser我公司的电脑可以安装、结果家里的电脑就报编码错误、需要改sublime插件源代码解码成utf8就可以了、还有一直连不上packagecontrol的网页，可以群（526929231）使劲砸我得到解决~ sublime编辑器对于前端来说确实很好用！很好用！很好用！ SublimeText、Webstorm推荐这两个编辑器
刚开始设计HTML语言是为了將文字图像关联在一起，用另一台发送或接收
HTML 不是一种编程语言，而是一中标记语言(mark-up language),标记语言是一套标记标签(mark-up tag)
标签是由尖括号 < > 把关键词括起来，标签通常是成对出现的
读取 HTML 文档，使用标签来解析页面的内容，以网页的形式现实，浏览器不会现实HTML标签
每种浏览器都有自己的内核(引擎)（解析网页的一个程序，io以什么方式去渲染它都要通过引擎去执行）
目前主流的浏览器分为五种
Chrome谷歌浏览器 （Webkit内核，V8 js引擎）
Firefox火狐浏览器 （Gecko内核）
Internet Explorer IE浏览器（ Trident内核）
Opera 欧朋浏览器 （Presto内核） 主要市场：移动端
Safari 苹果浏览器 （Webkit内核，但JS引擎为Nitro）
不需要去记，简单了解下
标签必须闭合
所有标签名一律小写
代码缩进，使阅读代码更加易懂
特殊符号规范使用
命名规范，见名之意
PS: 所有的标记符号都是半角英文
众说纷纭编辑器太多，最终只是一个工具，希望同学们能从万千世界中找到适合自己的编辑器伙伴
| 编辑器 | 描述 |
|---|---|
| EditPlus | 手写模式，适合初学手写，无代码提示(有IE调试视图) |
| Sublime | 插件特别多，占用内存小，启动速度快，打开大项目较慢，管理文件方式有些缺陷 |
| webstorm | 集成插件特别多，启动较慢，占用内存大，开发和管理视图都很方便 |
| Dreamweaver | 适合初学，主要代码提示和代码插入功能强大，主要偏向于设计(有设计视图) |
| 插件名 | 描述 | 详情请戳 |
|---|---|---|
| emmet | 前端自动补全，提供快捷补全方式 | |
| ColorPicker | 调色板，颜色选择器 | |
| SublimeTmpl | sublime模板，可以快速创建一个HTML模板 | |
| view in browser | 用快捷方式打开浏览器进行调试HTML(需要配置参考后面网页) | |
| LiveReload | 实时刷新HTML(编辑器里按下保存ctrl+s的时候，已经打开的HTMl会自动刷新) | 谷歌插件文件安装方法需要配合谷歌LiveReload插件插件文件下载 |
| Color Highlighter | CSS颜色代码高亮及颜色预览提示 | |
| CSS3 | CSS3的代码高亮提示 | 还针对了CSS3的选择器及锚类选择器:hover :first-child :first-child ...的高亮 |
| JavaScript Completions | 原生js 代码提示 | |
| Sublime-Better-Completion | 可自选开启代码提示，支持jQ、js、bootstrap、php、sql ... | 仓库地址此插件只能通过Github克隆下载安装安装方法 |
注：Github 网页中 下面是有详细的使用方法 packagecontrol.io官网 里面search 可以进行搜索插件名字来找到具体使用方法，还有什么不懂或者安装出现编码错误以及安装不上的可以拍打我~
| 配置 | 描述 |
|---|---|
| !DOCTYPE html | 不是标签，主要用于文档类型的声明 |
| charset="utf-8" | 声明字符编码集 |
| http-equiv="Content-Type" | 把Content属性关联到HTTP头部(协议头) |
HTML模板
简单了解，并不需要熟练掌握
Dom节点树
.html .htm这两种是比较常见的
在早期系统中文件名是有8+3组成 三个扩展名所以不支持四个字母的扩展采用.htm
现在通常使用.html作为扩展名
接下来所有的标签元素学习都在body标签里面去敲打实现、
为了突出标题，字体大小和加粗发生相应的改变
<h1>我是大主题</h1> <h2>我是大主题</h2> <h3>我是大主题</h3> <h4>我是大主题</h4> <h5>我是大主题</h5> <h6>我是大主题</h6>
<!doctype html><!-- 让浏览器使用html5的标准解析 --> <html> <head> <!-- 设置字符编码集让浏览器使用utf8解析当前网页 --> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <meta name="keywords" content="SEO搜索引擎，关键词，多个请用逗号分开" /> <meta name="description" content="网页描述，八十字内" /> <title>浏览器标签页上的网页标题</title> </head> <body> <!-- 所有的标签学习都在这body里面去敲，上面head元素里面的内容做个了解就可以了 --> <h1>我是大标题</h1> <h2>我是主题2</h2> <h3>我是主题3</h3> <h4>我是主题4</h4> <h5>我是主题5</h5> <h6>我是主题6</h6> </body> </html>
可以发现h标签从h1到h6会随着数值越小字越小，并且都是会加粗和各占一行的状态（前后的元素都会被换行）
h1标签一般一个页面里面只会写一次，为了让搜索引擎爬取到 (写一次利于SEO搜索引擎优化)
<p> 冬着一身素衣，缓缓而来，季节没有了往日的姹紫嫣红，却用简单的线条，勾勒出一幅洁白的画，纯洁通透，轻盈自然。 </p>
刚我们了解到了浏览器是识别尖括号的，如果要在页面中显示html标记那要怎么做呢？这时候就需要特殊符号的表示来显示
| 符号 | 描述 |
|---|---|
| 空格 | |
| 小于 | < |
| 大于 | > |
| 引号 | " |
| 版权 | © |
| ×叉 | × |
| & | & |
| 符号 | 描述 |
|---|---|
| B标签 | 物理加粗，页面呈现加粗状态. |
| Strong标签 | 不仅能加粗，还利于搜索引擎优化 |
<b>物理加粗，页面呈现加粗状态.</b> <strong>不仅能加粗，还利于搜索引擎优化，就是类似于百度、谷歌这种搜索引擎爬取你的网页的时候会查找这个标签里面的内容来优化显示网页的排名</strong>
可以根据word文档上面发现 b是加粗 u是下划线 i是倾斜 同样适用于标签
<i>我是倾斜</i> <u>我加了下划线</u>
链接一个页面,点击则会跳转这个链接页面
使用锚点滚动到设定的位置
<a href=""></a> a标签中的href控制点击的时候跳转到哪里如果没写表示刷新当前页面 <a href="#"></a> 跳转到当前页面(回归到页面顶部) <a href="javascript： void(0);"></a> 死链接，不会跳转，一般用于js特效 <a href="#name">锚点到一个标签上所对应的ID名字，点击则跳到那个标签位置</a> <a href="http://baidu.com">跳转到百度</a> 跳转到百度 需要注意的是 http 协议不能少
点击#flag的a标签的时候会跳到到上面h2标签
只有拥有name属性的
a标签
才能锚点,还有一种方式是通过ID标识唯一元素，也可以跳转(不仅仅是a标签)
| 描述 | 标签 |
|---|---|
| 滚动标签 | marquee |
| 字体标签 | font |
| 定义水平线 | hr |
marquee
| 属性 | 描述 |
|---|---|
| direction | 滚动方向 |
| behivior | 行为 |
behivior
| 值 | 描述 |
|---|---|
| alternate | 交替滚动 |
| scroll | 滚动 |
| slide | 滑落 |
| 属性 | 描述 |
|---|---|
| color | 颜色 |
| size | 0-7 |
| face | 字体 |
与font相似，拥有color和size属性
hr标签没有结束标签 按照早期的习惯也H5也遵循XHTML的解析 所以统一会加一个反斜杠表示结束这个标签，不加也能够正确显示，但是养成一个良好的习惯确实重要，比如微信小程序就是没有结束标签必须要使用一个反斜杠结尾否则直接报错、
结合今天所学，写一个简单的网页
内容如下：
写一篇收获或感受 / 写一篇文章 ————> 为什么要自己写，网上一大把哈哈，可以自己写下，锻炼下思维
需要包括h、p、a、加粗
题材不限，至少200字
在习题一的文章底部，使用滚动标签进行滚动方向为45°
例1： 自动播放功能
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>网页标题</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
*{margin:0;padding:0;}
body{color:#333;font-size:12px;line-height:20px;}
ul,li{list-style:none;}
#content{margin:0 auto;width:540px;}
#content .scroll_top{width:540px;height:51px;background:url(images/dd_scroll_top.gif) no-repeat;}
#content .scroll_mid{
width:533px;
padding:5px 0 5px 5px;
border-left:1px solid #d6d5d6;
border-right:1px solid #d6d5d6;
background:#f2f2f3;
}
#scroll_number{
float:right;
padding-right:10px;
}
#scroll_number li{
margin-top:5px;
width:13px;
height:13px;
line-height:16px;
border:1px solid #999;
cursor:pointer;
text-align:center;
}
#content .scroll_end{
width:540px;
height:8px;
background:url(images/dd_scroll_end.gif) no-repeat;
margin-bottom:10px;
}
.scroll_number_out{
}
.scroll_number_over{
background-color:#F96;
color:#FFF;
}
</style>
<script type="text/javascript">
//分析思路
//1.当页面加载完成后 使用定时器
//2.需要有一个定时器功能函数 这个函数的主要功能是实现图片轮播
//3.当鼠标经过图片上时 清除定时器
//4.当鼠标离开图片上时 重新调用定时器
//5.把鼠标放在li标签上面 要显示li标签上数字对应的图片 清除定时器
//6.当鼠标离开li标签时 图片继续滚动 重新调用定时器
//7.li标签要随着图片滚动而滚动 并且对应的li标签要高亮
//1.当页面加载完成时
var img_obj = null;
var timer;
var lis_obj = null; //用来保存li
window.onload = function(){
//先将所有的li上面的class清空
//需要获取到id="dd_scroll"对象
img_obj = document.getElementById("dd_scroll");
//实现定时器
timer = setInterval("scroll_img()",1000);
//通过id="scroll_number"来获取对象
lis_obj = document.getElementById("scroll_number").getElementsByTagName("li");
}
//主要是用于实现图片轮播
var i = 2;
function scroll_img(){
//先将所有的li标签的class都清空
for(var j=0;j<lis_obj.length;j++){
lis_obj[j].className = "";
}
lis_obj[i-1].className = "scroll_number_over";
//需要改变img标签的src属性
img_obj.src = "images/dd_scroll_"+i+".jpg";
i++;
//判断i的值
if(i>6){
i = 1;
}
}
//鼠标经过 清除定时器
function stopScroll(ind){
if(ind){
i = ind; //把值赋值给i
scroll_img(); //重新调用图片轮播函数
}
clearInterval(timer);
}
//鼠标离开时 重新调用定时器
function goon(){
timer = setInterval("scroll_img()",1000);
}
</script>
</head>
<body>
<div id="content">
<!--轮换显示的横幅广告图片-->
<div class="scroll_top"></div>
<div class="scroll_mid"> <img src="images/dd_scroll_1.jpg" alt="轮换显示的图片广告" id="dd_scroll" onmouseover="stopScroll()" onmouseout="goon()"/>
<div id="scroll_number">
<ul>
<li id="scroll_number_1" onmouseover="stopScroll(1)" class="scroll_number_over" onmouseout="goon()">1</li>
<li id="scroll_number_2" onmouseover="stopScroll(2)" onmouseout="goon()">2</li>
<li id="scroll_number_3" onmouseover="stopScroll(3)" onmouseout="goon()">3</li>
<li id="scroll_number_4" onmouseover="stopScroll(4)" onmouseout="goon()">4</li>
<li id="scroll_number_5" onmouseover="stopScroll(5)" onmouseout="goon()">5</li>
<li id="scroll_number_6" onmouseover="stopScroll(6)" onmouseout="goon()">6</li>
</ul>
</div>
</div>
<div class="scroll_end"></div>
</div>
</body>
</html>图片规格：500px 180px 共六张图片
实例2: 鼠标点击功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 665px;
height: 442px;
margin: 0 auto;
border: 5px solid gray;
position: relative;
}
/*5张图片的样式*/
ul,ul>li{
width: 665px;
height: 442px;
position: absolute;
}
ul>li{
display: none;
}
ul>li.active{
display: block;
}
/*5个点点点的样式*/
ol{
width: 150px;
height: 30px;
position: absolute;
left: 50%;
margin-left: -75px;
bottom: 20px;
}
ol>li{
width: 16px;
height: 16px;
margin: 7px;
float: left;
cursor: pointer;
border-radius: 50%;
background-color: rgba(255,255,255,0.5);
}
ol>li.active{
background-color: rgba(255,255,255,1);
}
div>a{
color: #999;
width: 30px;
height: 62px;
font-size: 24px;
text-align: center;
line-height: 62px;
text-decoration: none;
background-color: rgba(255,255,255,0.5);
position: absolute;
top: 190px;
}
div>a.prev{
left: 0;
}
div>a.next{
right: 0;
}
</style>
</head>
<body>
<div>
<!--5张图-->
<ul>
<li class="active"><a href=""><img src="img/1.jpeg"/></a></li>
<li><a href=""><img src="img/2.jpeg"/></a></li>
<li><a href=""><img src="img/3.jpeg"/></a></li>
<li><a href=""><img src="img/4.jpeg"/></a></li>
<li><a href=""><img src="img/5.jpeg"/></a></li>
</ul>
<!--5个点点点-->
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<!--左右箭头-->
<a class="prev" href="javascript：;"><</a>
<a class="next" href="javascript：;">></a>
</div>
<script type="text/javascript">
//获取左右箭头
var prev = document.getElementsByClassName("prev")[0];
var next = document.getElementsByClassName("next")[0];
//获取5个点点点
var ol_lis = document.getElementsByTagName("ol")[0].getElementsByTagName("li");
//获取5张图
var ul_lis = document.getElementsByTagName("ul")[0].getElementsByTagName("li");
var num = 0;
//下一张
next.onclick = function(){
num++;
if(num===ul_lis.length){
num = 0;
}
for(var i=0;i<ul_lis.length;i++){
ul_lis[i].className = "";//当我点击下一张是先把所有的图片隐藏
ol_lis[i].className = "";//当我点击下一张是先把所有的图片隐藏
}
ul_lis[num].className = "active";
ol_lis[num].className = "active";
}
//上一张
prev.onclick = function(){
num--;
if(num===-1){
num = ul_lis.length-1;
}
for(var j=0;j<ul_lis.length;j++){
ul_lis[j].className = "";//当我点击下一张是先把所有的图片隐藏
ol_lis[j].className = "";//当我点击下一张是先把所有的图片隐藏
}
ul_lis[num].className = "active";
ol_lis[num].className = "active";
}
//点点点
for(var k=0;k<ol_lis.length;k++){
//什么时候需要用索引 2个及其以上事物相关联的
ol_lis[k].index = k;//我给每一个点点点加一个自定义属性
ol_lis[k].onclick = function(){
for(var q=0;q<ol_lis.length;q++){
ol_lis[q].className = "";
ul_lis[q].className = "";
}
this.className = "active";
ul_lis[this.index].className = "active";
//此时左右按钮和点点点是两条路 我们需要让他们执行同样的规则
//所以num = 当前被点击的li的自定义属性
num = this.index;
}
}
</script>
</body>
</html>图片规格：665px 442px 共六张图片
*请认真填写需求信息，我们会在24小时内与您取得联系。
