HTML新手上路随笔

发布于
  1. 插入重复的HTML代码，可以用标签
代码语言：javascript
复制
<object data="./xxx.html"></object>
<!--或者-->
<iframe src="xxx.html"></iframe>

分享一件关于在激活PhpStorm时的一件趣事，（屏蔽网站） C:\Windows\System32\drivers\etc 路径下的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>


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



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

#html#网站#cursor#调试#域名