Html值超文本标记语言（HyperText Markup Language）是一种用于创建网页的标准标记语言。
CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素。
打个比方，房子墙和柱的结构就是Html，CSS代表你的装修风格。
网页的所有元素都是由盒子组成，盒子都是矩形方框。
盒子模型：
margin外边距,padding内边距，boder是边界。
下图，当你按下F12,点击元素h2(标题二的意思)，就出现了一个方框。
那么圆形是如何实现的呢？
当你关闭Styles里的border-radius:50%是这样的：
所以网站上的一切实际上都是方框。
html的格式:
<!DOCTYPE html> <!-- 网络上有很多不同的文件,<!DOCTYPE>声明有助于浏览器中正确显示网页, -->
<html>
<head> <!--<head> 元素包含了所有的头部标签元素. 可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.-->
<title>文档标题</title>
</head>
<body> 可见文本... <!-- <body> 元素定义了 HTML 文档的主体。 -->
</body>
</html>
例子：手机版未适配。
html:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8"> <!-- 适配中文-->
<title>Westworld</title> <!-- 网页的标题-->
<link rel="stylesheet" type="text/css" href="css/style.css"> <!-- 指定了css文件-->
</head>
<body>
<h1 style="text-align: center">Westworld </h1>
<div class="image">
<p>You were as beautiful as the day he met you. Shining with that same light. And you were nothing if not true.</p>
<p>你仍如他初见你时那么美，闪耀着同样的光芒。而你，如果不是真实的，那么一切什么都不是。</p>
<p>I really ought to thank you, Dolores. You helped me find myself.</p>
<p>我真该感谢你，Dolores，你帮我找到了我自己。</p>
<img src="css/westworld1.jpg">
<p>In a way,I guess you were right.My path always led me back to you,again and again.</p>
<p>某种程度上，我觉得你是对的。我的路总是指引我回到你身边，一次又一次。</p>
<img src="css/westworld2.jpg">
<p>I grew tired of you after a while,of course,looked for new adventures.</p>
<p>过了一阵，我开始厌倦你了，这是当然的，去寻找新的冒险。</p>
<p>But I guess your path led you back here,again and again.</p>
<p>但我想，你的路指引你回到这里，一次又一次。</p>
<p>One more loop,looking for something you could find.</p>
<p>又一个循环，寻找着你永远也找不到的东西。</p>
<p>Chasing your ghosts,you were lost in your memories even then.</p>
<p>追寻虚无缥缈的存在，你当时就迷失在你自己的记忆中。</p>
<p>I guess I should've know that's what I would become for you just another memory.</p>
<p>或许我早就该知道，我之于你，讲不过是另一段记忆。</p>
<img src="css/westworld3.jpg">
<p>You never did escape,but here we are again for one final round.</p>
<P>你从未逃离，但我们再次相逢，来到最后一局。</P>
<p>Exactly what you made me,you helped me understand this world like the one outside-- a game.</p>
<p>正是你造就了现在的我，你帮我了解到这个世界正如外面的世界，是一场游戏。</p>
<p>One to be fought,taken,won.</p>
<p>要奋力拼搏，占据优势，赢得胜利。</p>
</div>
</body>
</html>
style.css:
* {
box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
background: #b2b8b0;
}
.image img {
display:block;;
margin: auto;
}
p{
text-align: center;
margin-top: 0;
line-height: 200%;
}
效果图：
