web学习记录4

a_pin

于 2021-04-15 13:41:23 发布

阅读量70

点赞数

分类专栏： web学习

本文链接：https://blog.csdn.net/a_pin/article/details/115645717

版权

web学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

web学习记录4

HTML
JavaScript
- JavaScript DOM
- Javascript BOM
最后

最近简单了解了一下HTML和JavaScript，所以在这里我就简单讲讲它们，希望看完能对它们有一个简单的印象，大概能了解一些组成和命令，重点就只是了解而已！

对于一个网站，主要有三个语言参与了建设：
1、HTML——框架
2、JS——动态效果
3、CSS——样式、布局（美观）

HTML

先附上百度百科的定义

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

到现在HTML已经发展到了HTML5

1、一个小结构例子

<html>

<head>
<title>content</title>
</head>

<body>
<h1>content</h1>
<p1>content</p1>
</body>

</html>

1、个人对它简单的介绍

超文本标记语言–html

可以加载CSS、JS、图片、链接等非文字的内容

一切网络开发技术要建立在HTML的基础上（额。。。这是我摘抄的，就我所知，php可以实现html的功能，只不过html更适合大型网站的搭建）

HTML不区分大小写（哇！！和汇编一样）

HTML元素（element）

一个个的元素就是一个一个HTML要加载的资源——当然实在服务器里的。它们组成了HTML文档，

一个元素用标签闭合，
——以开始标签起始 <p>
——以闭合标签终止 </p>
（ p 只是一个标记）

一个小例子

<p class="editor-note"> content </p>
<!-- 注释 -->

在上面代码中有一个元素属性（元素的额外信息）

——class

它就是一个标签属性，类似的还有 name、id

还有一个属性我会介绍——事件属性
：onload、onerror、onclick

额，还有，注意注释的格式！！

表单

格式

<form> content </form>

在里面还会有表单元素

HTML表单是HTML的一个重要部分，主要用于采集和提交用户输入的信息

放入些东西

src和href

<iframe src="address"> content </iframe>

其中，iframe是一个内联框架，嵌入一个框

src是指图片，href是指一个链接

它们也属于属性

HTML DOM（文件对象模型）

最后我要提的就是HTML的文件模型，其实在第一个我举得例子就能看出了个大概，我在最后总结描述一下。

一个DOM树

下面将对JS进行介绍，它可以对HTML文档操作以及浏览器

JavaScript

引用百度百科

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JS代码可以放在HTML代码中，也可以直接进入浏览器的JS控制台，使用JS代码对浏览器进行控制。
注意

<script> content </script>

在HTML中，他还可以直接插进事件中。

JavaScript DOM

使用JS访问和操作HTML文档
（DOM的本质，连接web页面和编程语言）

1、获取一个元素

alert(document.getElementById("content").innerHTML)

content: 元素名称
alert：显示一条通知

2、修改一个元素
1）获取一个元素 getElementById() : 通过Id获取元素
2）获取元素内容 innerHTML ：通过Id获取元素
3）可以直接赋值改变元素内容（绝对有其它办法，但是我这里只是简单的了解）

3、如何创建动态的HTML元素内容
通过document.write方法写入HTML

document.write(content)

4、给页面增加互动

<script>
function changetext(id){
id.innerHTML="谢谢";
}
</script>
<h1 onclick="changetext(this)">请点击该文本</h1>

在事件里调用JS的子程序。

以上的内容都是访问和操作HTML文档的方法。

Javascript BOM

使用JS获取浏览器信息和操作浏览器
浏览器对象模型 —— Browser Object Model
本质：连接浏览器和编程语言

F12打开开发者工具，在控制台就可以输入JS代码控制浏览器了

1、让浏览器警告用户
警告弹窗：alert()
确认弹窗：confirm()
提示弹窗：prompt()
简单的调试和信息展示

2、从浏览器获取用户cookie
cookie是一小段的文本信息
在用户登入后，给用户的凭证，它相当于一个钥匙，每次访问网站的时候都会带上。

获取方法：

document.cookie

写入（赋值）：

document.cookie="content"

3、其它
获取浏览器屏幕信息：window.screen
获取/控制用户页面URL：window.location
获取访问者浏览器信息：window.navigator
操作浏览器窗口：window.open(close)

window.open("https://www.baidu.com")

这就是在控制台用JS操作浏览器的一些方法！

最后

在这里，对HTML和JS应该有了一些印象，本人了解仅限于此，推荐看书自学！
当然，我哪天开始系统学习它们，大概率会写一些东西出来分享！
对于web的学习，我个人是打算从基础一点点上去，而不是拿个工具看着博客解题。
结束了！一键三连哦！😃

a_pin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web学习记录4

web学习记录4HTML1、一个小结构例子1、个人对它简单的介绍HTML元素（element）在上面代码中有一个元素属性（元素的额外信息）表单放入些东西HTML DOM（文件对象模型）JavaScript最近简单了解了一下HTML和JavaScript，所以在这里我就简单讲讲它们，希望看完能对它们有一个简单的印象，大概能了解一些组成和命令，重点就只是了解而已！对于一个网站，主要有三个语言参与了建设：1、HTML——框架2、JS——动态效果3、CSS——样式、布局（美观）HTML先附上百度百科的
复制链接

扫一扫