HTML基础参考教程（文本——表单）

1：文本标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

注意：文本标题标2签自带加粗，有自己的文本大小，并且独占一行，有默认间距

2：段落文本

<p>段落文本内容</p>

3：换行（br）

<br/>换行是一个空标记

4：水平线    <hr/>   空标记

5：加粗有两个标记（推荐strong）

< b >加粗内容</ b >   只是显示加粗
< strong >强调的内容</ strong >   突出的文本

6:倾斜有两个标记（推荐em）

< em >强调文本</ em >
< i >倾斜文本</ i >

7:删除线有两个标记（推荐del）

< s >文本</ s >删除线
< del >文本</ del >删除线

8：扩展

< u >文本</ u >下划线
< sub ></ sub >下标
< sup ></ sup >上标

9：HTML的基本语法

        1:<常规标记>也叫双标记<标记></标记>
                <标记属性=“属性值”属性=“属性值”></标记>标记也可叫标签或叫元素
                        例如:< head ></ head 
        2:空标记也叫单标记<标记/
                <标记属性=“属性值”/>例如:< br />

10:下划线的一些属性

< hr  color =＂ red ”  width ="300px”  "  align ＂                  " right ＂>
         color ==颜色    width ==宽         align ==对其方式    noshade ==取消阴影

11:特殊符号

<p>&#128516</p>（最后的一个数字可以随意换）在网页翻译出来就是一个个搞笑的表情。 

---

12：①div标签，没有具体含义，用来划分页面的区域，独占一行。（块元素）

②span标签，没有实际意义，主要应用在对于文本独立修饰的时候内容有多宽就占用多宽的空间距离。（行内元素）

13：列表

        ①有序列表

<ol type=”A” start=”4”>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>（type类型   start开始）

注：li里面可以随意方标签，但是ol里面只能放置li

        数字是自动生成的

        Tyep：1，a,A,i,I（只能是这几个）

         Start:取值只能是一个数字

②无序列表

<ul>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>

注：ul里面只能放li，li里面可以放其他的标签

       默认的是黑色的实心圆

   Type：有disc circle square none(什么都没有显示，用的稍微多一些)

③自定义列表

<dl>
    <dt>可以是文字也可以是图片</dt>
    <dd>相关文字</dd>
</dl>

（注意：如果是多张图片的话也得需要复制多次，不能全放里面）

14：绝对路径和相对路径

①绝对路径：是指文件在硬盘上真正存在的路径。例如"bg.jpg"”这个图片 是存放在硬盘的
E:/book/网页布局代码\第2章”目录下，那么"bg.jpg"这个图片的绝对路径就是“E:/book/网页布/代码/第2章/bg.jpg"。

②相对路径：就是相对于自己的目标文件位置。(网页中的照片网址等等)

③<img   src=“ 图片路径”        title= “鼠标悬停上去之后的提示信息”       alt=“图片不显示之后(加载失败)的提示信息“      width="200px”      " height="200px"/>

在我们平常改变图像大小的时候，只需要改变宽或者高其中之一，就代表的是等比例缩放

如果在同级插入的时候就直接输入图片的全名，或者在全名之前加上“./”即可；

如果在同级的文件里面的话，那么就先写该文件的名称再加上“/”即可

返回上一级符号就是“../”，这个符号就直接是返回上一级的意思

15：超链接标签（实现不同页面的跳转）

<a  href=”路径”   title=”鼠标悬停上去之后的提示信息”   target=”规定在何处打开文档”>内容</a>

        Target属性：规定在何处打开文档

        A：target=”_self”默认值，即在当天网页直接打开

        B：target=”_blank”在新的窗口打开

16：数据表格

创建表格的一个快捷方法：table>tr*3>td*3回车即可

<table>
       <tr>
           <td></td>
      </tr>
</table>

①表格属性：宽度（width）     高度(height)       边框（border）     边框颜色（style="border-color: 颜色"）   背景颜色（bgcolor）    水平对齐（align=“left，right，center”）单元格与单元格之间的距离（cellspacing）单元格与内容之间的空隙（cellpadding）

注：（width  height ） 只有px和百分号（相对于父元素）

②行tr列td属性：高度（height行列）    宽度（width列）     背景颜色（bgcolor）                               文字水平对齐（align=“left，right，center”）  文字垂直对齐（valign=“top，moddle，bottom”）

如果一个单元格设置宽度，那么影响的是这一列的宽度

如果一个单元格设置高度，那么影响的是这一行的高度

单元格的合并

（假如要合并左右两个单元格，那么就需要跨列的进行选择，因此在这样的情况下选用colspan=“2”；

若要合并上下两个单元格那么就要跨行的去选择，因此在这样的情况下rowspan=“2”即可。）

这个只能用在双标签<td></td>里面。

17：表单

（其作用主要就是收集用户信息）

<form action="">
    Username: <input type="text" name="user"><br>
    Password: <input type="password" name="password">
</form>

A :属性 type 定义输入框的类型
      文本框type="text＂ 密码框type=" password “
      提交框 type =＂ submit ”和<button>提交按钮</ button >一样

      按钮框 type =" button ＂单纯的按钮
      重置框 type =＂ reset ”清空的效果

 B:属性placeholder描述输入字段预期值的简短的提示信息。兼容到IE8以上 

C：属性 name 必须设置,否则在提交表单时,用户在其中输入的数据不会被发送给服务器

D .属性 value 

（对于不同类型的 input 元素，value 属性的用法也不同：

        对于 "button", "reset", "submit" 类型 - 定义按钮上的文本

        对于 "text", "password", "hidden" 类型 - 定义输入字段的初始（默认）值

        对于 "checkbox", "radio", "image" 类型 - 定义与 input 元素相关的值。该值会发送到表单的         action URL。

        注释：value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的。

        注释：value 属性不适用于 <input type="file">。）

补充一个知识点：

Form当中method的post和get的区别? 

①get是从服务器上获得数据，post是向服务器传送数据
②get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段——对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL 地址。用户看不到这个过程。
③对于get方式,服务器端用Request.QueryString获取变量的值，对于post方式， 服务器端用Request.Form获取提交的数据。

④get传送的数据量较小，不能大于2KB。post传送的数据量较大，-般被默认为不受限制。但理论上，IIS4 (InternetInformation Service 互联网信息服务)中最大量为80KB，II5中为100KB
⑤get安全性非常低，post安全性较高。 但是执行效率却比Post方法好。

希望我们大家一起可以加油。