网站开发专业就业培训学校,服务器安全加固方案,如何做盗版视频网站,襄阳做网站找哪家公司HTMLCSSJavaScript 文章目录 HTMLCSSJavaScript一、开发工具及在线帮助文档二、 HTML2.1 HTMLCSSJavaScript的作用2.2 HTML基础结构2.3 HTML概念词汇解释2.4 HTML的语法规则2.5 常用标签 三、CSS3.1 引入方式3.2 CSS选择器3.3 CSS浮动3.4 CSS定位…HTMLCSSJavaScript 文章目录 HTMLCSSJavaScript一、开发工具及在线帮助文档二、 HTML2.1 HTMLCSSJavaScript的作用2.2 HTML基础结构2.3 HTML概念词汇解释2.4 HTML的语法规则2.5 常用标签 三、CSS3.1 引入方式3.2 CSS选择器3.3 CSS浮动3.4 CSS定位3.5 CSS盒子模型 四、JavaScript4.1 引入方式4.2 JS 组成部分4.3 BOM编程4.4 DOM编程4.4.1 获取页面元素的几种方式4.4.2 操作元素属性值4.4.3 增删元素 4.5 注意事项及细节 五、注册页面案例 一、开发工具及在线帮助文档
前端工程师比较推崇的一款开发工具就是visual studio code,下载地址为:https://code.visualstudio.com/
插件
Auto Rename Tag 自动修改标签对插件Chinese Language Pack 汉化包HTML CSS Support HTML CSS 支持Intellij IDEA Keybindings IDEA快捷键支持Live Server 实时加载功能的小型服务器open in browser 通过浏览器打开当前文件的插件Prettier-Code formatter 代码美化格式化插件Vetur VScode中的Vue工具插件vscode-icons 文件显示图标插件Vue 3 snipptes 生成VUE模板插件Vue language Features Vue3语言特征插件
在线帮助文档
http://www.w3school.com.cn
二、 HTML
HTML是Hyper Text Markup Language的缩写。意思是超文本标记语言。它的作用是搭建网页结构在网页上展示内容
2.1 HTMLCSSJavaScript的作用
HTML 主要用于网页主体结构的搭建CSS 主要用于页面元素美化JavaScript 主要用于页面元素的动态处理
2.2 HTML基础结构
VSCode中创建html文件输入 ! 默认补全h5代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body/body
/html2.3 HTML概念词汇解释
标签代码中的一个 叫做一个标签,有些标签成对出现,称之为双标签,有些标签单独出现,称之为单标签 属性一般在开始标签中,用于定义标签的一些特征 文本双标签中间的文字,包含空格换行等结构 元素经过浏览器解析后,每一个完整的标签(标签属性文本)可以称之为一个元素
2.4 HTML的语法规则
无论是双标签还是单标签都需要正确关闭属性必须有值值必须加引号,H5中属性名和值相同时可以省略属性值HTML中不允许自定义标签名,强行自定义则无效HTML标签不严格区分大小写,但是不能大小写混用
2.5 常用标签
如需参考强烈推荐看在线文档参考一些标签中存在的最佳实践来开发。
https://www.w3school.com.cn/html/html5_intro.asp
三、CSS
CSS 层叠样式表(英文全称(Cascading Style Sheets) 能够对网页中元素位置的排版进行像素级精确控制支持几乎所有的字体字号样式拥有对网页对象和模型样式编辑的能力简单来说美化页面
3.1 引入方式
行内式通过元素开始标签的style属性引入, 样式语法为 样式名:样式值; 样式名:样式值;内嵌式写在html中用 style 标签包裹连接式/外部样式表在项目单独创建css样式文件在head标签中,通过link标签引入外部CSS样式文件
link hrefcss/index.css relstylesheet typetext/css/3.2 CSS选择器
简单选择器根据名称、id、类来选取元素 元素选择器元素名 ID选择器#id 类选择器.class选择器之间可以组合如p.center 表示只有 class“center” 的 p 元素才会被选中选择时还可以以 , 分隔表示元素都选取 组合选择器根据它们之间的特定关系来选取元素 后代选择器空格 子选择器 相邻兄弟选择器通用兄弟选择器~ 伪类选择器根据特定状态选取元素 语法selector:pseudo-class 伪类有很多可参考在线文档看一般主要用于鼠标悬停提示等 伪元素选择器选取元素的一部分并设置其样式 语法selector::pseudo-element 具体使用参考在线文档 属性选择器根据属性或属性值来选取元素 语法[attributevalue] 如 a[targetvalue] 表示选择带有 target 属性等于 value 的 a 标签还可以将符号换成 | 表示 value 开头的元素具体参考在线文档
3.3 CSS浮动
CSS 的 Float浮动使元素脱离文档流按照指定的方向左或右发生移动直到它的外边缘碰到包含框或另一个浮动框的边框为止
浮动设计的初衷为了解决文字环绕图片问题浮动后一定不会将文字挡住这是设计初衷故使用浮动时会把浮动框外的文字挤出去文档流是文档中可显示对象在排列时所占用的位置/空间而脱离文档流就是在页面中不占位置了
浮动原理
当把框 1 向右浮动时它脱离文档流并且向右移动直到它的右边缘碰到包含框的右边缘 当框 1 向左浮动时它脱离文档流并且向左移动直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中所以它不占据空间实际上覆盖住了框 2使框 2 从视图中消失。如果把所有三个框都向左移动那么框 1 向左浮动直到碰到包含框另外两个框向左浮动直到碰到前一个浮动框 如果包含框太窄无法容纳水平排列的三个浮动元素那么其它浮动块向下移动直到有足够的空间。如果浮动元素的高度不同那么当它们向下移动时可能被其它浮动元素“卡住” 3.4 CSS定位
position 属性规定应用于元素的定位方法的类型static、relative、fixed、absolute 或 sticky
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位不过绝对或固定元素会生成一个块级框而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移元素可以使用的 topbottomleft 和 right 属性定位。然而这些属性无法单独工作必须依赖于上面设置
static默认值静态定位即没有定位元素出现在该出现的位置块级元素垂直排列行内元素水平排列absolute绝对定位通过方向属性指定元素相对页面窗口的页面位置定位后元素会让出原来位置relative相对定位相对原来位置通过方向属性定位定位后保留原来的站位fixed固定定位在浏览器窗口固定位置且不会随着页面的上下移动而移动元素定位后会让出原来的位置sticky粘性定位根据用户的滚动位置进行定位可参考在线文档
z-index 属性指定元素的堆栈顺序哪个元素应放置在其他元素的前面或后面具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。
注意如果两个定位的元素重叠而未指定 z-index则位于 HTML 代码中最后的元素将显示在顶部。
3.5 CSS盒子模型
所有HTML元素可以看作盒子在CSS中box model这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子封装周围的HTML元素它包括边距margin边框border填充padding和实际内容content 说明 Margin(外边距) - 清除边框外的区域外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域内边距是透明的。Content(内容) - 盒子的内容显示文本和图像。 四、JavaScript
JS是一种运行于浏览器端上的小脚本语句,可以实现网页如文本内容动,数据动态变化和动画特效等。
4.1 引入方式
内部脚本script 标签内嵌js代码外部脚本script srcjs/index.js typetext/javascript/script
4.2 JS 组成部分 BOM编程BOM是Browser Object Model的简写即浏览器对象模型DOM编程DOM编程其实就是用window对象的document属性的相关API完成对页面元素的控制的编程ECMAScriptJS 实现了 ES 的语言标准。JS 还在此基础上新增了一些拓展。ES即ECMAScript语法规则。
4.3 BOM编程
BOM是Browser Object Model的简写即浏览器对象模型
window 顶级对象,代表整个浏览器窗口 location对象 window对象的属性之一,代表浏览器的地址栏history对象 window对象的属性之一,代表浏览器的访问历史screen对象 window对象的属性之一,代表屏幕navigator对象 window对象的属性之一,代表浏览器软件本身document对象 window对象的属性之一,代表浏览器窗口目前解析的html文档console对象 window对象的属性之一,代表浏览器开发者工具的控制台localStorage对象 window对象的属性之一,代表浏览器的本地数据持久化存储sessionStorage对象 window对象的属性之一,代表浏览器的本地数据会话级存储
通过BOM编程实现会话级和持久级数据存储
会话级数据 : 内存型数据,是浏览器在内存上临时存储的数据,浏览器关闭后,数据失去,通过window的sessionStorge属性实现持久级数据 : 磁盘型数据,是浏览器在磁盘上持久存储的数据,浏览器关闭后,数据仍在,通过window的localStorge实现可以用于存储一些服务端响应回来的数据比如token令牌,或者一些其他功能数据
// 会话级数据
window.sessionStorage.setItem(sessionMsg,sessionValue);
// 持久级数据
window.localStorage.setItem(localMsg,localValue);4.4 DOM编程
DOM(Document Object Model)编程就是使用document对象的API完成对网页HTML文档进行动态修改以实现网页数据和样式动态变化效果的编程
dom树中节点的类型
node 节点,所有结点的父类型 element 元素节点,node的子类型之一,代表一个完整标签attribute 属性节点,node的子类型之一,代表元素的属性text 文本节点,node的子类型之一,代表双标签中间的文本
4.4.1 获取页面元素的几种方式
在整个文档范围内查找元素结点
功能API返回值根据id值查询document.getElementById(“id值”)一个具体的元素节根据标签名查询document.getElementsByTagName(“标签名”)元素节点数组根据name属性值查询document.getElementsByName(“name值”)元素节点数组根据类名查询document.getElementsByClassName(“类名”)元素节点数组
在具体元素节点范围内查找子节点
功能API返回值查找子标签element.children返回子标签数组查找第一个子标签element.firstElementChild标签对象查找最后一个子标签element.lastElementChild节点对象
查找指定子元素节点的父节点
功能API返回值查找指定元素节点的父标签element.parentElement标签对象
查找指定元素节点的兄弟节点
功能API返回值查找前一个兄弟标签node.previousElementSibling标签对象查找后一个兄弟标签node.nextElementSibling标签对象
4.4.2 操作元素属性值
属性操作
需求操作方式读取属性值元素对象.属性名修改属性值元素对象.属性名新的属性值
内部文本操作
需求操作方式获取或者设置标签体的文本内容element.innerText获取或者设置标签体的内容element.innerHTML
4.4.3 增删元素
API功能document.createElement(“标签名”)创建元素节点并返回但不会自动添加到文档中document.createTextNode(“文本值”)创建文本节点并返回但不会自动添加到文档中element.appendChild(ele)将ele添加到element所有子节点后面parentEle.insertBefore(newEle,targetEle)将newEle插入到targetEle前面parentEle.replaceChild(newEle, oldEle)用新节点替换原有的旧子节点element.remove()删除某个标签
4.5 注意事项及细节 和 的差别对于 符号如果两端的数据类型不一致会先进行类型转换再比较故最好使用 小数 Number 类型会存在精度问题优先考虑使用decimal高精度要求情况下前后端数字类型交互可考虑用字符串
五、注册页面案例 !DOCTYPE html
html langenheadmeta charsetUTF-8title登陆页面/titlestylehtml {margin-top: 15%;}.ht{text-align: center;color: cadetblue;font-family: 幼圆;}.tab{width: 500px;border: 5px solid cadetblue;margin: 0px auto;border-radius: 5px;font-family: 幼圆;}.ltr td{border: 1px solid powderblue;}.ipt{border: 0px;width: 50%;}.btn1{border: 2px solid powderblue;border-radius: 4px;width:60px;background-color: antiquewhite;}.msg {color: gold;}.buttonContainer{text-align: center;}/stylescriptfunction checkUsername(){var usernameReg /^[a-zA-Z0-9]{5,10}$/var usernameInput document.getElementById(usernameInput) var username usernameInput.value var usernameMsg document.getElementById(usernameMsg)if(!usernameReg.test(username)){usernameMsg.innerText格式有误return false} usernameMsg.innerTextOKreturn true }function checkUserPwd(){var userPwdReg /^\d{6}$/var userPwdInput document.getElementById(userPwdInput) var userPwd userPwdInput.value var userPwdMsg document.getElementById(userPwdMsg)if(!userPwdReg.test(userPwd)){userPwdMsg.innerText格式有误return false} userPwdMsg.innerTextOKreturn true }function checkReUserPwd(){var userPwdReg /^\d{6}$/// 再次输入的密码的格式var reUserPwdInput document.getElementById(reUserPwdInput) var reUserPwd reUserPwdInput.value var reUserPwdMsg document.getElementById(reUserPwdMsg)if(!userPwdReg.test(reUserPwd)){reUserPwdMsg.innerText格式有误return false} // 获得上次密码,对比两次密码是否一致var userPwdInput document.getElementById(userPwdInput) var userPwd userPwdInput.value if(reUserPwd ! userPwd){reUserPwdMsg.innerText两次密码不一致return false} reUserPwdMsg.innerTextOKreturn true }function checkForm(){var flag1 checkUsername()var flag2 checkUserPwd()var flag3 checkReUserPwd()return flag1 flag2 flag3}/script/headbodyh1 classht欢迎使用XX管理系统/h1form methodpost action/user/regist onsubmitreturn checkForm()table classtab cellspacing0pxtr classltrtd请输入账号/tdtdinput classipt idusernameInput typetext nameusername onblurcheckUsername()span idusernameMsg classmsg/span/td/trtr classltrtd请输入密码/tdtdinput classipt iduserPwdInput typepassword nameuserPwd onblurcheckUserPwd()span iduserPwdMsg classmsg/span/td/trtr classltrtd确认密码/tdtdinput classipt idreUserPwdInput typepassword onblurcheckReUserPwd()span idreUserPwdMsg classmsg/span/td/trtr classltrtd colspan2 classbuttonContainerinput classbtn1 typesubmit value注册input classbtn1 typereset value重置button classbtn1a hreflogin.html去登录/a/button/td/tr/table/form/body
/html
