加强人社网站建设,一个公司可以注册几个网站,网站 可以做无形资产吗,头像制作软件app文章目录前言HTML1.基础标签2.多媒体标签#xff1a;3.表格列表布局4.表单CSS1.简介2.导入方式3.选择器JavaScript1.简介2.引入方式3.基本语法4.对象(1) 基本对象(2) BOM对象(3) DOM对象5.事件前言
结构#xff1a;HTML 表现#xff1a;CSS 行为#xff1a;Java…
文章目录前言HTML1.基础标签2.多媒体标签3.表格列表布局4.表单CSS1.简介2.导入方式3.选择器JavaScript1.简介2.引入方式3.基本语法4.对象(1) 基本对象(2) BOM对象(3) DOM对象5.事件前言
结构HTML 表现CSS 行为JavaScript
面向后端人员能看懂前端代码所以简单介绍一下三大件更详细的有时间再总结。
HTML
HTML 指的是超文本标记语言 (Hyper Text Markup Language)它不是一种编程语言而是一种标记语言 (markup language)
HTML 文件以.html或.htm为拓展名HTML标签不区分大小写
结构化的标签
标签描述html定义HTML文档head定义关于文档的信息title定义文档的标题body定义文档的主体
html langen
headmeta charsetUTF-8titleTitle/title
/head
body/body
/html元素指的是从开始标签start tag到结束标签end tag的所有代码
属性为 HTML 元素提供附加信息属性总是以名称/值对的形式出现比如name“value”。属性总是在 HTML 元素的开始标签中规定。
1.基础标签
标签含义h1 - h6定义标题h1最大h6最小font定义文本的字体(face)大小颜色(color)b定义标题定义粗体文本i定义斜体文本u定义文本下划线center定义文本居中p定义段落br定义换行hr定义水平线
2.多媒体标签
标签含义属性img定义图片src:图像的url height:图像高度 width:图像宽度audio定义音频src:音频的url controls:显示播放控件video定义视频src:音频的url controls:显示播放控件a定义超链接href指定访问资源的URL target指定打开资源的方式
3.表格列表布局
列表
标签含义属性ol有序列表ul无序列表li定义列表项
表格
标签含义属性table定义表格tr定义行td定义单元格
布局
标签含义属性divHTML文档中的一个区域一个块级元素align建议使用cssspan用于组合行内元素
4.表单
form 是表单标签它在页面上没有任何展示的效果。需要借助于表单项标签来展示不同的效果 表单项标签常见的有三个分别是inputselecttextarea CSS
对于后端来说只需简单了解一下
1.简介
CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素
css代码一般定义在style 标签中。
2.导入方式
导入方式就是 css 代码和 html 代码的结合方式主要有三种
1内联样式在标签内部使用style属性属性值是css属性键值对
div stylecolor: redHello CSS~/div2内部样式定义style标签在标签内部定义css样式
style typetext/cssdiv{color: red;}
/style3外部样式定义link标签引入外部的css文件最常用 如编写一个css文件demo.css
div{color: red;
}然后在html中引用
link relstylesheet hrefdemo.css3.选择器
这里就要说CSS的语法了
CSS 规则选择器 一条或多条声明 如
//
p {color:red;text-align:center;}有三种选择器 1元素选择器 元素名称{color: red;} div {color:red} /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/2id选择器 #id属性值{color: red;} 首先html代码指定元素的id
div idnamehello css2/div然后CSS去渲染指定id的内容
#name{color: red;}/*将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/3class选择器 .class属性值{color: red;} html代码
div classclshello css3/divCSS代码
.cls{color: red;} /*将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/总览一波
JavaScript
1.简介
JavaScript 是一门跨平台、面向对象的脚本语言JavaScript是脚本语言不需要编译由浏览器直接解析并执行。
而Java语言也是跨平台的、面向对象的语言只不过Java是编译语言是需要编译成字节码文件才能运行的
JavaScript 是用来控制网页行为的它能使网页可交互
2.引入方式
位于 script 与 /script 标签之间类比CSS~
1内部脚本 将JS代码定义在HTML页面中用script 标签
一般将脚本放置于 元素的底部可改善显示速度脚本执行会拖慢显示
scriptalert(hello js1);
/script2外部脚本
将JS代码定义在外部JS文件中然后引入到HTML页面中 例如外部文件demo.js
alert(hello js);html中引入js文件
script src../js/demo.js/script3.基本语法
1变量
2数据类型
3流程控制
4函数 方式1 function 函数名(参数1,参数2…){ 要执行的代码 } 方式2 var 函数名 function (参数列表){ 要执行的代码 } 如
function add(a, b){return a b;
}调用
let result add(10,20);4.对象
(1) 基本对象
Array对象
JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的而 JavaScript 是弱类型所以可以存储任意的类型的数据。
定义 var 变量名 new Array() var 变量名 [元素列表] 访问 与java一样直接通过索引
属性
属性含义length设置或返回数组中元素的数目constructor返回对创建此对象的数组函数的引用prototype能够向对象添加属性和方法
方法很多可以参考官方文档
(2) BOM对象
Browser Object Model浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。
我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现 (3) DOM对象
Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
5.事件
HTML 事件是发生在 HTML 元素上的“事情”。比如页面上的 按钮被点击、鼠标移动到元素之上、按下键盘按键 等都是事件。
事件监听是JavaScript 可以在事件被侦测到时执行一段逻辑代码
事件绑定
方式一通过 HTML标签中的事件属性进行绑定
input typebutton onclickon()function on()
{alert(我被点击了)
}方式二通过 DOM 元素属性绑定更常用
input typebutton id btndocument.getElementById(btn).onclickfunction()
{
alert(我被点击了)
}常见事件
事件名含义onclick鼠标点击事件onblur元素失去焦点onfocus元素获得焦点onload某个页面或图像被完成加载onsubmit当表单提交时触发该事件onkeydown某个键盘的键被按下onmouseover鼠标被移到某元素之上onmoudeout鼠标从某元素移开
