Html初级学习

简介: 1.标签为什么没有效果?本来这个标签是闪烁效果。 IE不支持blink,那么有些论坛上的一些 "插入闪光文字" 的那种是用什么代码的? blueidea setInterval(function(){blink.color=blink.color=='#0000ff'?'red':'blue'},100)   setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

1.<blink>标签为什么没有效果?本来这个标签是闪烁效果。

IE不支持blink,那么有些论坛上的一些 "插入闪光文字" 的那种是用什么代码的?

<font id="blink" color="blue">blueidea</font>  
<script>
setInterval(function(){blink.color=blink.color=='#0000ff'?'red':'blue'},100)
</script>

 

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

2.frame标签

<frame> 标签定义 frameset 中的一个特定的窗口(框架)。

frameset 中的每个框架都可以设置不同的属性,比如 border、scrolling、noresize 等等。

简单的三框架页面:

<html>

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>

</html>

 

 

3.

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

<h1>这是标题 1</h1>
<h1>这是标题 2</h1>
<h2>这是标题 3</h2>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

 

 

4.

p换段,br换行

//照片居中显示
<center>
<img src="Image/1.jpg">
</center>

 

 

5.

1 .可以包含内容的元素
可以包含内容的元素,其表现形式如下所示。
< 元素名称> ……</ 元素名称>
说明:可以包含内容的元素,其完整的结构由两部分组成:元素的起始标签<元素名称>、元素的结
束标签</ 元素名称>。
下面是一个使用含有内容元素的实例,其代码如下所示。
<title> ……</title>
2 .自封闭的元素
自封闭的元素,是指起始和结束使用同一个标签的元素。其表现形式如下所示。
< 元素名称 />
说明:在自封闭的元素中,采用“元素名称”之后添加英文“空格”和“/”的格式来结束元素。所
以元素中不能包含内容。

 

6.onmouseover事件会在鼠标指针移动到指定的对象上时触发事件发生。可以结合JS实现一些CSS特效。

onmouseover与onmousemove的区别

时间上,onmousemove事件触发后再触发onmouseover事件;动作上,onmouseover只在刚进入区域时触发。onmousemove除了刚进入区域时触发外,在区域内移动鼠标也会触发。

在下面的例子中,当用户将鼠标移到图片上时将弹出一个消息框:

<img src="image_w3default.gif" alt="W3POP"onmouseover="alert('W3POP!')" />

 

在下面的例子中,我们首先加入一张图片做为链接。接着我们加入onMouseOver事件和onMouseOut事件,实现图片链接的切换:

<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="images/b_blue.gif"
}
function mouseOut()
{
document.b1.src ="images/b_pink.gif"
}
</script>
</head>

<body>
<a href="http://www.w3pop.com" target="_blank" onmouseover="mouseOver()" onmouseout="mouseOut()">
<img border="0" alt="欢迎来到POP" src="images/b_pink.gif" name="b1" width="26" height="26" /></a>
</body>
</html>

 

 7.

浏览器内置的DOM 对象的成员函数

dom 即为 document
内置主要为response对象,其他的基本上就没用了

8.

onload 事件会在页面或图像加载完成后立即发生。

在本例中,文本 "Page is loaded" 会被显示在状态栏中:

<html>
<head>
<script type="text/javascript">
function load()
{
window.status="Page is loaded"
}
</script>
</head>

<body onload="load()">
</body>

</html>

 

9.使用<pre>元素创建预先格式化的文本

<pre>
 function testFunction(strText){  
alert (strText)  }  
</pre> 

 

图1-10中给出了<pre>元素中的内容以等宽字体显示的结果。更重要的是,图中保留了<pre>元素中所示的格式--空格被保留。

注意:

虽然制表符字符在<pre>元素中有效,并且一个制表符应该表示8个空格,但是不同的浏览器中制表符的实现方式不同,因此最好使用空格代替。

10.

<label> 标签为 input 元素定义标注(标记)。

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

实例

带有两个输入字段和相关标记的简单 HTML 表单:

<html>
<body>

<p>请点击文本标记之一,就可以触发相关控件:</p>

<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>

</body>
</html>

 

 

 

11.推荐使用外部链接来调用脚本
HTML 中使用在<!--和-->注释中插入脚本,但是在XML浏览器中会被简单的删除,导致脚本或样
式的失效。推荐使用外部链接来调用脚本。调用脚本的代码如下所示。
<script language="JavaScript1.2" type="text/j avascript" src="scripts/menu.js"></script>
说明:language 是指所使用的语言的版本。type 是指所使用脚本语言等的种类。src 是指脚本文件所
在路径.

12.

 <dir> 标签定义目录列表。

<html>
<body>

<dir>
  <li>html</li>
  <li>xhtml</li>
  <li>css</li>
</dir>

</body>
</html>

 

 

13.link主要链接外部样式表

<html>

<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>

<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样!</p>
</body>

</html>

 

 14.

 

15.

 

16.base标签

<html>
<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>

<body>
<img src="eg_smile.gif" /><br />
<p>请注意,我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL,浏览器将在如下地址寻找图片:</p>
<p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>

<br /><br />
<p><a href="http://www.w3school.com.cn">W3School</a></p>
<p>请注意,链接会在新窗口中打开,即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p>

</body>
</html>

 

17.使用脚本时type和language功能基本相同,但是写法不一样。

18. 推迟执行属性  defer
defer属性使脚本中不显示的内容,推迟执行。目的是加快页面的显示速度。语法结构如下所示。
<script defer=defer> 脚本内容</script>
defer属性是没有值的,按照 HTML 的语法规则,要使用自身名称作为值。

19.src 属性的作用是链接外部的脚本文件。语法结构如下所示。
<script src=”脚本文件的路径”> </script>

20.表3-13 <body> 元素的所有属性
属性名称  写法
文本显示方向属性 dir
指定语言属性  lang
背景图片属性  background
背景颜色属性  bgcolor
标题属性  title
文本属性  charset
指定链接路径属性 text
链接属性  link
已链接属性  vlink
激活链接属性  alink
标记属性  id
类属性  class
定义级联样式属性 style
左边界属性  leftmargin
上边界属性  topmargin

21.bgproperties属性用来指定背景图片能否滚动。背景图片滚动的含义是,当拖动浏览器滚条时,页面
背景可以随滚条一起改变位置。语法结构如下所示。
<body background="图片的路径" bgproperties=”fixed”>包含的内容部分</body>
因为bgproperties属性是用来控制背景图片的,所以一定要和background 属性一起使用。bgproperties
属性只有一个值fixed,含义是背景图片固定。下面是使用 bgproperties属性的实例。其代码如下所示。

22. 主体元素的文本属性  text
text 属性的作用是,用来指定页面中普通文本(没有链接的文本)的颜色。语法结构如下所示。
<body text=”颜色值”> 包含的内容部分</body>

23.<body>元素的边界属性用来定义页面与浏览器窗口之间的距离。边界属性包括两个属性,leftmargin
属性、topmargin 属性。
注意:这两个属性都是IE 浏览器所专有的。如果想在其他浏览器中达到一致的显示效果,建议使
用级联样式表实现。

24.link 属性用来指定未访问过的链接的颜色。语法结构如下所示。
<body link =” 颜色值”> 包含的链接部分</body>
注意:link 属性定义的文本颜色,只对含有链接的文本起作用。

vlink属性用来指定已访问过的链接的颜色。语法结构如下所示。
<body vlink =”颜色值”> 包含的链接部分</body>

alink属性用来指定激活的链接文本的颜色,如在已访问的链接上按下鼠标后的状态等。语法结构如
下所示。
<body alink =”颜色值”> 包含的链接部分</body>

25.3.10.1  IE 浏览器中添加背景音乐元素  <bgsound>
<bgsound>元素的作用是,制作页面的背景音乐。语法结构如下所示。
<bgsound  属性=” 属性值” />
下面是使用<bgsound>元素的实例。其代码如下所示。
例程3-45  bgsound.html
<body>
<bgsound src="music.mp3" loop="2" />
大江东去,浪淘尽,千古风流人物。  故垒西边,人道是、三国周郎赤壁。  乱石穿空,惊涛拍岸,卷起千堆雪。  江
山如画,一时多少豪杰!
</body>
该实例,在代码运行后,页面会播放背景音乐。背景音乐的添加,对页面的显示效果并无影响。但
是一般背景音乐的大小会比较大。如果网速不够快,可能会影响第一次播放的质量,所以最好选用尽量
小的音乐格式。

26.

 

目录
相关文章
|
3月前
|
存储 数据安全/隐私保护
走进HTML学习二
走进HTML学习二
|
4月前
|
前端开发
【前端学习从青铜到王者】—HTML常用标签(二)
【前端学习从青铜到王者】—HTML常用标签(二)
|
4月前
|
前端开发
【前端学习从青铜到王者】—HTML介绍(一)
【前端学习从青铜到王者】—HTML介绍(一)
|
7月前
|
移动开发 JavaScript HTML5
HTML5 基础学习
HTML5 基础学习
32 0
|
2月前
|
存储 移动开发 前端开发
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
46 0
|
1月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
64 1
|
3月前
|
XML JavaScript 前端开发
走进HTML学习一
走进HTML学习一
|
3月前
|
移动开发 Python HTML5
Python办公自动化【发送普通邮件、发送HTML邮件、发送附件邮件-smtplib、批量发送邮件-smtplib、发送邮件-zmail】(八)-全面详解(学习总结---从入门到深化)
Python办公自动化【发送普通邮件、发送HTML邮件、发送附件邮件-smtplib、批量发送邮件-smtplib、发送邮件-zmail】(八)-全面详解(学习总结---从入门到深化)
43 0
|
3月前
|
JSON 定位技术 API
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)(下)
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)
33 0