form 情况 搜索引擎 right 结构化 列表 输入框 图标 cti
html5的标准结构:
- <!DOCTYPE html>
- <html lang=‘en‘>
- <head>
- <meat charset=‘utf-8‘>
- <title>Document</title>
- </head>
- <body>
- </body>
- </html>
meta的其他示例:
关键字:将网页内容提出关键字告诉搜索引擎,利于seo排名,content的内容用”,”隔开。
- <meta name=‘keywords‘ content=‘‘>
网页描述:用于检索出来的网页描述使用。用于seo查看。
- <meta name=‘description‘ content=‘‘>
网页重定向:实现域名跳跃,即可以注册多个域名,然后跳到同一个域名即可。
- <meta http-equiv=‘refresh‘ content=‘5;http://www.baidu.com‘>
链接外部样式表文件:
- <link rel=‘stylesheet‘ href=‘‘>
设置icon图标:
- <link rel=‘icon‘ href=‘‘>
标准结构:
- <table border=‘‘ width=‘‘ height=‘‘ cellspacing=‘‘ cellpadding=‘‘ align=‘‘ bgcolor=‘‘>
- <thead>
- <tr>
- <td>姓名</td>
- <td>年龄</td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>赵灵儿</td>
- <td>18</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td>林月如</td>
- <td>18</td>
- </tr>
- </tfoot>
- </table>
属性:
border:边框粗细。
width:表格宽度。
height:高度。
cellspacing:单元格与单元格的距离
cellpadding:内容距边框的距离
align:left、right、center表格的排列方式,居左,居右,居中。
bgcolor:背景颜色。
属性rowsapn:合并同一列上的单元格。
属性colspan:合并同一行上的单元格。
表格标题:
- <th></th>用法跟<td></td>一样
属性valign=top、middle、bottom。
- <td>
表单域:
- <form action=‘‘ method=‘‘>
action:处理方式,其实就是访问地址。
method:get/post
文本输入框:
- <input type=‘text‘ maxlength=‘‘ readonly=‘readonly‘ disable=‘disable‘ name=‘username‘ value=‘内容‘>
maxlength=”6” 限制输入字符长度
readonly=”readonly” 将输入框设置为只读状态(不能编辑)
disabled=”disabled” 输入框未激活状态
name=”username” 输入框的名称
value=”内容” 将输入框的内容传给处理文件
密码输入框:属性同文本输入框一致。
- <input type=‘password‘ name=‘password‘>
单选框:只有当name相同时,才能实现单选效果。 checked属性为默认选中。
- <input type=‘radio‘ name=‘gender‘ checked=‘checked‘>男
- <input type=‘radio‘ name=‘gender‘ >女
下拉框:
- <select multiple=‘multiple‘>
- <optgroup label=‘北京市‘>
- <option>昌平区</option>
- <option>海淀区</option>
- <option>朝阳区</option>
- <option selected=‘selected‘>大兴区</option>
- </optgroup>
- </select>
Multiple=”multiple” 将下拉列表设置为多选项
Selected=”selected” 设置默认选中项目
对下拉列表进行分组。 Label=”” 分组名称。
- <optgroup></optgroup>
多选框:checked表示默认选中。
- <input type=‘checkbox‘ checked=‘checked‘>多选1
- <input type=‘checkbox‘ >多选2
- <input type=‘checkbox‘ >多选3
多行文本框:
cols:控制输入字符的长度。
rows:控制输入字符的行数。
- <textarea cols=‘130‘ rows=‘10‘></textarea>
文件上传控件:
- <input type=‘file‘>
提交按钮:可以直接实现提交
- <input type=‘submit‘>
普通按钮:没有功能,需要配合js使用
- <input type=‘button‘>
重置按钮:可以重置表单信息
- <input type=‘reset‘>
图片按钮:图片按钮也可以实现信息提交功能。
- <input type=‘image‘ src=‘‘>
给表单实现分组:
对表单信息分组
表单信息分组名称
- <fieldset></fieldset>
- <legend>分组信息<legend>
好的语义化的网站标准就是去掉样式表文件之后,结构依然很清晰。
标签语义化概念:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)
-标签语义化意义:
1:网页结构合理
2:有利于seo:和搜索引擎建立良好沟通,有了良好的结构和语 义你的网页内容自然容易被搜索引擎抓取;
3:方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)
4:便于团队开发和维护
1:尽可能少的使用无语义的标签div和span;
2:在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
3:不要使用纯样式标签,如:b、font、u等,改用CSS设置。
4:需要强调的文本,可以包含在strong或者em标签中strong默认样式是加粗(不要用b),em是斜体(不用i);
HTML基础下
来源: http://www.bubuko.com/infodetail-2411596.html