通过代码来学习其中的属性
1 <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> 2 <style> 3 .red-text { 4 color: red; 5 } 6 7 h2 { 8 font-family: Lobster, Monospace; //当某种字体不可用时，浏览器将其 “降级” 为后面一种字体。 9 } 10 11 p { 12 font-size: 16px; //字体大小 13 font-family: Monospace; //字体类型 14 } 15 16 .thick-green-border { 17 border-color: green; 18 border-width: 10px; 19 border-style: solid; 20 border-radius: 50%; //给图像设置圆角边框 21 } 22 23 .smaller-image { 24 width: 100px; 25 } 26 27 .gray-background { //class属性都是. 28 background-color: gray; //灰色背景 29 } 30 31 #cat-photo-form { //id属性都用# 32 background-color: green; //绿色背景 33 </style> 34 35 <h2 class="red-text">CatPhotoApp</h2> 36 37 <p>Click here for <a href="#">cat photos</a>.</p> 38 39 <a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"></a> 40 //通过把href属性设置为"#"，你的a元素应该是一个固定链接。 41 //alt 属性 是当图片无法显示时的替代文本。alt 属性对于盲人或视觉障碍的用户理解图片中的内容非常重要，搜索引擎也会搜索alt 属性来了解图片的内容。 42 43 <div class="gray-background"> 44 <p>Things cats love:</p> 45 <ul> // 无序列表 46 <li>cat nip</li> 47 <li>laser pointers</li> 48 <li>lasagna</li> 49 </ul> 50 <p>Top 3 things cats hate:</p> 51 <ol> // 有序列表 52 <li>flea treatment</li> 53 <li>thunder</li> 54 <li>other cats</li> 55 </ol> 56 </div> 57 58 <form action="/submit-cat-photo" id="cat-photo-form"> 59 <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> //使用 checked 属性，你可以设置一个单选框和复选框默认被选中。 60 <label><input type="radio" name="indoor-outdoor"> Outdoor</label> 61 <label><input type="checkbox" name="personality" checked> Loving</label> //radio是单选框，checkbox是复选框 62 <label><input type="checkbox" name="personality"> Lazy</label> 63 <label><input type="checkbox" name="personality"> Energetic</label> 64 <input type="text" placeholder="cat photo URL" required> //required（必填项），只有当用户填写了该选项后，用户才能够提交表单。 65 <button type="submit">Submit</button> 66 </form>
显示效果如图
