一个菜的不能再菜的菜鸟第一次写网页

作为一个名副其实的菜鸟，第一次写网页，紧张、茫然、兴奋。做出一个小东西就兴奋的嗷嗷叫！
一行行代码敲下去，成果跃然屏幕上，那种兴奋感和成就感让人回味十足。
好的习惯必定事半功倍

1、标签多数都是成对的，所以在写出开头的同时，一定要把小尾巴给补上。
否则一小块代码有可能就让你就揪掉你为数不多的几根头发。（别问我怎么知道，我会告诉你是亲测？）
2、有包含关系的代码，被包的代码都得缩进。不缩进，一会儿你就找不到谁是谁的爸爸，而这个“<div></div>”的儿子又在哪里。
3、在页面布局的时候最好把最主要的几个块先摆出来，给他们都选上不同的背景颜色。这样做的好处是：对于菜鸟，想象能力差，代码逻辑不清晰，
所以在调试的时候，我关注不同颜色的变化就很容易知道自己在修改哪一个地方。

【那些必不可少的标签】

（1）<link rel="icon" href="填上你想要插入图片的相对地址"/>：这个<link/>标签有很多种用法，我这里rel的值是“icon”，
所以就是大家所看的标题栏前面的小图标的插入方法。![如下的小图标](https://img-blog.csdn.net/20160522203704706)
（2）<title>标题文字</title>:页面总得有个标题吧？
（3）<meta></meta>: 用于给浏览器和搜索引擎看。常见的写法有两种：
    ①<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    ②<meta charset="utf-8" /> （html5中都这样写，别问我为什么）
了解：①http-equiv，用于写给浏览器看，用来描述文档类型和字符编码；
     ②中文编码采用的两种编码格式：gb2312，简体中文的编码格式；utf-8，万国码的编码格式。
      ③<meta name= "keywords" content= "淘宝,网上购物,在线交易,交易市场" />
    <meta name= "description" content= "淘宝网-亚洲最大、最安全的网上交易平台……" />
    name,用于写给搜索引擎看，用来描述搜索关键字和描述；
关键字：name=“keywords”，有多个关键字，在congtent中用逗号分隔；
    网页描述：name=“description”，用于搜索引擎搜索时显示网页摘要；
（4）<base href="new/addr"/>//指定当前文档默认基地址；
<base target=“_blank”/>当前文档所有超链接打开方式。
html的块级标签：显示为“块”状，前后隔一行。（块级标签自带换行，且行间距大）

（5）【基本的块级标签】

<br/> 换行符 
<hr/>水平线 
<h1></h1>~<h6></h6> 第一级标签到第六级标签
<p></p> 段落标签
<blockquote cite="……"></blockquote> 引用标签，cite标注引用来源
<pre></pre> 预格式标签，保留html中原有的格式。（回车、空格也有效）

（6）【基于布局的块级标签】

有序列表：<ol>
          <li>列表项1</li> 
          <li>列表项2</li>
        </ol>
无序列表：<ul>
          <li>列表项1</li> 
          <li>列表项2</li>
        </ul>
定义列表：<dl>
            <dt>标题</dt> 
            <dd>描述1</dd> 
        </dl>
定义描述标签：<figure>
            <img src="img/computer.jpg" alt="漂亮的风景" >
            <figcaption>漂亮的风景</figcaption>
        </figure>
分区标签：<div></div>,用于把页面划分为不同的分区，可以通过CSS设置宽度、高度、边框、背景色各种属性；
注意：①：div-ul(ol)-li:常用于分类导航或菜单等；
    ②：div-dl-dt-dd:常用于图文混编的场合；
    ③：table-tr-td:常用于图文布局或显示数据；

（7）【行级标签】：（按行逐一显示，不会自动换行）

<span></span>:用于包裹字体，修改字体样式；比如：
<span style="color:red; font-size:24px; background-color:#00F;">哈哈哈</span>
<img />:图片标签。src=””导入图片地址；alt=””图片不显示看到的文字；title=“”鼠标指上去看到的文字；
align=“”图片周围的文字相对于图片的位置（上、中、下）
Src里面地址的写法：
    ①    直接写绝对路径，但是不建议。因为上传服务器后，绝对路径会变化；
文件夹的上一层用“../文件夹名字/图片名字”；
    ③   网络链接：直接将网上图片的地址放在src中。（网上图片删除的话，链接也会失效）

<em>em标签，表示强调！浏览器中显示效果为倾斜！</em>
<strong>Strong标签，强调程度比em要高，浏览器中显示为加粗！</strong>
<i>i标签，普通的倾斜，没有强调意思。</i>
<b>b标签，普通的加粗，没有强调作用。</b>
<small>比正常字体小1号，可以嵌套使用，多一个small小1号。当字体为最小字号时，small不起效果！</small>
<big>比正常字体大一号，同上！</b>
<q>表示短的引用，浏览器解释为加引号！</q>
<s>有误文本，浏览器表示为加删除线</s>
<code>代码格式：不具备pre的预格式功能，浏览器解释为等宽字体。</code>
<bdo>定义文字方向，有dir属性，dir="ltr"：从左往右，dir="rtl"：从右往左</bdo>
<kbd>表示键盘输入的文字，浏览器解释为等宽字体。</kbd>
<sup>上标文字</sup>   <sub>下标文字</sub>  <u>下划线</u>
<a></a>:超链接标签，链接文字或链接图片放在两个标签之间；
href=””,放链接的地址；可以是网络链接，
也可以是本地html文件，本地文件相对路径确认方式与img相同。
title=“”放鼠标移上去后显示的文字；
target=“”，放链接打开的位置。_blank,新页面打开；_self,本页面打开（默认）
    ①   页面间跳转：略；
    ②   本页面锚链接：
首先，定义一个锚点：<a name=”top”></a>
然后，设置一个超链接，跳转到锚点：<a href=”#top”>链接</a>
    ③   页面间的锚链接：
首先，在目标页面，定义一个锚点，方式同上；
然后，本页面设置超链接，跳转到锚点：<a href=”目标页.html#top”>链接</a>
    ④   功能性链接：
常见的：mailto:jianghao@jerei.com 发送邮件

<input />:输入框或按钮，自闭合标签，常用元素有：
type=””，类型，可以是文本框、密码框、单选框、复选框、按钮、图片。
name=“”，名字，用于代表你这个input标签。
Value=””,默认值，用于显示在按钮或者文本框上面的默认值。

（8）【表格table】

Table可以在开始标签中直接设置边框各种属性：
    <table width="100%" border="1" bordercolor="#FF0000" style="text-align:center;">
属性解释：
    cellspacing="0"单元格之间的间距为0；
    cellpadding="2"单元格中的内容距边框距离为2；
    Bgcolor:#FFF; 单元格背景颜色，不建议使用，用style=”background-color:#999;”替代。
    Background：背景图，可以用style=”background-image:……;”替代。
    Bordercolor：边框颜色。
    style="border-collapse:collapse;" 合并单元格之间的边框；
    style="text-align:center"表格中所有单元格的文字居中；
    表格跨列：colspan=“3” 表格跨行：rowspan=“2”

【表格的结构化】
    <thead>: thead表示表格头部，无论放在表格任何位置，均为表格最顶部一行。
    <tr>
        <th></th>：thead中，用th代替td，单元格中文字默认居中加粗。
    </tr>
    </thead>
    <tbody></tbody>: 表格的主体部分，即原来正常的tr和td；
    <tfoot></tfoot>: 表格的底部，无论代码放在表格任何位置，均为表格最后一行。
    <caption>表格标题：不论写在表格任何位置，均在表格最上方显示！</caption>
【表格的直列化】
    <colgroup> 可选中某列或者多列，并赋id，与css配合修改一列或多列共同的属性
        <col id="one" span="2"/> 前两列
        <col id="" span="2"/> 后两列
    </colgroup>

（9）【表单form】

    写法：<form action="" method="post"> 许多个input </form>
    action,是表单将要提交的地址；
不安全。所以常用post传参方式。
注意：
    ①input的name表示当前这个input，而value则是这个input当中的值，传参的使用采用“name=value”的形式进行传参，参照上面链接框中的地址。
    ②单选框，radio：凭借name确认是否为一组。
    name相同则为同一组，即本组只能选择其中一个；name不同，则为不同组别。
    单选框 可以设置默认选中其中一个，只需要在<input>中加入checked=“checked”；
而submit才具有提交表单的作用，submit在提交的时候会提交整张form表单，即<form>到</form>
    ④type=“image”,图形提交按钮，也具有提交作用，功能与submit相同；
    ⑤checked="checked"：默认选中；
    hidden="hidden"隐藏；
    disabled="disabled"不能被点击；
    ⑥文本域：<textarea></textraea>
      文本域可以通过style修改样式。overflow:hidden;隐藏滚动条（也会隐藏掉超出的文字）。overflow:scroll;显示滚动条。overflow:auto;
  自动（根据文字的多少，自动确定是否显示滚动条），
 也可以通过overflow-x或者overflow-y只修改x轴或y轴的滚动条样式。
 readonly，可以设置文本域为只读；cols设置列宽，rows设置行高；
 style=”resize:none;”设置文本域的大小不能被改变；
    ⑦<select></select>下拉框,每一个选项就是一个<option></option>
    option中常见的标签属性：
    title:鼠标指上去后，可以看到的文字，一般与option标签中文字相同；
    value:当前option的值，如果写了value，那么传参时传递的是value的值；如果没有写value，那么传参传递的是<option></option>中间的文字；
    selected：默认选中项；
    <optgroup></optgroup> :将option进行分组
    <legend>表单的标题</legend>
    <fieldset></fieldset>:表单外围框线，可以将表单中所有标签包裹起来
    tabindex属性：按下Tab键时，选中的次序。Tabindex=“1”,代表按下tab键时第一个选中的元素。
    <a><input><select><texteara><button>支持tabindex属性。