HTML 超文本标记语言，是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要来现实的网页中的各个部分。网页文件本身就是一种文本文件，通过文本文件中添加标记符，可以告诉浏览器如何现实内容。
<!doctype html>
<html>
<head>
<title>HTML基础---二</title>
</head>
<body>
<div style="font-size:25px;font-weight:bold;font-style:italic;font-family:'楷体'">
hellow world
</div>
<!-- font 是规定文本的字体（famil）,尺寸（size）,样式（style）等的 -->
<!-- 我们也可以简写 列如 ↓ -->
<div style="font:bold italic 25px '楷体';">
Hellow World
</div>
<!-- 属性之间用空格隔开，不能用‘ , ’ 否侧显示不出效果 -->
<div style="width:200px;height:200px;border:1px solid #333;text-align:center;line-height:200px;">
字体垂直居中了
</div>
<!-- text-align 规定元素中的文本的水平对齐方式,它有三个属性：left，right，center（中心） -->
<!-- line-height 设置行间的距离（行高）,该属性会影响行框的布局 -->
<div style="width:200px;height:200px;border:1px solid #333;background-color:red;background-image:url(image/1.jpg);background-repeat:no-repeat;background-position:center">
</div>
<!-- background 是一个背景属性，可以设置如下属性：
background-color 背景颜色
background-position 背景定位 它有五个属性：left,right,top,bottom,center,可以设置9个方向，也可以通过像素（px）或者百分比设置位置
background-size 背景尺寸
background-repeat 设置背景是否可以重复
background-image 背景图片
-->
<span>hellow world</span>
<!-- span标签是被用来组合文档中的行内元素的，span没有固定的格式表现。当它应用样式时，才会发生变化，跟div标签差不多，只不过div是块级元素 -->
<div style="width:200px;height:200px;border:1px solid #333;"></div>
<!-- 将style写入标签内，如果样式太多，我们看着也会觉得烦，下面会介绍另一种方法 内联样式 -->
<style>
p{
width:200px;
height:200px;
border:1px solid #333;
text-align:center;
line-height:200px;
}
</style>
<p>内联样式</p>
<!-- style标签要写在head标签里，这里只是做掩饰
效果跟行内样式一样，而且代码看的也很干净，
同时我们也运用了一个叫做标签选择器的方法，
通过标签来设置样式
-->
<style>
.test{
width:200px;
height:200px;
border:1px solid #333;
background:#c23;
text-align:center;
line-height:200px;
}
</style>
<div class="test">
类选择器方法
</div>
<!-- 这里的class 是设置类名的意思，比如：test就是类名
我们在内联样式中可以通过 . + 类名的方式来设置样式
-->
<style>
#test{
width:200px;
height:200px;
border:1px solid #333;
background:#32c;
text-align:center;
line-height:200px;
}
</style>
<div id="test">
id选择器方法
</div>
<!-- id 是给标签设置一个id，之后通过id名也可以设置样式，但这个id不能重复，
所以通常我们是在JS里才用id
-->
</body>
</html>
结果预览：
预览---1.png
预览---2.png
网友评论