html 基本结构
2018-09-07 本文已影响0人
coolkid_carryon
这是bluefish快速生成的结构
<!DOCTYPE html>
<html>
<head>
<title>base structure</title>
<meta name="generator" content="Bluefish">
<meta name="author" content="">
<meta name="date" content="">
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
</head>
<body>
</body>
</html>
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
写一个简单的练习
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/1.css">
<meta charset="UTF-8">
<title>我喜欢的歌</title>
</head>
<body>
<div align="center">
<div id="top">
<a href="#bottom">去底部</a> <a href="#lyrics">歌词</a>
</div>
<div>
<h1>这歌好听</h1>
</div>
<hr>
<h3>从前慢</h3>
<p>
曲： <a href="https://baike.baidu.com/item/%E5%88%98%E8%83%A1%E8%BD%B6" target="blank">刘胡轶</a><br>
词： <a href="https://baike.baidu.com/item/%E6%9C%A8%E5%BF%83" target="blank">木心</a>
</p>
<div id="lyrics">
记得早先少年时<br>
大家诚诚恳恳<br>
说一句是一句<br>
清早上火车站<br>
长街黑暗无行人<br>
卖豆浆的小店冒着热气<br>
<img src="img/1.png" alt="game1"><br>
从前的日色变得慢<br>
车马邮件都慢<br>
一生只够爱一个人<br>
从前的锁也好看<br>
钥匙精美有样子<br>
你锁了<br>
人家就懂了<br>
<img src="img/2.png" alt="game2"><br>
从前的日色变得慢<br>
车马邮件都慢<br>
一生只够爱一个人<br>
从前的锁也好看<br>
钥匙精美有样子<br>
你锁了<br>
人家就懂了<br>
</div>
<hr>
<div>
友情链接： <a href="https://www.baidu.com/" target="blank">百度</a> | <a href="https://www.taobao.com/" target="blank">淘宝</a> | <a href="http://www.w3school.com.cn/" target="blank">W3school</a>
</div>
<div id="bottom">
<a href="#top">回到顶部</a> | <a href="#">联系我们</a>
</div>
</div>
</body>
</html>
效果图：
Selection_005.png
