HTML新手上路随笔

2023-05-25 11:17:13 浏览数 (2)
  1. 插入重复的HTML代码，可以用标签
代码语言：javascript复制
<object data="./xxx.html"></object>
<!--或者-->
<iframe src="xxx.html"></iframe>

分享一件关于在激活PhpStorm时的一件趣事，（屏蔽网站） C:WindowsSystem32driversetc 路径下的hosts文件， 打开hosts文件之后，我们会发现在hosts文件的最下面，有这样一行：

代码语言：javascript复制
127.0.0.1 localhost

这行文字表明了ip地址（127.0.0.1）和域名（localhost）的映射关系。因此，我们只要把特定网站域名都映射为127.0.0.1就可以实现屏蔽网站的效果了。例如：我们要屏蔽特定网站www.xxx.com,那么只要在127.0.0.1 localhost下面另起一行输入：

代码语言：javascript复制
127.0.0.1 www.xxx.com

即可达到屏蔽网站www.xxx.com的效果。

  1. 如何使div带有边框 边框虚线样式：dashed 边框实现样式：solid
代码语言：javascript复制
border:1px dashed #000
/* 代表设置对象边框宽度为1px黑色虚线边框*/

border:1px solid #000
代表设置对象边框宽度为1px黑色实现边框
  1. id唯一的原因 如果只是用来定义样式的话可以！但是使用js等效果的话，id必须唯一，不然js识别不到！
  2. 在HTML中怎样去除无序列表前的小圆点 2 去除圆点 给li设置样式 ： 在style中设置： list-style-type:none 就把每个li前面的圆点去掉了
  3. HTML marquee 元素 <marquee></marquee> 用来插入一段滚动的文字。你可以使用它的属性控制当文本到达容器边缘发生的事情。 behavior： 设置文本在 marquee 元素内如何滚动。可选值有 scroll(连续滚动)，slide(滑动一次) 和 alternate(往返滚动)。 如果未指定值，默认值为 scroll。 bgcolor： 通过颜色名称或十六进制值设置背景颜色。 direction：设置 marquee 内文本滚动的方向。可选值有 left, right, up and down。如果未指定值，默认值为 left。 loop： 设置 marquee 滚动的次数。如果未指定值，默认值为 −1，表示 marquee 将连续滚动. scrollamount ：设置每次滚动时移动的长度（以像素为单位）。默认值为 6。 scrolldelay： 设置每次滚动时的时间间隔（以毫秒为单位）。默认值为 85。请注意， 除非指定 truespeed 值，否则将忽略任何小于 60 的值，并改为使用 60。 truespeed：默认情况下，会忽略小于60的scrolldelay值。如果存在truespeed，那些值不会被忽略。 vspace,hspace：表示运动区域边界的水平距离和垂直距离，以像素或百分比值设置垂直边距。 width,height：表示运动区域的宽度和高度，以像素或百分比值设置高度。 align：表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle

6.鼠标悬停事件

代码语言：javascript复制
//表示当鼠标以上区域的时候滚动停止
onmouseover=this.stop() 
//当鼠标移开的时候又继续滚动 
onmouseout=this.start()
  1. 设置透明度（比如图片） 最常用的，在你需要修改透明度的元素的CSS样式上添加属性opacity：0-5；（0.1-0.9的时候会半透明） CSS伪类（http://www.w3school.com.cn/css/css_pseudo_classes.asp） a:link {color: #FF0000} /* 未访问的链接 / a:visited {color: #00FF00} / 已访问的链接 / a:hover {color: #FF00FF} / 鼠标移动到链接上 / a:active {color: #0000FF} / 选定的链接 */ 可以让静态页面活起来

在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！在CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！

代码语言：javascript复制
<html>
<head>

<style type="text/css">
a:hover {color: #FF00FF}
</style>
</head>
<body>
<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>
</body>
</html>
  1. CSS cursor 属性
代码语言：javascript复制
<html>

	<body>
		<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
		<span style="cursor:auto">
		Auto</span><br />
		<span style="cursor:crosshair">
		Crosshair</span><br />
		<span style="cursor:default">
		Default</span><br />
		<span style="cursor:pointer">
		Pointer</span><br />
		<span style="cursor:move">
		Move</span><br />
		<span style="cursor:e-resize">
		e-resize</span><br />
		<span style="cursor:ne-resize">
		ne-resize</span><br />
		<span style="cursor:nw-resize">
		nw-resize</span><br />
		<span style="cursor:n-resize">
		n-resize</span><br />
		<span style="cursor:se-resize">
		se-resize</span><br />
		<span style="cursor:sw-resize">
		sw-resize</span><br />
		<span style="cursor:s-resize">
		s-resize</span><br />
		<span style="cursor:w-resize">
		w-resize</span><br />
		<span style="cursor:text">
		text</span><br />
		<span style="cursor:wait">
		wait</span><br />
		<span style="cursor:help">
		help</span>
	</body>

</html>
  1. 判断H5外链接JS状态 判断css和js是否外联成功，一个是打开谷歌浏览器调试选定相应元素查看style，另一个就是找到调试中的Network 模块 （Ctrl R）看有没有外联文件
html 网站 cursor 调试 域名

0 人点赞