JavaEE学习笔记--HTML(2)

JavaWeb之前端篇

HTML

• 图形标签
  它可以让我们在网页引入一张图片
  < img >
  常用属性:

  1. src 代表的图片的路径
  2. width 图片的宽度
  3. height 图片的高度
  4. border 用于设置图片的边框
  5. alt 如果图片不可以显示时，默认显示的文本信息
  6. align 图片附件文字的对齐方式 可取值有 top bottom left right middle 默认是bottom

• 超链接标签
  < a >标签,可以实现跳转到其它页面操作.
  超链接内容不仅可以是文本，也可以是图片等信息

  常用属性:

  1. href 代表的我们要跳转的路径
  2. name属性 可以让我们在本页面设置一个锚点
     注意: 通过超链接要想跳转到本页面指定的锚点位置，必须在前面加上#号.#号其实代表的就是本页面。
  3. target 这个属性我们现在不介绍，后续讲框架标签在介绍.

• 表格标签
  < table >标签
  代表一个表格
  常用属性:
  border 代表的表格的边框
  width 代表的表格的宽度
  align 代表表格的对齐方式

  < tr >标签
  代表行
  常用属性
  align 当前行的内容对齐方式

  < td >标签
  代表单元格
  常用属性
  colspan 指示列的合并
  rowspan 指示行的合并

  < th >标签
  th标签也是一个单元格标签，与td标签类似。
  Th默认是居中对齐，并且文字加粗显示，它比较适合表头。

  < caption >标签
  给表格添加标题列
  如果使用caption标签，它必须是< table >标签下的第一行.

  我们在开发中，可以使用表格标签来展示信息，并且可以使用表格标签来对页面进行布局展示。在现在的开发中，使用表格来进行布局，应用比较少，现在开发中应用比较多的是使用css+div.

• 表单标签

  表单是什么?
  表单可以让我们将录入信息携带到服务器端。
  简单说，通过表单可以将要提交的数据提交到指定的位置。

<form>
            <table border="1" width="64%" align="center">
                <tr>
                    <td>用户名</td>
                    <td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>
                        密码
                    </td>
                    <td>
                        <input type="password" name="password">
                    </td>   
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女
                    </td>
                </tr>
                <tr>
                    <td>
                        地址
                    </td>
                    <td>
                        <select name="province">
                            <option>--请选择省份--</option>
                            <option>黑龙江</option>
                            <option>吉林</option>
                            <option>辽宁</option>
                         </select>省
                         <select name="city">
                            <option>--请选择城市--</option>
                            <option>xxx</option>
                         </select>市
                     </td>
                </tr>
                <tr>
                    <td>
                        爱好
                    </td>
                    <td>
                        <input type="checkbox" name="hobby">篮球
                        <input type="checkbox" name="hobby">足球
                        <input type="checkbox" name="hobby">排球
                    </td>
                </tr>
                <tr>
                    <td>
                        照片
                    </td>
                    <td>
                        <input type="file" name="photo">
                    </td>
                </tr>
                <tr>
                    <td>
                        介绍
                    </td>
                    <td>
                        <textarea name="remark" rows="8" cols="40"></textarea>
                    </td>
                </tr>   
                <tr>
                    <td colspan="2">
                        <input type="submit" value="注册">
                        <input type="reset" value="取消">
                    </td>
                </tr>           
            </table>
        </form>

注意事项:

1. 所有表单中的元素都要具有名称.
2. 单选框要想可以一次只选择一个，要具有相同的name值，如果要设置默认值，可以通过checked=”checked”来设置。
3. 可以给< textarea >来设置rows cols来控制行数与列数
4. 多选框要想设置默认选中与单选框设置一样，都可以通过checked=”checked”来设置
5. 如果要设置下拉框被选中可以在< option >标签上设置selected=”selected”

问题：关于表单中的标签为什么要添加name属性? 表单怎样提交数据?

< form >标签它的属性:
name属性:代表表单的名称
action:它其实就是代表表单提交的位置
method：代表的是表单提交的方式.常用的提交方式get/post 默认是get

表单提交时，action代表的是表单提交的路径，在表单的所有标签上如果添加了name属性，这时，提交表单信息时，会以 路径?name=value&name=value&name=value;
对于我们的radio,checkbox,option也需要设置它们的value值。

问题:method代表的是表单提交的方式，get/post 它们有什么区别?(笔试题)

1. 如果使用get方式提交，它不安全，会在浏览器上显示提交的请求参数
   如果使用post方式提交,它比较安全，不会在浏览器地址栏上显示请求参数
2. get请求方式，只能提交少量数据，1kb以下。
   post请求是可以提交大数据。

文本框常用属性< input type=”text”>
value:文本框中默认值
size:文本框的长度
maxlength：文本框中最大输入字符个数

密码框常用属性< input type=”password”>
value:文本框中默认值
size:文本框的长度
maxlength：文本框中最大输入字符个数

单选框常用属性< input type=”radio”>
Name:多个单选框要想只选择一个，必须具有相同name值
Value：单选框提交时的值
Checked 设置单选框默认选中

多选框常用属性< input type=”checkbox”>
Name:代表多选框的名称
Value：单选框提交时的值
Checked 设置单选框默认选中
下拉框< select>< option>
Name 下拉框名称
Size 显示时的行数
Multiple 是否一次可以选择多个 (按信shift键选择)
< option>可以有一个属性value,它代表的是提交到服务器时的值.

文本域 < textarea>
rows 设置行数
cols 设置列数
如果要想在文本域中显示默认值，我们需要在< textarea>标签中间去设置按钮 < input type=”button”>
这就是一个无功能的按钮，它会与我们在后面学习的javascript结合使用
通过value属性来设置我们的按钮上的文字

隐藏文本框< input type=”hidden”>
隐藏文本框它在页面上是看不到的，但是它可以携带值，在后面的修改操作时会使用到。
具有submit功能的图片。
< input type=”submit”> 它是一个可以让表单提交的按钮。
< input type=”image” src=”图片路径”>这个就是一个具有提交功能的图片。

• 框架标签

  通过html中框架标签可以html页面布局。

  注意：当我们在html页面上去描述框架信息时，不可以将< frameset>写在< body>标签中。

  关于在框架中指定位置显示我们的指定页面显示。需要使用到< a >标签的target属性
  通过测试，< a >标签的target属性值可以是< frame >框架的name值，代表链接所指向的文件是在我们指定的框架位置上显示。

<frameset rows="100,*,100">
    <frame name="logo" src="logo.html">

    <frameset cols="80,*">
        <frame name="menu" src="menu.html">
        <frame name="content" src="welcome.html">
    </frameset>

    <frame name="reg" src="reg.html">
</frameset>

• HTML其它标签与特殊字符

  < meta>标签
  < meta>标签必须写在< head>标签之间.

  1. 它可以对页面进行描述及热词设置，可以方便搜索引擎查找页面。
  2. 通过meta标签设置http响应信息
  3. 通过meta标签可以设置页面的编码
     < meta http-equiv=”Content-Type” content=”text/html; charset=gbk”>

  4. 通过meta标签来设置页面加载后在指定的时间后跳转到指定的页面
     < meta http-equiv=”refresh” content=”5; url=h ttp://www.baidu.com”>

     注意:在html中如果跳转的internet上的网站资源，那么我们在书写路径时，一定要写带协议的路径。< a>标签也可以实现跳转，如果也想要跳转到internet上的资源，那么也需要带协议。< a href=”h ttp://www.baidu.com”>baidu.com

  < link>标签.

  后面我们会使用link标签来导入css。
  注意:link标签也必须写在< head>标签中。

  特殊字符

&lt <
&gt >
&amp &
&quot ”
&nbsp 不断行的空白
&emsp 全方大的空白
&ensp 半方大的空白
&trade 商标
&copy 版权
&reg 已注册