Legendary

李洋的学习笔记


body

<h1><code>&lt;body&gt;</code>内的标签</h1> <hr /> <h2><code>&lt;br /&gt;</code>:换行</h2> <pre><code>123&lt;br /&gt;456</code></pre> <hr /> <h2><code>&lt;p&gt;</code>:段落</h2> <pre><code>&lt;p&gt;对酒当歌人生几何&lt;/p&gt;</code></pre> <table> <thead> <tr> <th style="text-align: center;">属性</th> <th style="text-align: center;">说明</th> <th style="text-align: left;">值</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">align</td> <td style="text-align: center;">对齐方式</td> <td style="text-align: left;">left,center,right</td> </tr> </tbody> </table> <hr /> <h2><code>&lt;hx&gt;</code>:标题(1-6)</h2> <pre><code>&lt;h1&gt;对酒当歌人生几何&lt;/h1&gt; &lt;h2&gt;对酒当歌人生几何&lt;/h2&gt; &lt;h3&gt;对酒当歌人生几何&lt;/h3&gt; &lt;h4&gt;对酒当歌人生几何&lt;/h4&gt; &lt;h5&gt;对酒当歌人生几何&lt;/h5&gt; &lt;h6&gt;对酒当歌人生几何&lt;/h6&gt;</code></pre> <hr /> <h2><code>&lt;hr /&gt;</code>:水平线</h2> <pre><code>&lt;hr /&gt;</code></pre> <table> <thead> <tr> <th style="text-align: center;">属性</th> <th style="text-align: center;">说明</th> <th style="text-align: left;">值</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">size</td> <td style="text-align: center;">线的粗细</td> <td style="text-align: left;">px</td> </tr> <tr> <td style="text-align: center;">width</td> <td style="text-align: center;">线的长度</td> <td style="text-align: left;">px、%</td> </tr> </tbody> </table> <hr /> <h2>文本格式</h2> <pre><code>&lt;b&gt;粗体&lt;/b&gt; &lt;i&gt;斜体&lt;/i&gt; &lt;s&gt;删除&lt;/s&gt; &lt;u&gt;下划线&lt;/u&gt; &lt;sup&gt;上标&lt;/sup&gt; &lt;sub&gt;下表&lt;/sub&gt;</code></pre> <h2><code>&lt;pre&gt;</code>:与格式文本</h2> <pre><code>&lt;pre&gt;标签可以保留文字在源代码中的格式,使得页面中显示的内容和源代码中的格式一致&lt;/pre&gt;</code></pre> <hr /> <h2><code>&lt;font&gt;</code>:字体</h2> <pre><code>&lt;font&gt;对酒当歌人生几何&lt;/font&gt;</code></pre> <table> <thead> <tr> <th style="text-align: center;">属性</th> <th style="text-align: center;">说明</th> <th style="text-align: left;">值</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">size</td> <td style="text-align: center;">字体大小</td> <td style="text-align: left;">px、em...</td> </tr> <tr> <td style="text-align: center;">color</td> <td style="text-align: center;">字体颜色</td> <td style="text-align: left;">#、rgb、word</td> </tr> </tbody> </table> <hr /> <h2><code>&lt;a&gt;</code>:链接</h2> <pre><code>&lt;a href="url"&gt;《短歌行》&lt;/a&gt; &lt;a href="#top"&gt;锚点&lt;/a&gt; &lt;a href="mailto:邮箱地址"&gt;发邮件&lt;/a&gt; &lt;a href="tel:电话号码"&gt;打电话&lt;/a&gt; &lt;a href="sms:手机号码"&gt;发短信&lt;/a&gt;</code></pre> <table> <thead> <tr> <th style="text-align: center;">属性</th> <th style="text-align: center;">说明</th> <th style="text-align: left;">值</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">href</td> <td style="text-align: center;">跳转的地址</td> <td style="text-align: left;">url、#id(锚点)、通讯</td> </tr> <tr> <td style="text-align: center;">title</td> <td style="text-align: center;">鼠标移入显示的文本</td> <td style="text-align: left;">str</td> </tr> <tr> <td style="text-align: center;">target</td> <td style="text-align: center;">打开链接的方式</td> <td style="text-align: left;">_blank(新标签)、_self(当前页)、_top</td> </tr> </tbody> </table> <hr /> <h2><code>&lt;img /&gt;</code>:图像、图像热区</h2> <pre><code>&lt;img src="url" usemap="#mapName"/&gt; &lt;map name="mapName"&gt; &lt;area shape="形状" coords="坐标值" href="url"/&gt; &lt;/map&gt;</code></pre> <table> <thead> <tr> <th style="text-align: center;">属性</th> <th style="text-align: center;">说明</th> <th style="text-align: left;">值</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">src</td> <td style="text-align: center;">图像的url</td> <td style="text-align: left;">url</td> </tr> <tr> <td style="text-align: center;">alt</td> <td style="text-align: center;">图像不存在时的替代文字</td> <td style="text-align: left;">str</td> </tr> <tr> <td style="text-align: center;">width</td> <td style="text-align: center;">图像宽度</td> <td style="text-align: left;">num</td> </tr> <tr> <td style="text-align: center;">height</td> <td style="text-align: center;">图像高度</td> <td style="text-align: left;">num</td> </tr> <tr> <td style="text-align: center;">图像热区</td> <td style="text-align: center;"></td> <td style="text-align: left;"></td> </tr> <tr> <td style="text-align: center;">shape</td> <td style="text-align: center;">形状</td> <td style="text-align: left;">rect、circle、poly</td> </tr> <tr> <td style="text-align: center;">coords</td> <td style="text-align: center;">坐标值</td> <td style="text-align: left;">(x1,x2,x3...)</td> </tr> </tbody> </table> <hr /> <h2><code>&lt;ul&gt;</code>:无序列表</h2> <pre><code>&lt;ul&gt; &lt;li&gt;......&lt;/li&gt; &lt;li&gt;......&lt;/li&gt; &lt;li&gt;......&lt;/li&gt; &lt;/ul&gt;</code></pre> <table> <thead> <tr> <th style="text-align: center;">属性</th> <th style="text-align: center;">说明</th> <th style="text-align: left;">值</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">type</td> <td style="text-align: center;">用来设置项目前面的标记</td> <td style="text-align: left;">disc、Circle、square</td> </tr> </tbody> </table> <h2><code>&lt;ol&gt;</code>:有序列表</h2> <pre><code>&lt;ol&gt; &lt;li&gt;......&lt;/li&gt; &lt;li&gt;......&lt;/li&gt; &lt;li&gt;......&lt;/li&gt; &lt;/ol&gt;</code></pre> <table> <thead> <tr> <th style="text-align: center;">属性</th> <th style="text-align: center;">说明</th> <th style="text-align: left;">值</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">type</td> <td style="text-align: center;">用来设置项目前面的标记</td> <td style="text-align: left;">1、 a 、 A、i、I</td> </tr> <tr> <td style="text-align: center;">start</td> <td style="text-align: center;">序列起始值</td> <td style="text-align: left;">数值</td> </tr> </tbody> </table> <h2><code>&lt;dl&gt;</code>:定义列表</h2> <pre><code>&lt;dl&gt; &lt;dt&gt;HTML&lt;/dt&gt; &lt;dd&gt;html 是超文本标记语言&lt;/dd&gt; &lt;dt&gt;XHTML&lt;/dt&gt; &lt;dd&gt;可扩展超文本置标语言 &lt;/dd&gt; &lt;dd&gt;表现形式与超文本置标语言(HTML)类似,不过语法上更加严格 &lt;/dd&gt; &lt;/dl&gt;</code></pre> <h2><code>&lt;table&gt;</code>:表格</h2> <pre><code>&lt;table border="1"&gt; &lt;tr&gt; &lt;th&gt;theader, cell 1&lt;/th&gt; &lt;th&gt;theader, cell 2&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;row 1, cell 1&lt;/td&gt; &lt;td&gt;row 1, cell 2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;row 2, cell 1&lt;/td&gt; &lt;td&gt;row 2, cell 2&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</code></pre> <table> <thead> <tr> <th style="text-align: center;">属性</th> <th style="text-align: center;">说明</th> <th style="text-align: left;">值</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">width</td> <td style="text-align: center;">指定表格的宽度</td> <td style="text-align: left;">px,%</td> </tr> <tr> <td style="text-align: center;">height</td> <td style="text-align: center;">指定表格的高度</td> <td style="text-align: left;">px,%</td> </tr> <tr> <td style="text-align: center;">border</td> <td style="text-align: center;">指定表格边框的宽度</td> <td style="text-align: left;">px,%</td> </tr> <tr> <td style="text-align: center;">cellpadding</td> <td style="text-align: center;">指定边框与内容之间的空白</td> <td style="text-align: left;">px</td> </tr> <tr> <td style="text-align: center;">cellspacing</td> <td style="text-align: center;">指定单元格之间的空白</td> <td style="text-align: left;">px</td> </tr> <tr> <td style="text-align: center;">align</td> <td style="text-align: center;">指定对齐方式</td> <td style="text-align: left;">left,center,right</td> </tr> <tr> <td style="text-align: center;">valign</td> <td style="text-align: center;">垂直排列方式</td> <td style="text-align: left;">top,middle,bottom</td> </tr> <tr> <td style="text-align: center;">colspan</td> <td style="text-align: center;">合并列</td> <td style="text-align: left;">列数</td> </tr> <tr> <td style="text-align: center;">rowspan</td> <td style="text-align: center;">合并行</td> <td style="text-align: left;">行数</td> </tr> </tbody> </table> <h2><code>&lt;form&gt;</code>:表单</h2> <pre><code>&lt;form name="form1" action="URL" method="get"&gt; 用户名:&lt;input type="text" name="uname" /&gt; 密 码:&lt;input type="password" name="passwd" /&gt; &lt;/form&gt;</code></pre> <table> <thead> <tr> <th style="text-align: center;">属性</th> <th style="text-align: center;">说明</th> <th style="text-align: left;">值</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">action</td> <td style="text-align: center;">表单提交地址</td> <td style="text-align: left;">url</td> </tr> <tr> <td style="text-align: center;">method</td> <td style="text-align: center;">表单数据提交的方式</td> <td style="text-align: left;">get ,post</td> </tr> <tr> <td style="text-align: center;">action</td> <td style="text-align: center;">表单提交地址</td> <td style="text-align: left;">url</td> </tr> <tr> <td style="text-align: center;">autocomplete</td> <td style="text-align: center;">提示历史填写项</td> <td style="text-align: left;">-</td> </tr> <tr> <td style="text-align: center;">novalidate</td> <td style="text-align: center;">不验证表单</td> <td style="text-align: left;">-</td> </tr> </tbody> </table> <h2><code>&lt;input /&gt;</code>:输入框</h2> <pre><code>&lt;input type="button" value="普通按钮" /&gt; &lt;input type="checkbox" value="复选框" /&gt; &lt;input type="color" value="拾色器" /&gt; &lt;input type="date" value="" /&gt; &lt;input type="datetime" value="" /&gt; 不支持 &lt;input type="datetime-local" name="user_date" value="2016/05/05 10:41" /&gt; &lt;input type="month" value="" /&gt;选择月份 &lt;input type="week" value="" /&gt;选择周 &lt;input type="time" value="" /&gt;选择时间 &lt;input type="email" value="" /&gt;Email &lt;input type="file" value="" /&gt;文件类型 &lt;input type="hidden" value="" /&gt;隐藏域 &lt;input type="image" value="" /&gt;选择图片 &lt;input type="number" value="" /&gt;数字键盘 &lt;input type="password" value="" /&gt;输入密码 &lt;input type="radio" value="" /&gt;单选按钮 &lt;input type="range" min="0" max="10" step="1" /&gt;选择范围 &lt;input type="reset" value="重置" /&gt;表单重置按钮 &lt;input type="search" value="" /&gt;用于搜索 &lt;input type="submit" value="提交" /&gt; 提交按钮 &lt;input type="tel" value="" /&gt;电话号码字段 &lt;input type="text" value="" /&gt;输入框 &lt;input type="url" value="http://baidu.com" /&gt;输入连接</code></pre> <table> <thead> <tr> <th style="text-align: center;">属性</th> <th style="text-align: center;">说明</th> <th style="text-align: left;">值</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">type</td> <td style="text-align: center;">input类型</td> <td style="text-align: left;">text、number、password等</td> </tr> <tr> <td style="text-align: center;">name</td> <td style="text-align: center;">input名称</td> <td style="text-align: left;">string</td> </tr> <tr> <td style="text-align: center;">value</td> <td style="text-align: center;">input值</td> <td style="text-align: left;">string</td> </tr> <tr> <td style="text-align: center;">multiple</td> <td style="text-align: center;">可接受多个值的文件上传字段(file)</td> <td style="text-align: left;">-</td> </tr> <tr> <td style="text-align: center;">readonly</td> <td style="text-align: center;">只读</td> <td style="text-align: left;">-</td> </tr> <tr> <td style="text-align: center;">disabled</td> <td style="text-align: center;">禁用</td> <td style="text-align: left;">-</td> </tr> <tr> <td style="text-align: center;">required</td> <td style="text-align: center;">必填</td> <td style="text-align: left;">-</td> </tr> <tr> <td style="text-align: center;">maxlength</td> <td style="text-align: center;">输入字符的最大长度(text、password)</td> <td style="text-align: left;">number</td> </tr> <tr> <td style="text-align: center;">autocomplete</td> <td style="text-align: center;">提示历史填写项</td> <td style="text-align: left;">-</td> </tr> <tr> <td style="text-align: center;">autofocus</td> <td style="text-align: center;">页面加载时自动获得焦点</td> <td style="text-align: left;">-</td> </tr> <tr> <td style="text-align: center;">form</td> <td style="text-align: center;">属于指定form的input(此input可不在form内)</td> <td style="text-align: left;">formName</td> </tr> <tr> <td style="text-align: center;">pattern</td> <td style="text-align: center;">验证</td> <td style="text-align: left;">reg</td> </tr> <tr> <td style="text-align: center;">placeholder</td> <td style="text-align: center;">占位</td> <td style="text-align: left;">string</td> </tr> <tr> <td style="text-align: center;">min, max, step</td> <td style="text-align: center;">最小值,最大值,如果 step=&quot;3&quot;,则合法数字应该是 -3、0、3、6,以此类推(number)</td> <td style="text-align: left;">number</td> </tr> </tbody> </table> <h2><code>&lt;textarea&gt;</code>:多行文本框</h2> <pre><code>&lt;textarea name="content" rows="5" cols="50"&gt; &lt;/textarea&gt;</code></pre> <table> <thead> <tr> <th style="text-align: center;">属性</th> <th style="text-align: center;">说明</th> <th style="text-align: left;">值</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">rows</td> <td style="text-align: center;">行</td> <td style="text-align: left;">number</td> </tr> <tr> <td style="text-align: center;">cols</td> <td style="text-align: center;">列</td> <td style="text-align: left;">number</td> </tr> <tr> <td style="text-align: center;">name</td> <td style="text-align: center;">名称</td> <td style="text-align: left;">str</td> </tr> </tbody> </table> <h2><code>&lt;select&gt;</code>:下拉列表框</h2> <pre><code>&lt;select name="city"&gt; &lt;option value="0"&gt;请选择&lt;/option&gt; &lt;option value="bj"&gt;北京&lt;/option&gt; &lt;option value="gz"&gt;广州&lt;/option&gt; &lt;/select&gt;</code></pre> <table> <thead> <tr> <th style="text-align: center;">属性</th> <th style="text-align: center;">说明</th> <th style="text-align: left;">值</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">name</td> <td style="text-align: center;">名称</td> <td style="text-align: left;">str</td> </tr> <tr> <td style="text-align: center;">size</td> <td style="text-align: center;">下拉列表框的显示行数</td> <td style="text-align: left;">number</td> </tr> <tr> <td style="text-align: center;">multiple</td> <td style="text-align: center;">是否多选</td> <td style="text-align: left;">-</td> </tr> <tr> <td style="text-align: center;">disabled</td> <td style="text-align: center;">是否禁用</td> <td style="text-align: left;">-</td> </tr> <tr> <td style="text-align: center;">selected</td> <td style="text-align: center;">设置默认选中的选项</td> <td style="text-align: left;">-</td> </tr> <tr> <td style="text-align: center;">value</td> <td style="text-align: center;">选项的值</td> <td style="text-align: left;">str、number</td> </tr> </tbody> </table>

页面列表

ITEM_HTML