行内块元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>行内块元素</title></head><body><h1>春天美景</h1><imgsrc="春天.jpg"alt="spring"style="display: block; width: 200px; margin: 10px;"/><section style="display: block;"><label for="city">城市：</label><selectname="city"id="city"style="width: 80px; height: 30px; font-size: 18px; color:green;"><optgroup label="国内"><option value="江西" label="江西"></option><option value="广州" label="广州"></option><option value="海南" label="海南" selected></option></optgroup><optgroup label="国外"><option value="巴黎" label="巴黎"></option><option value="夏威夷" label="夏威夷"></option><option value="柏林" label="柏林"></option></optgroup></select></section><a href="http://www.baidu.com/" target="blank">百度</a><!-- 置换元素的行内元素，可以设置宽高，则为行内块元素。例如图片、视频、表单等 --></body></html>
外部样式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>外部样式</title><link rel="stylesheet" href="style/1.css" /></head><body><div class="box"><h3 class="item">书籍分类</h3><ul><li>政治</li><li>历史</li><li>艺术</li><li>小说</li><li>教科书</li></ul></div><p class="心灵鸡汤">我的生活像一个万花筒，多姿多彩，有快乐同时也有悲伤。就让我来跟大家一起分享我的快乐吧！我的生活像一个万花筒，多姿多彩，有快乐同时也有悲伤。就让我来跟大家一起分享我的快乐吧！我的生活像一个万花筒，多姿多彩，有快乐同时也有悲伤。就让我来跟大家一起分享我的快乐吧！</p></body></html>
内部样式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>内部样式</title><style>@import url(style/2.css);</style></head><body><div class="box"><h3 >我爱吃的水果</h3><ul><li>西瓜</li><li>苹果</li><li>香蕉</li><li>桃子</li><li>芒果</li></ul></div></body></html>
媒体查询
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>媒体查询</title><style>.person {background-color: yellowgreen;border: 2px solid yellowgreen;onclick: red;border-radius: 5px;margin: 20px;padding: 10px;}h3 {padding: 20px;}a {padding: 5px;}@media screen and (max-width: 400px) {a {display: none;}}</style></head><body><div class="person"><h3 style="display: inline;">人物</h3><a href="">老人</a><a href="">小孩</a><a href="">帅哥</a><a href="">美女</a></div></body></html>
个人总结：
多学、多练、多问
很多问题不去实际操作，永远发现不了，永远觉得自己会了，操作后才体会到中间的不宜。
细节、细节，细节觉得成败。