前端开发HTML&css入门——常用的标签以及一个小练习
meta标签
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <meta name="keywords" content="HTML5,JavaScript,前端,Java" /> 7 </head> 8 <body> 9 </body> 10 </html>
使用meta标签还可以用来设置网页的关键字，搜索引擎会对网页的关键字进行抓取。name属性设置为keywords，content属性为关键字。
<!doctype html> <html> <head> <meta charset="utf-8" /> <title></title> <meta name="description" content="发布h5、js等前端相关的信息" /> </head> <body> </body> </html>
使用meta标签还可以用来指定网页的描述，搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这两个值不会影响页面在搜索引擎中的排名。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <meta http-equiv="refresh" content="5;url=http://www.baidu.com" /> 7 </head> 8 <body> 9 <h1>5秒以后跳转页面</h1> 10 </body> 11 </html>
使用meta可以用来做请求的重定向，<meta http-equiv="refresh" content="秒数;url=目标路径" />
xhtml标签规范
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>xHtml的语法规范</title> 6 </head> 7 <body> 8 <!-- 9 1.HTML中不区分大小写,但是我们一般都使用小写 10 --> 11 12 <!-- 13 2.HTML中的注释不能嵌套 14 --> 15 16 <!-- 17 3.HTML标签必须结构完整，要么成对出现，要么自结束标签 18 --> 19 <!-- 正确 --> 20 <p>我是一个p标签</p> 21 <!-- 错误 --> 22 <p>我是一个p标签 23 24 <!-- 25 浏览器尽最大的努力正确的解析页面，你所有的不符合语法规范的内容， 26 浏览器都会为你自动修正，但是有些情况会修正错误 27 --> 28 <!-- 自结束标签 --> 29 abc 30 <br /> 31 bcd 32 <br> 33 efg 34 35 <!-- 36 4.HTML标签可以嵌套，但是不能交叉嵌套 37 --> 38 <p>今天天气<font color="red">真不错</font><p> 39 40 <p>今天天气<font color="red">真不错<p></font> 41 <hr /> 42 <!-- 43 5.HTML标签中的属性必须有值，且值必须加引号(双引号单引号都可以) 44 --> 45 46 <p>今天天气<font color>真不错</font><p> 47 <p>今天天气<font color='red'>真不错</font><p> 48 </body> 49 </html>
内联框架
就是在一个页面里显示另外一个页面，在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>内联框架</title> 6 </head> 7 <body> 8 <h1>我是demo03</h1> 9 <iframe src="demo02.html" name="tom"></iframe> 10 11 </body> 12 </html>
属性：
src ：指向一个外部页面的路径，可以使用相对路径
width：宽度
height：高度
name ：可以为内联框架指定一个name属性，name有什么用我们下面会讲到。
超链接
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>超链接</title> </head> <body> <h1>我是demo04</h1> <a href="http://www.baidu.com">我是一个超链接</a> <br /><br /> <a href="http://www.Google.com" taget=_blank>我是一个超链接</a> <br /><br /> <a href="demo03.html" target="tom">我是一个超链接</a> <br /> <br /> <iframe src="demo02.html" name="tom"></iframe> <center> <p>我是一个p标签</p> </center> </body> </html>
使用超链接可以让我们从一个页面跳转到另一个页面，使用a标签来创建一个超链接。
标签中的target属性可以用来指定打开链接的位置。
center标签中的内容，会默认在页面中居中显示，我们可以将要居中的元素，全都放到center中
target属性可选值：
_self，表示在当前窗口中打开（默认值）
_blank，在新的窗口中打开链接
也可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
属性：
href:指向链接跳转的目标地址,可以写一个相对路径也可以写一个完整的地址。
target:可以用来指定打开链接的位置。
练习：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <center> <h1>这是我的个人博客</h1> <hr /> <h2>东风破</h2> <a href="#">周杰伦</a> <p> 一盏离愁 孤单伫立在窗口 <br /> 我在门后 假装你人还没走 <br /> 旧地如重游 月圆更寂寞 <br /> 夜半清醒的烛火 不忍苛责我 <br /> 一壶漂泊 浪迹天涯难入喉<br /> 你走之后 酒暖回忆思念瘦<br /> 水向东流 时间怎么偷<br /> 花开就一次成熟 我却错过<br /> 谁在用琵琶弹奏 一曲东风破<br /> 岁月在墙上剥落 看见小时候<br /> 犹记得那年我们都还很年幼<br /> 而如今琴声幽幽 我的等候你没听过<br /> <img src="1.jpg" alt="mv图片" width="300px"><br /> 谁在用琵琶弹奏 一曲东风破<br /> 篱笆外的古道我牵着你走过<br /> 荒烟漫草的年头 就连分手都很沉默<br /> <a href="https://www.bilibili.com/video/av55145151?from=search&seid=8625942381498730567" target="B">东风破</a> <iframe src="" width="500px" height="500px" name="B"></iframe><br> 谁在用琵琶弹奏 一曲东风破<br /> 岁月在墙上剥落 看见小时候<br /> 犹记得那年我们都还很年幼<br /> 而如今琴声幽幽 我的等候你没听过<br /> 谁在用琵琶弹奏 一曲东风破<br /> 枫叶将故事染色 结局我看透<br /> 篱笆外的古道我牵着你走过<br /> 荒烟漫草的年头 就连分手都很沉默<br /> </p> <hr /> 友情链接：<a href="#">A网站</a> | <a href="#">B网站</a> | <a href="#">C网站</a> <br /> <br /> <a href="#top">回到顶部</a> | <a href="mailto:aaa@aaa.com">联系我们</a> </center> </body> </html>
