上一篇我们已经写了一个带图片的网页，我们接着练一下其他的常用标签
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<script> 插入js
<style> 插入css
<h1> 元素定义一个大标题
<p> 元素定义一个段落
<div> 元素定义一个块/区域，是最常用的标签之一
<img> 图片
<video> 视频
<input> 输入框
<ul>
<li>
<li>
</ul> 定义一个无序列表
大家可以练习一下其他标签
上一个网页有点丑，我们把它做的好看一点吧，这时候css就排上用场了
我们来写一下百度的首页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>制作我的第一个网页</title>
</head>
<body>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
<div class="search-wrapper">
<input type="text" />
<div style="color:white">百度一下</div>
</div>
</body>
<style>
body {
text-align: center;
}
img {
width: 210px;
}
.search-wrapper {
width: 600px;
margin: 0 auto;
}
.search-wrapper input {
float: left;
width: 450px;
height: 16px;
padding: 12px 16px;
font-size: 16px;
margin: 0;
vertical-align: top;
outline: 0;
box-shadow: none;
border-radius: 10px 0 0 10px;
border: 2px solid #c4c7ce;
background: #fff;
color: #222;
}
.search-wrapper div {
cursor: pointer;
width: 110px;
float: left;
height: 44px;
line-height: 45px;
line-height: 44px\9;
padding: 0;
background: 0 0;
background-color: #4e6ef2;
border-radius: 0 10px 10px 0;
font-size: 17px;
color: red;
box-shadow: none;
font-weight: 400;
border: none;
outline: 0;
}
</style>
</html>
推荐用谷歌浏览器调试代码，按f12打开控制台可以看到源代码，用图中箭头按钮可以快速定位到元素。
<div style="color:white">百度一下</div>
style="color:white"称为行内样式，可以直接写css样式来改变此元素的样式
<style>
body {
text-align: center;
}
.search-wrapper div {
color: red;
}
...
</style>
此模块为内联样式，将所有样式代码写在此处，统一管理
其中
1、body，img 等称为标签选择器
2、.search-wrapper称为样式选择器
在标签上定义一个class
<div class="search-wrapper">
即可在style中以.search-wrapper来选择此元素
.search-wrapper div即class=“search-wrapper” 的div中的div
可以看到设置了color：red,我们也在行内中设置了color:white，最后表现为白色，由此可见行内样式的优先级更高。
也可以将所有css文件抽离出来成为一个单独的文件
<link rel="stylesheet" type="text/css" href="index.css" />