html页面知识杂谈

小木可菜鸟测试一枚

已于 2022-05-14 16:43:20 修改

阅读量487

点赞数

分类专栏： python 文章标签：前端 javascript html

于 2021-12-29 17:59:27 首次发布

本文链接：https://blog.csdn.net/m0_51709670/article/details/122218034

版权

python 专栏收录该内容

71 篇文章 8 订阅

订阅专栏

本文介绍了HTML页面的组成，包括HTML、CSS和JavaScript的作用，并详细讲解了HTML标签及其属性，如readonly、placeholder、checked等。此外，还讨论了DOM对象在操作HTML页面中的重要性，以及如何通过JavaScript进行元素选择、属性修改和事件处理。示例代码展示了如何改变文本、字体颜色以及响应鼠标事件。

摘要由CSDN通过智能技术生成

一、web页面的组成： HTML + css + javascript

HTML 定义页面的内容，文本实现的内容
css 样式设计，模板如：字体颜色，字体大小，排版
javascript 编程语言：逻辑校验动态的

在pycharm里面自己新建一个html文件。

<title>python-20211229</title> —代表标题行
在这里插入图片描述

<input></input> —代表输入框行
<input type="text"></input> —代表输入框行文本框属性
<input type=submit></input> 提交属性
<input type=password></input> 密码框属性
<input type=file></input> 文件上传属性
<input type=radio></input> 单选框属性
<input type=checkbox></input> 复选框属性
<input type=button></input> 按钮属性
<rb> 换行

在这里插入图片描述
例如1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>python-20211229</title>
</head>
<body>
喜欢的动漫：

<input type=checkbox>海贼王</input>
<input type=checkbox>斗罗大陆</input>

</body>
</html>

页面展示：
在这里插入图片描述
例如2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>python-20211229</title>
</head>
<body>
喜欢的动漫：
<input type="checkbox">海贼王
<input type="checkbox">斗罗大陆
<br>
性别：
<input type="radio" name="sex">男
<input type="radio" name="sex">女

</body>
</html>

页面展示：
在这里插入图片描述

二、HTML标签-属性

1.<input type="text" readonly> readonly 只读属性，输入框不可编辑了
2.<input type="text" placeholder="请输入8位数字"> placeholder 帮助用户输入时提示
在这里插入图片描述

3.<input type="checkbox" checked >海贼王 checked 默认被选中

喜欢的动漫：
<input type="checkbox" checked >海贼王
<input type="checkbox">斗罗大陆

在这里插入图片描述
4.<input type="checkbox" disabled >海贼王 input元素加载时禁用此元素

5.
第一个代表禁用，第二个button代表按钮提交，第三个也是提交

<input type=button value="提交" disabled >
<input type=button value="提交" >
<button>提交</button>

在这里插入图片描述
6.链接 a 是元素，herf是属性
 html注释
<a href="http://map.baidu.com">地图</a> html链接地址

7. html图片
<img src="Untitled.png"> html图片src=图片的路径

8.html图片
<img src="Untitled.png" width="270" height="129"> html图片大小的设置 width 宽度 heigt 高度
在这里插入图片描述
9.下拉列表
select 和 option 并存

上传文件：
<select name="ft" size="1">  == $0
    <option value="pdf">Adobe Acrobat PDF (.pdf)</option>
    <option value="doc">微软 Word (.doc)</option>
    <option value="xls">微软 Excel (.xls)</option>
    <option value="ppt">微软 Powerpoint (.ppt)</option>
    <option value="rtf">RTF 文件 (.rtf)</option>
    <option value="all">所有格式</option>
</select>

显示的是：
在这里插入图片描述

10.表单

<form><!--表单 -->
    <input type="text">
    <table border="2"><!--边框 -->
            <tr><!--行 -->
                <td>11</td><!--列 -->
                <td>22</td>
                <td>33</td>
            </tr>
            <tr>
                <td>22</td>
                <td>33</td>
                <td>44</td>
            </tr>
            <tr>
                <td>55</td>
                <td>66</td>
                <td>77</td>
            </tr>
    </table>
</form>

显示的是：
在这里插入图片描述
11.iframe 网页嵌套一个网页

<iframe src="//xui.ptlogin2.qq.com/cgi-bin/xlogin?"><!--iframe：内连框架 里边放的是一个html页面 -->
    
</iframe>

比如：网页的登录页面
在这里插入图片描述 12.大的文本框
<textarea></textarea> 输入无限制

13.标题框
<H1>大标题</H1> H1-H6 都代表输入框的大小

14.id 是每个html页面的唯一的属性或者是style：设置样式。

更多的知识去：w3school 了解,戳我

二、DOM对象全称：Document Object Mode 是一套web标准，定义了访问html文档的一套属性，进行增删改查。

其他语言，如JAVA/PYTHON去操作html页面，不可直接操作，是通过DOM对象然后去操作。HTML DOM专门用来操作HTML页面。所以：脚本语言通过DOM对象来访问html页面

当前，如果在前端页面当中直接使用DOM对象的话，也是需要使用Java Script语法的。

Java Script 简单语法

<script></script> var 即是 variable 声明
var 变量名 = 值
列表： var he = [a,b,c,d] alert(he[1]) 提示弹窗 a
字典：var hei = {"name":"value","sex":"unknown"} 调用的话：hei.name

函数：

function 函数名称(参数,参数){
	return 值;
}
调用：函数名称(参数)

调试：
在这里插入图片描述
结果：

查找元素：

2.1
在这里插入图片描述

名称	对应
getElementById ID属性：	kw
getElementsByClassName class属性：	s_ipt
getElementsByName name属性:	wd
getElementsByTagName 标签名	input

元素的ID属性：
document.getElementById("kw")
元素的class属性：
document.getElementsByClassName("s_ipt")
元素的name属性:
document.getElementsByName("wd")
元素的标签名：
document.getElementsByTagName("input")
css选择器：
document.querySelector(css)

例子：选择阿杜的页面的搜索框，在控制台里面输入下面的代码，妥妥的：

document.getElemenByld("kw")

在这里插入图片描述结果就定位到了相对应的选项框

2.2元素的属性：

改变属性：
document.getElemenByXXX("").属性名=属性值
获取属性：
document.getElemenByXXX("").getAttribute(属性名)

栗子：
在这里插入图片描述
设置修改
1.

那么结果：

2.

那么结果：

3.
改变文本/改变字体颜色：
首先先定位：

a = document.getElementById("articleContentId")
a.innerText="读取txt文件中读取某字符所在的列"
a.style.color = "red"

在这里插入图片描述

三、事件

浏览器和用户的事件，触发-执行js代码所带来的不同的页面的响应。
例如:点击事件、输入事件、鼠标事件等。

页面加载完成事件：

<script>
	window.onload = function(){
		alert("everything is ready!!")
	}
</script>

点击事件：

<script>
document.findElementByld(XXX).οnclick= function(){
alert("点击OK")
}
</script>

加载事件：
在这里插入图片描述

在这里插入图片描述
3.1，鼠标触发变为红色，移开为绿色的js代码：注意输入换行 shift+enter 键换行

 <!--定位到元素-->
a = document.getElementById("title")
<!--红色-->
a.onmouseover =  function(){
    a.style.color = 'red';
}
<!--绿色-->
a.onmouseout =  function(){
    a.style.color = 'green';
}