HTML

最新推荐文章于 2022-04-09 10:43:09 发布

LUSHIJIE__

最新推荐文章于 2022-04-09 10:43:09 发布

阅读量114

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/LUSHIJIE__/article/details/110790823

版权

笔记专栏收录该内容

30 篇文章 0 订阅

订阅专栏

Html学习-1

文章目录

Html学习-1
一、web概念概述
二、HTML
HTML DOM
总结

一、web概念概述

1.javaweb：使用java语言开发的基于互联网的项目。
2.软件架构：C/S：Client/Server，即客户端/服务器端。
      在用户本地有一个客户端程序，在远程有一个服务器端程序。(如qq)
                      B/S：Browser/Server。浏览器/服务器。
      用户通过不同的URL，访问不同的服务器端程序。

B/S架构详解：
1.静态资源：所有用户访问得到的结果都一样的。（静态网页开发技术Html、CSS、JavaScript）。浏览器自带静态资源解析引擎。
2.动态资源：使用动态网页及时发布的资源。（动态网页技术：jsp、Servlet、php、asp）。执行路径：浏览器请求动态资源->动态资源转换为静态资源->静态资源传给浏览器解析。（动态资源不能直接传给浏览器的原因：浏览器只能解析静态资源。）

二、HTML

1.概念

Hyper Text Markup Language(超文本标记语言)。
超文本：超文本是用超链接的方法，将不同空间的文字信息组织走一起的网状文本结构。
标记语言：由标签构成的语言。（标记语言不是编程语言。）

2.a标签

	<a href="https://www.runoob.com/" target="_self">当前界面跳转（默认值）</a>
    <br/>
    <a href="https://www.runoob.com/" target="_blank">新窗口打开</a>
    <br/>
    <a href="images/ad1.jpg" download="images/ad1.jpg">图片下载</a>
    <br/>
    <!--要有邮件的客户端-->
    <a href="mailto:XXXXXXXXX@qq.com">联系我们</a>

3.语义化标签

html5中为了提高程序的可读性，提供了一些标签。
例：<header>和<footer>：只是为了提高代码的可读性，没有特殊的作用。

4.表格标签

table:定义表格。
      width：宽度。
      border：边框。
      cellpadding：定义内容和单元格的距离。
      cellspacing：定义单元格之间的距离。如果指定为0则单元格的线会合并为一条。
      bgcolor：背景色。
      align：对齐方式。
tr：定义行。
      bgcolor：背景色。
      align：对齐方式。
rd：定义单元格。
      colspan：合并列。
      rowspan：合并行。
th：定义表头单元格。
caption：表格标题。
语义标签：
thead：表示表格的头部分。
tbody：表示表格的体部分。
tfoot：表示表格的脚部分。

HTML DOM

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。
HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 以树结构表达 HTML 文档。

1.DOM的树形结构。

在这里插入图片描述
模拟电灯开关的案例。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function changeImage()
{
	element=document.getElementById('myimage')
	<!--判断元素的路径名中是否包含bulbon-->
	if (element.src.match("bulbon"))
	{
		element.src="/images/pic_bulboff.gif";
	}
	else
	{
		element.src="/images/pic_bulbon.gif";
	}
}
</script>
<img id="myimage" onclick="changeImage()" border="0" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡 开/关 灯</p>

</body>
</html>

HTML DOM的方法和属性。

一些常用的 HTML DOM 方法：

方法	描述
getElementById(id)	获取带有指定 id 的节点（元素）
appendChild(node)	插入新的子节点（元素）
removeChild(node)	删除子节点（元素）
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
replaceChild()	替换子节点
insertBefore()	在指定的子节点前面插入新的子节点
createAttribute()	创建属性节点
createElement()	创建元素节点
createTextNode()	创建文本节点
getAttribute()	返回指定的属性值
setAttribute()	把指定属性设置或修改为指定的值

一些常用的 HTML DOM 属性：

属性	描述
innerHTML	节点（元素）的文本值
parentNode	节点（元素）的父节点
childNodes	节点（元素）的子节点
attributes	节点（元素）的属性节点

在这里插入代码片

事件

onload 和 onunload 事件：

      当用户进入或离开页面时，会触发 onload 和 onunload 事件。
      onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
      onload 和 onunload 事件可用于处理 cookies。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body onload="checkCookies()">

<script>
function checkCookies()
{
	if (navigator.cookieEnabled==true)
	{
		alert("Cookie 可用")
	}
	else
	{
		alert("Cookie 不可用")
	}
}
</script>

<p>页面载入时，弹出浏览器 Cookie 可用状态。</p>
</body>
</html>

onchange 事件

onchange 事件常用于输入字段的验证。
下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时，将调用 upperCase() 函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>

</body>
</html>

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。

onmousedown、onmouseup 以及 onclick 事件

onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。

这个是HTML DOM相关的案例实现。
https://www.runoob.com/htmldom/htmldom-examples.html

总结

回顾了HTML、HTML5、HTML DOM的相关概念、属性、方法、事件等等常用的相关知识。
（注：实现锚点定位的方式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #divTest{
            border:1px solid green;
            height:1000px;width:200px;
        }
    </style>
    <script>

        window.onload = function(){
            var b1 = document.getElementById("btn1");

            b1.onclick =function(){
                location.href ="#maoDian";
            }

        }

    </script>

</head>
<body>
<a href="#maoDian">aaaaa</a>
<button id="btn1">
    锚点定位方式
</button>
<div id="divTest">
</div>
<div id="maoDian">
    这是一个锚点所在的位置
</div>

</body>
</html>

LUSHIJIE__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML

Html学习-1文章目录Html学习-1一、web概念概述二、HTML1.概念2.a标签3.语义化标签4.表格标签HTML DOM1.DOM的树形结构。HTML DOM的方法和属性。事件onload 和 onunload 事件：onchange 事件onmouseover 和 onmouseout 事件onmousedown、onmouseup 以及 onclick 事件总结一、web概念概述1.javaweb：使用java语言开发的基于互联网的项目。2.软件架构：C/S：Client/Serv
复制链接

扫一扫