HTML笔记

最新推荐文章于 2024-09-18 09:47:26 发布

YITAINYA

最新推荐文章于 2024-09-18 09:47:26 发布

阅读量103

点赞数

分类专栏：派大星HTML5笔记文章标签： html css javascript

本文链接：https://blog.csdn.net/YITAINYA/article/details/110683468

版权

派大星HTML5笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML

表格

  <tr>  <!--表行-->
  	<th>表头1</th>  <!--标题-->
  	<th>表头2</th>
  </tr>
  <tr>  
 	 <td>第一行格子1</td>  <!--表格列-->
 	 <td>第一行格子2</td>
  </tr> 
  <tr>  
 	 <td>第一行格子1</td>  <!--表格列-->
 	 <td>第一行格子2</td>
  </tr>     
</table>

运行效果

cellspacing=“0”
将表格格子间的宽度设置为0

列表去圆点

list-style:none;

改变鼠标形态

cursor:
pointer:是手型。
crosshair:是十字型，就是小乌龟首页所用的样式。
text:是平时鼠标移动到文本上的样式。
wait:是等待的效果。
default:是默认的那种效果。
help:是带问号的鼠标样式。
e-resize:是向右的箭头。
ne-resize:是向右上方的箭头。
n-resize:是向上的箭头。
nw-resize:是向左上方的箭头。
w-resize:是向左的箭关。
sw-resize:是向左下的箭头。
s-resize:是向下的箭头。
se-resize:是向右下方的箭头。
auto:是系统自动的效果。

CSS

溢出隐藏

overflow: hidden;

首行缩进

text-indent

文本显示一行超出省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;  <!--关键属性-->

将区域无法选中

user-select: none;

兼容写法

				-moz-user-select: none;
				-ms-user-select: none;
				-webkit-user-select: none;
				-o-user-select: none;
				user-select: none;

浮动撑开

d当标签设置浮动时，浮动是没有大小的。所以要在父元素下添加属性以便撑开大小。

overflow:auto;

清除与上一位浮动关系

clear: both;    //清除与上一位所有关系
clear: left；   //清除上一位的左浮动关系
clear: right;	  //清除与上一位的右浮动关系

举个例子：聊天框

<style>
			*{
				margin: 0;
				padding: 0;
			}
			.a{
				width: 300px;
				height: 515px;
				background-color: burlywood;
				margin: 100px auto;
				border: solid 0px;
				border-radius: 12px;
				overflow: hidden;
			}
			li{
				line-height: 30px;
				border: solid 0px;
				border-radius: 5px;
				
				list-style: none;
				padding:0px 10px 0px ;
				clear: both;
				
				}
				.b .l{
					float: left;
					background-color: brown;
					margin: 10px 50px 10px 10px;
				}
				.b .r{
					float: right;
					background-color: blueviolet;
					margin: 10px 10px 10px 50px;
				}
				span{
					background-color: darkmagenta;
					width: 100%;
					height: 30px;
					display: block;
					line-height: 30px;
					text-align: center;
				}		
		</style>
	</head>
	<body>
		<div class="a">
			<span>头号大撒比</span>
			<ul class="b">
				<li class="l">你好</li>
				<li class="r">你是？</li>
				<li class="l">我是你爹</li>
				<li class="r">去你妈的</li>
				<li class="l">干干干干干干干干干干干干干干干干干干干干干干干干干干干</li>
				<li class="r">滚犊子</li>
				<li class="r">干</li>
				<li class="r">傻逼</li>
				<li class="r">干</li>
			</ul>
		</div>
	</body>

x效果图：在这里插入图片描述

JS

获取当前所有某个标签querySelectorAll

var oimg = document.querySelectorAll("img");

获取当前页面下的所有img标签；

鼠标事件

onclick :当用户点击某个对象时调用的事件句柄。
oncontextmenu : 在用户点击鼠标右键打开上下文菜单时触发
ondblclick 当用户双击某个对象时调用的事件句柄。
onmousedown : 鼠标按钮被按下。
onmouseenter :当鼠标指针移动到元素上时触发。
onmouseleave : 当鼠标指针移出元素时触发
onmousemove :鼠标被移动。
onmouseover :鼠标移到某元素之上。
onmouseout : 鼠标从某元素移开。
onmouseup :鼠标按键被松开。

for(var i=0;i<=oimg.length;i++){
				oimg[i].onmouseover = function(){
					oimg[0].src=this.src;
				}
			}

为每个oimg对象添加了鼠标经过事件

获取父节点

点属性：parentNode

元素节点的内容

innerHTML: 元素节点中的内容

创建节点

createElement

添加子节点

appanChild

删除子节点

remveChild

button点击一次失效

btn.setAttribute(“disabled”,“disabled”);

数值向上取整

Math.ceil()

数值向下取整

Math.floor()

获取0到1的随机数

Msth.ranom()

funtion的隐藏形参

arguments，以数组形态出现

JQuer

导入JQuer

直接复制JQuer.js文件到根目录下，使用外联式引入页面。

<script type="text/javascript" src="js/jquery-3.4.0.js"></script>

验证JQuery导入是否成功

在script标签中使用

alert($);  //$是一个函数

如果弹窗一个警告框内容为一个方法体，表示导入成功。

JQuery导入验证
导入失败的话会直接报错，显示为$未定义。

JQuery的简单使用

// 	    JQuer的使用
		$(function(){   //相当于window.onload =function(){}
			var btnObj =$("#btnObj");
			btnObj.click(function () {
				alert("ss");
			});		
		});

给id为btnObj的标签赋予了一个点击事件

JQuer核心函数

$是JQuer的核心函数，能完成JQuery很多功能,$();是调用$这函数
1.传入参数为函数时
表示页面加载完成后。相当于window.onload = function()

2.传入参数为 [HTML字符串] 时：
$(function(){   //相当于window.onload =function(){}
    			alert('蟹老板');			
				$("<div>"+
					"<span>派大星</span>"+
					"<p>章鱼哥</p>"+
					"</div>"	
				).appendTo("body");	//在body标签下添加一个div标签。。
		});

3.传入参数为 [选择器字符串时] ：
相当于document.querycelector();
4.传入对象为 [DOM对象] 时