Html基础(二)

1.html5结构快捷键

• !+tab

2.常用编码类型

• Ascll
• Ansi
• Unicode
• Gbk
• Gb2312
• Big5
• Utf-8 通用字符集

3.meat

关键字设置

• 告诉搜索引擎当前网页的关键词, 在SEO中非常重要, 能够提高搜索命中率, 让别人更容易找到你

<meta name="keywords" content="足球赛事,篮球赛事,网球赛事...">

网页描述

• 告诉搜索引擎当前网页的主要内容, 在SEO中非常重要, 当别人在搜索引擎中搜索到你的网站时会自动作为对你网站的描述信息展示给用户, 能够提高搜索命中率, 让别人更容易找到你

<meta name="description" content="专业的体育赛事网站">

网页重定向

• 告诉浏览器多久自动刷新一次页面并指向新页面, 常用于新老域名交替时, 访问老域名自动跳转到新域名, 或用语一些需要定时刷新的聊天室等.

<meta http-equiv="refresh" content="5"; http://www.baidu.com>

网页作者

<meta name="author" content="WuXian"

Robots

• 告诉搜索引擎当前网页的作用, 写给网络爬虫看的内容

<meta name="robots" content="all|none|index|follow|noindex|nofollow" />
index: 告诉搜索引擎允许抓取当前页面
noindex:告诉搜索引擎不允许抓取当前页面
follow: 告诉搜索引擎可以从当前页面上找到链接，然后 继续访问抓取下去
nofollow:告诉搜索引擎不允许从当前页面上找到链接, 拒 绝其继续访问
all: 告诉搜索引擎允许抓取当前页面, 并且允许从此页找到链接继续访问
none: 告诉搜索引擎不允许抓取这个页面,并且不允许从此页找到链接、拒绝其继续访问

• 常见组合

<META NAME="ROBOTS" CONTENT="INDEX,FOLLOW">：可以抓取本页，而且可以顺着本页继续索引别的链接
有可以写成<META NAME="ROBOTS" CONTENT="ALL">

<META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW">：不许抓取本页，但是可以顺着本页抓取索引别的链接

<META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW">：可以抓取本页，但是不许顺着本页抓取索引别的链接

<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">：不许抓取本页，也不许顺着本页抓取索引别的链接。

注意事项:
不要把两个对立的反义词写到一起，例如
例如<META NAME="ROBOTS" CONTENT="INDEX,NOINDEX">

4.链接外部样式表

<link ref="stylesheet" href="1.css">

5.设置icon图标

<link ref="icon" href="1.ico">

7.表格

<table>  表格
<tr>  行
<td></td>  列
<td></td>
<td></td>
</tr>
</table>

• 属性
  • Border=”1” 边框
  • Width=”500” 宽度
  • Height=”300” 高
  • cellspacing=”2” 单元格与单元格的距离
  • cellpadding=”2” 内容距边框的距离
  • align=”left | right | center”
  • 如果直接给表格用align=”center” 表格居中
  • 如果给tr或者td使用 ，tr或者td内容居中。
  • bgcolor=”red” 背景颜色。
• 表格标准结构

<table>
     <thead>
            <tr>
            <td></td>
            <td></td>
            </tr>
     </thead>
     <tbody>
            <tr>
            <td></td>
            <td></td>
            </tr>
     </tbody>
     <tfoot>
            <tr>
            <td></td>
            <td></td>
            </tr>
     </tfoot>
</table>

• 表头和单元格合并
  • 表头 <caption></caption>
    colspan=”2” 合并同一行上的单元格
    rowspan=”2” 合并同一列上的单元格

     <table boder="1" width="500" height="300" align="left">
     <caption>表头</caption>
           <tr>
                   <td clospan="2"></td>
                   <td rowspan ="2"></td>
           </tr>
            <tr>
                   <td >66</td>
                   <td >88</td>
           </tr>
           <tr>
                   <td >99</td>
                   <td >00</td>
           </tr>
     </table>
    

• 表格标题,边框颜色,内容垂直对齐
  • 表格标题 <th></th>用法和td一样
    标题的文字自动加粗水平居中对齐

    <tr>
                   <th >99</th>
                   <th >00</th>
                   <th >22</th>
    </tr>
    

  • 边框颜色,内容垂直对齐

    bordercolor="red"
    <td valign="bottom">哈哈</td>
    Valign=”top   |  middle   |  bottom”
    

8.表单

• 表单域

<form action=1.php method="get">
属性：action:处理信息
Method=”get | post”   
Get通过地址栏提供（传输）信息，安全性差。
Post 通过1.php来处理信息，安全性高。

• 文本输入框

用户名:<input type="text" maxlength="6" readonly="readonly" disabled="disabled" name="username" value="大前端">
maxlength="6"    限制输入字符长度
readonly=”readonly”  将输入框设置为只读状态（不能编辑）
disabled="disabled"  输入框未激活状态
name="username"   输入框的名称
value="大前端"     将输入框的内容传给处理文件

• 密码输入框

密码:<input type="password" name="pwd">
注意:文本输入框的所有属性对密码输入框都有效。

• 单选框

<input type="radio" name="gender" cherked="cherked">男
★只有将name的值设置相同的时候，才能实现单选效果。
★checked=”checked” 设置默认选择项。

• 下拉表单

<select>
<option>下拉列表选项</option>
<option>下拉列表选项</option>
</select>

多选项
<select multiple="multiple">
<option>河北</option>
<option>山西</option>
<option selected="selected">山东</option>
</select>
属性：
Multiple=”multiple”  将下拉列表设置为多选项
Selected=”selected”  设置默认选中项目

分组
<optgroup label="北京市">
<option>朝阳区</option>
<option>昌平区</option>
<option>海定区</option>
</optgroup>

<optgroup></optgroup>   对下拉列表进行分组。
Label=””  分组名称。

• 多选框

<input type="checkbox" checked="checked" >喝酒
<input type="checkbox" checked="checked" >抽烟
<input type="checkbox" checked="checked" >烫头
Checked=”checked” 设置默认选中项

• 多行文本框

<textarea cols="130" rows="10"></textarea>
Cols  控制输入字符的长度。
Rows  控制输入的行数

*文件上传控件

<input type="file">

*文件提交按钮

<input type="submit">
★：可以实现信息提交功能

• 普通按钮

<input type="button" value="普通按钮">
★不能提交信息，配合JS使用。

• 图片按钮

<input type="image" value="按钮.jpg">
★图片按钮可实现信息提交功能

• 重置按钮

<input type="reset">
★将信息重置到默认状态

• 表单信息分组

<form action="1.php" method="post">
<fieldset>
<legend>分组信息</legend>
</fieldset>
</form>
<fieldset></fieldset>    对表单信息分组
<legend></legend>      表单信息分组名称

• html5补充表单控件

<input type="url">网址控件
<input type="date">日期控件
<input type="time">时间控件
<input type="email">邮件控件
<input type="number" step="5">数字控件
<input type="range">滑块控件

参考:传智播客视屏
http://www.jianshu.com/p/83de569e2499