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

作为一个名副其实的菜鸟，第一次写网页，紧张、茫然、兴奋。做出一个小东西就兴奋的嗷嗷叫！一行行代码敲下去，成果跃然屏幕上，那种兴奋感和成就感让人回味十足。好的习惯必定事半功倍1、标签多数都是成对的，所以在写出开头的同时，一定要把小尾巴给补上。否则一小块代码有可能就让你就揪掉你为数不多的几根头发。（别问我怎么知道，我会告诉你是亲测？）2、有包含关系的代码，被包的代码都得缩进。不缩进，一会儿你就找不到谁是谁的爸爸，而这个“<div></div>”的儿子又在哪里。3、在页面布局的时候最好把最主要的几个块先摆出来，给他们都选上不同的背景颜色。这样做的好处是：对于菜鸟，想象能力差，代码逻辑不清晰，所以在调试的时候，我关注不同颜色的变化就很容易知道自己在修改哪一个地方。

【那些必不可少的标签】

（1）<link rel="icon" href="填上你想要插入图片的相对地址"/>：这个<link/>标签有很多种用法，我这里rel的值是“icon”，所以就是大家所看的标题栏前面的小图标的插入方法。![如下的小图标](http://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:[e-mail] 发送邮件<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属性。