今天是2018年8月13日，PHP中文网第3期课程前端部分第2课：文本控制。
上半部分主要讲了一些日常比较常见的也是最基础的元素的特点并作了演示，着重学习了行内元素，块级元素，行内块元素间的转换，下半部分主要是实例操作，分别完成了google的logo图标制作，以及图文混排制作。下面是课堂笔记代码以及截图：
实例
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>文本控制</title> </head> <body> <h1>这是一个h1标签</h1> <h2>这是一个h2标签</h2> <h3>这是一个h3标签</h3> <h4>这是一个h4标签</h4> <h5>这是一个h5标签</h4> <h6>这是一个h6标签</h4> <b>这是一个粗体标签b</b> <!-- 加粗字体标签 --> <p>这是一个段落标签P，<br>这是一个段落标签P，这是一个段落标签P，这是一个段落标签P，这是一个段落标签P，这是一个段落标签P，<br>这是一个段落标签P，这是一个段落标签P，这是一个段落标签P，这是一个段落标签P，这是一个段落标签P，<br>这是一个段落标签P，这是一个段落标签P，这是一个段落标签P，</p> <br> <br> <br> <strong>PHP中文网</strong><br> <!-- 加重语气标签 --> <i>这是斜体标签i</i><br> <em>定义着重字标签em</em><br> <del>定义删除字标签del</del> <p style="background: blue;width: 300px;height: 300px;">测试P标签与span行内元素的特点</p> <span style="background: red;width:300px;height: 300px;">这是行内元素span</span> <pre>预格 式化 文本</pre> <!-- 块级元素：div h1-h6 p ;特点是独点一行，对宽高的属性设置值生效。默认是浏览器的宽高 行内元素： 特点是可以共存于一行，并且对宽高的属性设置值不生效 行内块元素：结合了块级以及行内的特点 --> <img src="images/php03.jpg" style="width: 200px;height: 300px;"/><span>123456</span> <br> <!-- 行内块级互相转换: display:inline 将块级元素转换为行内元素 display:block 将行内块元素转换为块级元素 display:inline-block 将块级元素转换为行内块元素 --> <div style="width: 150px;height: 80px;background: pink;display: inline;">这是行内元素</div><br><br> <div style="width: 150px;height: 80px;background: pink;display: block;">这是块元素</div><br> <div style="width: 150px;height: 80px;background: pink;display: inline-block;">这是行内块元素</div> <div style="width: 150px;height: 80px;background: pink;display: inline-block;">这是行内块元素</div> <div style="width: 150px;height: 80px;background: pink;display: inline-block;">这是行内块元素</div> <div></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP中文网第2课：文本控制</title>
<style type="text/css">
p{font-weight: bold; /*定义文本加粗*/
font-size: 30px; /*定义字体大小*/
font-family: 楷体; /*定义文本字体*/
text-align: center; /*定义文本对齐方式：有left center right*/
display:block; /*转换为块级元素*/
}
h1{text-align: center; /*定义文本对齐方式：有left center right*/
height: 100px;
background: red;
line-height: 100px; /*定义行高*/
}
span{
font-family: Georgia;
font-size:200px;
}
img{
width: 300px;height: 200px;
}
b{
display:block;
width: 300px;
height: 40px;
background: pink;
overflow: hidden; /*溢出隐藏*/
margin-bottom: 100px;
font-size: 14px;
}
b:hover{overflow: visible;} /*默认值，内容不会被修剪，元素会被呈现在元素框以外*/
</style>
</head>
<body>
<h1>h1元素</h1>
<p>PHP中文网</p>
<br>
<!-- google logo制作 -->
<span style="color:#4285f4">G</span>
<span style="color:#ea4335">o</span>
<span style="color:#fbbc06">o</span>
<span style="color:#4285f4">g</span>
<span style="color:#34a853">l</span>
<span style="color:#ea4335">e</span>
<br>
<!-- 图文混排 -->
<p style="display:inline-block;width: 300px;height: 400px;text-align: left;font-size: 18px;">据Engadget消息，谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire，它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空间，而目前Chromebook存储空间都不是很大。
虽然谷歌总是宣称Chrome OS能带来更简单、更安全的使用体验，但Chromebook的销量显然不及其他几款Windows系统的主流笔记本，因此Camfire也许可以视为谷歌对那些想在Chromebook上使用Windows的用户的一种妥协。</p>
<img src="images/php03.jpg" alt="图文混排标签">
<br>
<img src="images/php03.jpg" alt="图文混排标签">
<b>据Engadget消息，谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire，它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空间，而目前Chromebook存储空间都不是很大。
虽然谷歌总是宣称Chrome OS能带来更简单、更安全的使用体验，但Chromebook的销量显然不及其他几款Windows系统的主流笔记本，因此Camfire也许可以视为谷歌对那些想在Chromebook上使用Windows的用户的一种妥协。</b>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄笔记代码：
学习小结：
1、h1-h6标签字体越来越小，一般应用于标题的显示；
2、strong与b标签同有加粗的效果，前者起加重语气标签；
3、i标签与em标签都有将文本倾斜显示的作用，em主要定义着重字；
4、行内元素可以与其他元素共存一行，且对宽高的属性设置不生效，块级元素独占一行，对宽高的属性设置生效，默认是浏览器的宽高，行内块元素结合了前两者的特点；
5、通过display的属性设置，可以在行内元素，块级元素，行内块元素间转换；
6、在css属性中，通过font属性可以设置文本：加粗，大小，字体，通过text-align来设置文本对齐方式，行内元素要对齐，可以通过设置行内高line-height与height的值相等，再用text-align:center就可以实现；
7、通过颜色拾取器可以很方便的获取想要的颜色的RGB值；
8、通过overflow设置为hidden可以设置溢出为隐藏，通过伪类设置可以实现元素显示在元素框以外；
