1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>块元素</title> 6 <link type="text/css" href="my.css"> 7 <style type="text/css"> 8 span{ 9 color: red; 10 } 11 </style> 12 </head> 13 <body> 14 <!-- 块--> 15 <p>大家好!</p> 16 <h1>大家好</h1> 17 <b>这是一个加重标签</b> 18 <a>这是一个超链接</a> 19 <div> 20 <p>Hello</p> 21 <a>点击我</a> 22 </div> 23 <div> 24 <p><span>这是一个测试</span>效果</p> 25 </div> 26 </body> 27 </html>
12、HTML布局
①div布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>div布局</title> 6 <style type="text/css"> 7 body{ 8 margin: 0px; 9 } 10 #container{ 11 width: 100%; 12 height: 640px; 13 background-color: darkgray; 14 } 15 #heading{ 16 width: 100%; 17 height: 10%; 18 background-color: aqua; 19 } 20 #conten_menu{ 21 width: 30%; 22 height: 80%; 23 background-color: aquamarine; 24 float: left; 25 } 26 #conten_body{ 27 width: 70%; 28 height: 80%; 29 background-color: blueviolet; 30 float: left; 31 } 32 #footing{ 33 width: 100%; 34 height: 10%; 35 background-color: black; 36 clear: both; 37 } 38 </style> 39 </head> 40 <body> 41 <div> 42 <div>头部</div> 43 <div>内容菜单</div> 44 <div>内容主体</div> 45 <div>底部</div> 46 </div> 47 </body> 48 </html>
显示效果：
②table布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>table布局</title> 6 </head> 7 <body marginheight="0px" marginwidth="0px"> 8 <table>> 9 <tr> 10 <td colspan="3">>这是头部</td> 11 </tr> 12 <tr> 13 <td>>左菜单 14 <ul> 15 <li>ios</li> 16 <li>android</li> 17 <li>html5</li> 18 </ul> 19 </td> 20 <td></td> 21 <td></td> 22 </tr> 23 <tr> 24 <td colspan="3">>这是底部</td> 25 </tr> 26 </table> 27 </body> 28 </html>
显示效果：
13、 HTML表单
①表单用于获取不同类型的用户输入
②常用的表单标签：
标签描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签，一般为输入标题
<fieldset> 定义了一组相关的表单元素，并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist>
指定一个预先定义的输入控件选项列表
<keygen>
定义了表单的密钥对生成器字段
<output>
定义一个计算结果
③代码示例：
相关文章
精彩导读
热门资讯
关注我们
