目录
一、HTML
1、Html标签
2、Html元素
3、基本的HTML标签
二、CSS 样式 层叠样式表
三、JavaScript
使用示例
四、HTML DOM
通过可编程的对象模型,javaScript可以:
window
document
1、查找HTML元素
2、操作HTML元素
获取元素的属性
四、HTML DOM事件 ⚠️是DOM提供的API
一、HTML
Html是用来描述网页的一种语言
Html指的是超文本标记语言(Hyper Text Markup Language), Html不是一种编程语言,而是一种标记语言( Markup Language)
撕家
这是大标题
1、Html标签
HTML标记标签通常被称为HTML标签(HTML tag)
-
HTML标签是由尖括号包围的关键词,比如
-
HTML标签通常是成对出现的
-
标签对中的第一个标签是开始标签,第二个标签是结束标签
2、Html元素
Html文档是由html元素定义的
Html元素指的是从开始标签到结束标签的所有代码,通常和Html标签表达的是一个意思。
Html元素语法:
-
Html元素包含了开始标签和结束标签
-
元素的内容是开始标签和结束标签之间的内容
-
大多数Html元素可拥有属性(属性,键值对)
3、基本的HTML标签
文本输入框
选择框
语文
单选/复选按钮 ——————name属性表示同一种类型
这两个标签都表示性别,name都用sex表示;name属性表示同一种类型,达到单选的效果
男
女
按钮
文件上传 ——————会调用电脑的文件选择框 chrome显示【选择文件】,firefox显示【浏览】
密码输入框————输入密码后,会用……显示
换行
下拉框
四川省
辽宁省
吉林省
超链接———— target=”_blank” 表示超链接另开窗口打开
百度一下
图片
有序列表
- 第一行
- 第二行
- 第三行
无需列表
- 第一行
- 第二行
- 第三行
文本域
标题标签 通过
…
等标签进行定义的
这是大标题
这是中标题
这是小标题
这是大标题
这是中标题
这是小标题
HTML段落 服务器托管网通过
标签进行定义
this is a paragraph
HTML注释
代码注释 浏览器会忽略 不会显示注释
iframe 在一个页面内嵌另一个页面
HTML Div
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
,元素是块级元素,用于组合其他html元素的容器,常用作进行页面布局二、CSS 样式 层叠样式表
样式
名称一般用.name命名,不写在body里面,一般是单独的.css文件或者是head里面也行
.head{ background-color: green; color: white; } .left{ background-color: green; color: white; }
页面顶部区域
三、JavaScript
javascript是可插入HTML页面的编程代码
轻量级、功能强大编程语言
因特网上最流行的脚本语言
不能直接操作html元素,需要DOM提供的API间接操作
使用示例
脚本位置:
位于与标签之间
和(推荐)中
alert("hello")
四、HTML DOM
HTML DOM(Document object Model文档对象模型)
DOM是用于访问HTML元素的正式W3C标准
当网页被加载时,浏览器会创建页面的文档对象模型
通过HTML DOM 可以使用javaScrpt访问HTML文档的所有元素
通过可编程的对象模型,javaScript可以:
改变页面html元素
改变页面html元素属性
对页面中的事件作出反应
window
表示浏览器中打开的窗口
javascript层级中的顶层对象
window是document的父节点
document
代表窗口中显示的当前文档(页面)
通过document节点可以遍历到文档中的所有子节点
1、查找HTML元素
如下:
...
用document文档对象来定位HTML元素的几种常见方式(注意一般找元素都是在窗口window加载完成后)
通过id属性找到HTML元素,正常的前端规范中id属性是唯一的,不重复的
var element = document.getElementById("test1")
通过tag 标签名找到元素 可能会找到多个,返回一个集合,可以通过下标找到一个
document.getElementsByTagName("input")——找到多个input标签的集合 document.getElementsByTagName("input")[0]——通过下标找到集合中的第一个
——控制台输入document遍历语句
2、操作HTML元素
获取元素的属性
方式:元素.属性
获取id为test元素的valu服务器托管网e属性值
var value = document.getElementById("test").value;
设置id为test元素的value属性值为“测试”
document.getElementById("test").value = "测试";
其他属性取值、赋值也是一样的
四、HTML DOM事件 ⚠️是DOM提供的API
onload() 当网页已加载完成时触发此事件
onblur() 当元素失去焦点时触发此事件
onfocus() 当元素聚焦时触发此事件
onchange() 当元素的value值改变时触发此事件
onclick() 单击触发 单击和获取焦点是不同的,有一些元素是获取不到焦点的,但是都可以单击
ondblclick() 双击触发
onmouseover() 鼠标移动上来了触发的事件
相关推荐: 如何自己实现一个Spring Boot Starter
现在很多开源的组件都会提供对应的 springboot-starter 包给我们去用,要做一个 starter 包并不难。参照Spring内置的实现就好了: 1、在工程里引入 starter 打包相关的依赖。 2、在我们工程内建 spring.factorie…