一、meta标签的其他属性
<!doctype html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 使用meta标签还可以用来设置网页的关键字 --> <meta name="keywords" content="HTML5,JavaScript,前端,Java" /> <!-- 还可以用来指定网页的描述 搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这两个值不会影响页面在搜索引擎中的排名 --> <meta name="description" content="发布h5、js等前端相关的信息" /> <!-- 使用meta可以用来做请求的重定向 <meta http-equiv="refresh" content="秒数;url=目标路径" /> --> <meta http-equiv="refresh" content="5;url=http://www.baidu.com" /> </head> <body> <h1>5秒以后跳转页面</h1> </body> </html>
二、xHtml的语法规范
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>xHtml的语法规范</title> </head> <body> <!-- 1.HTML中不区分大小写,但是一般都使用小写 --> <!-- 2.HTML中的注释不能嵌套 --> <!-- 3.HTML标签必须结构完整，要么成对出现，要么自结束标签 --> <!-- 正确 --> <p>我是一个p标签</p> <!-- 错误 --> <p>我是一个p标签 <!-- 浏览器尽最大的努力正确的解析页面，你所有的不符合语法规范的内容，浏览器都会为你自动修正，但是有些情况会修正错误 --> <!-- 自结束标签 --> abc <br /> bcd <br> efg <!-- 4.HTML标签可以嵌套，但是不能交叉嵌套 --> <p>今天天气<font color="red">真不错</font><p> <p>今天天气<font color="red">真不错<p></font> <hr /> <!-- 5.HTML标签中的属性必须有值，且值必须加引号(双引号单引号都可以) --> <p>今天天气<font color>真不错</font><p> <p>今天天气<font color='red'>真不错</font><p> </body> </html>
三、内联框架
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>内联框架</title> </head> <body> <h1>我是demo03</h1> <!-- 使用内联框架可以引入一个外部的页面 使用iframe来创建一个内联框架 属性： src ：指向一个外部页面的路径，可以使用相对路径 width： height： name ：可以为内联框架指定一个name属性 在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索 --> <iframe src="demo02.html" name="tom"></iframe> </body> </html>
四、超链接
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>超链接</title> </head> <body> <h1>我是demo04</h1> <!-- 使用超链接可以从一个页面跳转到另一个页面 使用a标签来创建一个超链接 属性： href:指向链接跳转的目标地址,可以写一个相对路径也可以写一个完整的地址 --> <a href="http://www.baidu.com">我是一个超链接</a> <br /><br /> <!-- a标签中的target属性可以用来指定打开链接的位置 可选值： _self，表示在当前窗口中打开（默认值） _blank，在新的窗口中打开链接 可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开 --> <a href="demo03.html" target="tom">我是一个超链接</a> <br /> <br /> <iframe src="demo02.html" name="tom"></iframe> <!-- center标签中的内容，会默认在页面中居中显示 可以将要居中的元素，全都放到center中 --> <center> <p>我是一个p标签</p> </center> </body> </html>
五、练习
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>练习</title> </head> <body> <center> <!-- 跳转到id为bottom的元素所在的位置 直接在href中写 #id属性值 --> <a href="#bottom">去底部</a> <a href="#hello">去指定位置</a> <h1>这是我的个人博客</h1> <hr /> <h2>东风破</h2> <!-- 创建超链接时，如果地址不确定可以直接写一个#作为占位符 --> <a href="#">周杰伦</a> <p id="hello"> 一盏离愁 孤单伫立在窗口 <br /> 而如今琴声幽幽 我的等候你没听过<br /> <img src="1.jpg" alt="图片" width="300px" /> <br /> 谁在用琵琶弹奏 一曲东风破<br /> 花开就一次成熟 我却错过<br /> 谁在用琵琶弹奏 一曲东风破<br /> 荒烟漫草的年头 就连分手都很沉默<br /> <img src="2.jpg" alt="图片2" width="300px" /> <br /> 谁在用琵琶弹奏 一曲东风破<br /> 岁月在墙上剥落 看见小时候<br /> 犹记得那年我们都还很年幼<br /> </p> <hr /> 友情链接:<a href="#">A网站</a> | <a href="#">B网站</a> | <a href="#">C网站</a> <br /><br /> <!-- 如果将链接地址设置为#，则点击超链接以后，会自动跳转到当前页面的顶部 html中有一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识 这个属性就是id，id属性在同一个页面中只能有一个不能重复 --> <a id="bottom" href="#">回到顶部</a> | <!-- 发送电子邮件的超链接，点击链接以后可以自动打开计算机中默认的邮件客户端 href="mailto:邮件地址" 当点击这个超链接时，会默认打开计算机的默认电子邮件客户端，并且将收件人设置mailto后的邮件地址 --> <a href="mailto:abc@a126.com">联系我们</a> </center> </body> </html>