1. 1. html的简单回顾
    1. 1.1. meta
    2. 1.2. 常用标签复习
      1. 1.2.1. 标题标签
      2. 1.2.2. 段落标签
      3. 1.2.3. 锚点链接 a 超链接
      4. 1.2.4. img图片
      5. 1.2.5. 列表
      6. 1.2.6. 表格
      7. 1.2.7. 表单

经过漫长的假期，大概已经消耗了我年前积攒的大部分功力，为了确保自己不再重回小白，简单梳理一下知识很重要！！！

html的简单回顾

1.首先我们先创建一个名为demo.html的html文档

2.声明文档解析的格式

3.基本的结构

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>html文档</title>
    </head>
    <body>
        <!--title里为标题，必不可少，body内为显示可视内容，这段文字为注释-->
    </body>
</html>

还好，基本格式没忘。。。

在head里面有（title script link style meta base）几个标签

meta

meta除了解析编码格式还有以下应用：

<meta name="Keywords" content="我去,哈哈"/>

这行代码的意思是声明此网站中关键词，便于被搜索，关键词之间用，隔开。

<meta name="Description" content="我们网站杠杠的"/>

这行代码是对网站的基本描述，为一段通顺的话，一般不超过150个字符。

<meta name="author" content="Sunday"/>

这行代码是网页作者的信息。 

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

这行代码是在网页打开后三秒重新加载后面链接的地址网页。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

这行代码是打开此html文档是优先用IE的edge版本或谷歌最新版浏览器，最大限度地解决兼容性问题。

<meta name="renderer" content="webkit|ie-comp|ie-stand"/>

这行代码是针对国内双核浏览器来说，打开html文档是优先用webkit内核浏览器，最大限度地解决兼容性问题。

meta还有一些手机端的用法就不再介绍了

常用标签复习

标题标签

H1~H6

标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。是双标签，并且依据重要性递减。h1是最高的等级。字体也是依序变小。有默认的margin。

段落标签

  • p，双标签，段落标签，有默认margin。

  • q，双标签，短文本引用 比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么标签是你所需要的。

  • blockquote 长文本引用

  • address 为页面加入地址信息

    上海市松江区丽德创业园
    样式为斜体

  • code 在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用code标签了 var i = 0;

  • pre 预格式化的文本 要插入多行代码时不能使用code标签，如果是多行代码，可以使用pre标签，如

    var i=0;
    function haha(){
        console.log(i)    
    }
    haha()
  • em strong

两者在强调的语气上有区别:em 表示强调，strong 表示更强烈的强调

锚点链接 a 超链接

  • href属性后面加上锚点链接地址，若值为#，点击有回到顶部的效果。

  • title属性，值为提示内容，当鼠标悬浮在锚点链接上时，弹出提示

  • target，新窗口的打开方式。打开一个新的窗口or在原来网页窗口跳转

img图片

  • src 图像的路径位置

  • title 提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)

  • alt 指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

    <img src="http://img3.imgtn.bdimg.com/it/u=1860375833,3108624146&fm=21&gp=0.jpg" title="红心海贼团" alt="红心海贼团"/>

    红心海贼团

列表

列表都是组合标签，使用一定要严格符合规范。

  • 无序列表 ul li

    <ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

  • 有序列表 ol li

    <ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

  • 自定义列表 dl dt dd

    <dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
</dl>

表格

  • table tbody这个标签基本上不怎么用了

  • tr 表格的一行

  • th 表格的头部的一个单元格，表格表头

  • td 表格的一个单元格

<table>
    <tbody>
        <tr>
            <th></th>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

  • caption 表格标题

    <caption>学生成绩</caption>

  • summary属性 表格的摘要 

    <table summary="学生成绩的排列"></table>

表单

  • from

  • action属性 输入的数据被传送到的地址,比如一个PHP页面(test.php)。

  • method属性 数据传送的方式（get/post）

    <from action="data.php" method="post"></from>

  • input 输入框 text password

  • 当type=”text”时，输入框为文本输入框

    <input type="text" value="登录框" name="username"/>

  • 当type=”password”时, 输入框为密码输入框 

    <input type="password" value="密码框" name="password"/>

  • name 为文本框命名，以备后台程序ASP 、PHP使用

  • value 为文本输入框设置默认值。(一般起到提示作用)

  • 单选框 复选框 radio checkbox

    <input type="radio"/>

    男

    <input type="checkbox"/>

    香蕉

  • 当type=”radio”时，控件为单选框

  • 当type=”checkbox”时，控件为复选框

  • value 提交数据到服务器的值（后台程序PHP使用）

  • name 为控件命名，以备后台程序ASP、PHP使用

  • checked 当设置checked 或 checked=”checked”时，该选项被默认选中

  • 注意：同一组的单选按钮，name取值一定要一致，这样同一组的单选按钮才可以起到单选的作用

  • submit reset hidden button…

  • label 为 input 元素定义标注（标记）

  • label元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

  • 标签的 for 属性应当与相关元素的 id 属性相同

  •

  • for属性可把 label 绑定到另外一个元素。请把 “for” 属性的值设置为相关元素的 id 属性的值

  • textarea 文本域,禁止文本域扩大：resize:none;

  • cols属性 ：多行输入域的列数

  • rows ：多行输入域的行数

  • select 下拉列表框

  • multiple属性 可以实现多选功能

  • option 下拉选项