使用HTML制作网页

第一次写博客，就从最近学习的HTML写起吧，知识是用来分享的，如果哪里写的有什么不对，欢迎指正。

第一章HTML 

1. HTML标签　　

　　　　标题标签   <h1>标题标签</h1>     h1~h6

　　　　段落标签   <p>段落标签</p>

　　　　换行标签   <br />                 自闭合标签

　　　　水平线标签 <hr />                 自闭合标签

　　　　图像标签   <img src=”文件路径” alt=”代替图片文本” width=”x” height=”y” />

　　　　超链接标签 <a href=”跳转的地址” target=”目标窗口位置”>链接文本或图片</a>

　　　　　　  target：_blank(在新窗口打开)  _self(默认，在相同的框架中打开新的链接文件)

　　　　超链接3个应用：

　　　　　　  （1）页面间链接：A页面跳转到B页面

　　　　　　  （2）锚链接：跳转到页面指定元素

　　　　　　　　　　<a href="#box3">点我跳转到box3</a>

　　　　　　　　　　<div id="box3" style="100%;height:400px;border:1px solid black;"></div>

　　　　　　  （3）功能性链接

　　　　　　　　　　mailto：发送邮件                  <a href="mailto:zhangsan@qq.com"></a>

　　　　　　　　　　javascript：执行js代码           <a href="javascript:alert('ok');"></a>

　　　　　　　　　　文件下载                              <a href="Charpter3.rar">下载</a>

　　　　一些特殊符号需转成字符实体

特殊符号	字符实体
空格	 
大于号	>
小于号	<
引号	"
版权符号	©

　　2.HTML列表

　　　　 无序列表

　　　　　　语法：

<ul>

       <li>内容</li>

…….

</ul>

应用： 制作网页导航、新闻列表、图片列表等

 有序列表

　　语法：

<ol>

       <li>内容</li>

…….

</ol>

应用：常用于排版有序的网页内容，如排行榜、步骤说明、服务条款等

列表标签

　　语法

<dl>

       <dt>标题</dt>

       <dd>描述</dd>

       …….

</dl>

应用：一般用于排版纵向带二级导航项的菜单、图片信息、类别导航等

　　3.表格

　　　　标签：table   caption   tr    th     td    thead(表头)   tbody（主体）   tfoot（脚注）

　　　　属性：cellspacing 单元格之间的间距

　　　　　　  cellpadding 单元格内边距

　　　　align：单元格内容的对其方式（属性值 left{默认}  center  right）

　　　　示例：　　　　　　

  <table>

             <thead>

                  <tr>

              <th></th>

              <th></th>

                 </tr>

           </thead>

           <tbody>

               <tr>

                    <td></td>

                    <td></td>

                </tr>

           </tbody>

   </table>

 补充：thead和tbody可以省略。

         　  如果使用table进行布局，一般不使用thead、tbody。

  如果用于呈现数据，建议保留thead和tbody。

rowspan：单元格跨行

colspan：单元格跨列

　　4.表单

　　　　语法：<form action="表单提交的地址" method="提交的方法"</form>

　　　　method属性值包括：get|post　　　　

get提交方式：会将用户填写的数据附加到url地址的后面

post提交方式：不会讲数据附加到url地址后面,上传文件时，必须使用post提交方式。

单行文本框：<input type="text" value=”请输入用户名”  /> 

　　常用属性：type="text"、id、name、style、css、maxlength、value

密码框：<input type="password" size=”10” name=”pass” />

单选按钮<input type="radio" />

　　如果一组选项中包含多个单选按钮，那么通过name可以将单选按钮设置成1组，并且具有排他性

　　　　　　<input type="radio" name="sex" value="male" checked="checked" /><label>男</label>

　  <input type="radio" name="sex" value="female"  /><label>女</label>

　　　　复选框：<input type="checkbox" /> 

　　　　　　 从一组选项中可以选择多个。应该将一组中的复选框的name值写成一个　　　　

<input type="checkbox" name="hobby" value="sports" />运动

<input type="checkbox" name="hobby" value="talk" checked="checked" />聊天

<input type="checkbox" name="hobby" value="play" />玩游戏

　　　　按钮

<input type="submit" value=”提交按钮” name=”btn1”/>

<input type="reset" value=”重置按钮” name=”btn2”/>

<input type="button" value=”普通按钮” name=”btn3”/>

<input type="image" src=”图片路径” name=”btn4”/>

　　　　文件域：<input type="file" />

　　　　　　<input type=”file” name=”myFile”>

　　　　下拉列表

　　　　　　  <select name=”指定列表名字” size=”行数”>

<option value=”可选项的值” selected=”selected”></option>

<option value=”可选项的值” selected=”selected”></option>

</select>

　　　　多行文本框

　　　　　　<textarea name=”news” cols=”30” rows=”6”>初始文本内容</textarea>

　　　　　　　　不能使用value属性来赋初始值

　　　　禁用：添加属性disabled="disabled"

  　　　 只读：添加属性readonly="readonly"

　　5.内嵌框架

　　　　语法：<iframe src="引用页面地址" width="宽度" height="高度" name="框架名" frameborder="框架边框" scrolling="是否出现滚动条"></iframe>