HTML基础---01元素
00.small标签用来定义小型文本和旁注，通常被使用来缩小字体。如果文字已经是最小字号，那么small标签标签不起作用；
01.p标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>刚好遇见你</title> <link rel="shortcut icon" type="image/x-icon"> </head> <body> <h1><a href="#">刚好遇见你</a></h1> <p>粉色淡雅，舒心暖。</p> <p>朦胧梦境，浓雾绵绵，漫漫青树，茫茫密林。</p> <p>你，撑伞花雨间，青藤绕碧绿，</p> <p>幽径，暗涩</p> <p>你，清新脱俗般，如仙女下凡。</p> <p>风飘裙，凝视，花容月色，我欲醉其间。</p> <a href="#"><img src="./img/1.png" alt="刚好遇见你" /></a> <p>芬芳繁花间，情悠扬。</p> <p>花瓣间，你的香</p> <p>荷花素妆，</p> <p>刚好遇见你。</p> </body> </html>
02.标签通用属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签通用属性</title> </head> <body> <!--id:给标签取一个标识名--> <p id="p1">段落1</p> <p id="p2">段落2</p> <!--class：给一组标签取一个类名--> <div class="test">div</div> <p class="test">p</p> <!--style:用来设置当前标签的样式，也叫行内样式。--> <p style="color:red;width:200px;border:1px solid #00f;">这是一次测试</p> <!--title:给当前标签一个提示文本--> <p title="您好">How are you?</p> </body> </html>
03.基本表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--table>tr*2>td{内容$}*3--> <table border="1" width="400" cellspacing="0" cellpadding="10" align="center"> <tr> <th>学号</th><!--th:表头，主要对下面的内容起说明作用。th的内容会自动加粗和居中显示--> <th>姓名</th> <th>住址</th> </tr> <tr> <td>007</td> <td>张三</td> <td>北京</td> </tr> <tr> <td>008</td> <td>李四</td> <td>上海</td> </tr> </table> </body> </html>
04.表格之rowspan
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格中的rowspan</title> </head> <body> <!--Emmet语法：table[border=1 width=500 align=center]>tr*3>td{内容区$$}*3--> <table border="1" width="500" align="center"> <tr> <td rowspan="2" align="center" valign="middle">内容区01</td><!--valign:垂直对齐（top/middle/bottom)--> <td>内容区02</td> <td rowspan="3">内容区03</td> </tr> <tr> <td>内容区02</td> </tr> <tr align="center"> <td>内容区01</td> <td>内容区02</td> </tr> </table> </body> </html>
05.表格之colspan
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格中的colspan</title> </head> <body> <table border="1" width="500" align="center"> <tr> <td>内容区01</td> <td colspan="2" align="center">内容区02</td> </tr> <tr> <td>内容区01</td> <td>内容区02</td> <td>内容区03</td> </tr> <tr> <td colspan="3" align="right">内容区01 </td> </tr> </table> <table border="1" width="500" align="center"> <tr> <td rowspan="2">内容区01</td> <td colspan="2" align="center">内容区02</td> </tr> <tr> <td>内容区02</td> <td>内容区03</td> </tr> <tr> <td colspan="3" align="right">内容区01 </td> </tr> </table> </body> </html>
06.完整表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>完整表格</title> </head> <body> <!--table[border=1 width=600 align=center]>(caption{学生信息表})+(thead>tr>th*4)+(tbody>tr*3>td*4)+(tfoot>tr>td[colspan=1])--> <table border="1" width="600" align="center"> <caption>学生信息表</caption> <thead> <tr> <th>学号</th> <th>姓名</th> <th>家庭住址</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td align="center">001</td> <td>Tom*</td> <td>aaaaaaaaaaa</td> <td>该生为“三好学生”</td> </tr> <tr> <td align="center">002</td> <td>Mickle</td> <td>bbbbbbbbb</td> <td></td> </tr> <tr> <td align="center">003</td> <td>Mary*</td> <td>cccccccc</td> <td></td> </tr> </tbody> <tfoot> <tr> <td colspan="4">附注：*为优秀学生。</td> </tr> </tfoot> </table> </body> </html>
07.表单元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form name="stuInfo" action="test.jsp" method="post"> <input type="text" name="userName" placeholder="请输入您的姓名"> <input type="submit"> </form> </body> </html>
08.input元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input元素</title> </head> <body> <form action="demo.php"> <!--1.文本框--> <!--<input type="text" name="test" placeholder="请输入一个数字" value="100" disabled="disabled"> <br>--> <!-- <input type="text" name="test" placeholder="请输入一个数字" value="100" readonly="readonly"> <br>--> <!--<input type="text" name="test" placeholder="请输入一个数字" value="100" minlength="3" maxlength="6"> <br> <input>--> <!--2.密码框--> <input type="password"> <br> <!--3.单选钮--> <input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女 <input type="radio" name="num">1 <input type="radio" name="num">2 <input type="radio" name="num" checked>3 <br> <!--4.复选框/检查框--> <input type="checkbox" name="hobby" checked>听音乐 <input type="checkbox" name="hobby" checked>码代码 <input type="checkbox" name="hobby">其它 <br> <!--5.文件上传按钮--> <input type="file"> <br> <!--6.普通按钮--> <input type="button" value="登录"> <br> <!-- <input type="button" value="登录" disabled> <br>--> <!--7.图片按钮--> <input type="image" src="img/btn.png" title="刷新"> <!--8.提交按钮--> <input type="submit"> <!--9.重置按钮--> <input type="reset" value="取消"> </form> </body> </html>
09.textarea元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>textarea</title> </head> <body> <form action=""> <textarea name="memo" id="memo" cols="30" rows="10">备注：</textarea> </form> </body> </html>
10.select元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>select</title> </head> <body> <form action=""> <label for="sex">性别：</label> <select id="sex"> <option value="male">男</option> <option value="female">女</option> </select> <br> <label for="course">选课：</label> <select id="course" multiple size="10"> <option value="语文">语文</option> <option value="数学">数学</option> <option value="计算机">计算机</option> <option value="其它">其它</option> </select> </form> </body> </html>
11.button元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>button按钮</title> </head> <body> <button id="btnOk">确认</button><!--这里的button主要用来调用js代码--> <form action="test.aspx"> <input type="text" name="info"> <button>提交</button><!--这里的button的功能与input中的submit按钮功能一样--> </form> </body> </html>
总结：
1.标签由标签名、标签属性和文本内容三部分组成（注意：单标签没有文本内容）。 2.标签属性是对标签的一种描述方式。 3.标签属性分通用属性、自有属性和自定义属性。 4.通用属性:所有标签都具有的属性（除<br />标签外）。 通用属性有： id：用来给标签取一个唯一的名称。id名称在一个网页必须是唯一的。 class：用来给标签取一个类名。 style：用来设置该标签的行内样式。 title：当鼠标移到该标签，所显示的提示内容。 5.自定义标签属性：通常用来传值或用于图片懒加载等方面。 格式：data-* <img data-src="图片名" alt="提示文本"/> <p data-id="goodsid">...</p> 6.table主要用于呈现格式化数据。表格是由行和列组成。 格式： <table> <tr> <th></th> <td></td> … </tr> ... </table> 7.table属性 border:表格边框，默认单位是像素 width:表格宽度，默认单位是像素 align:表格对齐方式（left（默认）/center/right） cellpadding:单元格文本与边框的距离 cellspacing:单元格边框间距 8.跨行/跨列属性主要用来绘制复杂表格。 rowspan:跨行 colspan:跨列 9.完整表格组成：caption（标题)、thead（表头）、tbody（表体）和tfoot（表尾）四部分组成。 10.form表单标签是所有标签最核心标签之一。它是用来实现前后端交互的一个重要标签。 常用属性： name:表单名称 action:表单数据提交的地方(通常是一个后台文件名(.jsp/.php/.asp/.aspx/.py等），或网址）。如果是#，表示提交到当前文件下。 method:前端提交数据到后端的方法，主要有：get和post,默认的是get。 11.表单元素分为： 1）input类：主用用来输入，选择或发出指令。 type:text/password/radio/checkbox/file/button/image/submit/reset/number a.text:单行文本输入框 type="text"可以不写，默认值。 属性：placeholder(提示）/name（命名）/minlength和maxlength（最少/多输入的字符个数）/disabled（失效）/readonly（只读）/value（默认值）/pattern（正则匹配） b.password:密码框 属性与text一样 c.radio:单选钮，通常是两项以上。常用属性有：name（必须要有）/value/checked（选中）/disabled（失效）/readonly（只读） d.checkbox:复选框，可以用来选择0项、1项或多项。 常用属性有：name（必须要有）/value/checked（默认选中）/disabled（失效）/readonly（只读） e.file:文件上传按钮 f.button:普通按钮，通常用它去调用脚本代码。 常用属性有：value（按钮的标题）/disabled（失效） g.image:图片按钮，用法与button一样。有一个特殊属性：src(用来加载提示图片，用它替换了value) 它有提交功能，与submit功能一样。 h.submit:提交按钮，用来将表单数据提交到后台。 常用属性有：value（按钮的标题）/disabled（失效） j.reset:重置按钮，将表单所有组件输入的内容全部清空，还原为初始状态。 常用属性有：value（按钮的标题）/disabled（失效） 2）textarea类 文本域（也可以叫多行文本框），主要用于输入大批量的文本内容。 常用属性：name/id/cols(列数)/rows(行数)/placeholder/minlength/maxlength/required(必须输入)/value 3）select类 下拉列表框，默认用于单项选择。用option呈现每个选项。 multiple属性：表示可以多选，这时的下拉列表框变成了列表框 size:最多显示的行数 4）button类 普通按钮，具有提交功能。可以单独使用，不写在form元素中；如果写在form中，有提交功能。 12.iframe:框架集，是用来将多个网页文件组合成一个文件。 常用属性： name:框架名 src:引入的外部html文件 scrolling:滚动条(yes/no/auto) width:宽度(%/px) height:高度(%/px) frameborder:是否有边框(1/0) marginheight:框架离顶部和底端的距离(%/px) marginwidth:框架离左右的距离(%/px) 注意： 在实际开发，尽量减少使用iframe，因为它破坏了前进和后退功能，且不利于SEO。
