HTML基本标签、表单相关标签

HTML基本标签

标题标签及水平线：

标题标签

<h1></h1>~<h6></h6>标签在HTML页面中创建标题，标题默认加粗，换行。

水平线

---

在 HTML 页面中创建一条水平分隔线，用于定义内容中的主题变化。

• size属性：水平线的高度，单位像素
• noshade属性：没有阴影，取值：noshade，表示显示纯色

<!--水平线-->
<hr />
<hr  size="5"/>
<hr noshade="noshade" />

字体标签 用于设置字体尺寸、字体颜色等。

• size属性：设置字体的大小。可能的值：从 1 到 7 的数字。浏览器默认值是 3。
• color属性：设置字体的颜色
  • 颜色的取值：#xxxxxx 或 colorname
  • #xxxxxx 表示使用红绿蓝三原色设置颜色。
    • 红绿蓝分别取值：00 – FF，此处使用16进制。（FF就是十进制的255）
    • #000000 表示黑色，#FFFFFF白色
    • #FF0000红色，#00FF00绿色，#0000FF蓝色
    • 红绿蓝2位取值相同可以省略成1位。例如：#112233 简化成#123
  • colorname 使用英文单词确定颜色。red 红色，blue 蓝色，green绿色

<!--字体-->
<font size="7">我个大</font>
<font color="#FF0000">我很红</font>
<font color="blue">我是蓝色的</font>

格式化标签

<!-- 格式化-->
<b>粗体</b>
<i>斜体</i>

段落标签

<!-- 段落标签 -->
<p>
噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。<br/> 
问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！

剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！
</p>

图片标签 在html页面中引用一张图片

• src ：指定需要显示图片的URL（路径）。
• alt ：图片无法显示时的替代文本。
• width ：设置图像的宽度。
• height ：定义图像的高度。

<!--显示图片“registImg.jpg”-->
<img src="#"  alt="蜀道之难" width="200px" height="200px" title="鼠标移上显示"/>
<img src="#" alt="难于上青天" width="200px" height="200px" title="鼠标移上显示"/>

列表标签

ol有序列表。

- type 列表类型，取值：A、a 、I 、i 、1 等

ul无序列表。

- type 符号的类型，取值：disc 实心圆、square 方块 、circle 空心圆

li列表项。

是有序列表 或无序列表 的子标签

<!--列表标签-->
<ul type="circle"> 	<!--以“空心圆”显示无序列表-->
    <li>无序</li>
    <li>无序</li>
    <li>无序</li>
</ul>
<ol type="I">		<!--以大写阿拉伯数字显示序号-->
    <li>有序</li>
    <li>有序</li>
    <li>有序</li>
</ol>

超链接标签

是在html页面提供一种可以访问其他位置的实现方式。

• href：用于确定需要显示页面的路径（URL）
  • target：确定以何种方式打开href所设置的页面。常用取值：blank、self 等
  • _blank 在新窗口中打开href确定的页面。
  • _self 默认。使用href确定的页面替换当前页面。

<!--超链接-->
<a href="http://www.baidu.com" target="_self">
    访问“百度”官网，以默认方式打开
</a><br />
<a href="http://www.taobao.com" target="_blank">
    访问“淘宝”官网，以新窗口方式打开
</a><br />

表格标签

HTML表格由table标签以及一个或多个tr、th或td标签组成。

• table 是父标签，相当于整个表格的容器。
  • border 表格边框的宽度。
  • width 表格的宽度。
  • cellpadding 单元边沿与其内容之间的空白。
  • cellspacing 单元格之间的空白。
  • bgcolor 表格的背景颜色。
• tr标签用于定义行
• td标签用于定义表格的单元格（一个列）
  • colspan 单元格可横跨的列数。
  • rowspan 单元格可横跨的行数。
  • align 单元格内容的水平对齐方式, 取值：left 左 、right 右、center 居中。
  • nowrap 单元格中的内容是否折行。
• th标签用于定义表头。单元格内的内容默认居中、加粗。

编写3*3表格，使用修饰表头

<!--3*3表格,设置宽度和边线，并显示1像素的边线-->
<table border="1"  width="400px" cellpadding="0" cellspacing="0">
    <tr>
        <th>1标题</th>
        <th>2标题</th>
        <th>3标题</th>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

编写3*3表格，将第一行全部合并

<!--3*3表格,将第一行全部合并-->
<table border="1"  width="400px" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="3" bgcolor="#ddd">a</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

编写3*3表格,将第一列全部合并

<!--3*3表格,将第一列全部合并-->
<table border="1"  width="400px" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="3" bgcolor="#ddd">1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

表单相关标签

form>表单标签，在html页面创建一个表单，表单标签在浏览器上没有任何显示。如果数据需要提交到服务器，负责搜集数据的标签必须存放在表单标签体内容。

- action属性：请求路径，确定表单提交到服务器的地址（路径）

- method属性：请求方式。常用的取值：GET、POST

- GET：默认值

- 提交的数据追加在请求路径上。例如：/1.html?username=jack&password=1234，数据格式k/v，追加是使用?连接，之后每一对数据使用&连接

- 因为请求路径长度有限，所有GET请求提交的数据有限。 - 敏感数据会在地址栏显示,不适合做密码等数据提交

- POST： - 提交的数据不再请求路径上追加（及不显示在地址栏上）

- 提交的数据大小不显示 ``` ```

输入域标签

input 标签用于获得用户输入信息，type属性值不同，搜集方式不同。最常用的标签。

• type属性
  • text：文本框，单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符
  • password：密码框，密码字段。该字段中的字符以黑圆显示。
  • radio：单选框，表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的
  • submit：提交按钮。提交按钮会把表单数据发送到服务器。一般不写name属性，否则将“提交”两个字提交到服务器。
    因为不同项目注册需要的字段不同，需要完成的案例中没有覆盖所有的表单元素，以下标签使用也需要大家掌握。
  • checkbox： 复选框
  • image: 按钮上的图片
  • file：文件上传组件,提供"浏览"按下可以选择需要上传文件.
  • hidden：隐藏字段. 数据会发送给服务器，但浏览器不进行显示。
  • reset：重置按钮。将表单恢复到默认值。
  • button：普通按钮，常用于与JavaScript结合使用。
• name：元素名，如果需要表单数据提交到服务器，必须提供name属性值，服务器通过属性值获得提交的数据。
• value属性：设置input标签的默认值。submit和reset为按钮显示数据
• checked属性：单选框或复选框被选中。
• readonly：是否只读
• disabled：是否可用

下拉列表标签

select>下拉列表。可以进行单选或多选。需要使用子标签指定列表项

• name属性：发送给服务器的名称
• multiple属性：不写默认单选，取值为“multiple”表示多选。
• size属性：多选时，可见选项的数目。
• 子标签：下拉列表中的一个选项（一个条目）。 - selected ：勾选当前列表项 - value ：发送给服务器的选项值。

文本域标签

textarea文本域。多行的文本输入控件。

• cols属性：文本域的列数
• rows属性：文本域的行数