<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h3>HTML概述</h3> <p> HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记<br> 语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种<br> 语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的<br> 扩展名为html或者htm。<br> 下面是HTML的特征代码：<br> <div>这是成对出现的标签</div> </p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ width:300px; height:300px; background:gold; /* border:50px solid black; 增加了边框后， 元素宽度变成了200px+50px(左边框)+50px(右边框) 元素高度变成了200px+50px(上边框)+50px(下边框) */ /* padding:50px; 增加了padding后， 元素宽度变成了300px(包含边框)+50px(左内边距)+50px(右内边距) 元素高度变成了300px(包含边框)+50px(上内边距)+50px(下内边距) */ /* 思考：如果给元素增加边框和内边距，又不想改变元素整体的尺寸，应该怎么做？ 答：在width和height的基础上减去由边框和内边距增加的尺寸,上面的元素，将width 和height改成100px，再加上四周50px的边框，四周50px的内边距，元素的宽高保持300px 不变。 */ } </style> </head> <body> <div class="box"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> .p1{ width:340px; height:240px; border:10px solid black; font-size:14px; line-height:24px; padding:20px; } .p1 span{ font-size:20px; color:red; } </style> </head> <body> <p class="p1"> <span>HTML</span>是 HyperText Mark-up Language 的首字母简写， 意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成， 用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。<br> 下面是HTML的特征代码：<br> <div>这是成对出现的标签</div> </p> </body> </html>
第一种做法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> .con{ width:560px; height:260px; border: 1px solid black; padding:20px; } .con img{ float:left; } .con p{ width:394px; margin-top:0px; margin-left:20px; float:left; font-size:14px; line-height:24px; } </style> </head> <body> <div class="con"> <img src="images/programmer.jpg" alt="程序员图片"> <p> 程序员(英文Programmer)是从事程序开发、 。一般将程序员分为程序设计人员和程序编码人员，但两者的界限并不非常清楚，特别是在中国。 软件从业人员分为初级程序员、中级程序员、高级程序员、系统分析员，系统架构师，测试工程师六大类。<br> 世界上第一位程序员是英国著名诗人拜伦的女儿, 曾设计了巴贝奇分析机上解伯努利方程的一个程序。她叫AdaLovelace，她甚至还建立了循环和子程序的概念。 由于其在程序设计上的开创性工作，AdaLovelace被称为世界上第一位程序员。美国国防部开发的ADA语言就是为 纪念这位世界上的第一位程序员而命名的。 </p> </div> </body> </html>
第二种做法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> .con{ width:560px; height:280px; border: 1px solid black; padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom:10px; } .title_con{ width:560px; height:40px; border-bottom:1px solid black; } .title_con h3{ float:left; margin:0px; line-height:40px; font-size:18px; } .title_con a{ float:right; line-height:40px; text-decoration:none; font-size:12px; color:#333; } .detail img{ float:left; margin-top:15px; } .detail p{ width:394px; float:right; font-size:12px; line-height:24px; } </style> </head> <body> <div class="con"> <div class="title_con"> <h3>程序人生</h3> <a href="#">更多>></a> </div> <div class="detail"> <img src="images/programmer.jpg" alt="程序员图片"> <p> 程序员(英文Programmer)是从事程序开发、 。一般将程序员分为程序设计人员和程序编码人员，但两者的界限并不非常清楚，特别是在中国。 、中级程序员、高级程序员、系统分析员，系统架构师，测试工程师六大类。<br> 世界上第一位程序员是英国著名诗人拜伦的女儿,6曾设计了巴贝奇分析机上解伯努利方程的一个程序。她叫AdaLovelace，她甚至还建立了循环和子程序的概念。 由于其在程序设计上的开创性工作，AdaLovelace被称为世界上第一位程序员。美国国防部开发的ADA语言就是为 纪念这位世界上的第一位程序员而命名的。</p> </div> </div> </body> </html>
