【WEB】WEB复习笔记

最新推荐文章于 2024-06-15 17:09:10 发布

江湖one Cat

最新推荐文章于 2024-06-15 17:09:10 发布

阅读量192

点赞数

分类专栏： web 文章标签： web

本文链接：https://blog.csdn.net/qq_43633973/article/details/88916970

版权

第一课 Web基础知识
第二章第一节 HTML
一、HTML结构和语法
html是由head 和body组成的
例如p标签：

<p>   </p>

代表一个段落

元素中也会有其他的属性
标签属性：name,id,class,…
事件属性：onload,onerror,onclick,…

<p class="editor-note">My cat is very grumpy</p>

HTML文档：由html元素组成
HTML元素：<开始标签>、</闭合标签>、内容、属性

①注释

<!--这里是注释信息，不会页面显示-->

HTML不区分大小写

②图像

<img src="图片的url" width="500" height="100"/>

③链接

<a href="链接的url">点我访问<a/>

链接写在href属性中，用来进入其他的页面。

④表单
经常用于浏览器的表单提交

<form>
username:
<input type="text" name="username"/>
password:
<input type="password" name="password"/>
<input type="Submit" name="Submit"/>
</form>

⑤内联框架

<iframe src="url地址" frameborder="0" width="480" height="240"></iframe>

在网页上会出现一个框

二、HTML DOM树形结构
DOM是将HTML转化成DOM树，可以更直观了解页面元素，通过JavaScript,可以对HTML进行任意操作。

第二节JavaScript
一、概述
*在哪些地方可以运行JavaScript？
答：
①HTML的<script></script>之间

②HTML的事件属性中如onclick
例如

    <body>
    <p id="intro">hello world!</p>
    <script>
    function changetext(id)
    {
    id.innerHTML="谢谢";
    }
    </script>

<h1 onclick="changetext(this)">请点击改文本</h1>
</body>

③在浏览器中的console控制台

*JavaScript语法是否很复杂？
答：
很容易掌握，比较简单。

*除了页面动态效果JavaScript还可以用来干什么呢？

二、JavaScript DOM
*HTML源代码已经完成，如果想在页面操作HTML怎么办？

用到JavaScript HTML DOM操作HTML中的数据

①如何获取一个HTML元素内容？

例如获取下面p标签的hello world内容

代码：

<html>
<head>
<title>网易web安全微专业</title>
</head>
<body>
<p id="intro">Hello World!</p>

<script>
x=document.getElemntById("intro");
alert('id为intro元素的文本是：'+x.innerHTML);
</script>

</body>
</html>

答：
第一步，获取元素
grtElementById():通过id获取元素

第二步，获取元素内容
.innerHTML:获取元素内容

注：alert（）;弹出一个警示框，展示信息。

演示：

打开浏览器，F12点击console，敲如
alert(1)会显示在页面上
在这里插入图片描述
选中网页中的form表单，找到form的id，去console执行js。

document.getElementById(“form表单的id”).innerHTML
获取元素内内容

输入：alert(document.getElementById(“form表单的id”).innerHTML)
页面弹出在浏览器中

②如何修改一个HTML元素内容？

源码：

<html>
<head>
<title>网易web安全微专业</title>
</head>
<body>
<p id="intro">Hello World!</p>

<script>
x=document.getElemntById("intro");
x.innerHTML="Javascript改变HTML内容!";
</script>

</body>
</html>

答：第一步，获取元素
getElementById():通过id获取元素
第二步，获取元素内容
.innerHTML:通过ID获取元素

演示：

打开https://dun.163.com
通过id设置html内容：
登录框架设置为iframe

第一步，选定登录框元素，找到id
第二步，获取Id的元素内容，并修改为一个html的iframe框架（使用console）

在console控制台中
输入：document.getElementById("id内容"）.innerHTML="<iframe=src="url地址"></iframe>"
回车

面都是修改一些数据，如果想创建一些动态效果，列如获取当前时间。

③如何创建动态的HTML元素内容？

源码：

<html>
<head>
<title>网易web安全微专业</title>
</head>
<body>
<p id="intro">Hello World!</p>

<script>
x=document.getElemntById("intro");
document.write(Data());
</script>

答：
使用document.write()函数
可以直接写入到html页面中
data()函数是输出系统的时间。

演示：
使用浏览器打开https://dun.163.com
展示通过document.write方法动态写入HTML：
写入当前时间
写入iframe

在console中输入：
document.write(Data())
写入当前时间，回车
输入：

document.write("<iframe src="url链接"></iframe>")

写入iframe，页面上相应的页面出现。

刚才所讲的都是针对元素内容的修改，那么

④如何让页面增加点互动？

源码：

<html>
<head>
<title>网易web安全微专业</title>
</head>
<body>
<p id="intro">Hello World!</p>

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

</body>
</html>

网页上显示的是请点击该文本，
当我问点击时，页面内容改变点击事件：onclick

演示：
浏览器打开dun.163.com
展示登录onclick事件：
为了展示效果，修改为alert(1)

选中元素登录，看到源码中有一个onclick属性，我们直接在elements中修改成
οnclick=“alert(1)”
再次点击登录就会显示一个框

*以上使用javaScript访问和操作HTML就是avaScript DOM的操作
DOM本质是连接web页面和编程语言的桥梁

javaScript+DOM是访问和操作HTML文档的标准方法。

三、JavaScript BOM

①我们如果想获取浏览器信息，操作浏览器行为怎么办？
BOM是用来操作浏览器行为的

②如何让浏览器来警告用户？
答：
警告弹框alert()
确认弹框confirm()
提示弹框prompt()

这几个函数常用于简单的调试和信息展示
如XSS漏洞的测试

③如何从浏览器获取用户Cookie？
cookie：通常是服务器发放给用户客户端的

最低0.47元/天解锁文章

江湖one Cat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【WEB】WEB复习笔记

第一课 Web基础知识第二章第一节 HTML一、HTML结构和语法html是由head 和body组成的例如p标签：<p> </p>代表一个段落元素中也会有其他的属性标签属性：name,id,class,…事件属性：onload,onerror,onclick,…<p class="editor-note">My cat is ver...
复制链接

扫一扫