猫史档案馆

初识H喵L代码：

<!DOCTYPE html> //这个叫<!DOCTYPE>声明
<html> //这是<html>标签
<head> //这是<head>标签
  <title>网页标题，如："Box3代码岛"</title>
</head>
<body> //这是<body>标签
  <p>输入内容
  </p> //这是段落标签
</body>
</html>

换行标签：

<br/>

图片标签：

<img/>

图片代码：

<img src = "输入图片文件名或图片网址"/>

接下来是网页列式代码：

<!DOCTYPE html>
<html>
<head>
<title>芒克钻石</title>
<style>
body {
background-color: beige;
margin: 0px;
}
.pad {
padding: 25px;
}
.header {
background-color: lightblue;
color: green;
height: 90px;
font-size: 60pt;
text-align: center;
}
.title {
background-color: plum;
color: white;
font-size: 25pt;
text-align: center;
height: 40px;
margin: 0px;
}
.main-text {
width: 60%;
float: left;
}
.file {
margin: 5px;
width: 25%;
float: left;
background-color: white;
border: 4px solid lightblue;
}
</style>
</head>
<body>
<div class = "header pad">
发现芒克钻石
</div>
<div>
<p class = "title">
失窃的钻石在西伯利亚被发现了！
</p>
</div>
<div class = "main-text pad">
<p>
贝尔斯通教授和戴博士有了一个重大发现。<br/>
他们在西伯利亚的一个偏僻山洞里发现了芒克钻石。<br/>
贝尔斯通教授的狗欧内斯特嗅出了钻石的踪迹。
</p>
<p>
3年前，这颗钻石在沃尔科夫公司被盗。<br/>
警方认为邦德兄弟具有重大作案嫌疑。<br/>
探险队认为钻石是被盗贼藏在这里的。<br/>
他们从营地发来了这张照片：
</p>
<img src = "团队.jpg" alt = "团队" style = "height: 150px;"/>
</div>
<div class = "file pad" align = "center">
<img src = "钻石.jpg" alt = "钻石" style = "width: 150px;"/>
<p style = "text-align: center;">芒克钻石</p>
</div>
<div class = "file pad" style = "text-align: center;">
钻石档案<br/>
重量：300克拉<br/>
色泽：绿色<br/>
价值：超过1000万英镑
</div>
</body>
</html>

猫史档案馆

【1.用H喵L，CSS，JavaScript代码做网页教程1】

回复