本帖最后由 晴天小雨 于 2018-9-19 17:50 编辑
常用内联元素标签1、超链接标签 链接到另外一个网页，具有内联元素基本特性，默认文字蓝色，有下划线 <a href="02.html">第二个网页</a> <a href="http://www.baidu.com">百度网</a> <a href="http://www.baidu.com"><img src="images/logo.png" alt="logo"></a> <a href="#">默认链接</a>2、通用内联容器标签 具有内联元素基本特性，没有其他默认样式 <p>这是一个段落文字，段落文字中有<span>特殊标志或样式</span>的文字</p>3、图片标签（行内块元素） 在网页中插入图片，具有内联元素基本特性，但是它支持宽高设置。 <img src="images/pic.jpg" alt="图片" />4、视频标签 <video src="/i/movie.ogg" controls="controls"> your browser does not support the video tag </video>5、音频标签 <audio src="/i/horse.ogg" controls="controls"> Your browser does not support the audio element. </audio>6、地址标签 <address> Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>列表标签列表一般应用在布局中的新闻标题列表和文章标题列表以及菜单，它是含有语义的.
无序列表<ul> <li><a href="#">列表标题一</a></li> <li><a href="#">列表标题二</a></li> <li><a href="#">列表标题三</a></li></ul>有序列表<ol> <li><a href="#">Coffee</a></li> <li><a href="#">Milk</a></li></ol>定义列表<dl> <dt><a href="#">Coffee</a></dt> <dd><a href="#">Black hot drink</a></dd> <dt><a href="#">Milk</a></dt> <dd><a href="#">White cold drink</a></dd></dl>列表样式设置通用设置： list-style 去掉列表项的小圆点或数字，比如：list-style:none有序列表样式： 默认 数字列表 <ol type="A"> 字母列表 <ol type="a"> 小写字母列表 <ol type="I"> 罗马字母列表 <ol type="i"> 小写罗马字母列表 无序列表样式： 默认 圆点 <ul type="disc"> 圆点 <ul type="circle"> 圆圈 <ul type="square"> 方点表单标签表单用于搜集不同类型的用户输入
<form>标签定义整体的表单区域
form 属性action 规定向何处提交表单的地址（URL）（提交页面）method 规定在提交表单时所用的 HTTP 方法（默认：GET）accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）autocomplete 规定浏览器应该自动完成表单（默认：开启）enctype 规定被提交数据的编码（默认：url-encoded）name 规定识别表单的名称（对于 DOM 使用：document.forms.name）novalidate 规定浏览器不验证表单target 规定 action 属性中地址的目标（默认：_self）示例： <form action="action_page.php" //提交的服务器地址 method="GET" //提交的HTTP方法 target="_blank" accept-charset="UTF-8" ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate> ... </form> <label>标签为表单元素定义文字标注
<label>账户：</label><input type='text'></input><input>标签定义通用的表单元素
type属性 type="text" 定义单行文本输入框 type="password" 定义密码输入框 type="radio" 定义单选框 type="checkbox" 定义复选框 type="file" 定义上传文件 type="submit" 定义提交按钮 type="reset" 定义重置按钮 type="button" 定义一个普通按钮 value属性 定义表单元素的值 name属性 定义表单元素的名称，此名称是提交数据时的键名<textarea>标签定义多行文本输入框
<textarea name="message" rows="10" cols="30"> The cat was playing in the garden.</textarea>rows:设置行数cols:设置列数<select>标签和<option>标签定义下拉表单元素
<select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option></select><fieldset>标签和<legend>标签<fieldset>标签组合表单中的相关数据
<legend>标签为 <fieldset> 元素定义标题<form action="action_page.php"> <fieldset> <legend>Personal information:</legend> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </fieldset></form> 效果：firstname=Mickey&lastname=Mouse注册表单实例<form action="http://www..." method="get"> <p> <label>姓名：</label><input type="text" name="username" /> </p> <p> <label>密码：</label><input type="password" name="password" /> </p> <p> <label>性别：</label> <input type="radio" name="gender" value="0" /> 男 <input type="radio" name="gender" value="1" /> 女 </p> <p> <label>爱好：</label> <input type="checkbox" name="like" value="sing" /> 唱歌 <input type="checkbox" name="like" value="run" /> 跑步 <input type="checkbox" name="like" value="swiming" /> 游泳 </p> <p> <label>照片：</label> <input type="file" name="person_pic"> </p> <p> <label>个人描述：</label> <textarea name="about"></textarea> </p> <p> <label>籍贯：</label> <select name="site"> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> <option value="3">深圳</option> </select> </p> <p> <input type="submit" name="" value="提交"> <input type="reset" name="" value="重置"> </p></form>outline 设置input框获得焦点时，是否显示凸显的框线，一般设置为没有,比如：outline:none;placeholder 设置input输入框的默认提示文字。表格标签表格元素及相关样式
表格标签<table> 定义表格 border 边框大小 cellpadding 单元格边距 cellspacing 单元格间距 bgcolor 设置表格背景颜色，可也用于单元格 background 设置表格背景,可也用于单元格 frame 设置表格样式 box above below hsides vsides <caption> 定义表格标题<th> 定义表格的表头 colspan 跨列属性 rowspan 跨行属性<tr> 定义表格的行<td>定义表格单元<thead>定义表格的页眉<tbody>定义表格的主体<tfoot>定义表格的页脚<col> 定义用于表格列的属性<colgroup> 定义表格列的组设置表格样式border-collapse 设置表格的边线合并，如：border-collapse:collapse;表格示例<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> td,th { border-bottom: 1px dashed #0181CC; text-align: center; } </style> </head> <body> <table border="0" cellspacing="1px" cellpadding="5px" bgcolor="#C4E3F3" align="center"> <!--表格标题 --> <caption>table test</caption> <!--题头 --> <thead> <tr> <!--表格表头 --> <th>id</th> <!--单元格跨2列--> <th colspan="2">name</th> <th>age</th> </tr> </thead> <!--正文 --> <tbody> <tr> <!--表格行数据--> <td>1</td> <td colspan="2">Tom</td> <td>18</td> </tr> <tr> <td>2</td> <td colspan="2">Jack</td> <td>21</td> </tr> </tbody> <!--脚注 --> <tfoot> <tr> <td> </td> <td colspan="2">Sum</td> <td>$180</td> </tr> </tfoot> </table> </body></html>附加说明： 当然没有必要全都用到，但是必须记住的是如果有thead或tfoot,就必须要tbody。 加了tbody后准确来说并不影响下载速度，而是呈现速度。 浏览器对Table的解释是等待整个table全部加载完才显示。如果加入tbody，浏览器则一边下载一边显示已经下载的内容。 |
|
收藏
淘帖
踩
