Correction status:qualified
Teacher's comments:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本控制</title> <style type="text/css"> p{ font-weight: bold; /*定义粗体*/ font-size: 20px; /*定义字体大小*/ font-family: 楷体; text-align: center; } h1{ text-align: center; background:#CCC; line-height: 100px; } span{font-size: "微软雅黑"; font-weight: bold; font-size: 120px; font-family:georgia; } img{width: 200px;} b{display: block;width: 300px;height: 40px;background: pink;overflow:hidden;margin-bottom:100px;} b:hover{overflow: visible;} </style> </head> <body> <h1>php中文网</h1> <p>php中文网</p> <br> <br> <span style="color:#0388F1";>G</span> <span style="color:rgb(245,28,39);">o</span> <span style="color:#FFE80E";>o</span> <span style="color:#0388F1";>g</span> <span style="color:#39FF1B";>l</span> <span style="color:rgb(245,28,39);">e</span> <br> <!--图文混排 --> <p style="display:inline-block;width: 300px;height:400px" >据Engadget消息,谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire,它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空间,而目前Chromebook存储空间都不是很大。 </p> <img src="1.png" alt=""> <b>虽然谷歌总是宣称Chrome OS能带来更简单、更安全的使用体验,但Chromebook的销量显然不及其他几款Windows系统的主流笔记本,因此Camfire也许可以视为谷歌对那些想在Chromebook上使用Windows的用户的一种妥协。</b> </body> </html>
点击 "运行实例" 按钮查看在线实例
下面是手抄照片:
上述代码总结和注释:
h1~h6 标题标签 独占一行
p 段落标签 独占一行
b 粗体标签
br 换行标签
strong 加重语气,也是粗体
i 斜体字
em 定义着重字
del 定义删除字标签
pre 预格式标签
span 文本标签
块级元素:div h1~h6 p 独占一行 对宽高属性值生效
行内: p span 可以共存于一行 对宽高属性值不生效 自带换行符
行内块元素: img 结合了块级以及行内的特点
行内块级相互转换:
display:inline 将块级元素转换成行内元素
display:inline-block 将块级元素转换成行内块元素
display:block 将行内元素转换为块级
font-weight: bold; 定义粗体
font-size: 30px; 定义字体大小
font-family: 楷体; 定义字体
overflow:hidden 溢出隐藏
hover{overflow:visible} 伪选择器 默认值,内容不会被修建,元素会被呈现在元素框之外
下面是作业代码截图以及预览图: